diff --git a/images/code_social_logo.png b/images/code_social_logo.png
new file mode 100644
index 0000000..b08c2c2
Binary files /dev/null and b/images/code_social_logo.png differ
diff --git a/index.html b/index.html
index 6e3c8f9..02d2510 100644
--- a/index.html
+++ b/index.html
@@ -10,17 +10,110 @@
     <script type="text/javascript" src="darkmode.js" defer></script>
     <link rel="icon" type="image/png" href="images/logo copy.png">
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+
+
+
     <style>
         .circle {
-        height: 24px;
-        width: 24px;
-        border-radius: 50%;
-        position: fixed;
-        background-color: black;  /* Default color of circles */
-        pointer-events: none;     /* Prevent interaction with circles */
-        z-index: 9999;
-        transition: transform 0.1s ease-out;
+            height: 24px;
+            width: 24px;
+            border-radius: 50%;
+            position: fixed;
+            background-color: black;
+            /* Default color of circles */
+            pointer-events: none;
+            /* Prevent interaction with circles */
+            z-index: 9999;
+            transition: transform 0.1s ease-out;
+        }
+    </style>
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+    
+        body.dark-mode {
+            background-color: #333;
+            color: #ffffff;
+        }
+    
+        .top-btn {
+            display: none;
+            width: 50px;
+            height: 50px;
+            position: fixed;
+            bottom: 10px;
+            right: 0px;
+            background-color: #ab45e7;
+            color: #fff;
+            padding: 2px;
+            border: none;
+            margin-right: 36px;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+    
+        .top-btn:hover {
+            background-color: #0056b3;
+        }
+    
+        video#background-video {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
+            background-size: cover;
+        }
+    
+        .pagination-btns {
+            margin: 50px 0px;
+        }
+    
+        .pagination-btns button.btn {
+            border-radius: 5px;
+            outline: none;
+            margin: 5px 10px;
+            border: 1px solid rgb(146, 110, 110);
+        }
+    
+        .pagination-btns button.btn,
+        .pagination-btns button.btn i.bi {
+            font-size: 2rem;
+        }
+    
+    
+        #progress-container {
+            position: fixed;
+            top: 0px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            z-index: 99990;
+        }
+    
+        #progress-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 7px;
+            width: 0;
+            background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
+            box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+            transition: width 0.09s ease-in-out;
+            border-radius: 10px;
         }
     </style>
 </head>
