diff --git a/index.html b/index.html
index 2b46022..e983ad3 100644
--- a/index.html
+++ b/index.html
@@ -14,89 +14,57 @@
 
 <body>
 
+    <!-- Navigation Bar -->
     <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" class="flex items-center">
+            <img src="images/logo.png" alt="Code Social Logo" 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">
-
+                <img src="images/hamburger.png" alt="Menu" 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  ">
+        <ul class="navbar-links flex">
+            <li><a href="maintenance.html">Live Events</a>
+                <ul class="dropdown">
                     <li><a href="maintenance.html">Why don't you react?</a></li>
-
                 </ul>
             </li>
-         <!-- blog section -->
-            <ul class="navbar-links flex  ">
-            <li class="ml-20">
-                <a href="blog.html">Blogs</a>
-                </ul>
-            </li>
-            <li class="community">
-                <a href="maintenance.html">Join Our Community</a>
+            <li><a href="blog.html">Blogs</a></li>
+            <li><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="learning.html">Learning</a>
+            <li><a href="learning.html">Learning</a>
                 <ul class="dropdown">
                     <li><a href="#">Free Learning Resources</a></li>
                     <li><a href="#">Mentorship Programs</a></li>
                     <li><a href="#">Peer-to-Peer Sessions</a></li>
                 </ul>
-            </li> 
-            <li class="hamburger-menu">
-                <div class="toggle-button">
-                    <span class="about-text">About us</span>
-                    <button class="bar"></button>
-                    <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>
-            
-            <li>
-                <a href="maintenance.html">Follow 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 id="theme-toggle" class="theme-toggle-btn">
+                    <img src="images/dark-mode.png" alt="Theme Toggle" 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>
 
-
+    <!-- About Community Section -->
     <section class="about-community">
         <h2>About Community</h2>
         <p>
             Code Social Community is a learning-focused community dedicated to providing individuals with resources, opportunities to learn, grow, and develop their skills in various technologies. The community helps individuals to explore their interests, expand their knowledge, and connect with like-minded people.
-
-            At Code Social Community, members have access to a wealth of resources and learning opportunities, including free learning sessions, mentorship programs, and peer-to-peer learning sessions. The community also provides opportunities for members to network and connect with others in the tech industry.
-
-            In addition to its learning and networking opportunities, Code Social Community also serves as a hub for resources, tools, and other materials that can help members enhance their skills and stay up-to-date with the latest trends and best practices in the tech industry.
-
-            Whether you are just starting out in your career or are a seasoned professional looking to expand your knowledge and skills, this community offers something for everyone. With its focus on hands-on learning, mentorship, and networking opportunities, Code Social Community is an excellent place to connect with like-minded individuals, build your skills, and take your career to the next level.
         </p>
         <!-- Social Media Icons -->
         <div class="social-icons">
@@ -112,11 +80,11 @@ <h2>About Community</h2>
             <a href="https://github.com/Code-Social" target="_blank">
                 <img src="images/gitHub.png" alt="Github">
             </a>
-
         </div>
     </section>
 
-    <h2 class="calendar-title text-3xl mt-10   font-semibold">Event Calendar</h2>
+    <!-- Event Calendar Section -->
+    <h2 class="calendar-title text-3xl mt-10 font-semibold">Event Calendar</h2>
 
     <section class="calendar-section">
         <div class="event-form">
@@ -141,41 +109,34 @@ <h3>Add Event</h3>
         </div>
     </section>
 
-
-    <br>
-
+    <!-- Footer Section -->
     <footer>
-        <section class="footer-section border border-gray-500 shadow-lg  ">
+        <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 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 py-5    ">
+                    <div class="footer-logo-section footer-item my-5">
+                        <a href="index.html" class="flex w-full justify-center">
+                            <img src="images/logo.png" alt="Code Social Logo" 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.
+                        </p>
+                        <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 -->
+                    <!-- Quick Links Section -->
                     <div class="footer-links footer-item">
                         <p class="footer-title">Quick Links</p>
                         <ul class="footer-list">
@@ -187,7 +148,7 @@ <h3>Add Event</h3>
                         </ul>
                     </div>
 
