diff --git a/404.html b/404.html
new file mode 100644
index 0000000..71cebc0
--- /dev/null
+++ b/404.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Code Social | Home</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="styles.css" type="text/css" />
+        <script src="script.js" defer></script>
+        <script type="text/javascript" src="darkmode.js" defer></script>
+        <!-- Tailwind CSS CDN -->
+        <link
+            href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+            rel="stylesheet"
+        />
+    </head>
+
+    <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
+            >
+
+            <!-- Hamburger Menu -->
+            <div class="hamburger-menu">
+                <div class="toggle-button">
+                    <img
+                        src="/images/hamburger.png"
+                        alt="open"
+                        id="hamburger-img"
+                    />
+                </div>
+            </div>
+
+            <!-- Navbar Links -->
+            <ul class="navbar-links flex">
+                <li class="ml-20">
+                    <a href="maintenance.html">Live Events</a>
+                    <ul class="dropdown">
+                        <li>
+                            <a href="maintenance.html">Why don't you react?</a>
+                        </li>
+                    </ul>
+                </li>
+                <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">Discord</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="maintenance.html">Meet Our Team</a>
+                </li>
+                <li>
+                    <a href="maintenance.html">Join Our Team</a>
+                </li>
+                <li>
+                    <a href="maintenance.html">Contact Us</a>
+                </li>
+                <li>
+                    <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"
+                        />
+                    </button>
+                    <!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
+                </li>
+            </ul>
+        </nav>
+        <section class="bg-white dark:bg-gray-900">
+            <div
+                class="py-8 px-4 mx-auto max-w-screen-md text-center lg:py-16 lg:px-12"
+            >
+                <svg
+                    class="mx-auto mb-4 w-10 h-10 text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
+                >
+                    <path
+                        fill="currentColor"
+                        d="M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z"
+                    />
+                </svg>
+                <h1
+                    class="mb-4 text-4xl font-bold tracking-tight leading-none text-gray-900 lg:mb-6 md:text-5xl xl:text-6xl dark:text-white"
+                >
+                    Under Maintenance
+                </h1>
+                <p
+                    class="font-light text-gray-500 md:text-lg xl:text-xl dark:text-gray-400"
+                >
+                    Our Enterprise administrators are performing scheduled
+                    maintenance.
+                </p>
+            </div>
+        </section>
+    </body>
+</html>
diff --git a/images/close.png b/images/close.png
new file mode 100644
index 0000000..636110c
Binary files /dev/null and b/images/close.png differ
diff --git a/images/dark-mode.png b/images/dark-mode.png
new file mode 100644
index 0000000..84fe2de
Binary files /dev/null and b/images/dark-mode.png differ
diff --git a/images/discord-icon.png b/images/discord-icon.png
index 4744d6c..45547f7 100644
Binary files a/images/discord-icon.png and b/images/discord-icon.png differ
diff --git a/images/gitHub.png b/images/gitHub.png
index 1a3571d..0c2ee50 100644
Binary files a/images/gitHub.png and b/images/gitHub.png differ
diff --git a/images/hamburger.png b/images/hamburger.png
new file mode 100644
index 0000000..653738e
Binary files /dev/null and b/images/hamburger.png differ
diff --git a/images/light-mode.png b/images/light-mode.png
new file mode 100644
index 0000000..57b4c53
Binary files /dev/null and b/images/light-mode.png differ
diff --git a/images/linkedin-icon.png b/images/linkedin-icon.png
index 98faeff..a97d0c6 100644
Binary files a/images/linkedin-icon.png and b/images/linkedin-icon.png differ
diff --git a/images/whatsapp-icon.png b/images/whatsapp-icon.png
index 1a52a6d..42d6c31 100644
Binary files a/images/whatsapp-icon.png and b/images/whatsapp-icon.png differ
diff --git a/index.html b/index.html
index c968344..1c76527 100644
--- a/index.html
+++ b/index.html
@@ -8,49 +8,64 @@
     <link rel="stylesheet" href="styles.css" type="text/css" />
     <script src="script.js" defer></script>
     <script type="text/javascript" src="darkmode.js" defer></script>
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+
 </head>
 
 <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>
 