@@ -51,59 +144,114 @@
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+    </div>
+    
+    <button class="top-btn" id="goToTopBtn" onclick="goToTop()">
+        <i class="fa-solid fa-chevron-up" style="color: #ffffff"></i>
+    </button>
+    <script>
+        // Get the button
+        var mybutton = document.getElementById("goToTopBtn");
+
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function () {
+            scrollFunction();
+        };
+
+        function scrollFunction() {
+            if (
+                document.body.scrollTop > 20 ||
+                document.documentElement.scrollTop > 20
+            ) {
+                mybutton.style.display = "block";
+            } else {
+                mybutton.style.display = "none";
+            }
+        }
+
+        // When the user clicks on the button, scroll to the top of the document
+        function goToTop() {
+            document.body.scrollTop = 0;
+            document.documentElement.scrollTop = 0;
+        }
+    </script>
+    
+    <script>
+
+        window.addEventListener('scroll', function () {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+    </script>
     <script>
         // Store the mouse coordinates
-const coords = { x: 0, y: 0 };
+        const coords = { x: 0, y: 0 };
 
-// Select all circles (you can add more circles to HTML as needed)
-const circles = document.querySelectorAll(".circle");
+        // Select all circles (you can add more circles to HTML as needed)
+        const circles = document.querySelectorAll(".circle");
 
-// Customize the colors for the circles (optional)
-const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
+        // Customize the colors for the circles (optional)
+        const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
 
-// Initialize circle positions
-circles.forEach((circle, index) => {
-    circle.x = 0;
-    circle.y = 0;
-    circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
-});
+        // Initialize circle positions
+        circles.forEach((circle, index) => {
+            circle.x = 0;
+            circle.y = 0;
+            circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
+        });
 
-// Update mouse coordinates on move
-window.addEventListener("mousemove", (e) => {
-    coords.x = e.clientX;
-    coords.y = e.clientY;
-});
+        // Update mouse coordinates on move
+        window.addEventListener("mousemove", (e) => {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
 
-// Animation loop for circles
-function animateCircles() {
-    let x = coords.x;
-    let y = coords.y;
+        // Animation loop for circles
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
 
-    circles.forEach((circle, index) => {
-        circle.style.left = `${x - 12}px`;   // Offset for center alignment
-        circle.style.top = `${y - 12}px`;
+            circles.forEach((circle, index) => {
+                circle.style.left = `${x - 12}px`;   // Offset for center alignment
+                circle.style.top = `${y - 12}px`;
 
-        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
+                circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
 
-        circle.x = x;
-        circle.y = y;
+                circle.x = x;
+                circle.y = y;
 
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-    });
+                const nextCircle = circles[index + 1] || circles[0];
+                x += (nextCircle.x - x) * 0.3;
+                y += (nextCircle.y - y) * 0.3;
+            });
 
-    requestAnimationFrame(animateCircles);
-}
+            requestAnimationFrame(animateCircles);
+        }
+
+        // Start animation
+        animateCircles();
 
-// Start animation
-animateCircles();
 
     </script>
 
     <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>
+
+            <div class="website-name tracking-tight ">
+                <!-- <div class="dynamic-text"> -->
+                <div class="static-text">
+                    CODE
+                </div>
+                <ul class="dynamic-text">
+                    <li> <span class="social">SOCIAL</span></li>
+                </ul>
+            </div>
+            
+        </a>
 
 
 
@@ -125,18 +273,17 @@
 
                 </ul>
             </li>
+        
          <!-- blog section -->
+            <!-- blog section -->
             <ul class="navbar-links flex  ">
-            <li class="ml-20">
-                <a href="blog.html">Blogs</a>
-                </ul>
+                <li class="ml-20">
+                    <a href="blog.html">Blogs</a>
+            </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>
+                <a href="join_community.html">Join Our Community</a>
+                
             </li>
             <li>
                 <a href="learning.html">Learning</a>
@@ -145,10 +292,12 @@
                     <li><a href="#">Mentorship Programs</a></li>
                     <li><a href="#">Peer-to-Peer Sessions</a></li>
                 </ul>
-            </li> 
+            </li>
             <li class="hamburger-menu">
                 <div class="toggle-button">
-                    <span class="about-text">About us</span>
+                    <span class="about-text">
+                        <a href="maintenance.html">About us</a>
+                    </span>
                     <button class="bar"></button>
                     <button class="bar"></button>
                     <button class="bar"></button>
@@ -160,7 +309,7 @@
                     <li><a href="#">Follow Us</a></li>
                 </ul>
             </li>
-            
+
             <li>
                 <a href="maintenance.html">Follow Us</a>
             </li>
@@ -178,13 +327,22 @@
     <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.
+            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">
@@ -231,139 +389,150 @@ <h3>Add Event</h3>
 <hr>
     <footer class="footer-section">
         <div class="container">
-          <!-- Logo and About Section -->
-          <div class="footer-logo-about">
-            <a href="index.html" class="footer-logo-link">
-              <img src="/images/logo.png" alt="Code Social Logo" class="footer-logo">
-              <span class="website-name">Code Social</span>
-            </a>
-            <p class="footer-about-text">
-              Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and opportunities to cultivate their skills, explore their interests, and <br>collaborate with like-minded peers.
-            </p>
-            <div class="social-icons">
-              <a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
-              <a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png" alt="Discord"></a>
-              <a href="https://www.linkedin.com/company/code-social/" target="_blank"><img src="./images/linkedin-icon.png" alt="LinkedIn"></a>
-            </div>
-          </div>
-      
-          <!-- Links Section -->
-          <div class="footer-links">
-            <div class="footer-column">
-              <p class="footer-title">Quick Links</p>
-              <ul class="footer-list">
-                <li><a href="#">About Us</a></li>
-                <li><a href="#">Events</a></li>
-                <li><a href="#">Community Guidelines</a></li>
-                <li><a href="#">Careers</a></li>
-              </ul>
+            <!-- Logo and About Section -->
+            <div class="footer-logo-about">
+                <a href="index.html" class="footer-logo-link">
+                    <img src="/images/logo.png" alt="Code Social Logo" class="footer-logo">
+                    <span class="website-name">Code Social</span>
+                </a>
+                <p class="footer-about-text">
+                    Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
+                    connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
+                    opportunities to cultivate their skills, explore their interests, and <br>collaborate with
+                    like-minded peers.
+                </p>
+                <div class="social-icons">
+                    <a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png"
+                            alt="WhatsApp"></a>
+                    <a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png"
+                            alt="Discord"></a>
+                    <a href="https://www.linkedin.com/company/code-social/" target="_blank"><img
+                            src="./images/linkedin-icon.png" alt="LinkedIn"></a>
+                </div>
             </div>
-            <div class="footer-column">
-              <p class="footer-title">Help</p>
-              <ul class="footer-list">
-                <li><a href="#">Contact Us</a></li>
-                <li><a href="#">Volunteer Opportunities</a></li>
-                <li><a href="#">Terms & Conditions</a></li>
-              </ul>
+
+            <!-- Links Section -->
+            <div class="footer-links">
+                <div class="footer-column">
+                    <p class="footer-title">Quick Links</p>
+                    <ul class="footer-list">
+                        <li><a href="#">About Us</a></li>
+                        <li><a href="#">Events</a></li>
+                        <li><a href="#">Community Guidelines</a></li>
+                        <li><a href="#">Careers</a></li>
+                    </ul>
+                </div>
+                <div class="footer-column">
+                    <p class="footer-title">Help</p>
+                    <ul class="footer-list">
+                        <li><a href="#">Contact Us</a></li>
+                        <li><a href="#">Volunteer Opportunities</a></li>
+                        <li><a href="#">Terms & Conditions</a></li>
+                    </ul>
+                </div>
             </div>
-          </div>
         </div>
-      
+
         <!-- Footer Bottom -->
         <hr class="footer-divider">
         <p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
-      </footer>
-
-
-        <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 = '';
-
-    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 // Keep this check to match the exact date
-        );
-
-        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);
-            });
-        }
+    </footer>
+
+
+   <script>
+    const events = [
+        { date: '2024-10-06', eventdetails: [{ title: 'React Workshop', color: '#4CAF50' }, { title: 'JavaScript Talk', color: '#FF5733' }] },
+        { date: '2024-10-14', eventdetails: [{ title: 'Node.js Webinar', color: '#FFC107' }] },
+        { date: '2024-10-21', eventdetails: [{ title: 'CSS Masterclass', color: '#2196F3' }, { title: 'Advanced CSS', color: '#FF5722' }] },
+    ];
+
+    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 => {
+                    ev.eventdetails.forEach(detail => {
+                        const eventElement = document.createElement('div');
+                        eventElement.className = 'event';
+                        eventElement.style.backgroundColor = detail.color || '#4CAF50';
+                        eventElement.innerText = detail.title;
+                        eventElement.addEventListener('click', (e) => {
+                            e.stopPropagation(); 
+                            alert(detail.title);
+                        });
+                        dayElement.appendChild(eventElement);
+                    });
+                });
+            }
 
