diff --git a/about.html b/about.html
index f2a5c43..6bae3e0 100644
--- a/about.html
+++ b/about.html
@@ -1,130 +1,181 @@
 <!DOCTYPE html>
+<!-- Declare the document type as HTML5 -->
 <html lang="en">
+<!-- Define the HTML document with English as the primary language -->
 <head>
+  <!-- Specify character encoding for the document to support special characters -->
   <meta charset="UTF-8">
+  <!-- Ensure the page is responsive and scales correctly on all devices -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
+  <!-- Include Boxicons library for social media and other icons via CDN -->
   <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+  
+  <!-- Set the browser tab title for the About Us page -->
   <title>About Us - Fitness Website</title>
-  <link rel="stylesheet" href="about.css">
-  <link rel="stylesheet" href="navbar.css">
-  <link rel="stylesheet" href="footer.css">
-
+  
+  <!-- Link to external CSS files for styling different parts of the page -->
+  <link rel="stylesheet" href="about.css"> <!-- Styles specific to the About page -->
+  <link rel="stylesheet" href="navbar.css"> <!-- Styles for the navigation bar -->
+  <link rel="stylesheet" href="footer.css"> <!-- Styles for the footer section -->
+  
+  <!-- Define the favicon (icon displayed in the browser tab) -->
   <link rel="icon" href="pictures/Fitness.png" type="image/x-icon">
+  
+  <!-- Preconnect to Google Fonts to optimize font loading (if fonts are used) -->
   <link rel="preconnect" href="https://fonts.gstatic.com">
 </head>
 <body>
+  <!-- Placeholder div where the navigation bar will be dynamically inserted -->
   <div id="nav"></div>
+  
+  <!-- Header section to introduce the page content -->
   <header>
+    <!-- Load JavaScript for dark mode functionality specific to this page -->
     <script src="dark_about.js"></script>
+    
+    <!-- Container for header text content -->
     <div class="header-content">
+      <!-- Main heading for the About page -->
       <h1>Our Fitness Journey</h1>
+      <!-- Subtitle describing the team's purpose -->
       <p class="subtitle">We're a team of passionate coders dedicated to help you achieve your health and wellness goals.</p>
     </div>
   </header>
 
+  <!-- Section to describe the mission of the fitness website -->
   <section class="mission">
+    <!-- Container to center and style the mission content -->
     <div class="container">
+      <!-- Heading for the mission section -->
       <h2>Our Mission</h2>
-      <p class="mission-text">We believe fitness is more than just working out-it's a lifestyle that empowers you to be your best self. Our mission is to create a supportive community where everyone can discover their strength, build confidence, and transform their lives through expert guidance and innovative training techniques.</p>
+      <!-- Paragraph explaining the mission and vision -->
+      <p class="mission-text">We believe fitness is more than just working out—it’s a lifestyle that empowers you to be your best self. Our mission is to create a supportive community where everyone can discover their strength, build confidence, and transform their lives through expert guidance and innovative training techniques.</p>
     </div>
   </section>
 
+  <!-- Container for displaying team member cards -->
   <div id="cards-container">
-    <!-- Card content remains the same -->
+    <!-- Card for the first team member -->
     <div class="card" id="card1">
+      <!-- Overlay for card content, likely shown on hover -->
       <div class="overlay">
+        <!-- Team member's name -->
         <h4>Chetan Ajmani</h4>
+        <!-- Role or title of the team member -->
         <span class="team-role">JavaScript Developer & Interactive Features Expert</span>
-        <p>Bringing dynamic functionality to life, I specializes in JavaScript-driven interactivity, ensuring an engaging and responsive experience.</p>
+        <!-- Description of the team member's contributions -->
+        <p>Bringing dynamic functionality to life, I specialize in JavaScript-driven interactivity, ensuring an engaging and responsive experience.</p>
+        <!-- Container for social media links -->
         <div class="social-icons">
+          <!-- Google profile link with custom SVG icon -->
           <a href="#" class="google-icon">
+            <!-- SVG for Google icon with colored segments -->
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
-                <path fill="#EA4335"
-                    d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
-                <path fill="#4285F4"
-                    d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
-                <path fill="#FBBC05"
-                    d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
-                <path fill="#34A853"
-                    d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
-                <path fill="none" d="M0 0h48v48H0z" />
+              <path fill="#EA4335" d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
+              <path fill="#4285F4" d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
+              <path fill="#FBBC05" d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
+              <path fill="#34A853" d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
+              <path fill="none" d="M0 0h48v48H0z" />
             </svg>
           </a>