-        <a href="index.html"><img src="/official-website/images/logo.png"
-                class="logo"></a>
-        <span class="website-name">Code Social</span>
-        <ul>
-            <li>
-                <a href="#">Live Events</a>
-                <ul class="dropdown">
-                    <li><a href="#"> Why don't you react?</a></li>
+
+        <!-- Hamburger Menu -->
+        <div class="hamburger-menu">
+            <div class="toggle-button">
+                <img src="/images/hamburger.png" alt="open" id="hamburger-img">
+
+            </div>
+        </div>
+
+        <!-- Navbar Links -->
+        <ul class="navbar-links flex  ">
+            <li class="ml-20">
+                <a href="maintenance.html">Live Events</a>
+                <ul class="dropdown  ">
+                    <li><a href="maintenance.html">Why don't you react?</a></li>
                 </ul>
             </li>
             <li class="community">
-                <a href="#">Join our Community</a>
+                <a href="maintenance.html">Join Our Community</a>
                 <ul class="dropdown">
-                    <li><a href="#">Whatsapp</a></li>
-                    <li><a href="#">Discord</a></li>
+                    <li><a href="maintenance.html">WhatsApp</a></li>
+                    <li><a href="maintenance.html">Discord</a></li>
                 </ul>
             </li>
-            <li class="hamburger-menu">
-                <div class="toggle-button">
-                    <button class="bar"></button>
-                    <button class="bar"></button>
-                    <button class="bar"></button>
-                </div>
-                <ul class="dropdown">
-                    <li><a href="#"> 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>
+                <a href="maintenance.html">Meet Our Team</a>
+            </li>
+            <li>
+                <a href="maintenance.html">Join Our Team</a>
             </li>
             <li>
-                <button id="theme-switch">
-                </button> 
+                <a href="maintenance.html">Contact Us</a>
+            </li>
+            <li>
+                <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">
+                </button>
+                <!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
             </li>
         </ul>
     </nav>
 
+
     <section class="about-community">
         <h2>About Community</h2>
         <p>
@@ -73,24 +88,25 @@ <h2>About Community</h2>
             <a href="https://www.linkedin.com/company/code-social/" target="_blank">
                 <img src="images/linkedin-icon.png" alt="LinkedIn">
             </a>
-            <a href="https://github.com/Code-Social" target="_blank"></a>
-                <img src="./images/gitHub.png" alt="Github">
+            <a href="https://github.com/Code-Social" target="_blank">
+                <img src="images/gitHub.png" alt="Github">
             </a>
+
         </div>
     </section>
 
-    <h2 class="calendar-title">Event Calendar</h2>
-  
+    <h2 class="calendar-title text-3xl mt-10   font-semibold">Event Calendar</h2>
+
     <section class="calendar-section">
         <div class="event-form">
             <h3>Add Event</h3>
-            <input type="date" id="event-date" required>
+            <input type="date" id="event-date" class="text-gray-500" required>
             <input type="text" id="event-title" placeholder="Event Title" required>
             <label for="event-color">Pick color for event:</label>
             <input type="color" id="event-color" value="#4CAF50">
             <button id="add-event">Add Event</button>
         </div>
-    
+
         <div class="calendar">
             <div class="calendar-header">
                 <button id="prev-month">◀</button>
@@ -99,7 +115,7 @@ <h3>Add Event</h3>
                 </div>
                 <button id="next-month">▶</button>
             </div>
-            
+
             <div class="calendar-grid" id="calendar-grid"></div>
         </div>
     </section>
@@ -108,32 +124,34 @@ <h3>Add Event</h3>
     <br>
 
     <footer>
-        <section class="footer-section">
+        <section class="footer-section border border-gray-500 shadow-lg  ">
             <div class="container">
                 <div class="footer-grid">
                     <!-- Logo and About Section -->
-                    <div class="footer-logo-section">
-                        <img class="footer-logo" src="/official-website/images/logo.png" alt="Logo" />
-                        <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 
-                            opportunities to cultivate their skills, explore their interests, 
+                    <div class="footer-logo-section footer-item my-5  ">
+                        <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
+                            opportunities to cultivate their skills, explore their interests,
                             and collaborate with like-minded peers. Join us on our journey to create something extraordinary together!</p>
-                        <ul class="social-icons">
+                        <ul class="social-icons py-5    ">
                             <li><a href="https://wa.me/your-whatsapp-number" target="_blank">