-        // Highlight today
-        if (new Date().getDate() === day && new Date().getMonth() === currentMonth && new Date().getFullYear() === currentYear) {
-            dayElement.style.backgroundColor = '#d1ecf1';
-        }
+            if (new Date().getDate() === day && new Date().getMonth() === currentMonth && new Date().getFullYear() === currentYear) {
+                dayElement.style.backgroundColor = '#d1ecf1';
+            }
 
-        calendarGrid.appendChild(dayElement);
+            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 });
+
+    // 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('event-title').value = '';
-    }
-});
+    });
 
-document.addEventListener('DOMContentLoaded', generateCalendar);
+    document.getElementById('next-month').addEventListener('click', () => {
+        currentMonth = (currentMonth === 11) ? 0 : currentMonth + 1;
+        currentYear = (currentMonth === 0) ? currentYear + 1 : currentYear;
+        generateCalendar();
+    });
 
-        </script>
-        <script>
-            window.embeddedChatbotConfig = {
+    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) {
+            const existingEventIndex = events.findIndex(e => e.date === date);
+            if (existingEventIndex !== -1) {
+                events[existingEventIndex].eventdetails.push({ title, color });
+            } else {
+                events.push({ date, eventdetails: [{ title, color }] });
+            }
+            generateCalendar();
+            document.getElementById('event-title').value = '';
+        }
+    });
+
+    document.addEventListener('DOMContentLoaded', generateCalendar);
+</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>
+        }
+    </script>
+    <script src="https://www.chatbase.co/embed.min.js" chatbotId="j2Uy2CrJfZueGX7wNtJT_" domain="www.chatbase.co" defer>
+    </script>
+
 </body>
 
 </html>