-                    <!-- Help Links -->
+                    <!-- Help Links Section -->
                     <div class="footer-links footer-item">
                         <p class="footer-title">Help</p>
                         <ul class="footer-list">
@@ -202,98 +163,100 @@ <h3>Add Event</h3>
                 <p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code-social</p>
             </div>
         </section>
+    </footer>
+
+    <!-- JavaScript Code -->
+    <script>
+        // Calendar Logic
+        const events = [
+            { date: '2024-10-06', title: 'React Workshop', color: '#4CAF50' },
+            { 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 && 
+                    new Date(e.date).getFullYear() === currentYear
+                );
+
+                if (event.length) {
+                    event.forEach(ev => {
+                        const eventElement = document.createElement('div');
+                        eventElement.className = 'event';
+                        eventElement.style.backgroundColor = ev.color || '#4CAF50';
+                        eventElement.innerText = ev.title;
+                        dayElement.appendChild(eventElement);
+                    });
+                }
+
+                calendarGrid.appendChild(dayElement);
+            }
+        }
 
+        document.getElementById('prev-month').addEventListener('click', () => {
+            currentMonth--;
+            if (currentMonth < 0) {
+                currentMonth = 11;
+                currentYear--;
+            }
+            generateCalendar();
+        });
+
+        document.getElementById('next-month').addEventListener('click', () => {
+            currentMonth++;
+            if (currentMonth > 11) {
+                currentMonth = 0;
+                currentYear++;
+            }
+            generateCalendar();
+        });
 
+        generateCalendar();
 
-        <script>
-           const events = [
-    { date: '2024-10-06', title: 'React Workshop', color: '#4CAF50' },
-    { 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 = '';
+        // Dark Mode Toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeIcon = document.getElementById('theme-toggle-icon');
 
-    for (let day = 1; day <= daysInMonth; day++) {
-        const dayElement = document.createElement('div');
-        dayElement.className = 'calendar-day';
-        dayElement.innerText = day;
+        const userTheme = localStorage.getItem('theme') || 'light';
+        document.body.classList.add(userTheme);
+        themeIcon.src = userTheme === 'dark' ? 'images/light-mode.png' : 'images/dark-mode.png';
 
-        const event = events.filter(e => 
-            new Date(e.date).getDate() === day && 
-            new Date(e.date).getMonth() === currentMonth && 
-            new Date(e.date).getFullYear() === currentYear // Keep this check to match the exact date
-        );
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.body.classList.contains('dark') ? 'dark' : 'light';
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
 
-        if (event.length) {
-            event.forEach(ev => {
-                const eventElement = document.createElement('div');
-                eventElement.className = 'event';
-                eventElement.style.backgroundColor = ev.color || '#4CAF50';
-                eventElement.innerText = ev.title;
-                eventElement.addEventListener('click', () => alert(ev.title)); // Simple alert for now, can be modal or tooltip.
-                dayElement.appendChild(eventElement);
-            });
-        }
+            document.body.classList.remove(currentTheme);
+            document.body.classList.add(newTheme);
+            localStorage.setItem('theme', newTheme);
 
-        // Highlight today
-        if (new Date().getDate() === day && new Date().getMonth() === currentMonth && new Date().getFullYear() === currentYear) {
-            dayElement.style.backgroundColor = '#d1ecf1';
-        }
+            themeIcon.src = newTheme === 'dark' ? 'images/light-mode.png' : 'images/dark-mode.png';
+        });
 
-        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 = '';
-    }
-});
+        // Toggle Hamburger Menu
+        document.querySelector('.hamburger-menu .toggle-button').addEventListener('click', () => {
+            const navbarLinks = document.querySelector('.navbar-links');
+            navbarLinks.classList.toggle('active');
+        });
 
-document.addEventListener('DOMContentLoaded', generateCalendar);
+    </script>
 
-        </script>
-        <script>
-            window.embeddedChatbotConfig = {
-            chatbotId: "j2Uy2CrJfZueGX7wNtJT_",
-            domain: "www.chatbase.co"
-            }
-            </script>
-            <script
-            src="https://www.chatbase.co/embed.min.js"
-            chatbotId="j2Uy2CrJfZueGX7wNtJT_"
-            domain="www.chatbase.co"
-            defer>
-            </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
