diff --git a/assets/css/blog-post.css b/assets/css/blog-post.css
index 82beaa03..7e54e7dd 100644
--- a/assets/css/blog-post.css
+++ b/assets/css/blog-post.css
@@ -20,121 +20,222 @@ body {
   min-height: 100vh;
   padding: 20px 0;
 }
-
-body.dark-theme .header {
-  background-color: rgba(0, 0, 0, 0.792);
-}
-
-body.dark-theme .navbar-links a{
-  color: white;
-}
-
 body.dark-theme{
   background-color: #1a202c;
 }
 
-.header{
-  background-color: whitesmoke;
-  padding: 10px 0;
-  margin-bottom: 20px;
-  border-radius: 0 0 10px 10px;
-  z-index: 1000;
-  position: fixed;
-  top:0;
-  left:0;
-  width: 100%;
-  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+.header {
+        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
+        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
+        backdrop-filter: blur(10px) !important;
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        z-index: 1000 !important;
+        padding: 20px 0px;
+      }
+      
+      .header .container-fluid {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  flex-wrap: nowrap !important;
+  max-width: 100% !important;
+  margin: 0 auto !important;
+  padding: 0 20px !important;
 }
-
 .navbar {
-  display: flex;
-  flex-direction: row !important;
-  justify-content: space-between;
-  width: 1200px;
-  margin: auto;
-  padding: 0 20px;
-  align-items: center;
-}
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.navbar-nav {
+  display: flex !important;
+  align-items: center !important;
+  flex-wrap: nowrap !important;
+  gap: 15px !important;
+  margin-left: auto !important;
+  list-style: none !important;
+}
+
+.navbar-brand {
+  display: flex !important;
+  align-items: center !important;
+  margin-right: 20px !important;
+}
+
+.nav-item,
+.nav-link,
+.theme-toggle-btn,
+.btn-vehigo {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+      
+      .navbar {
+        width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+      
+      .navbar-nav {
+        display: flex !important;
+        align-items: center !important;
+        gap: 10px !important;
+        margin-left: auto !important;
+        list-style-type: none;
+      }
+      
+      .navbar-nav .nav-item {
+        margin: 0 5px !important;
+        text-decoration: none;
+        
+      }
+      
+      .navbar-brand {
+        margin-right: auto !important;
+      }
+      
+      .dark-theme .header {
+        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
+        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
+      }
+
+      /* Add top margin to body content for fixed header */
+      body {
+        padding-top: 80px !important;
+      }
+      
+      .navbar-brand img {
+        height: 40px !important;
+        transition: transform 0.3s ease !important;
+      }
+      
+      .navbar-brand:hover img {
+        transform: scale(1.05) !important;
+      }
+
+      /* Dark mode logo visibility */
+      .dark-theme .navbar-brand img {
+        filter: brightness(0) invert(1);
+        opacity: 1;
+        transition: opacity 0.3s ease;
+      }
+
+      .dark-theme .navbar-brand:hover img {
+        opacity: 0.8;
+      }
+
+      .dark-theme .footer-brand img {
+        filter: brightness(0) invert(1);
+        opacity: 1;
+        transition: opacity 0.3s ease;
+      }
+
+      .dark-theme .footer-brand:hover img {
+        opacity: 0.8;
+      }
+      
+      
+      .nav-link {
+        color: #374151 !important;
+        font-weight: 500 !important;
+        padding: 10px 15px !important;
+        border-radius: 8px !important;
+        transition: all 0.3s ease !important;
+        position: relative !important;
+         text-decoration: none;
+      }
+      
+      .nav-link:hover {
+        color: #2563eb !important;
+       
+        transform: translateY(-1px) !important;
+      }
+      
+      .dark-theme .nav-link {
+        color: #e5e7eb !important;
+      }
+      
+      .dark-theme .nav-link:hover {
+        color: #60a5fa !important;
+       
+      }
+      
+      /* Theme Toggle Button */
+      .theme-toggle-btn {
+       background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+      border: none !important;
+      border-radius: 25px !important;
+      margin-right: 5px;
+      padding: 13px 25px !important; /* Increased size */
+  font-size: 1rem !important; 
+      color: white !important;
+      transition: all 0.3s ease !important;
+      box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
+      }
+      
+      .theme-toggle-btn:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
+      }
+      
+      
+      
+      .dark-theme .theme-toggle-btn{
+         background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important
+      }
+      .dark-theme .theme-toggle-btn:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
+      }
+      
+
+      /* Login Button */
+      .btn-vehigo {
+      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+      border: none !important;
+      border-radius: 25px !important;
+      margin-right: 5px;
+      padding: 10px 20px !important;
+      font-weight: 600 !important;
+      color: white !important;
+      transition: all 0.3s ease !important;
+      box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
+      text-decoration: none;
+    }
+
+    .btn-vehigo:hover {
+      transform: translateY(-2px) !important;
+      box-shadow: 0 4px 15px rgba(37, 100, 235, 0.4) !important;
+      background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
+    }
+      /* Mobile Menu */
+      .navbar-toggler {
+        border: none !important;
+        padding: 8px !important;
+        border-radius: 8px !important;
+        background: rgba(0,0,0,0.05) !important;
+      }
+      
+      .dark-theme .navbar-toggler {
+        background: rgba(255,255,255,0.1) !important;
+      }
+      
+      .navbar-toggler:focus {
+        box-shadow: 0 0 0 0.2rem rgba(37, 100, 235, 0.25) !important;
+      }
+      
+      
 
-.navbar-links{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-}
-
-.navbar-links ul{
-  list-style: none;
-  padding: 0 10px;
-  display: flex;
-  gap: 10px;
-}
-
-.navbar-links a{
-  text-decoration: none;
-  color: black;
-  font-weight: 500;
-}
-
-.navbar-links a:hover{
-  color: #4299e1;
-  transition: all 0.3s ease;
-}
-
-.theme-toggle-btn {
-  text-align: center;
-  background: linear-gradient(135deg, #0077ff, #00c6ff);
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 50px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  box-shadow: 0 4px 12px rgba(0, 119, 255, 0.3);
-  transition: all 0.3s ease;
-}
-
-.theme-toggle-btn i {
-  font-size: 16px;
-}
-
-.theme-toggle-btn:hover {
-  background: linear-gradient(135deg, #005cd6, #00a6d6);
-  box-shadow: 0 6px 16px rgba(0, 119, 255, 0.5);
-  transform: translateY(-2px);
-}
-
-.theme-toggle-btn:active {
-  transform: scale(0.95);
-}
-
-.btn-outline-light{
-  text-align: center;
-  background: linear-gradient(135deg, #0077ff, #00c6ff);
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  box-shadow: 0 4px 12px rgba(0, 119, 255, 0.3);
-  transition: all 0.3s ease;
-}
-
-.btn-vehigo{
-  background-color: #2d6c9f;
-  color: black;
-  padding: 10px;
-  border-radius: 10px;
-  font-size: 20px;
-  box-shadow: 4px 4px 8px rgba(0,0,0,0.1);
-}
 
 /* Enhanced Blog Container */
 .blog-container {
diff --git a/blogs/blog1.html b/blogs/blog1.html
index 89d923d0..7d25f690 100644
--- a/blogs/blog1.html
+++ b/blogs/blog1.html
@@ -12,48 +12,45 @@
 <body>
 
 
-  <header class="header">
-    <nav class="navbar container py-2">
-      <a class="navbar-brand " href="../index.html" aria-label="Vehigo Home">
-        <img src="../assets/images/vehigologo.png" alt="Vehigo" />
-      </a>
-
-      <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain" aria-controls="navMain" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button> -->
-
-      <div class="navbar-links" id="navMain">
-        <ul class="navbar-nav ms-auto">
-          <li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
-          <li class="nav-item"><a class="nav-link" href="../index.html">Explore cars</a></li>
-          <li class="nav-item"><a class="nav-link" href="../src/pages/about.html">About us</a></li>
-          <li class="nav-item"><a class="nav-link" href="../blog.html">Blog</a></li>
-          <li class="nav-item"><a class="nav-link" href="../ContactUs.html">Contact Us</a></li>
-          <li class="nav-item"><a class="nav-link" href="../offline.html">Offline Centers</a></li>
-          <li class="nav-item"><a class="nav-link" href="../rentcar.html">Rent Your Car</a></li>
-
-          <!-- Theme switch -->
-          <li class="nav-item">
-            <button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
-              <i class="fa-solid fa-gear"></i><span class="label">Light</span>
-            </button>
-          </li>
-
-          <!-- Login & Logout -->
-          <!-- <li class="nav-item">
-            <a href="./src/pages/login.html" class="btn btn-vehigo" id="loginBtn">
-              <i class="fa-regular fa-user"></i> <span>Login</span>
-            </a>
-          </li> -->
-          <li class="nav-item">
-            <button id="logoutBtn" class="btn btn-outline-light d-none" aria-label="Logout" href="../src/pages/login.html">
-              <i class="fa-solid fa-right-from-bracket"></i>
-            </button>
-          </li>
-        </ul>
+   <header class="header">
+      <div class="container-fluid px-4">
+        <nav class="navbar navbar-expand-xl py-2">
+        <a class="navbar-brand d-flex align-items-center gap-2" href="/src/index.html" aria-label="Vehigo Home">
+          <img src="../assets/images/vehigologo.png" alt="Vehigo" />
+        </a>
+
+        
+
+        <div class="collapse navbar-collapse" id="navMain">
+          <ul class="navbar-nav ms-auto">
+            <li class="nav-item"><a class="nav-link" href="/src/index.html">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="featured-car.html">Explore cars</a></li>
+            <li class="nav-item"><a class="nav-link" href="./src/pages/about.html">About us</a></li>
+            <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
+            <li class="nav-item"><a class="nav-link" href="ContactUs.html">Contact Us</a></li>
+            <li class="nav-item"><a class="nav-link" href="offline.html">Offline Centers</a></li>
+            <li class="nav-item"><a class="nav-link" href="rentcar.html">Rent Your Car</a></li>
+
+            <!-- Theme switch -->
+            <li class="nav-item">
+              <button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
+                
+              </button>
+            </li>
+
+            <!-- Login & Logout -->
+            <li class="nav-item">
+              <a href="./src/pages/login.html" class="btn btn-vehigo" id="loginBtn">
+                <i class="fa-regular fa-user"></i> <span>Login</span>
+              </a>
+            </li>
+           
+          </ul>
+        </div>
+        </nav>
       </div>
-    </nav>
-  </header>
+    </header>
+
 
   <div class="reading-progress" id="readingProgress"></div>
   
@@ -150,12 +147,12 @@ <h1 class="blog-title">Opening of New Offices of the Company</h1>
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'light') {
     document.body.classList.remove('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+    themeToggle.innerHTML = '<span class="label">Dark</span>';
     themeToggle.classList.remove('btn-outline-light');
     themeToggle.classList.add('btn-outline-secondary');
   } else {
     document.body.classList.add('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+    themeToggle.innerHTML = '<span class="label">Light</span>';
     themeToggle.classList.remove('btn-outline-secondary');
     themeToggle.classList.add('btn-outline-light');
   }
@@ -167,11 +164,11 @@ <h1 class="blog-title">Opening of New Offices of the Company</h1>
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
 
     if (isDark) {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+      themeToggle.innerHTML = '<span class="label">Light</span>';
       themeToggle.classList.remove('btn-outline-secondary');
       themeToggle.classList.add('btn-outline-light');
     } else {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+      themeToggle.innerHTML = '<span class="label">Dark</span>';
       themeToggle.classList.remove('btn-outline-light');
       themeToggle.classList.add('btn-outline-secondary');
     }
diff --git a/blogs/blog2.html b/blogs/blog2.html
index 676c6aa2..c7c044d7 100644
--- a/blogs/blog2.html
+++ b/blogs/blog2.html
@@ -33,7 +33,7 @@
           <!-- Theme switch -->
           <li class="nav-item">
             <button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
-              <i class="fa-solid fa-gear"></i><span class="label">Light</span>
+        <span class="label">Light</span>
             </button>
           </li>
 
@@ -44,10 +44,11 @@
             </a>
           </li> -->
           <li class="nav-item">
-            <button id="logoutBtn" class="btn btn-outline-light d-none" aria-label="Logout" href="../src/pages/login.html">
-              <i class="fa-solid fa-right-from-bracket"></i>
-            </button>
-          </li>
+              <a href="./src/pages/login.html" class="btn btn-vehigo" id="loginBtn">
+                <i class="fa-regular fa-user"></i> <span>Login</span>
+              </a>
+            </li>
+           
         </ul>
       </div>
     </nav>
@@ -138,12 +139,12 @@ <h1 class="blog-title">What Cars Are Most Vulnerable?</h1>
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'light') {
     document.body.classList.remove('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+    themeToggle.innerHTML = '<span class="label">Dark</span>';
     themeToggle.classList.remove('btn-outline-light');
     themeToggle.classList.add('btn-outline-secondary');
   } else {
     document.body.classList.add('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+    themeToggle.innerHTML = '<span class="label">Light</span>';
     themeToggle.classList.remove('btn-outline-secondary');
     themeToggle.classList.add('btn-outline-light');
   }
@@ -155,11 +156,11 @@ <h1 class="blog-title">What Cars Are Most Vulnerable?</h1>
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
 
     if (isDark) {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+      themeToggle.innerHTML = '<span class="label">Light</span>';
       themeToggle.classList.remove('btn-outline-secondary');
       themeToggle.classList.add('btn-outline-light');
     } else {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+      themeToggle.innerHTML = '<span class="label">Dark</span>';
       themeToggle.classList.remove('btn-outline-light');
       themeToggle.classList.add('btn-outline-secondary');
     }
diff --git a/blogs/blog3.html b/blogs/blog3.html
index 3f2b6578..9eeaa705 100644
--- a/blogs/blog3.html
+++ b/blogs/blog3.html
@@ -32,7 +32,7 @@
           <!-- Theme switch -->
           <li class="nav-item">
             <button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
-              <i class="fa-solid fa-gear"></i><span class="label">Light</span>
+              </i><span class="label">Light</span>
             </button>
           </li>
 
@@ -42,11 +42,12 @@
               <i class="fa-regular fa-user"></i> <span>Login</span>
             </a>
           </li> -->
-          <li class="nav-item">
-            <button id="logoutBtn" class="btn btn-outline-light d-none" aria-label="Logout" href="../src/pages/login.html">
-              <i class="fa-solid fa-right-from-bracket"></i>
-            </button>
-          </li>
+           <li class="nav-item">
+              <a href="./src/pages/login.html" class="btn btn-vehigo" id="loginBtn">
+                <i class="fa-regular fa-user"></i> <span>Login</span>
+              </a>
+            </li>
+           
         </ul>
       </div>
     </nav>
@@ -140,12 +141,12 @@ <h1 class="blog-title">Statistics Show Average Car Rental Age</h1>
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'light') {
     document.body.classList.remove('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+    themeToggle.innerHTML = '<span class="label">Dark</span>';
     themeToggle.classList.remove('btn-outline-light');
     themeToggle.classList.add('btn-outline-secondary');
   } else {
     document.body.classList.add('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+    themeToggle.innerHTML = '<span class="label">Light</span>';
     themeToggle.classList.remove('btn-outline-secondary');
     themeToggle.classList.add('btn-outline-light');
   }
@@ -157,11 +158,11 @@ <h1 class="blog-title">Statistics Show Average Car Rental Age</h1>
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
 
     if (isDark) {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+      themeToggle.innerHTML = '</i><span class="label">Light</span>';
       themeToggle.classList.remove('btn-outline-secondary');
       themeToggle.classList.add('btn-outline-light');
     } else {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+      themeToggle.innerHTML = '</i><span class="label">Dark</span>';
       themeToggle.classList.remove('btn-outline-light');
       themeToggle.classList.add('btn-outline-secondary');
     }
diff --git a/blogs/blog4.html b/blogs/blog4.html
index a26d7449..79441421 100644
--- a/blogs/blog4.html
+++ b/blogs/blog4.html
@@ -32,7 +32,7 @@
           <!-- Theme switch -->
           <li class="nav-item">
             <button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
-              <i class="fa-solid fa-gear"></i><span class="label">Light</span>
+              <span class="label">Light</span>
             </button>
           </li>
 
@@ -43,10 +43,11 @@
             </a>
           </li> -->
           <li class="nav-item">
-            <button id="logoutBtn" class="btn btn-outline-light d-none" aria-label="Logout" href="../src/pages/login.html">
-              <i class="fa-solid fa-right-from-bracket"></i>
-            </button>
-          </li>
+              <a href="./src/pages/login.html" class="btn btn-vehigo" id="loginBtn">
+                <i class="fa-regular fa-user"></i> <span>Login</span>
+              </a>
+            </li>
+           
         </ul>
       </div>
     </nav>
@@ -111,12 +112,12 @@ <h3>Here’s a checklist of the basic requirements when renting a vehicle throug
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'light') {
     document.body.classList.remove('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+    themeToggle.innerHTML = '<span class="label">Dark</span>';
     themeToggle.classList.remove('btn-outline-light');
     themeToggle.classList.add('btn-outline-secondary');
   } else {
     document.body.classList.add('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+    themeToggle.innerHTML = '<span class="label">Light</span>';
     themeToggle.classList.remove('btn-outline-secondary');
     themeToggle.classList.add('btn-outline-light');
   }
@@ -128,11 +129,11 @@ <h3>Here’s a checklist of the basic requirements when renting a vehicle throug
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
 
     if (isDark) {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+      themeToggle.innerHTML = '<span class="label">Light</span>';
       themeToggle.classList.remove('btn-outline-secondary');
       themeToggle.classList.add('btn-outline-light');
     } else {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+      themeToggle.innerHTML = '<span class="label">Dark</span>';
       themeToggle.classList.remove('btn-outline-light');
       themeToggle.classList.add('btn-outline-secondary');
     }
diff --git a/blogs/blog5.html b/blogs/blog5.html
index 7aafa840..310ba95b 100644
--- a/blogs/blog5.html
+++ b/blogs/blog5.html
@@ -33,7 +33,7 @@
           <!-- Theme switch -->
           <li class="nav-item">
             <button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
-              <i class="fa-solid fa-gear"></i><span class="label">Light</span>
+              <span class="label">Light</span>
             </button>
           </li>
 
@@ -43,11 +43,12 @@
               <i class="fa-regular fa-user"></i> <span>Login</span>
             </a>
           </li> -->
-          <li class="nav-item">
-            <button id="logoutBtn" class="btn btn-outline-light d-none" aria-label="Logout" href="../src/pages/login.html">
-              <i class="fa-solid fa-right-from-bracket"></i>
-            </button>
-          </li>
+           <li class="nav-item">
+              <a href="../src/pages/login.html" class="btn btn-vehigo" id="loginBtn">
+                <i class="fa-regular fa-user"></i> <span>Login</span>
+              </a>
+            </li>
+           
         </ul>
       </div>
     </nav>
@@ -143,12 +144,12 @@ <h3>🔒 Updated Car Handling Rules:</h3>
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'light') {
     document.body.classList.remove('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+    themeToggle.innerHTML = '<span class="label">Dark</span>';
     themeToggle.classList.remove('btn-outline-light');
     themeToggle.classList.add('btn-outline-secondary');
   } else {
     document.body.classList.add('dark-theme');
-    themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+    themeToggle.innerHTML = '<span class="label">Light</span>';
     themeToggle.classList.remove('btn-outline-secondary');
     themeToggle.classList.add('btn-outline-light');
   }
@@ -160,11 +161,11 @@ <h3>🔒 Updated Car Handling Rules:</h3>
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
 
     if (isDark) {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+      themeToggle.innerHTML = '<span class="label">Light</span>';
       themeToggle.classList.remove('btn-outline-secondary');
       themeToggle.classList.add('btn-outline-light');
     } else {
-      themeToggle.innerHTML = '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+      themeToggle.innerHTML = '<span class="label">Dark</span>';
       themeToggle.classList.remove('btn-outline-light');
       themeToggle.classList.add('btn-outline-secondary');
     }
diff --git a/src/pages/pricing.html b/src/pages/pricing.html
index db4d0124..a7db5966 100644
--- a/src/pages/pricing.html
+++ b/src/pages/pricing.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pricing Plans | VehiGo</title>
-    <link rel="stylesheet" href="../../assets/css/style.css" />
+   
     <link rel="stylesheet" href="../../assets/styles/pricing-help.css" />
     <link
       rel="stylesheet"
@@ -59,6 +59,38 @@
       }
 
       /* Navbar Styling (match home) */
+      /* Make sure everything stays in one horizontal line */
+.header .navbar {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  flex-wrap: nowrap !important;
+  width: 100% !important;
+}
+
+/* Align navbar brand, links, and theme toggle neatly */
+.header .navbar .navbar-collapse {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  flex-grow: 1 !important;
+}
+
+/* Prevent wrapping of nav items */
+.header .navbar .navbar-nav {
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+  flex-wrap: nowrap !important;
+}
+
+
+
+/* Optional: Prevent wrapping of all items together */
+.header .navbar * {
+  white-space: nowrap !important;
+}
+
       .header {
         background: linear-gradient(
           135deg,
@@ -91,7 +123,7 @@
       .nav-link {
         color: #374151 !important;
         font-weight: 500 !important;
-        padding: 10px 15px !important;
+        padding: 16px 15px !important;
         border-radius: 8px !important;
         transition: all 0.3s ease !important;
         position: relative !important;
@@ -111,42 +143,23 @@
 
       /* Theme Toggle Button */
       .theme-toggle-btn {
-        border-radius: 25px !important;
-        padding: 10px 20px !important;
-        font-size: 14px !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-        border: 2px solid #e5e7eb !important;
-        background: linear-gradient(
-          135deg,
-          #ffffff 0%,
-          #f9fafb 100%
-        ) !important;
-        color: #374151 !important;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-      }
+       background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+      border: none !important;
+      border-radius: 25px !important;
+      margin-right: 5px;
+      padding: 10px 25px !important;
+      font-weight: 700 !important;
+      color: white !important;
+      transition: all 0.3s ease !important;
+      box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
+      }
+      
       .theme-toggle-btn:hover {
         transform: translateY(-2px) !important;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
-        border-color: #2563eb !important;
-        background: linear-gradient(
-          135deg,
-          #f0f9ff 0%,
-          #e0f2fe 100%
-        ) !important;
-        color: #2563eb !important;
-      }
-      .theme-toggle-btn.btn-outline-light {
-        border-color: rgba(255, 255, 255, 0.3) !important;
-        background: rgba(255, 255, 255, 0.1) !important;
-        color: white !important;
-        backdrop-filter: blur(10px) !important;
-      }
-      .theme-toggle-btn.btn-outline-light:hover {
-        background: rgba(255, 255, 255, 0.2) !important;
-        border-color: rgba(255, 255, 255, 0.5) !important;
-        color: white !important;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
       }
+      
+    
 
       /* Hero Section Styles */
       .pricing-hero {
@@ -612,36 +625,28 @@
         filter: brightness(0) invert(1);
       }
 
-      /* Fix login button visibility in dark mode */
-      .dark-theme .btn-vehigo {
-        background: #3b82f6 !important;
-        color: white !important;
-        border: 1px solid #3b82f6 !important;
-      }
-
-      .dark-theme .btn-vehigo:hover {
-        background: #2563eb !important;
-        border-color: #2563eb !important;
-        color: white !important;
-      }
+     
 
       /* Ensure the login button has proper styling in light mode as well */
+      /* Login Button */
       .btn-vehigo {
-        background: #2563eb;
-        color: white;
-        border: 1px solid #2563eb;
-        padding: 8px 16px;
-        border-radius: 8px;
-        text-decoration: none;
-        transition: all 0.3s ease;
-      }
+      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+      border: none !important;
+      border-radius: 25px !important;
+      margin-right: 5px;
+      padding: 10px 20px !important;
+      font-weight: 600 !important;
+      color: white !important;
+      transition: all 0.3s ease !important;
+      box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
+      text-decoration: none;
+    }
 
-      .btn-vehigo:hover {
-        background: #1d4ed8;
-        border-color: #1d4ed8;
-        color: white;
-        transform: translateY(-1px);
-      }
+    .btn-vehigo:hover {
+      transform: translateY(-2px) !important;
+      box-shadow: 0 4px 15px rgba(37, 100, 235, 0.4) !important;
+      background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
+    }
     </style>
   </head>
   <body>
@@ -706,7 +711,7 @@
                 class="btn btn-outline-secondary theme-toggle-btn"
                 type="button"
               >
-                <i class="fa-solid fa-gear"></i><span class="label">Light</span>
+              <span class="label">Light</span>
               </button>
             </li>
 
@@ -967,13 +972,13 @@ <h4>Stay in the loop</h4>
             themeToggle.classList.remove("btn-outline-secondary");
             themeToggle.classList.add("btn-outline-light");
             themeToggle.innerHTML =
-              '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+              '<span class="label">Light</span>';
           } else {
             document.body.classList.remove("dark-theme");
             themeToggle.classList.remove("btn-outline-light");
             themeToggle.classList.add("btn-outline-secondary");
             themeToggle.innerHTML =
-              '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+              '<span class="label">Dark</span>';
           }
           themeToggle.addEventListener("click", function (e) {
             e.preventDefault();
@@ -984,14 +989,14 @@ <h4>Stay in the loop</h4>
               themeToggle.classList.remove("btn-outline-light");
               themeToggle.classList.add("btn-outline-secondary");
               themeToggle.innerHTML =
-                '<i class="fa-solid fa-gear"></i><span class="label">Dark</span>';
+                '<span class="label">Dark</span>';
             } else {
               document.body.classList.add("dark-theme");
               localStorage.setItem("theme", "dark");
               themeToggle.classList.remove("btn-outline-secondary");
               themeToggle.classList.add("btn-outline-light");
               themeToggle.innerHTML =
-                '<i class="fa-solid fa-gear"></i><span class="label">Light</span>';
+                '<span class="label">Light</span>';
             }
           });
         } else {