diff --git a/join_community.css b/join_community.css
new file mode 100644
index 0000000..2698352
--- /dev/null
+++ b/join_community.css
@@ -0,0 +1,113 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    transition: background-color 0.3s ease;
+}
+
+.container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 90%;
+    max-width: 400px;
+    transition: background-color 0.3s ease;
+}
+
+.profile-pic {
+    width: 100px; /* Set the desired width */
+    height: auto; /* Maintain aspect ratio */
+    max-width: 100%; /* Ensure it fits within the parent element */
+    max-height: 100%; /* Ensure it fits within the parent element */
+    object-fit: cover; /* This will help maintain the aspect ratio while covering the box */
+}
+
+
+h1 {
+    font-size: 24px;
+    color: #333;
+    transition: color 0.3s ease;
+}
+
+.bio {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 20px;
+    transition: color 0.3s ease;
+}
+
+.links .link-btn {
+    display: block;
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    margin: 10px 0;
+    font-size: 18px;
+    transition: background-color 0.3s ease;
+}
+
+.links .link-btn:hover {
+    background-color: #45a049;
+}
+
+.theme-btn {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.theme-btn:hover {
+    background-color: #555;
+}
+
+/* Dark mode styles */
+.dark-mode {
+    background-color: #121212;
+}
+
+.dark-mode .container {
+    background-color: #1e1e1e;
+}
+
+.dark-mode h1 {
+    color: #f1f1f1;
+}
+
+.dark-mode .bio {
+    color: #aaa;
+}
+
+.dark-mode .link-btn {
+    background-color: #bb86fc;
+}
+
+.dark-mode .link-btn:hover {
+    background-color: #9d69e3;
+}
+
+.dark-mode .theme-btn {
+    background-color: #bb86fc;
+}
+
+.dark-mode .theme-btn:hover {
+    background-color: #9d69e3;
+}
diff --git a/join_community.html b/join_community.html
new file mode 100644
index 0000000..3370afb
--- /dev/null
+++ b/join_community.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LinkTree</title>
+    <link rel="stylesheet" href="join_community.css">
+</head>
+<body>
+    <div class="container">
+        <div class="profile">
+            <img src="images/code_social_logo.png" alt="Profile" class="profile-pic">
+            <h1>Stay Connected</h1>
+           
+        </div>
+        
+        <div class="links">
+            <a href="https://whatsapp.com" class="link-btn" target="_blank">WhatsApp</a>
+            <a href="https://instagram.com" class="link-btn" target="_blank">Instagram</a>
+            <a href="https://discord.com" class="link-btn" target="_blank">Discord</a>
+            <a href="https://youtube.com" class="link-btn" target="_blank">Youtube</a>
+            <a href="https://reddit.com" class="link-btn" target="_blank">Reddit</a>
+            
+        </div>
+
+        <button id="themeToggle" class="theme-btn">Switch to Dark Mode</button>
+    </div>
+
+    <script src="join_community.js"></script>
+</body>
+</html>
diff --git a/join_community.js b/join_community.js
new file mode 100644
index 0000000..63d9625
--- /dev/null
+++ b/join_community.js
@@ -0,0 +1,13 @@
+// JavaScript to toggle between light and dark themes
+const toggleThemeBtn = document.getElementById("themeToggle");
+
+toggleThemeBtn.addEventListener("click", () => {
+    document.body.classList.toggle("dark-mode");
+    
+    // Change the button text when toggling the theme
+    if (document.body.classList.contains("dark-mode")) {
+        toggleThemeBtn.textContent = "Switch to Light Mode";
+    } else {
+        toggleThemeBtn.textContent = "Switch to Dark Mode";
+    }
+});
diff --git a/learning.html b/learning.html
index 60ed602..f133d0b 100644
--- a/learning.html
+++ b/learning.html
@@ -105,10 +105,93 @@
       hr{
         margin-top: 50px;
       }
+      .circle {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    position: fixed;
+    background-color: black;  /* Default color of circles */
+    pointer-events: none;     /* Prevent interaction with circles */
+    z-index: 9999;
+    transition: transform 0.1s ease-out;
+    }
     </style>
   </head>
 
   <body>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <script>
+        // Store the mouse coordinates
+const coords = { x: 0, y: 0 };
+
+// Select all circles (you can add more circles to HTML as needed)
+const circles = document.querySelectorAll(".circle");
+
+// Customize the colors for the circles (optional)
+const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
+
+// Initialize circle positions
+circles.forEach((circle, index) => {
+    circle.x = 0;
+    circle.y = 0;
+    circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
+});
+
+// Update mouse coordinates on move
+window.addEventListener("mousemove", (e) => {
+    coords.x = e.clientX;
+    coords.y = e.clientY;
+});
+
+// Animation loop for circles
+function animateCircles() {
+    let x = coords.x;
+    let y = coords.y;
+
+    circles.forEach((circle, index) => {
+        circle.style.left = `${x - 12}px`;   // Offset for center alignment
+        circle.style.top = `${y - 12}px`;
+
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
+
+        circle.x = x;
+        circle.y = y;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+    });
+
+    requestAnimationFrame(animateCircles);
+}
+
+// Start animation
+animateCircles();
+
+    </script>
     <!-- Navbar Section -->
     <nav class="navbar">
       <a href="index.html" class="flex"
diff --git a/login.html b/login.html
index a1c003f..3a1c95a 100644
--- a/login.html
+++ b/login.html
@@ -105,10 +105,94 @@
                 font-size: 14px;
             }
         }
