diff --git a/index.html b/index.html
index 8c63525..d6de3a6 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,9 @@
 <body>
 
     <nav class="navbar">
+
         <a href="index.html" class="flex"><img src="images/logo.png" class="logo">
+
             <span class="website-name tracking-tight ">Code Social</span></a>
 
 
@@ -46,7 +48,7 @@
             <li class="community">
                 <a href="maintenance.html">Join Our Community</a>
                 <ul class="dropdown">
-                    <li><a href="maintenance.html">WhatsApp</a></li>
+                    <li><a href="maintenance.html">WhatsApp</a></li></br>
                     <li><a href="maintenance.html">Discord</a></li>
                 </ul>
             </li>
@@ -65,12 +67,16 @@
                     <button class="bar"></button>
                     <button class="bar"></button>
                 </div>
-                <ul class="dropdown">
-                    <li><a href="mentorship.html">Meet Our Team</a></li>
-                    <li><a href="#">Join Our Team</a></li>
-                    <li><a href="#">Contact Us</a></li>
-                    <li><a href="#">Follow Us</a></li>
-                </ul>
+<li class="dropdown-container">
+    <a href="#">More Options</a>
+    <ul class="dropdown">
+        <li><a href="mentorship.html">Meet Our Team</a></li>
+        <li><a href="#">Join Our Team</a></li>
+        <li><a href="#">Contact Us</a></li>
+        <li><a href="#">Follow Us</a></li>
+    </ul>
+</li>
+
             </li>
             
             <li>
@@ -78,8 +84,10 @@
             </li>
             <!-- Dark Mode Toggle -->
             <li>
-                <button id="theme-toggle" class="theme-toggle-btn">
-                    <img src="images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">
+
+                <button id="theme-toggle" class="theme-toggle-btn  ">
+                    <img src="./images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">
+
                 </button>
                 <!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
             </li>
@@ -154,6 +162,7 @@ <h3>Add Event</h3>
 
                         <a href="index.html" class="flex w-full justify-center  "><img src="images/logo.png" class="logo mx-auto">
                             
+
                             <span class="website-name tracking-tight ">Code Social</span></a>
 
                         <p class="footer-text">Code Social Community is a vibrant and inclusive space for tech enthusiasts to learn, grow, and connect. Founded in 2023, our mission is to empower individuals with resources, mentorship, and
@@ -280,6 +289,21 @@ <h3>Add Event</h3>
 });
 
 document.addEventListener('DOMContentLoaded', generateCalendar);
+const themeToggleBtn = document.getElementById('theme-toggle');
+const body = document.body;
+
+themeToggleBtn.addEventListener('click', () => {
+    // Toggle the 'dark-theme' class on the body
+    body.classList.toggle('dark-theme');
+
+    // Optionally, change the icon based on the theme
+    const icon = document.getElementById('theme-toggle-icon');
+    if (body.classList.contains('dark-theme')) {
+        icon.src = './images/light-mode.png'; // Change to light mode icon
+    } else {
+        icon.src = './images/dark-mode.png'; // Change to dark mode icon
+    }
+});
 
         </script>
         <script>
@@ -296,4 +320,4 @@ <h3>Add Event</h3>
             </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/maintenance.html b/maintenance.html
index 5321853..d87371b 100644
--- a/maintenance.html
+++ b/maintenance.html
@@ -17,7 +17,7 @@
     <body>
         <nav class="navbar">
             <a href="index.html" class="flex"
-                ><img src="/images/logo.png" class="logo" />
+                ><img src="./images/logo.png" class="logo" />
                 <span class="website-name tracking-tight">Code Social</span></a
             >
 
@@ -45,7 +45,7 @@
                 <li class="community">
                     <a href="maintenance.html">Join Our Community</a>
                     <ul class="dropdown">
-                        <li><a href="maintenance.html">WhatsApp</a></li>
+                        <li><a href="maintenance.html">WhatsApp</a></li></br>
                         <li><a href="maintenance.html">Discord</a></li>
                     </ul>
                 </li>
@@ -62,11 +62,14 @@
                     <a href="maintenance.html">Follow Us</a>
                 </li>
                 <!-- Dark Mode Toggle -->
+                
                 <li>
                     <button id="theme-toggle" class="theme-toggle-btn">
                         <img
+
                             src="images/dark-mode.png"
 
+
                             alt="theme-mode"
                             
                             id="theme-toggle-icon"
diff --git a/styles.css b/styles.css
index 285821a..8811305 100644
--- a/styles.css
+++ b/styles.css
@@ -28,6 +28,48 @@ body {
   transition: all 0.3s; /* Optional: Add a transition for hover effects */
 }
 
