diff --git a/src/index.html b/src/index.html
index c381e46..339e809 100644
--- a/src/index.html
+++ b/src/index.html
@@ -635,6 +635,64 @@
   color: var(--subtext-color);
 }
 
+/* Logo */
+.logo img {
+  height: 36px;
+  transition: filter 0.3s ease, opacity 0.3s ease;
+}
+
+/* Dark mode logo styling if using same logo */
+.dark-theme .logo img {
+  filter: brightness(0) invert(1);
+}
+
+/* Optional: theme button styling */
+.theme-switch {
+  cursor: pointer;
+  border: 1px solid var(--vehigo-border);
+  background: var(--vehigo-card);
+  padding: 6px 12px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  box-shadow: var(--shadow-1);
+  transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.theme-switch:hover {
+  transform: scale(1.05);
+}
+
+.dark-theme #logo {
+  filter: brightness(0) invert(1);
+  transition: filter 0.3s ease;
+}
+
+/* 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;
+    }
+
+    .navbar-nav {
+      flex-wrap: nowrap;
+      gap: 4px;
+      align-items: center;
+    }
+
+    .navbar .btn,
+    .theme-switch {
+      white-space: nowrap;
+    }
+
+
   </style>
   <!-- 
     - favicon
@@ -661,69 +719,50 @@
     - #HEADER
   -->
 
-  <header class="header" data-header>
-    <div class="container">
-
-      <div class="overlay" data-overlay></div>
-
-      <a href="/src/index.html" class="logo" onclick="event.preventDefault();window.scrollTo({top:0,behavior:'smooth'});">
-    <img src="./assets/images/vehigologo.png" alt="VehiGo logo">
-</a>
-
-<nav class="navbar" data-navbar>
-  <ul class="navbar-list">
-
-    <li>
-      <a href="/src/index.html" class="navbar-link" data-nav-link>Home</a>
-    </li>
-
-    <li>
-      <a href="index.html#featured-car" class="navbar-link" data-nav-link>Explore cars</a>
-    </li>
-
-    <li>
-      <a href="pages/about.html" class="navbar-link" data-nav-link>About us</a>
-    </li>
-
-    <li>
-      <a href="index.html#blog" class="navbar-link" data-nav-link>Blog</a>
-    </li>
-
-    <li>
-      <a href="./pages/bill.html" class="navbar-link" data-nav-link>Fare Calculator</a>
-    </li>
-
-  </ul>
-</nav>
-
-
-      <div class="header-actions">
-
-        <div class="header-contact">
-          <a href="tel:1800100100" class="contact-link">1800-100-100</a>
-
-          <span class="contact-time">Mon - Sat: 9:00 am - 6:00 pm</span>
-        </div>
-
-        <a href="./pages/login.html" class="btn user-btn" aria-label="Profile">
-          <ion-icon name="person-outline"></ion-icon>
-        </a>
-
-        <button class="btn" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme" style="min-width:71px;min-height:40px;display:flex;align-items:center;gap:8px;padding-inline:10px;">
-          <ion-icon id="theme-toggle-icon" name="moon-outline"></ion-icon>
-          <span id="theme-toggle-text">Dark</span>
-        </button>
+ <header class="header" data-header>
+  <div class="container">
+    <div class="overlay" data-overlay></div>
+
+   <a class="navbar-brand d-flex align-items-center" href="/src/index.html" aria-label="Vehigo Home">
+        <img src="./assets/images/vehigologo.png" alt="Vehigo" />
+      </a>
+
+    <nav class="navbar" data-navbar>
+      <ul class="navbar-list">
+        <li><a href="/src/index.html" class="navbar-link" data-nav-link>Home</a></li>
+        <li><a href="index.html#featured-car" class="navbar-link" data-nav-link>Explore cars</a></li>
+        <li><a href="pages/about.html" class="navbar-link" data-nav-link>About us</a></li>
+        <li><a href="index.html#blog" class="navbar-link" data-nav-link>Blog</a></li>
+        <li><a href="./pages/bill.html" class="navbar-link" data-nav-link>Fare Calculator</a></li>
+      </ul>
+    </nav>
+
+    <div class="header-actions">
+      <div class="header-contact">
+        <a href="tel:1800100100" class="contact-link">1800-100-100</a>
+        <span class="contact-time">Mon - Sat: 9:00 am - 6:00 pm</span>
+      </div>
 
-        <button class="nav-toggle-btn" data-nav-toggle-btn aria-label="Toggle Menu">
-          <span class="one"></span>
-          <span class="two"></span>
-          <span class="three"></span>
-        </button>
+      <a href="./pages/login.html" class="btn user-btn" aria-label="Profile">
+        <ion-icon name="person-outline"></ion-icon>
+      </a>
 
-      </div>
+      <!-- ✅ Fixed button IDs -->
+      <button class="btn" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme"
+        style="min-width:71px;min-height:40px;display:flex;align-items:center;gap:8px;padding-inline:10px;">
+        <ion-icon id="theme-toggle-icon" name="moon-outline"></ion-icon>
+        <span id="theme-toggle-text">Dark</span>
+      </button>
 
+      <button class="nav-toggle-btn" data-nav-toggle-btn aria-label="Toggle Menu">
+        <span class="one"></span>
+        <span class="two"></span>
+        <span class="three"></span>
+      </button>
     </div>
-  </header>
+  </div>
+</header>
+
 
   <main>
     <article>
@@ -1966,25 +2005,6 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
     }
   });
 </script>
-<a href="./index.html" style="
-  position: fixed;
-  bottom: 30px;
-  left: 30px;
-  background-color: #007BFF;
-  color: white;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  z-index: 999;
-  transition: background-color 0.3s;
-" onmouseover="this.style.backgroundColor='#0056b3'" onmouseout="this.style.backgroundColor='#007BFF'">
-  <ion-icon name="chevron-up-outline" style="font-size: 24px;"></ion-icon>
-</a>
 
     <!-- Scroll Buttons -->
 <button id="scrollTopBtn" style="
@@ -2074,7 +2094,7 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
 </script>
 
 
-<button id="scrollTop" style="position:fixed;bottom:20px;right:20px;display:none;width:50px;height:50px;border:none;border-radius:50%;background:#007bff;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:0.3s;">⬆</button>
+
 
 <script>
 const btn = document.getElementById('scrollTop');
@@ -2119,6 +2139,47 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
   });
 });
 
+</script>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const body = document.body;
+  const toggleBtn = document.getElementById('theme-toggle');
+  const toggleIcon = document.getElementById('theme-toggle-icon');
+  const toggleText = document.getElementById('theme-toggle-text');
+  const logo = document.getElementById('logo');
+
+  const savedTheme = localStorage.getItem('theme');
+
+  // Apply saved theme
+  if (savedTheme === 'dark') {
+    body.classList.add('dark-theme');
+    logo.src = logo.dataset.dark;
+    toggleIcon.setAttribute('name', 'sunny-outline');
+    toggleText.textContent = 'Light';
+  } else {
+    body.classList.remove('dark-theme');
+    logo.src = './assets/images/vehigologo.png';
+    toggleIcon.setAttribute('name', 'moon-outline');
+    toggleText.textContent = 'Dark';
+  }
+
+  // Toggle theme
+  toggleBtn.addEventListener('click', () => {
+    body.classList.toggle('dark-theme');
+    const isDark = body.classList.contains('dark-theme');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+
+    if (isDark) {
+      logo.src = logo.dataset.dark;
+      toggleIcon.setAttribute('name', 'sunny-outline');
+      toggleText.textContent = 'Light';
+    } else {
+      logo.src = './assets/images/vehigologo.png';
+      toggleIcon.setAttribute('name', 'moon-outline');
+      toggleText.textContent = 'Dark';
+    }
+  });
+});
 </script>
 
 </body>
diff --git a/src/pages/bill.html b/src/pages/bill.html
index db58047..4226ce0 100644
--- a/src/pages/bill.html
+++ b/src/pages/bill.html
@@ -183,6 +183,25 @@
       background: #0f172a;
       color: #e6e6f0;
     }
+
+    .dark-theme #carBrand {
+  background-color: #1e1e1e;       /* dark background */
+  color: #f1f1f1;                  /* light text */
+  border: 2px solid #1e88e5;       /* lighter blue border */
+  box-shadow: 0 0 5px rgba(20, 94, 168, 0.4);
+}
+
+.dark-theme #carBrand option {
+  background-color: #2a2a2a;       /* dark dropdown menu */
+  color: #f1f1f1;
+}
+
+/* Optional hover/focus styles */
+.dark-theme #carBrand:focus {
+  outline: none;
+  border-color: #2196f3;
+  box-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
+}
     :root {
   --vehigo-primary: #2563eb;
   --vehigo-primary-2: #4e7fb4;