+
+        .circle {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    position: fixed;
+    background-color: black;  /* Default color of circles */
+    pointer-events: none;     /* Prevent interaction with circles */
+    z-index: 9999;
+    transition: transform 0.1s ease-out;
+    }
     </style>
 </head>
 
 <body>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <script>
+        // Store the mouse coordinates
+const coords = { x: 0, y: 0 };
+
+// Select all circles (you can add more circles to HTML as needed)
+const circles = document.querySelectorAll(".circle");
+
+// Customize the colors for the circles (optional)
+const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
+
+// Initialize circle positions
+circles.forEach((circle, index) => {
+    circle.x = 0;
+    circle.y = 0;
+    circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
+});
+
+// Update mouse coordinates on move
+window.addEventListener("mousemove", (e) => {
+    coords.x = e.clientX;
+    coords.y = e.clientY;
+});
+
+// Animation loop for circles
+function animateCircles() {
+    let x = coords.x;
+    let y = coords.y;
+
+    circles.forEach((circle, index) => {
+        circle.style.left = `${x - 12}px`;   // Offset for center alignment
+        circle.style.top = `${y - 12}px`;
+
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
+
+        circle.x = x;
+        circle.y = y;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+    });
+
+    requestAnimationFrame(animateCircles);
+}
+
+// Start animation
+animateCircles();
+
+    </script>
     <div class="login-container">
         <h2>Login</h2>
         <form id="loginForm">
diff --git a/signup.html b/signup.html
index 1c5c7cc..64610d6 100644
--- a/signup.html
+++ b/signup.html
@@ -78,19 +78,20 @@
             margin-bottom: 10px;
         }
 