-                                <img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
+                                    <img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
                             </li>
                             <li><a href="https://discord.gg/MSTNyRSPYW" target="_blank">
-                                <img src="./images/discord-icon.png" alt="Discord">
-                            </a>
+                                    <img src="./images/discord-icon.png" alt="Discord">
+                                </a>
                             </li>
                             <li><a href="https://www.linkedin.com/company/code-social/" target="_blank">
-                                <img src="./images/linkedin-icon.png" alt="LinkedIn">
-                            </a>
+                                    <img src="./images/linkedin-icon.png" alt="LinkedIn">
+                                </a>
                             </li>
                         </ul>
                     </div>
-        
+
                     <!-- Company Links -->
-                    <div class="footer-links">
+                    <div class="footer-links footer-item">
                         <p class="footer-title">Quick Links</p>
                         <ul class="footer-list">
                             <li><a href="#">About Us</a></li>
@@ -142,9 +160,9 @@ <h3>Add Event</h3>
                             <li><a href="#">Careers</a></li>
                         </ul>
                     </div>
-        
+
                     <!-- Help Links -->
-                    <div class="footer-links">
+                    <div class="footer-links footer-item">
                         <p class="footer-title">Help</p>
                         <ul class="footer-list">
                             <li><a href="#">Contact Us</a></li>
@@ -153,13 +171,13 @@ <h3>Add Event</h3>
                         </ul>
                     </div>
                 </div>
-        
+
                 <hr class="footer-divider" />
                 <p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code-social</p>
             </div>
-        </section>    
+        </section>
+
 
-    
 
         <script>
             const events = [
@@ -167,25 +185,25 @@ <h3>Add Event</h3>
                 { date: '2024-10-14', title: 'Node.js Webinar', color: '#FFC107' },
                 { date: '2024-10-21', title: 'CSS Masterclass', color: '#2196F3' },
             ];
-        
+
             let currentMonth = new Date().getMonth();
             let currentYear = new Date().getFullYear();
-        
+
             function generateCalendar() {
                 const calendarGrid = document.getElementById('calendar-grid');
                 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
-        
-                
+
+
                 document.getElementById('current-month').innerText = new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' });
-        
-                
+
+
                 calendarGrid.innerHTML = '';
-        
+
                 for (let day = 1; day <= daysInMonth; day++) {
                     const dayElement = document.createElement('div');
                     dayElement.className = 'calendar-day';
                     dayElement.innerText = day;
-        
+
                     const event = events.filter(e => new Date(e.date).getDate() === day && new Date(e.date).getMonth() === currentMonth);
                     if (event.length) {
                         event.forEach(ev => {
@@ -197,43 +215,43 @@ <h3>Add Event</h3>
                             dayElement.appendChild(eventElement);
                         });
                     }
-        
+
                     // Highlight today
                     if (new Date().getDate() === day && new Date().getMonth() === currentMonth) {
                         dayElement.style.backgroundColor = '#d1ecf1';
                     }
-        
+
                     calendarGrid.appendChild(dayElement);
                 }
             }
-        
+
             // Event listeners for month navigation
             document.getElementById('prev-month').addEventListener('click', () => {
                 currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
                 currentYear = (currentMonth === 11) ? currentYear - 1 : currentYear;
                 generateCalendar();
             });
-        
+
             document.getElementById('next-month').addEventListener('click', () => {
                 currentMonth = (currentMonth === 11) ? 0 : currentMonth + 1;
                 currentYear = (currentMonth === 0) ? currentYear + 1 : currentYear;
                 generateCalendar();
             });
-        
+
             document.getElementById('add-event').addEventListener('click', () => {
                 const date = document.getElementById('event-date').value;
                 const title = document.getElementById('event-title').value;
                 const color = document.getElementById('event-color').value;
-        
+
                 if (date && title) {
                     events.push({ date, title, color });
                     generateCalendar();
                     document.getElementById('event-title').value = '';
                 }
             });
-        
+
             document.addEventListener('DOMContentLoaded', generateCalendar);
         </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/maintenance.html b/maintenance.html