+body {
+    background-color: white; /* Light background for body */
+    color: black; /* Light text color for body */
+}
+
+.navbar {
+    background-color: white; /* Light background for navbar */
+    color: black; /* Light text color for navbar */
+}
+
+.navbar a {
+    color: black; /* Links color in light theme */
+}
+
+/* Dark Theme Styles */
+.dark-theme {
+    background-color: black; /* Dark background for body */
+    color: white; /* Dark text color for body */
+}
+
+.dark-theme .navbar {
+    background-color: black; /* Dark background for navbar */
+    color: white; /* Dark text color for navbar */
+}
+
+.dark-theme .navbar a {
+    color: white; /* Links color in dark theme */
+}
+/* Hide dropdowns by default */
+.navbar .dropdown {
+    display: none; /* Hide the dropdowns */
+    position: absolute; /* Position them absolutely */
+    background-color: white; /* Background for dropdowns */
+    border: 1px solid #ccc; /* Border for dropdowns */
+    z-index: 1; /* Ensure dropdowns appear above other elements */
+}
+
+/* Show dropdowns when parent li is hovered */
+.navbar li:hover .dropdown {
+    display: block; /* Show the dropdown on hover */
+}
+
 /* Dark mode */
 .dark-mode {
   background-color: #2e2e2e;
@@ -306,7 +348,49 @@ body.dark-mode .calendar-day:hover {
   white-space: nowrap; /* Keeps text in a single line */
   text-overflow: ellipsis; /* Adds ellipsis for overflowed text */
 }
-
+/* Hide the dropdown initially */
+.dropdown {
+    display: none;
+    position: absolute;
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 10px 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    list-style: none;
+    top: 100%; /* Aligns the dropdown right below the link */
+    left: 0;
+    min-width:260px;
+    z-index: 1000;
+  }
+  
+  .dropdown li {
+    padding: 10px 20px;
+  }
+  
+  .dropdown li a {
+    color: black;
+    text-decoration: none;
+  }
+  
+  .dropdown li a:hover {
+    background-color: #f1f1f1;
+    color: red;
+  }
+  
+  /* Show dropdown when hovering on the parent container */
+  .dropdown-container:hover .dropdown {
+    display: block;
+  }
+  
+  /* Dropdown link styling */
+  .nav-links {
+    position: relative;
+  }
+  
+  .dropdown-container {
+    position: relative;
+  }
+  
 /* Responsive Adjustments */
 @media (max-width: 768px) {
   .calendar-section {
@@ -319,40 +403,92 @@ body.dark-mode .calendar-day:hover {
     margin: 10px 0; /* Adjust margin */
   }
 }
-
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: Arial, sans-serif;
+    padding-top: 100px; /* Adjust this to the height of your navbar */
+  }
+  .content {
+    padding: 20px;
+  }
+  
+  .section {
+    margin-bottom: 100px;
+  }
+  
+  .section h1,
+  .section h2 {
+    margin-bottom: 10px;
+  }
+  
+  .section p {
+    margin-bottom: 20px;
+    line-height: 1.6;
+  }  
 /* General Navbar Styling */
 .navbar {
-  /* background-color: #333; */
-  padding: 10px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  /* position: fixed; */
-  transition: background-color 0.3s;
-  width: 100%;
-  height: 12vh;
-  font-weight: 400;
-  top: 0;
-  margin-top: 0px;
-  z-index: 1000;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  position: sticky;
+    position: sticky; /* Changed to sticky to allow for the alternative positioning */
+    top: 0;
+    width: 100%;
+    background-color: white; /* Default background color */
+    border-bottom: 1px solid #ccc;
+    z-index: 1000; /* Ensure the navbar is on top */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
+    transition: background-color 0.3s;
+    height: 12vh;
+    font-weight: 400;
 }
+
 .light-mode .navbar {
-  background-color: white; /* White background for light mode */
-  color: black; /* Text color for light mode */
+    background-color: white; /* White background for light mode */
+    color: black; /* Text color for light mode */
 }
 
 .dark-mode .navbar {
-  background-color: #333; /* Dark background for dark mode */
-  color: white; /* Text color for dark mode */
+    background-color: #333; /* Dark background for dark mode */
+    color: white; /* Text color for dark mode */
+}
+
+.navbar .logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.navbar .nav-links {
+    list-style-type: none;
+    display: flex;
+}
+
+.navbar .nav-links li {
+    margin-left: 20px;
+}
+
+.navbar .nav-links li a {
+    text-decoration: none;
+    color: black;
+    font-size: 18px;
+}
+
+.navbar .nav-links li a:hover {
+    color: red;
+    transition: color 0.3s ease;
 }
 
 .content {
-  height: 2000px; /* Just for scrolling */
-  padding: 20px;
+    height: 2000px; /* Just for scrolling */
+    padding: 20px;
 }
 
+
 /* Center the menu items */
 .navbar ul {
   display: flex;