-        .login-link {
-            text-align: center;
-            margin-top: 20px;
+        .password-strength {
+            margin-top: 10px;
         }
 
-        .login-link a {
-            color: #4CAF50;
-            text-decoration: none;
-            font-size: 14px;
+        .password-strength .strength-bar {
+            height: 5px;
+            background-color: #ddd;
+            border-radius: 5px;
+            transition: width 0.3s ease;
         }
 
-        .login-link a:hover {
-            text-decoration: underline;
+        .password-strength .strength-message {
+            font-size: 14px;
+            margin-top: 5px;
         }
 
         /* Responsive */
@@ -112,10 +113,95 @@
                 font-size: 14px;
             }
         }
+
+        .circle {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    position: fixed;
+    background-color: black;  /* Default color of circles */
+    pointer-events: none;     /* Prevent interaction with circles */
+    z-index: 9999;
+    transition: transform 0.1s ease-out;
+    }
     </style>
 </head>
 
 <body>
+
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <script>
+        // Store the mouse coordinates
+const coords = { x: 0, y: 0 };
+
+// Select all circles (you can add more circles to HTML as needed)
+const circles = document.querySelectorAll(".circle");
+
+// Customize the colors for the circles (optional)
+const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
+
+// Initialize circle positions
+circles.forEach((circle, index) => {
+    circle.x = 0;
+    circle.y = 0;
+    circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
+});
+
+// Update mouse coordinates on move
+window.addEventListener("mousemove", (e) => {
+    coords.x = e.clientX;
+    coords.y = e.clientY;
+});
+
+// Animation loop for circles
+function animateCircles() {
+    let x = coords.x;
+    let y = coords.y;
+
+    circles.forEach((circle, index) => {
+        circle.style.left = `${x - 12}px`;   // Offset for center alignment
+        circle.style.top = `${y - 12}px`;
+
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
+
+        circle.x = x;
+        circle.y = y;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+    });
+
+    requestAnimationFrame(animateCircles);
+}
+
+// Start animation
+animateCircles();
+
+    </script>
     <div class="signup-container">
         <h2>Signup</h2>
         <form id="signupForm">
@@ -128,6 +214,11 @@ <h2>Signup</h2>
             <input type="password" id="password" name="password" placeholder="Password" required>
             <div id="passwordError" class="error-message"></div>
 
+            <div class="password-strength">
+                <div id="strengthBar" class="strength-bar"></div>
+                <div id="strengthMessage" class="strength-message"></div>
+            </div>
+
             <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" required>
             <div id="confirmPasswordError" class="error-message"></div>
 
@@ -152,6 +243,49 @@ <h2>Signup</h2>
         const passwordError = document.getElementById('passwordError');
         const confirmPasswordError = document.getElementById('confirmPasswordError');
         const successMessage = document.getElementById('successMessage');
+        const strengthBar = document.getElementById('strengthBar');
+        const strengthMessage = document.getElementById('strengthMessage');
+
+        const updateStrengthMeter = (password) => {
+            let strength = 0;
+            if (password.length >= 8) strength++;
+            if (/[A-Z]/.test(password)) strength++;
+            if (/[a-z]/.test(password)) strength++;
+            if (/\d/.test(password)) strength++;
+            if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++;
+
+            // Update the strength bar
+            strengthBar.style.width = (strength * 20) + '%';
+
+            if (strength === 0) {
+                strengthBar.style.backgroundColor = '#ddd';
+                strengthMessage.textContent = '';
+            } else if (strength <= 2) {
+                strengthBar.style.backgroundColor = 'red';
+                strengthMessage.textContent = 'Weak password. Try adding numbers, symbols, and uppercase letters.';
+            } else if (strength <= 4) {
+                strengthBar.style.backgroundColor = 'orange';
+                strengthMessage.textContent = 'Moderate password. Add more complexity for a stronger password.';
+            } else {
+                strengthBar.style.backgroundColor = 'green';
+                strengthMessage.textContent = 'Strong password.';
+            }
+        };
+
+        passwordInput.addEventListener('input', (e) => {
+            const password = e.target.value;
+            updateStrengthMeter(password);
+        });
+
+        // Real-time email validation when user finishes typing
+        emailInput.addEventListener('blur', () => {
+            const emailPattern = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
+            if (!emailPattern.test(emailInput.value)) {
+                emailError.textContent = 'Please enter a valid email address.';
+            } else {
+                emailError.textContent = '';
+            }
+        });
 
         form.addEventListener('submit', (e) => {
             e.preventDefault();
@@ -171,15 +305,15 @@ <h2>Signup</h2>
             }
 
             // Email validation
-            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            const emailPattern = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
             if (!emailPattern.test(emailInput.value)) {
                 emailError.textContent = 'Please enter a valid email address.';
                 valid = false;
             }
 
             // Password validation
-            if (passwordInput.value.length < 6) {
-                passwordError.textContent = 'Password must be at least 6 characters long.';
+            if (passwordInput.value.length < 8) {
+                passwordError.textContent = 'Password must be at least 8 characters long.';
                 valid = false;
             }
 
@@ -194,23 +328,11 @@ <h2>Signup</h2>
                 successMessage.textContent = 'Signup successful!';
                 form.reset();
                 setTimeout(() => {
-                    window.location.href = 'index.html'; // Redirect to index.html after 2 seconds
-                }, 1000); // Adjust the timing as needed
+                    window.location.href = 'index.html';
+                }, 1000);
             }
         });
     </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>
