diff --git a/index.html b/index.html
index fd041d9..71e6a7c 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,8 @@
   <title>Mirage - Privacy Focused Chat App</title>
   <style>
     body {
-      background-color: #f0f0f0;
-      color: #333;
+      background-color: #ffffff;
+      color: #333333;
       font-family: Arial, sans-serif;
       display: flex;
       flex-direction: column;
@@ -39,8 +39,8 @@
       margin: 15px auto;
       padding: 10px 20px;
       font-size: 1rem;
-      color: white;
-      background-color: #333;
+      color: #ffffff;
+      background-color: #0056b3;
       border: none;
       cursor: pointer;
       text-decoration: none;
@@ -48,15 +48,16 @@
     }
 
     .cta-button:hover {
-      background-color: #555;
+      background-color: #003d80;
     }
 
     .dark-mode .cta-button {
-      background-color: #007bff;
+      background-color: #4da6ff;
+      color: #000000;
     }
 
-    .cta-button:hover {
-      background-color: #0056b3;
+    .dark-mode .cta-button:hover {
+      background-color: #80bfff;
     }
 
     .contributors {
@@ -76,15 +77,32 @@
       position: fixed;
       top: 20px;
       right: 20px;
-      padding: 10px;
-      background-color: #333;
-      color: white;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background-color: #0056b3;
+      color: #ffffff;
       border: none;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      transition: background-color 0.3s;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     }
 
     .dark-mode-toggle:hover {
-      background-color: #555;
+      background-color: #003d80;
+    }
+
+    .dark-mode .dark-mode-toggle {
+      background-color: #4da6ff;
+      color: #000000;
+    }
+
+    .dark-mode .dark-mode-toggle:hover {
+      background-color: #80bfff;
     }
 
     .stats {
@@ -98,7 +116,7 @@
     }
 
     .footer a {
-      color: #007bff;
+      color: #0056b3;
       text-decoration: none;
       margin: 0 5px;
     }
@@ -144,10 +162,125 @@
       text-decoration: none;
       cursor: pointer;
     }
+
+    /* Dark mode styles */
+    body.dark-mode {
+      background-color: #1a1a1a;
+      color: #f0f0f0;
+    }
+
+    .dark-mode .cta-button {
+      background-color: #4da6ff;
+      color: #000000;
+    }
+
+    .dark-mode .cta-button:hover {
+      background-color: #80bfff;
+    }
+
+    .dark-mode .dark-mode-toggle {
+      background-color: #4da6ff;
+      color: #000000;
+    }
+
+    .dark-mode .dark-mode-toggle:hover {
+      background-color: #80bfff;
+    }
+
+    .dark-mode .modal-content {
+      background-color: #333333;
+      color: #f0f0f0;
+    }
+
+    .dark-mode .close {
+      color: #f0f0f0;
+    }
+
+    .dark-mode .close:hover,
+    .dark-mode .close:focus {
+      color: #ffffff;
+    }
+
+    .dark-mode .footer a {
+      color: #4da6ff;
+    }
+
+    /* Navbar styles */
+    .navbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: #ffffff;
+      padding: 10px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      z-index: 1000;
+    }
+
+    .navbar-brand {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333333;
+      text-decoration: none;
+    }
+
+    .navbar-links {
+      display: flex;
+      gap: 20px;
+    }
+
+    .navbar-links a {
+      color: #333333;
+      text-decoration: none;
+      transition: color 0.3s;
+    }
+
+    .navbar-links a:hover {
+      color: #0056b3;
+    }
+
+    /* Dark mode styles for navbar */
+    .dark-mode .navbar {
+      background-color: #333333;
+    }
+
+    .dark-mode .navbar-brand,
+    .dark-mode .navbar-links a {
+      color: #f0f0f0;
+    }
+
+    .dark-mode .navbar-links a:hover {
+      color: #4da6ff;
+    }
+
+    /* Adjust body padding to account for navbar */
+    body {
+      padding-top: 60px;
+    }
+
+    /* Move dark mode toggle to align with navbar */
+    .dark-mode-toggle {
+      top: 70px;
+    }
   </style>
 </head>
 <body>
-  <button class="dark-mode-toggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
+  <nav class="navbar">
+    <a href="#" class="navbar-brand">Mirage</a>
+    <div class="navbar-links">
+      <a href="#">Home</a>
+      <a href="#">About</a>
+      <a href="#">Features</a>
+      <a href="#">Contact</a>
+    </div>
+  </nav>
+
+  <button class="dark-mode-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode">
+    <span id="darkModeIcon">🌙</span>
+  </button>
 
   <div class="container">
     <div class="header">Welcome to Mirage</div>
@@ -198,13 +331,9 @@
   <script>
     function toggleDarkMode() {
       document.body.classList.toggle('dark-mode');
-      if (document.body.classList.contains('dark-mode')) {
-        document.body.style.backgroundColor = '#333';
-        document.body.style.color = '#f0f0f0';
-      } else {
-        document.body.style.backgroundColor = '#f0f0f0';
-        document.body.style.color = '#333';
-      }
+      localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
+      updateDarkModeIcon();
+      updateNavbarColor();
     }
 
     function openModal() {
@@ -222,6 +351,35 @@
         closeModal();
       }
     }
+
+    // Update the text of the dark mode toggle button
+    function updateDarkModeIcon() {
+      const darkModeIcon = document.getElementById('darkModeIcon');
+      if (document.body.classList.contains('dark-mode')) {
+        darkModeIcon.textContent = '☀️';
+      } else {
+        darkModeIcon.textContent = '🌙';
+      }
+    }
+
+    // Update navbar color when toggling dark mode
+    function updateNavbarColor() {
+      const navbar = document.querySelector('.navbar');
+      if (document.body.classList.contains('dark-mode')) {
+        navbar.style.backgroundColor = '#333333';
+      } else {
+        navbar.style.backgroundColor = '#ffffff';
+      }
+    }
+
+    // Check for saved dark mode preference and update navbar
+    document.addEventListener('DOMContentLoaded', (event) => {
+      if (localStorage.getItem('darkMode') === 'true') {
+        document.body.classList.add('dark-mode');
+      }
+      updateDarkModeIcon();
+      updateNavbarColor();
+    });
   </script>
 </body>
 </html>