+          <!-- Twitter profile link using Boxicons -->
           <a href="#"><i class='bx bxl-twitter'></i></a>
+          <!-- GitHub profile link -->
           <a href="https://github.com/Chet07-R"><i class='bx bxl-github'></i></a>
+          <!-- LinkedIn profile link -->
           <a href="https://www.linkedin.com/in/chetan-ajmani-679b51249/"><i class='bx bxl-linkedin'></i></a>
         </div>
       </div>
     </div>
+    
+    <!-- Card for the second team member -->
     <div class="card" id="card2">
       <div class="overlay">
+        <!-- Team member's name -->
         <h4>Tanish Mehta</h4>
+        <!-- Role or title of the team member -->
         <span class="team-role">Front-End Specialist & UI/UX Expert</span> 
-        <p>Crafting intuitive and visually engaging designs,I ensures seamless user navigation with expert HTML and CSS styling. Their keen focus on user experience makes every interaction smooth.</p><br>
+        <!-- Description of the team member's contributions -->
+        <p>Crafting intuitive and visually engaging designs, I ensure seamless user navigation with expert HTML and CSS styling. Their keen focus on user experience makes every interaction smooth.</p><br>
+        <!-- Container for social media links -->
         <div class="social-icons">
+          <!-- Google profile link with custom SVG icon -->
           <a href="#" class="google-icon">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
-                <path fill="#EA4335"
-                    d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
-                <path fill="#4285F4"
-                    d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
-                <path fill="#FBBC05"
-                    d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
-                <path fill="#34A853"
-                    d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
-                <path fill="none" d="M0 0h48v48H0z" />
+              <path fill="#EA4335" d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
+              <path fill="#4285F4" d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
+              <path fill="#FBBC05" d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
+              <path fill="#34A853" d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
+              <path fill="none" d="M0 0h48v48H0z" />
             </svg>
           </a>
-          
+          <!-- Twitter profile link using Boxicons -->
           <a href="#"><i class='bx bxl-twitter'></i></a>
+          <!-- GitHub profile link -->
           <a href="https://github.com/TanishMehta23"><i class='bx bxl-github'></i></a>
-          <a href="https://www.linkedin.com/in/tanish-mehta-43bb102b8/"><i class='bx bxl-linkedin'></i></a>
+          <!-- LinkedIn profile link (note: href attribute seems incomplete) -->
+          <a href="https://www.linkedin.com/in/t="https://www.linkedin.com/in/tanish-mehta-43bb102b8/"><i class='bx bxl-linkedin'></i></a>
         </div>
       </div>
     </div>
 
+    <!-- Card for the third team member -->
     <div class="card" id="card3">
       <div class="overlay">
+        <!-- Team member's name -->
         <h4>Vansh Thakur</h4>
+        <!-- Role or title of the team member -->
         <span class="team-role">Content Strategist & Digital Optimization Specialist</span>
-        <p>Driving meaningful engagement, I curates compelling content, optimizes SEO, and ensures the website remains informative and impactful. Their expertise elevates the platforms reach and effectiveness.</p><br>
+        <!-- Description of the team member's contributions -->
+        <p>Driving meaningful engagement, I curate compelling content, optimize SEO, and ensure the website remains informative and impactful. Their expertise elevates the platform's reach and effectiveness.</p><br>
+        <!-- Container for social media links -->
         <div class="social-icons">
+          <!-- Google profile link with custom SVG icon -->
           <a href="#" class="google-icon">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
-                <path fill="#EA4335"
-                    d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
-                <path fill="#4285F4"
-                    d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
-                <path fill="#FBBC05"
-                    d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
-                <path fill="#34A853"
-                    d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
-                <path fill="none" d="M0 0h48v48H0z" />
+              <path fill="#EA4335" d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
+              <path fill="#4285F4" d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
+              <path fill="#FBBC05" d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
+              <path fill="#34A853" d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
+              <path fill="none" d="M0 0h48v48H0z" />
             </svg>
           </a>
+          <!-- Twitter profile link using Boxicons -->
           <a href="#"><i class='bx bxl-twitter'></i></a>
+          <!-- GitHub profile link -->
           <a href="https://github.com/Vans30m"><i class='bx bxl-github'></i></a>
+          <!-- LinkedIn profile link -->
           <a href="https://www.linkedin.com/in/vansh-thakur-b6bbbb33a/"><i class='bx bxl-linkedin'></i></a>
         </div>
       </div>
     </div>  
   </div>
 
