diff --git a/customers.html b/customers.html
new file mode 100644
index 0000000..8d5cd3b
--- /dev/null
+++ b/customers.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+        }
+
+        header {
+            background-color: #007bff;
+            color: #fff;
+            padding: 20px;
+            text-align: center;
+        }
+
+        main {
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .testimonial {
+            background-color: #fff;
+            border-radius: 5px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .testimonial p {
+            font-size: 16px;
+            color: #333;
+        }
+
+        .testimonial .author {
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .testimonial .company {
+            font-style: italic;
+            color: #666;
+        }
+
+        .separator {
+            border-top: 1px solid #ddd;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Customer</h1>
+        <p>This page provides information about our company's customers, testimonials, case studies, or success stories.</p>
+    </header>
+
+    <main>
+        <div class="testimonial">
+            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, justo a lacinia malesuada."</p>
+            <p class="author">John Doe</p>
+            <p class="company">ABC Company</p>
+        </div>
+
+        <div class="testimonial">
+            <p>"Nullam ac felis vel lorem blandit vestibulum. Fusce dapibus, neque vitae euismod consequat."</p>
+            <p class="author">Jane Smith</p>
+            <p class="company">XYZ Corporation</p>
+        </div>
+
+        <!-- Add more testimonials or case studies here -->
+
+        <div class="separator"></div>
+
+        <h2>Case Studies</h2>
+        <p>Here are some case studies highlighting successful projects or partnerships:</p>
+        <ul>
+            <li>Case Study 1</li>
+            <li>Case Study 2</li>
+            <!-- Add more case studies here -->
+        </ul>
+    </main>
+</body>
+</html>
diff --git a/index.html b/index.html
index 570922e..9b3d584 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
     </div>
 
     <!-- nav bar -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <nav class="navbar navbar-expand-lg navbar-light bg-">
         <div class="container-fluid">
         <!--<div class="container main-nav flex">-->
             <a href="#" class="company-logo">
@@ -29,11 +29,11 @@
             </a>
             <div class="nav-links" id="nav-links">
                 <ul class="flex">
-                    <li><a href="#" class="hover-link">Products</a></li>
-                    <li><a href="#" class="hover-link">Customer</a></li>
-                    <li><a href="#" class="hover-link">Pricing</a></li>
-                    <li><a href="#" class="hover-link">Resources</a></li>
-                    <li><a href="signin.html" class="hover-link secondary-button">Sign in</a></li>
+                    <li><a href="products.html" class="hover-link">Products</a></li>
+                    <li><a href="customers.html" class="hover-link">Customer</a></li>
+                    <li><a href="pricing.html" class="hover-link">Pricing</a></li>
+                    <li><a href="resources.html" class="hover-link">Resources</a></li>
+                    <li><a href="signin.html" class="hover-link primary-button">Sign in</a></li>
                     <li><a href="signup.html" class="hover-link primary-button">Sign up</a></li>
                     <img src="moon.png" id="icon">
                 </ul>
diff --git a/pricing.html b/pricing.html
new file mode 100644
index 0000000..eb26078
--- /dev/null
+++ b/pricing.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pricing</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+        }
+
+        header {
+            background-color: #007bff;
+            color: #fff;
+            padding: 20px;
+            text-align: center;
+        }
+
+        main {
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .pricing-table {
+            border-collapse: collapse;
+            width: 100%;
+        }
+
+        .pricing-table th, .pricing-table td {
+            padding: 10px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .pricing-table th {
+            background-color: #007bff;
+            color: #fff;
+        }
+
+        .cta-button {
+            display: inline-block;
+            background-color: #007bff;
+            color: #fff;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+
+        .cta-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Pricing</h1>
+        <p>This page outlines the pricing plans or packages offered by our company. You can find details about different tiers, features included in each plan, and pricing information.</p>
+    </header>
+
+    <main>
+        <table class="pricing-table">
+            <thead>
+                <tr>
+                    <th>Plan</th>
+                    <th>Features</th>
+                    <th>Price</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Basic</td>
+                    <td>Feature 1, Feature 2</td>
+                    <td>$XX.XX/month</td>
+                    <td><a href="#" class="cta-button">Sign Up</a></td>
+                </tr>
+                <tr>
+                    <td>Standard</td>
+                    <td>Feature 1, Feature 2, Feature 3</td>
+                    <td>$XX.XX/month</td>
+                    <td><a href="#" class="cta-button">Sign Up</a></td>
+                </tr>
+                <tr>
+                    <td>Premium</td>
+                    <td>Feature 1, Feature 2, Feature 3, Feature 4</td>
+                    <td>$XX.XX/month</td>
+                    <td><a href="#" class="cta-button">Sign Up</a></td>
+                </tr>
+            </tbody>
+        </table>
+    </main>
+</body>
+</html>
diff --git a/products.html b/products.html
new file mode 100644
index 0000000..ca94c96
--- /dev/null
+++ b/products.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Products</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        header {
+            background-color: #f0f0f0;
+            padding: 20px;
+            text-align: center;
+        }
+
+        main {
+            padding: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .product {
+            width: 300px;
+            margin: 20px;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .product img {
+            width: 100%;
+            border-radius: 5px;
+        }
+
+        .product h2 {
+            margin-top: 10px;
+        }
+
+        .product p {
+            margin-top: 10px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .button {
+            display: block;
+            width: 100%;
+            text-align: center;
+            background-color: #007bff;
+            color: #fff;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            margin-top: 15px;
+        }
+
+        .button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Products</h1>
+        <p>This page showcases the various products or services offered by our company. You can find details about each product, such as features, pricing, and customer reviews.</p>
+    </header>
+
+    <main>
+        <section class="product">
+            <img src="product1.jpg" alt="Product 1">
+            <h2>Product 1</h2>
+            <p>Description of Product 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            <p>Price: $XX.XX</p>
+            <a href="#" class="button">Learn More</a>
+        </section>
+
+        <section class="product">
+            <img src="product2.jpg" alt="Product 2">
+            <h2>Product 2</h2>
+            <p>Description of Product 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            <p>Price: $XX.XX</p>
+            <a href="#" class="button">Learn More</a>
+        </section>
+
+        <!-- Add more sections for additional products -->
+
+    </main>
+</body>
+</html>
diff --git a/resources.html b/resources.html
new file mode 100644
index 0000000..f7ba896
--- /dev/null
+++ b/resources.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resources</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+        }
+
+        header {
+            background-color: #007bff;
+            color: #fff;
+            padding: 20px;
+            text-align: center;
+        }
+
+        main {
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .resource-category {
+            margin-bottom: 20px;
+        }
+
+        .resource-category h2 {
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 10px;
+        }
+
+        .resource-list {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .resource-list li {
+            margin-bottom: 10px;
+        }
+
+        .resource-list li a {
+            text-decoration: none;
+            color: #333;
+            display: block;
+            padding: 10px;
+            background-color: #fff;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+
+        .resource-list li a:hover {
+            background-color: #f0f0f0;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Resources</h1>
+        <p>This page serves as a hub for resources related to our industry, such as blog posts, whitepapers, ebooks, webinars, or guides.</p>
+    </header>
+
+    <main>
+        <div class="resource-category">
+            <h2>Blog Posts</h2>
+            <ul class="resource-list">
+                <li><a href="#">Blog Post 1</a></li>
+                <li><a href="#">Blog Post 2</a></li>
+                <!-- Add more blog posts here -->
+            </ul>
+        </div>
+
+        <div class="resource-category">
+            <h2>Whitepapers</h2>
+            <ul class="resource-list">
+                <li><a href="#">Whitepaper 1</a></li>
+                <li><a href="#">Whitepaper 2</a></li>
+                <!-- Add more whitepapers here -->
+            </ul>
+        </div>
+
+        <div class="resource-category">
+            <h2>Webinars</h2>
+            <ul class="resource-list">
+                <li><a href="#">Webinar 1</a></li>
+                <li><a href="#">Webinar 2</a></li>
+                <!-- Add more webinars here -->
+            </ul>
+        </div>
+
+        <!-- Add more resource categories as needed -->
+
+    </main>
+</body>
+</html>
diff --git a/style.css b/style.css
index 59d4a91..e31e79d 100644
--- a/style.css
+++ b/style.css
@@ -161,7 +161,7 @@ nav {
     padding: 10px 0;
     margin-left: 50px;
 
-    background-color: #ccc
+    background-color: #1f1d1d
 }
 
 .company-logo img {
