diff --git a/contact.html b/contact.html
index 639958d..7d80ce8 100644
--- a/contact.html
+++ b/contact.html
@@ -9,46 +9,32 @@
 </head>
 
 <body>
-    <header class="header" id="header">
-        <div class="logo">
-            <p>TrendTrove</p>
-            <i class="fa-solid fa-bars menu" id="menu"></i>
-        </div>
-
-        <nav class="navigation">
-            <ul class="nav-links">
-                <li class="nav-link">
-                    <a href="index.html">Home</a>
-                </li>
-                <li class="nav-link">
-                    <a href="#">About</a>
-                </li>
-                <li class="nav-link">
-                    <a href="#">Features</a>
-                </li>
-                <li class="nav-link">
-                    <a href="#">Products</a>
-                </li>
-                <li class="nav-link">
-                    <a href="contact.html">Contact Us</a>
-                </li>
-            </ul>
-        </nav>
-
-        <nav class="utils">
-            <ul class="nav-links">
-                <li class="nav-link">
-                    <i class="fa-solid fa-cart-shopping"></i>
-                </li>
-                <li class="nav-link">
-                    <i class="fa-solid fa-user"></i>
-                </li>
-                <li class="nav-link">
-                    <i class="fa-solid fa-magnifying-glass"></i>
-                </li>
-            </ul>
-        </nav>
-    </header>
+    <header>
+        
+        <nav class="navbar">
+            <div class="container">
+              <div class="brand-name">
+                <a href="index.html">TrendTrove</a>
+              </div>
+              
+              <div class="search-bar">
+                <input type="text" placeholder="Search...">
+              </div>
+          
+              <ul class="nav-items">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Features</a></li>
+                <li><a href="#">Products</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
+                <li><a href="#"><i class="fas fa-user"></i></a></li>
+              </ul>
+            </div>
+          </nav>
+        
+          <header>
+          
 
     <section class="contact-section">
         <h2 class="section-title">Contact Us</h2>
diff --git a/index.html b/index.html
index 533e83e..e5ee596 100644
--- a/index.html
+++ b/index.html
@@ -11,46 +11,38 @@
 <body>
 
     <!-- header section  -->
-    <header class="header" id="header">
-        <div class="logo">
-            <p>TrendTrove</p>
-            <i class="fa-solid fa-bars menu" id="menu"></i>
+    <header>
+    
+    <!--logo-->
+    <nav class="navbar">
+        <div class="container">
+          <div class="brand-name">
+            <a href="index.html">TrendTrove</a>
+          </div>
+
+    <!--search bar-->
+          <div class="search-bar">
+            <input type="text" placeholder="Search...">
+            <span class="search-icon">
+              <i class="fas fa-search"></i> 
+            </span>
+          </div>
+    
+    <!--Navbar items-->
+          <ul class="nav-items">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Features</a></li>
+            <li><a href="#">Products</a></li>
+            <li><a href="contact.html">Contact</a></li>
+            <li><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
+            <li><a href="#"><i class="fas fa-user"></i></a></li>
+          </ul>
         </div>
+      </nav>
+    
+      <header>
 
-        <nav class="navigation">
-            <ul class="nav-links">
-                <li class="nav-link border">
-                    <a href="index.html">Home</a>
-                </li>
-                <li class="nav-link border">
-                    <a href="#">About</a>
-                </li>
-                <li class="nav-link border">
-                    <a href="#">Features</a>
-                </li>
-                <li class="nav-link border" style="margin-left: 12px;">
-                    <a href="#">Products</a>
-                </li>
-                <li class="nav-link border" style="margin-left: 15px;">
-                    <a href="contact.html">Contact Us</a>
-                </li>
-            </ul>
-        </nav>
-
-        <nav class="utils">
-            <ul class="nav-links">
-                <li class="nav-link">
-                    <i class="fa-solid fa-cart-shopping"></i>
-                </li>
-                <li class="nav-link">
-                    <i class="fa-solid fa-user"></i>
-                </li>
-                <li class="nav-link">
-                    <i class="fa-solid fa-magnifying-glass"></i>
-                </li>
-            </ul>
-        </nav>
-    </header>
 
     <!-- banner area  -->
     <section class="banner">
diff --git a/style.css b/style.css
index 9fdad33..845e147 100644
--- a/style.css
+++ b/style.css
@@ -14,28 +14,87 @@
 
 /* header css  */
 