new file mode 100644
index 0000000..038b9b1
--- /dev/null
+++ b/maintenance.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Code Social | Home</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="styles.css" type="text/css" />
+        <script src="script.js" defer></script>
+        <script type="text/javascript" src="darkmode.js" defer></script>
+        <!-- Tailwind CSS CDN -->
+        <link
+            href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+            rel="stylesheet"
+        />
+    </head>
+
+    <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
+            >
+
+            <!-- Hamburger Menu -->
+            <div class="hamburger-menu">
+                <div class="toggle-button">
+                    <img
+                        src="/images/hamburger.png"
+                        alt="open"
+                        id="hamburger-img"
+                    />
+                </div>
+            </div>
+
+            <!-- Navbar Links -->
+            <ul class="navbar-links flex">
+                <li class="ml-20">
+                    <a href="maintenance.html">Live Events</a>
+                    <ul class="dropdown">
+                        <li>
+                            <a href="maintenance.html">Why don't you react?</a>
+                        </li>
+                    </ul>
+                </li>
+                <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">Discord</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="maintenance.html">Meet Our Team</a>
+                </li>
+                <li>
+                    <a href="maintenance.html">Join Our Team</a>
+                </li>
+                <li>
+                    <a href="maintenance.html">Contact Us</a>
+                </li>
+                <li>
+                    <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"
+                        />
+                    </button>
+                    <!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
+                </li>
+            </ul>
+        </nav>
+        <section class="bg-white dark:bg-gray-900">
+            <div
+                class="py-8 px-4 mx-auto max-w-screen-md text-center lg:py-16 lg:px-12"
+            >
+                <svg
+                    class="mx-auto mb-4 w-10 h-10 text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
+                >
+                    <path
+                        fill="currentColor"
+                        d="M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z"
+                    />
+                </svg>
+                <h1
+                    class="mb-4 text-4xl font-bold tracking-tight leading-none text-gray-900 lg:mb-6 md:text-5xl xl:text-6xl dark:text-white"
+                >
+                    Under Maintenance/ Development
+                </h1>
+                <p
+                    class="font-light text-gray-500 md:text-lg xl:text-xl dark:text-gray-400"
+                >
+                    We are currently working on this page. Please check back
+                </p>
+            </div>
+        </section>
+    </body>
+</html>
diff --git a/script.js b/script.js
index eb89577..2e4b77c 100644
--- a/script.js
+++ b/script.js
@@ -1,25 +1,66 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const navbarItems = document.querySelectorAll('.navbar ul li');
-    const toggleButton = document.querySelector('.toggle-button');
-    const navbar = document.querySelector('.navbar ul');
-
-    navbarItems.forEach(item => {
-        item.addEventListener('mouseover', () => {
-            const dropdown = item.querySelector('.dropdown');
+document.addEventListener("DOMContentLoaded", () => {
+    const navbarItems = document.querySelectorAll(".navbar ul li");
+    const navbar = document.querySelector(".navbar ul");
+
+    const toggleButton = document.querySelector(".toggle-button");
+    const hamburgerImg = document.getElementById("hamburger-img");
+
+    navbarItems.forEach((item) => {
+        item.addEventListener("mouseover", () => {
+            const dropdown = item.querySelector(".dropdown");
             if (dropdown) {
-                dropdown.style.display = 'block';
+                dropdown.style.display = "block";
             }
         });
 
-        item.addEventListener('mouseout', () => {
-            const dropdown = item.querySelector('.dropdown');
+        item.addEventListener("mouseout", () => {
+            const dropdown = item.querySelector(".dropdown");
             if (dropdown) {
-                dropdown.style.display = 'none';
+                dropdown.style.display = "none";
             }
         });
     });
     // Toggle hamburger menu on small screens
-    toggleButton.addEventListener('click', () => {
-        navbar.classList.toggle('active');
-        });
-    });
\ No newline at end of file
+    toggleButton.addEventListener("click", () => {
+        navbar.classList.toggle("active");
+        const isNavbarActive = navbar.classList.contains("active");
+        hamburgerImg.src = isNavbarActive
+            ? "/images/close.png"
+            : "/images/hamburger.png";
+    });
+});
+
+// Select the button, icon, and body element
+const themeToggleBtn = document.getElementById("theme-toggle");
+const themeIcon = document.getElementById("theme-toggle-icon");
+
+const body = document.body;
+
+// Check localStorage for the user's theme preference
+const currentTheme = localStorage.getItem("theme");
+
+// Function to set the appropriate theme icon
+const setThemeIcon = (isDarkMode) => {
+    themeIcon.src = isDarkMode
+        ? "/images/dark-mode.png"
+        : "/images/light-mode.png";
+};
+
+// Apply the saved theme on page load
+if (currentTheme === "dark") {
+    body.classList.add("dark-mode");
+    setThemeIcon(true);
+} else {
+    setThemeIcon(false);
+}
+
+// Toggle dark mode on button click
+themeToggleBtn.addEventListener("click", function () {
+    const isDarkMode = body.classList.toggle("dark-mode");
+
+    // Save the user's preference to localStorage
+    localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+
+    // Change the icon based on the current theme
+    setThemeIcon(isDarkMode);
+});
diff --git a/styles.css b/styles.css
index 2292294..b065ca0 100644
--- a/styles.css
+++ b/styles.css
@@ -1,17 +1,41 @@
-
 body {
     font-family: Arial, sans-serif;
     margin-top: 64px;
     padding: 0;
     background-color: #f5f5f5; /* Light mode background */
     color: #000; /* Light mode text color */
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Dark mode */
+.dark-mode {
+    background-color: #2e2e2e;
+    color: white;
+}
+
+.theme-toggle-btn {
+    padding: 10px 20px;
+    margin: 20px;
+    cursor: pointer;
+}
+.theme-toggle-btn img {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.theme-toggle-btn img:hover {
+    transform: scale(1.1);
+    opacity: 0.8;
 }
 
-/* Dark Mode Styles */
-body.dark-mode {
-    background-color: #121212; /* Dark mode background */
-    color: #ffffff; /* Dark mode text color */
+#theme-toggle-icon {
+    width: 40px;
+    height: 40px;
 }
+/* Dark Mode Styles   */
+/* body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+} */
 
 /* Calendar Section Styles */
 .calendar-section {
@@ -22,7 +46,7 @@ body.dark-mode {
     gap: 20px;
 }
 
-.calendar-title{
+.calendar-title {
     text-align: center;
 }
 
@@ -35,7 +59,7 @@ body.dark-mode {
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 8px;
-    background-color: #f9f9f9;
+    /* background-color: #f9f9f9; */
     margin-top: 45px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Added shadow for depth */
 }
@@ -46,7 +70,8 @@ body.dark-mode {
     text-align: center; /* Centered title */
 }
 
-.event-form input, .event-form button {
+.event-form input,
+.event-form button {
     margin: 10px 0; /* Adjusted margins for better spacing */
     padding: 10px;
     font-size: 16px;
@@ -72,12 +97,12 @@ body.dark-mode {
 }
 
 .month-year-box {
-    padding: 10px 20px; 
-    background-color: #f0f0f0; 
-    border: 1px solid #ccc; 
-    border-radius: 5px; 
-    font-weight: bold; 
-    margin: 0 10px; 
+    padding: 10px 20px;
+    /* background-color: #f0f0f0; */
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-weight: bold;
+    margin: 0 10px;
 }
 
 /* Calendar Grid */
@@ -96,7 +121,7 @@ body.dark-mode {
     padding: 10px; /* Adjusted padding */
     text-align: center;
     position: relative;
-    background-color: #ffffff; /* Light mode day background */
+    /* /* background-color: #ffffff;   */
     height: 100px; /* Fixed height for uniformity */
     border-radius: 8px; /* Rounded corners */
     transition: background-color 0.3s ease; /* Smooth transition */
@@ -109,7 +134,7 @@ body.dark-mode .calendar-day {
 }
 
 .calendar-day:hover {
-    background-color: #e0e0e0; /* Light hover effect */
+    background-color: #e0e0e0;
 }
 
 body.dark-mode .calendar-day:hover {
@@ -118,8 +143,8 @@ body.dark-mode .calendar-day:hover {
 
 /* Event Styles */
 .event {
-    background-color: #4CAF50;
-    color: white;
+    background-color: #4caf50;
+    /* color: white; */
     padding: 5px; /* Adjusted padding */
     border-radius: 3px;
     font-size: 14px; /* Increased font size */
@@ -140,34 +165,32 @@ body.dark-mode .calendar-day:hover {
         flex-direction: column; /* Stack elements on smaller screens */
         align-items: center; /* Center the items */
     }
-    
+
     .event-form {
         width: 90%; /* Make form full width on small screens */
         margin: 10px 0; /* Adjust margin */
     }
 }
 
-     
-
 /* General Navbar Styling */
 .navbar {
-    background-color: #333;
+    /* background-color: #333; */
     padding: 10px 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    position: fixed;
+    /* position: fixed; */
     width: 100%;
-    top:0;
+    top: 0;
     margin-top: 0px;
-    z-index:1000;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 /* Center the menu items */
 .navbar ul {
     display: flex;
-    justify-content: space-around;  
+    justify-content: space-around;
     align-items: center;
     list-style: none;
     flex: 1;
@@ -175,7 +198,7 @@ body.dark-mode .calendar-day:hover {
 
 /* Move Hamburger Menu to Right */
 .hamburger-menu {
-    margin-left: auto;  
+    margin-left: auto;
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -190,18 +213,18 @@ body.dark-mode .calendar-day:hover {
 .logo:hover {
     transform: scale(1.1);
 }
-.darkmode {
+/* .darkmode {
     background-color: #fdf8f8;
     color: #070707;
     background-color: #401111;
     background-color: #908989;
     background-color: #2a2929;
     color: #401111;
-}
+} */
 
 .website-name {
     font-size: 1.8rem;
-    color: #fff;
+    /* color: #fff; */
     font-weight: bold;
     letter-spacing: 1.2px;
     margin-right: auto;
@@ -239,15 +262,13 @@ body.dark-mode .calendar-day:hover {
     display: inline-block;
 }
 
-.nav-links a {
-    text-decoration: none;
-    color: white;
+.navbar-links a:hover {
+    color: red;
 }
 
-
 .center-links li a {
     text-decoration: none;
-    color: #fff;
+    /* color: #fff; */
     padding: 8px 10px;
     border-radius: 4px;
     transition: background-color 0.3s ease, color 0.3s ease;
@@ -258,32 +279,32 @@ body.dark-mode .calendar-day:hover {
 
     color: #f1c40f; /* Add hover color effect */
 }
-
 /* Hamburger Menu Styling */
 .hamburger-menu .toggle-button {
     display: flex;
     position: relative;
     flex-direction: column;
     justify-content: space-between;
-    width: 25px;
-    height: 18px;
+    width: 40px;
+    height: 40px;
     cursor: pointer;
-    padding: 4px 6px;
+    padding: 4px;
     padding-right: 10px;
-    
 }
 
-.hamburger-menu .bar {
-    height: 5px;
+/* Apply a smooth transform transition for the icon */
+.hamburger-menu img {
     width: 30px;
-    display: flex;
-    align-items: center ;
-    justify-content: center;
-    background-color:rgb(255, 255, 255);
-    border-radius: 10px;
-    margin: 0;
-    transition: all 0.3s ease;
+    height: 30px;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
+
+/* Rotation or scaling effect when active */
+.hamburger-menu img.active {
+    transform: rotate(90deg); /* or scale(1.2) for a scaling effect */
+    opacity: 0.8;
+}
+
 .my-svg {
     width: 100px;
     height: 100px;
@@ -291,52 +312,54 @@ body.dark-mode .calendar-day:hover {
 
 /* Dropdown Menu */
 .dropdown {
-    display: none; 
-    position: absolute; 
-    background-color: #333;
+    display: none;
+    position: absolute;
+    /* background-color: #333; */
     padding: 10px;
     border-radius: 4px;
     z-index: 1;
 
-    top: 100%; 
-    right: 0; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    max-width: calc(100vw - 40px); 
-    overflow: hidden; 
+    top: 100%;
+    right: 0;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    max-width: calc(100vw - 40px);
+    overflow: hidden;
 }
 
 .center-links li:hover .dropdown {
     display: block;
 
-    top: 27px; 
-    right: 0%; 
+    top: 27px;
+    right: 0%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
-
 }
 
 .navbar ul li:hover .dropdown {
     display: block;
     opacity: 1;
+    background-color: #895d5d;
+    color: #fff;
+
     transform: translateY(0);
 }
 .dropdown li {
     margin: 10px 0;
-    list-style-type: disc; 
-    padding-left: 20px; 
+    list-style-type: disc;
+    padding-left: 20px;
 }
 
 .dropdown li a {
-    color: #fff;
+    /* color: #fff; */
+
     padding: 5px 5px;
     display: block;
     white-space: nowrap;
 }
 
 .dropdown li a:hover {
-    background-color: #555;
     border-radius: 4px;
 }
 .dropdown li a span:hover {
@@ -344,28 +367,10 @@ body.dark-mode .calendar-day:hover {
     border-radius: 4px;
 }
 
-
 /* Hamburger Menu */
 .hamburger-menu {
-    position: relative; /* Added for dropdown positioning */
-}
-
-.hamburger-menu .toggle-button {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 25px;
-    height: 18px;
-    cursor: pointer;
-    margin-left: 10px;
-}
-
-.hamburger-menu .bar {
-    height: 3px;
-    width: 25px;
-    background-color: #fff;
-    border-radius: 10px;
-    transition: all 0.3s ease;
+    position: relative;
+    margin-right: 5px; /* Added for dropdown positioning */
 }
 
 /* Dropdown Styling */
@@ -377,7 +382,7 @@ body.dark-mode .calendar-day:hover {
     border-radius: 4px;
     z-index: 1;
     top: 100%;
-    right: 0;  
+    right: 0;
     width: 200px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
@@ -393,11 +398,11 @@ body.dark-mode .calendar-day:hover {
 }
 
 .hamburger-menu .dropdown li a {
-    color: #fff;
-    padding: 10px 15px;  
+    /* color: #fff; */
+    padding: 10px 15px;
     text-decoration: none;
     display: block;
-    font-size: 1rem;  
+    font-size: 1rem;
 }
 
 .hamburger-menu .dropdown li a:hover {
@@ -421,7 +426,7 @@ body.dark-mode .calendar-day:hover {
 }
 
 body.dark-mode #theme-switch {
-    background-color: #333;
+    /* background-color: #333; */
     color: #fff;
     box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
 }
@@ -435,9 +440,9 @@ body.dark-mode #theme-switch {
     .navbar ul {
         flex-direction: column;
         align-items: flex-start;
-        display: none; 
+        display: none;
         width: 100%;
-        background-color: #333;
+        /* background-color: #333; */
         padding: 20px 0;
         position: absolute;
         top: 60px;
@@ -445,7 +450,7 @@ body.dark-mode #theme-switch {
     }
 
     .navbar ul li {
-        margin-left: 0; 
+        margin-left: 0;
     }
 
     .navbar ul li a {
@@ -453,45 +458,99 @@ body.dark-mode #theme-switch {
         width: 100%;
     }
 
-    .hamburger-menu .toggle-button {
-        display: block; 
-    }
-
     .navbar ul li:hover .dropdown {
-        position: relative; 
-        top: 0; 
-        left: 0; 
+        position: relative;
+        top: 0;
+        left: 0;
     }
 
     .hamburger-menu.active + ul {
-        display: flex; 
+        display: flex;
+    }
+
+    /* Dropdown for Hamburger */
+    .hamburger-menu .dropdown {
+        top: 50px;
+        right: 0;
+    }
+}
+
+/* Fixing Hamburger Menu Display */
+.hamburger-menu {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .hamburger-menu {
+        display: block;
+    }
+
+    .navbar ul {
+        display: none;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        background-color: #856fc6;
+        border-radius: 5px;
+        position: absolute;
+        top: 60px;
+        right: 0;
+        padding: 20px 0;
+    }
+
+    .navbar ul.active {
+        display: flex;
+    }
+
+    .navbar ul li {
+        margin-left: 0;
+        width: 100%;
+    }
+
+    .navbar ul li a {
+        padding: 10px 20px;
+        width: 100%;
     }
 
     /* Dropdown for Hamburger */
     .hamburger-menu .dropdown {
-        top: 50px; 
-        right: 0; 
+        display: none;
+    }
+
+    .hamburger-menu.active .dropdown {
+        display: block;
+    }
+
+    /* Fixing the space for the dropdown */
+    .hamburger-menu .dropdown li {
+        padding-left: 0;
+    }
+
+    .hamburger-menu .dropdown li a {
+        padding: 10px 15px;
+        display: block;
     }
 }
 
 /* About Community Section */
 .about-community {
     padding: 30px; /* Increased padding for a more spacious layout */
-    background-color: #f9f9f9;
-    color: #333;
+    /* background-color: #f9f9f9; */
+    /* color: #333; */
     font-size: 1.1rem;
     line-height: 1.8; /* Increased line height for better readability */
     text-align: center;
     margin-top: 20px;
     border-radius: 10px; /* Rounded corners */
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
+    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  */
+    /* Subtle shadow effect */
 }
 
 /* Title styling */
 .about-community h2 {
     font-size: 2.5rem; /* Increased font size */
     margin-bottom: 15px;
-    color: #333;
+    /* color: #333; */
     text-align: center;
     font-weight: bold; /* Bold title for emphasis */
     text-transform: uppercase; /* Uppercase for better prominence */
@@ -509,7 +568,7 @@ body.dark-mode #theme-switch {
 }
 
 .social-icons a {
-    margin: 0 15px; /* Increased space between icons */
+    margin: 0 15px;
     display: inline-block;
 }
 
@@ -540,13 +599,8 @@ body.dark-mode #theme-switch {
     }
 }
 
-
-
-
 /* Footer Styles */
 .footer {
-    background-color: #222;
-    color: #fff;
     padding: 20px 0;
 }
 
@@ -556,11 +610,11 @@ body.dark-mode #theme-switch {
     padding: 0 1rem;
 }
 
-.footer-grid {
+/* .footer-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 3rem;
-}
+} */
 
 .footer-logo-section {
     grid-column: span 2;
@@ -572,7 +626,7 @@ body.dark-mode #theme-switch {
 
 .footer-text {
     margin-top: 1.75rem;
-    color: #4B5563;
+    color: #9ca3af;
     line-height: 1.75rem;
 }
 
@@ -594,12 +648,13 @@ body.dark-mode #theme-switch {
 }
 
 .social-icon:hover {
-    background-color: #2563EB;
+    background-color: #2563eb;
 }
 
 .footer-section {
     padding: 4rem 0;
-    background-color: #f9fafb;
+
+    /* background-color: #f9fafb; */
 }
 
 .container {
@@ -610,11 +665,21 @@ body.dark-mode #theme-switch {
 
 .footer-grid {
     display: grid;
-    grid-template-columns: repeat(12, 1fr); /* Create a 12-column grid for flexibility */
-    gap: 2rem; /* Space between grid items */
-    align-items: start; /* Align items to start */
+    grid-column: 3;
 }
 
+.footer-item {
+    column-span: 1;
+}
+@media (min-width: 768px) {
+    .footer-grid {
+        grid-template-columns: repeat(12, 1fr);
+    }
+
+    .footer-item {
+        grid-column: span 3;
+    }
+}
 .footer-logo-section {
     grid-column: span 6; /* Logo section spans 6 columns on larger screens */
 }
@@ -623,7 +688,6 @@ body.dark-mode #theme-switch {
     grid-column: span 3; /* Links span 3 columns each */
 }
 
-
 /* Footer Logo */
 .footer-logo {
     height: 2.25rem;
@@ -631,7 +695,7 @@ body.dark-mode #theme-switch {
 
 .footer-text {
     margin-top: 1.75rem;
-    color: #4B5563;
+    /* color: #4b5563; */
     line-height: 1.75rem;
 }
 
@@ -665,7 +729,6 @@ body.dark-mode #theme-switch {
     content: none;
 }
 
-
 /* Footer Links */
 footer {
     text-align: center;
@@ -675,7 +738,7 @@ footer {
     font-size: 0.875rem;
     font-weight: 600;
     letter-spacing: 0.1em;
-    color: #9CA3AF;
+    /* color: #9ca3af; */
     margin-bottom: 1.5rem;
 }
 
@@ -689,27 +752,23 @@ footer {
 }
 
 .footer-list a {
-    color: #111827;
+    color: #9ca3af;
     text-decoration: none;
     transition: color 0.2s ease;
 }
 
-
 .footer-list a:hover {
-    color: #2563EB;
+    color: #2563eb;
 }
 
 /* Divider and Footer Bottom Text */
 .footer-divider {
     margin: 4rem 0;
-    border-top: 1px solid #E5E7EB;
+    border-top: 1px solid #e5e7eb;
 }
 
 .footer-bottom-text {
     text-align: center;
-    color: #6B7280;
+    color: #6b7280;
     font-size: 0.875rem;
 }
-
-
-