diff --git a/styles.css b/styles.css
index 3a90f2a..7d9ae1b 100644
--- a/styles.css
+++ b/styles.css
@@ -270,9 +270,9 @@ body {
   border: 1px solid #ccc;
   padding: 10px; /* Adjusted padding */
   text-align: center;
-  position: relative;
+  /* position: relative; */
   /* /* background-color: #ffffff;   */
-  height: 100px; /* Fixed height for uniformity */
+  /* height: 100px; Fixed height for uniformity */
   border-radius: 8px; /* Rounded corners */
   transition: background-color 0.3s ease; /* Smooth transition */
 }
@@ -295,18 +295,20 @@ body.dark-mode .calendar-day:hover {
 .event {
   background-color: #4caf50;
   /* color: white; */
-  padding: 5px; /* Adjusted padding */
+  padding: 0 5px; /* Adjusted padding */
   border-radius: 3px;
-  font-size: 14px; /* Increased font size */
-  position: absolute;
-  bottom: 5px;
-  left: 5px;
-  right: 5px;
+  font-size: 12px; /* Increased font size */
   text-align: center;
+  height: 20px;
+  margin-bottom: 2px;
   cursor: pointer; /* Makes the event clickable */
   overflow: hidden; /* Prevents overflow of text */
   white-space: nowrap; /* Keeps text in a single line */
   text-overflow: ellipsis; /* Adds ellipsis for overflowed text */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 92px;
 }
 
 /* Responsive Adjustments */
@@ -333,7 +335,8 @@ body.dark-mode .calendar-day:hover {
   transition: background-color 0.3s;
   width: 100%;
   height: 12vh;
-  font-weight: 400;
+  font-weight: 750;
+  font-size: 18px;
   top: 0;
   margin-top: 0px;
   z-index: 1000;
@@ -374,7 +377,7 @@ body.dark-mode .calendar-day:hover {
 
 /* Logo Styling */
 .logo {
-  height: 40px;
+  height: 60px;
   transition: transform 0.3s ease;
 }
 
@@ -390,13 +393,97 @@ body.dark-mode .calendar-day:hover {
     color: #401111;
 } */
 
-.website-name {
+/* .website-name {
   font-size: 1.8rem;
   /* color: #fff; */
+  /* font-weight: bold;
+  letter-spacing: 1.2px;
+  margin-right: auto;
+  margin-left: 15px;
+} */ 
+.website-name {
+  display: flex; /* Flexbox to align items horizontally */
+  align-items: center; /* Vertically center the items */
+  margin-left: 20px;
+  margin-bottom: 5px;
+}
+ .website-name .static-text{
+  color:orangered;
+  font-size: 2.2rem;
   font-weight: bold;
   letter-spacing: 1.2px;
+ }
+ .website-name .dynamic-text {
   margin-right: auto;
   margin-left: 15px;
+   height: 50px;
+   line-height: 40px;
+   padding: 0;
+   /* overflow:hidden; */
+}
+.website-name li{
+  color: #000;
+  list-style: none;
+  font-size: 1.8rem;
+  font-weight: bold;
+  letter-spacing: 1.2px;
+  position: relative;
+  overflow: hidden;
+  width: fit-content;
+  /* display: inline-block; */
+  /* margin-right: 10px; */
+}
+
+
+.dynamic-text li span::after{
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  background:white ;
+  border-left: 2px solid black;
+  top: 0;
+  /* left: 0; */
+  animation: typing 1.5s steps(11) infinite;
+ 
+}
+@keyframes typing{
+  100%{
+    left: 100%;
+    margin: 0 -35px 0 35px;
+  }
+}
+.dark-mode .website-name .static-text{
+  color: orangered;
+}
+.dark-mode .website-name {
+  color: white;
+}
+.dark-mode .website-name li{
+  color: white;
+  list-style: none;
+  font-size: 1.8rem;
+  font-weight: bold;
+  letter-spacing: 1.2px;
+  position: relative;
+  overflow: hidden;
+  width: fit-content;
+  /* display: inline-block; */
+  /* margin-right: 10px; */
+}
+.dark-mode .dynamic-text li span::after{
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  background:#333 ;
+  border-left: 2px solid white;
+  top: 0;
+  /* left: 0; */
+  animation: typing 1.5s steps(11) infinite;
+ 
 }
 
 /* Center Links */
@@ -441,10 +528,14 @@ body.dark-mode .calendar-day:hover {
 
 .navbar ul li:hover {
   transform: scale(1.1);
+  color: red;
+  border-radius: 50px;
 }
 
+
 .navbar-links a:hover {
-  color: red;
+  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.5);;
+ 
 }
 
 .center-links li a {
@@ -501,7 +592,7 @@ body.dark-mode .calendar-day:hover {
   z-index: 1;
 
   top: 100%;
-  right: 0;
+  right:0;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   max-width: calc(100vw - 40px);
   overflow: hidden;
@@ -514,7 +605,7 @@ body.dark-mode .calendar-day:hover {
   right: 0%;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   opacity: 0;
-  transform: translateY(-10px);
+  transform: translateY(0);
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
@@ -645,12 +736,19 @@ body.dark-mode #theme-switch {
   .navbar ul li a {
     padding: 10px 20px;
     width: 100%;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  .navbar ul li a :hover{
+    background-color: #2563eb;
+    color:#000;
+    transform: scale(1.1);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
   }
 
   .navbar ul li:hover .dropdown {
-    position: relative;
-    top: 0;
-    left: 0;
+    /* position: relative; */
+    top: 100%;
+    /* left: 0; */
   }
 
   .hamburger-menu.active + ul {
@@ -668,6 +766,9 @@ body.dark-mode #theme-switch {
 .hamburger-menu {
   display: none;
 }
+.navbar-links .about-text :hover{
+  color: red;
+}
 
 @media (max-width: 768px) {
   .hamburger-menu {
@@ -696,14 +797,12 @@ body.dark-mode #theme-switch {
     width: 100%;
   }
 
-  .navbar ul li a {
-    padding: 10px 20px;
-    width: 100%;
-  }
+
 
   /* Dropdown for Hamburger */
   .hamburger-menu .dropdown {
     display: none;
+    /* align-items: center; */
   }
 
   .hamburger-menu.active .dropdown {
@@ -713,11 +812,13 @@ body.dark-mode #theme-switch {
   /* Fixing the space for the dropdown */
   .hamburger-menu .dropdown li {
     padding-left: 0;
+    text-align: center;
   }
 
   .hamburger-menu .dropdown li a {
     padding: 10px 15px;
     display: block;
+    text-align: center;
   }
 }
 
@@ -749,6 +850,7 @@ body.dark-mode #theme-switch {
 
 .about-community:hover {
   transform: translateY(-5px);
+/* color: red; */
 }
 
 .about-community::before {