+  <!-- Section to display statistics with animated counters -->
   <section class="stats">
+    <!-- Container to center and style the stats content -->
     <div class="container">
+      <!-- Grid layout for organizing stat items -->
       <div class="stats-grid">
+        <!-- First statistic item -->
         <div class="stat-item">
+          <!-- Counter with target value for animation -->
           <h3 class="counter" data-target="5">0</h3>
+          <!-- Description of the statistic -->
           <p>Years of Experience</p>
         </div>
+        <!-- Second statistic item -->
         <div class="stat-item">
           <h3 class="counter" data-target="1500">0</h3>
           <p>Happy Clients</p>
         </div>
+        <!-- Third statistic item -->
         <div class="stat-item">
           <h3 class="counter" data-target="25">0</h3>
           <p>Fitness Programs</p>
         </div>
+        <!-- Fourth statistic item -->
         <div class="stat-item">
           <h3 class="counter" data-target="98">0</h3>
           <p>Success Rate</p>
@@ -133,55 +184,70 @@ <h3 class="counter" data-target="98">0</h3>
     </div>
   </section>
 
+  <!-- Call-to-action section to encourage user sign-up -->
   <section class="cta">
+    <!-- Container to center and style the CTA content -->
     <div class="container">
+      <!-- Heading for the call-to-action -->
       <h2>Ready to Transform Your Life?</h2>
+      <!-- Description motivating users to join -->
       <p>Join our fitness community today and take the first step toward a healthier, stronger you. Our expert trainers are ready to guide you on your fitness journey.</p>
+      <!-- Button linking to the sign-in page -->
       <a href="signin.html" class="btn">Join Now</a>
     </div>
   </section>
 
-  <div id="navbar"></div> <!-- Placeholder for navbar -->
+  <!-- Placeholder div for navigation bar (possibly used for sticky or bottom navigation) -->
+  <div id="navbar"></div>
+  
+  <!-- Placeholder div where the footer will be dynamically inserted -->
   <div id="footer"></div>
+  
+  <!-- Chatbox feature for user interaction with an assistant -->
   <div class="chatbox">
+    <!-- Container for the chat interface -->
     <div class="chat-container">
+      <!-- Title for the chatbox -->
       <div class="h1">Talk to your own assistant...</div>
     </div>
+    <!-- Input area for user queries -->
     <div class="input-area">
+      <!-- Text input for user to type questions -->
       <input type="text" class="prompt" placeholder="Ask anything">
-      <button type="button" class="arrow"><img src="pictures/btn.svg" alt="img"></button>
+      <!-- Button to submit the query with an SVG icon -->
+      <button type="button" class="arrow"><img src="pictures/btn.svg" alt="Send button"></button>
     </div>
   </div>
+
+  <!-- Script to dynamically load the navigation bar from an external HTML file -->
   <script>
+    // Fetch the navbar.html file and insert its content into the navbar div
     fetch('navbar.html')
-        .then(response => response.text())
-        .then(data => {
-            document.getElementById('navbar').innerHTML = data;
-        });
-</script>
-
+      .then(response => response.text())
+      .then(data => {
+        document.getElementById('navbar').innerHTML = data;
+      });
+  </script>
 
+  <!-- Script to dynamically load the footer from an external HTML file -->
   <script>
+    // Fetch the footer.html file and insert its content into the footer div
     fetch('footer.html')
-        .then(response => response.text())
-        .then(data => {
-            document.getElementById('footer').innerHTML = data;
-        });
-</script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
-integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
-crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
-<!-- make sure to put gsap link before linking script.js -->    
-<!--gsap cdn is a js library for scrolling animations-->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
-integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
-crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- plugin for gsap-->
+      .then(response => response.text())
+      .then(data => {
+        document.getElementById('footer').innerHTML = data;
+      });
+  </script>
 
+  <!-- Include GSAP library for creating smooth animations -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-  <script src="about.js"></script>
-  <script src="chatbot.js"></script>
-  <script src="navbar.js"></script>
+  <!-- Include GSAP ScrollTrigger plugin for scroll-based animations -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+  <!-- Custom JavaScript files for page-specific functionality -->
+  <script src="about.js"></script> <!-- Handles animations and logic for the About page -->
+  <script src="chatbot.js"></script> <!-- Manages the chatbot functionality -->
+  <script src="navbar.js"></script> <!-- Controls navigation bar behavior -->
 </body>
 </html>
\ No newline at end of file