-.header
-{
-   height: 70px;
-   width: 100%;
-   /* background-color: red; */
-   padding: 0px 2%;
-   display: flex;
-   justify-content: space-between;
-   
-}
-
-.logo 
-{
-    width: 12%;
-    height: 70px;
-    /* background-color: yellow; */
     display: flex;
     justify-content: center;
+  }
+  
+  .search-bar input {
+    width: 90%;
+    padding: 7px 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+  }
+  
+  /* Navbar items css */
+
+  .nav-items {
+    list-style-type: none;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+  
+  .nav-items li {
+    margin-left: 10px;
+  }
+  
+  .nav-items a {
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    padding: 7px 10px;
+    position: relative;
+    display: flex;
     align-items: center;
-    font-family: 'futura';
-    font-weight: bold;
-    font-size: 25px;
+  }
+  
+  .nav-items a:hover {
+    color: white;
+  }
+  
+  .nav-items a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background-color: gray;
+    bottom: 0;
+    left: 0;
+    transition: width 0.3s ease-in-out;
+  }
+  
+  .nav-items a:hover::after {
+    width: 100%;
+  }
+  
+  .nav-items i {
+    font-size: 18px;
+  }
+  
+  /* Responsive behaviour css */
+  
+  @media (max-width: 768px) {
+    .container {
+      flex-direction: column;
+    }
+  
+    .search-bar {
+      margin: 10px 0;
+    }
+  
+    .nav-items {
+      flex-direction: column;
+      align-items: center;
+    }
+  
+    .nav-items li {
+      margin: 10px 0;
+ /* Basic Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 .border{
     font-size: 0.85rem;
@@ -46,30 +105,7 @@
     font-weight: 500;
 }
 
-.navigation
-{
-    width: 30%;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 15px;
-    /* background-color: blue; */
-}
 
-.nav-links
-{
-    width: 150%;
-    height: 70px;
-    /* background-color: yellow; */
-    display: flex;
-    list-style-type: none;
-    align-items: center;
-    justify-content: space-evenly;
-    white-space: nowrap;
-    font-family: 'futura';
-    font-size: 17px;
-    color: #1d1d1d;
 }
 .nav-links> .nav-link{
     width: 150px;
@@ -77,34 +113,119 @@
     justify-content: center;
 }
 
-.nav-links > .nav-link > a 
-{
-    color: #1d1d1d;
-    text-decoration: none;
-    font-size: 20px;
-    font-weight: 500;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    width: 85px;
+
 }
 
-.nav-links > .nav-link > i 
-{
-    font-size: 20px;
+/* Brand Name */
+.brand-name a {
+  color: white;
+  text-decoration: none;
+  font-size: 24px;
+  font-weight: bold;
 }
 
+/* Search Bar Styling */
+.search-bar {
+  position: relative;
+  flex-grow: 4; /* Allow search bar to grow */
+  display: flex;
+  justify-content: center;
+}
 
+.search-bar input {
+  width: 50%;
+  padding: 8px 40px 8px 15px; /* Extra padding for the icon */
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+}
 
-.utils 
-{
-    width: 8%;
-    height: 70px;
-    margin-right: 45px;
-    /* background-color: purple; */
+.search-bar .search-icon {
+  position: absolute;
+  right: 26%; /* Adjust to position the icon inside the input */
+  top: 50%;
+  transform: translateY(-50%);
+  color: #555;
 }
 
+/* Hover Underline Effect */
+.nav-items a:hover::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: gray;
+  bottom: 0;
+  left: 0;
+  transition: width 0.3s ease-in-out;
+}
 
+.nav-items a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  background-color: gray;
+  bottom: 0;
+  left: 0;
+  transition: width 0.3s ease-in-out;
+}
+
+/* Icons */
+.nav-items i {
+  font-size: 18px;
+  color: white;
+}
+
+/* Mobile Menu Toggle Button */
+.mobile-menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    align-items: flex-start; /* Align items to the left */
+  }
+
+  .search-bar {
+    margin: 10px 0;
+    width: 100%; /* Full width for search bar */
+  }
+
+  .nav-items {
+    flex-direction: column;
+    width: 100%; /* Full width for mobile */
+    display: none; /* Hide by default */
+    background-color: #333; /* Background for dropdown */
+    position: absolute; /* Position absolute for dropdown */
+    top: 100%; /* Below the navbar */
+    left: 0;
+    z-index: 1000; /* Ensure it is above other content */
+  }
+
+  .nav-items.active {
+    display: flex; /* Show when active */
+  }
+
+  .nav-items li {
+    margin: 10px 0; /* Spacing for vertical layout */
+    text-align: center; /* Center align items */
+  }
+
+  .mobile-menu-toggle {
+    display: block; /* Show toggle button */
+  }
+}
+   }
+  }
+ 
 /* banner css  */
 
 .banner 
