diff --git a/assets/html/about.html b/assets/html/about.html
index 8c46a1a79..32f0587bf 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -10,7 +10,7 @@
     rel="stylesheet" />
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../css/login.css" />
-  
+
   <link rel="stylesheet" href="assets/css/test-style.css">
 
   <!-- <link rel="stylesheet" href="../css/login.css" /> -->
@@ -47,7 +47,7 @@
     }
 
     .about h2 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 24px;
       font-weight: bold;
       margin-bottom: 20px;
@@ -55,7 +55,7 @@
     }
 
     .about p {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 16px;
       line-height: 1.6;
       margin-bottom: 20px;
@@ -71,7 +71,7 @@
     }
 
     .stats-box h2 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 24px;
       font-weight: bold;
       margin-bottom: 20px;
@@ -85,19 +85,19 @@
     }
 
     .stat {
-      
+
       text-align: center;
     }
 
     .stat h3 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 36px;
       font-weight: bold;
       margin-bottom: 5px;
     }
 
     .stat p {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 16px;
     }
 
@@ -111,19 +111,21 @@
     }
 
     .mission-values h2 {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 24px;
       font-weight: bold;
       margin-bottom: 20px;
       text-align: center;
     }
+
     .about-us-heading {
-  text-align: center;
-  margin-bottom: 5rem;
-  margin-top: 160px; /* Adjust this value to position it below the header */
-  color: var(--charcoal);
-  
-}
+      text-align: center;
+      margin-bottom: 5rem;
+      margin-top: 160px;
+      /* Adjust this value to position it below the header */
+      color: var(--charcoal);
+
+    }
 
 
     .about-us-block {
@@ -146,14 +148,14 @@
     }
 
     .about-us-blk-text {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 10px;
     }
 
     .about-us-blk-para {
-      color:var(--sonic-silver);
+      color: var(--sonic-silver);
       font-size: 16px;
       line-height: 1.6;
     }
@@ -280,8 +282,10 @@ <h1 class="about-us-heading">About Us</h1>
     <div class="container">
       <section class="about">
 
-          <h2>About SwapReads</h2>
-          <p>SwapReads is an online platform dedicated to connecting book lovers and facilitating the exchange of books. Our mission is to promote reading culture and make it easier for readers to discover new books, share their favorites, and connect with fellow book enthusiasts.</p>
+        <h2>About SwapReads</h2>
+        <p>SwapReads is an online platform dedicated to connecting book lovers and facilitating the exchange of books.
+          Our mission is to promote reading culture and make it easier for readers to discover new books, share their
+          favorites, and connect with fellow book enthusiasts.</p>
       </section>
       <section class="stats-box">
         <div class="stats-container">
@@ -301,349 +305,442 @@ <h3 id="stat3">0</h3>
             </div>
           </div>
         </div>
-        
-    </section>
-    <section class="mission-values">
-      <h2>Our Mission and Values</h2>
-    <div class="about-us-block">
-      <div class="about-us-community">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="community-img" src="../images/book.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Book Swapping</div>
-        </div>
-        <p class="about-us-blk-para">Easily list the books you’re willing to exchange and browse through a vast
-          collection of available titles, facilitating smooth and hassle-free book swaps with other members.</p>
-      </div>
-      <div class="about-us-product">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="product-img" src="../images/community.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Community Engagement</div>
-        </div>
-        <p class="about-us-blk-para">Join a vibrant community of book lovers through discussion forums, reading groups,
-          and event participation, fostering a collaborative and engaging literary environment.</p>
-      </div>
-    </div>
-    <div class="about-us-block">
-      <div class="about-us-location">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="location-img" src="../images/read.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Reading Recommendations</div>
+
+      </section>
+      <section class="mission-values">
+        <h2>Our Mission and Values</h2>
+        <div class="about-us-block">
+          <div class="about-us-community">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="community-img" src="../images/book.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Book Swapping</div>
+            </div>
+            <p class="about-us-blk-para">Easily list the books you’re willing to exchange and browse through a vast
+              collection of available titles, facilitating smooth and hassle-free book swaps with other members.</p>
+          </div>
+          <div class="about-us-product">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="product-img" src="../images/community.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Community Engagement</div>
+            </div>
+            <p class="about-us-blk-para">Join a vibrant community of book lovers through discussion forums, reading
+              groups,
+              and event participation, fostering a collaborative and engaging literary environment.</p>
+          </div>
         </div>
-        <p class="about-us-blk-para">Receive personalized book suggestions based on your reading history and
-          preferences, ensuring you always have a new and exciting read lined up for your next literary adventure.</p>
-      </div>
-      <div class="about-us-event">
-        <div style="display: flex; align-items: center; gap: 1rem;">
-          <img id="event-img" src="../images/bookshelf.png" alt=""
-            style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-          <div class="about-us-blk-text">Virtual Bookshelf</div>
+        <div class="about-us-block">
+          <div class="about-us-location">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="location-img" src="../images/read.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Reading Recommendations</div>
+            </div>
+            <p class="about-us-blk-para">Receive personalized book suggestions based on your reading history and
+              preferences, ensuring you always have a new and exciting read lined up for your next literary adventure.
+            </p>
+          </div>
+          <div class="about-us-event">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="event-img" src="../images/bookshelf.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Virtual Bookshelf</div>
+            </div>
+            <p class="about-us-blk-para">Organize and manage your virtual bookshelf, keeping track of books you've read,
+              want to read, and are currently reading. Easily access your collection and track your reading progress.
+            </p>
+          </div>
         </div>
-        <p class="about-us-blk-para">Organize and manage your virtual bookshelf, keeping track of books you've read,
-          want to read, and are currently reading. Easily access your collection and track your reading progress.</p>
-      </div>
     </div>
-  </div>
-</section>
-  <section class="team">
-    <h2>Meet Our Team</h2>
-    <div class="team-cards">
+    </section>
+    <section class="team">
+      <h2>Meet Our Team</h2>
+      <div class="team-cards">
         <!-- Team member cards will go here -->
         <div class="team-member">
-            <img src="../images/pic1.jpeg" alt="Team Member 1">
-            <div class="member-info">
-                <h3>Anurag Verma</h3>
-                <p>Project Admin</p>
-            </div>
+          <img src="../images/pic1.jpeg" alt="Team Member 1">
+          <div class="member-info">
+            <h3>Anurag Verma</h3>
+            <p>Project Admin</p>
+          </div>
         </div>
         <div class="team-member">
-            <img src="../images/pic2.jpeg" alt="Team Member 2">
-            <div class="member-info">
-                <h3>Aman Raj</h3>
-                <p>Mentor</p>
-            </div>
+          <img src="../images/pic2.jpeg" alt="Team Member 2">
+          <div class="member-info">
+            <h3>Aman Raj</h3>
+            <p>Mentor</p>
+          </div>
         </div>
         <div class="team-member">
           <img src="../images/pic3.jpeg" alt="Team Member 2">
           <div class="member-info">
-              <h3>Riti Chandak</h3>
-              <p>Mentor</p>
-          </div>
-      </div>
-        <!-- Add more team member cards as needed -->
-    </div>
-</section>
-  <footer>
-    <div class="foot-top">
-      <div class="foot-left">
-        <div class="desc">
-
-          <div><a href="#" class="logo">SwapReads</a></div>
-          <div>
-            <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
-              lovers
-              seeking to swap and
-
-              discover new literary gems.
-              Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
-              the
-              world of literature—all on one convenient platform. Join us and dive into a universe of endless
-              possibilities!
-            </p>
+            <h3>Riti Chandak</h3>
+            <p>Mentor</p>
           </div>
         </div>
+        <!-- Add more team member cards as needed -->
       </div>
-      <div class="foot-middle">
-        <h2>Quick Links</h2>
-        <ul>
-          <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
-          <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-          <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-          <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-          <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
-          <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
-        </ul>
-      </div>
-      <div class="social-icons">
-        <!-- <h5>Newsletter</h5> -->
-        <!-- <div class="input-newletter">
+    </section>
+
+    </head>
+
+    <body>
+      <section class="contributors">
+        <h2>Our Contributors</h2>
+        <div class="contributor-cards" id="contributor-cards">
+          <!-- Contributor cards will be inserted here -->
+        </div>
+        <div class="pagination" id="pagination">
+          <!-- Pagination buttons will be inserted here -->
+        </div>
+      </section>
+
+    <style>
+      .contributors {
+        margin: 0 auto;
+        background: var(--seashell);
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border: 1px solid #ddd;
+        max-width: 1200px;
+      }
+
+      .contributor-cards {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .contributor-member {
+        color: var(--sonic-silver);
+        text-align: center;
+        background-color: var(--seashell);
+        border: 1px solid #ddd;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        max-width: 250px;
+        margin: 10px;
+        flex: 1 1 calc(33.333% - 40px);
+        box-sizing: border-box;
+      }
+
+      .contributor-member:hover {
+        scale: 1.1;
+        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+      }
+
+      .contributor-member img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        display: block;
+        margin: 0 auto 10px auto;
+      }
+
+      .contributor-member h3 {
+        font-size: 1rem;
+        margin: 10px 0 5px;
+      }
+
+      .contributor-member p {
+        font-size: 0.9rem;
+        margin: 0;
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+      }
+
+      .pagination button {
+        margin: 0 5px;
+        padding: 10px 15px;
+        border: 1px solid #ccc;
+        background-color: #f9f9f9;
+        cursor: pointer;
+      }
+
+      .pagination button.active {
+        background-color: #ddd;
+      }
+    </style>
+
+      <footer>
+        <div class="foot-top">
+          <div class="foot-left">
+            <div class="desc">
+
+              <div><a href="#" class="logo">SwapReads</a></div>
+              <div>
+                <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+                  lovers
+                  seeking to swap and
+
+                  discover new literary gems.
+                  Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures
+                  in
+                  the
+                  world of literature—all on one convenient platform. Join us and dive into a universe of endless
+                  possibilities!
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="foot-middle">
+            <h2>Quick Links</h2>
+            <ul>
+              <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
+              <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
+              <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
+              <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
+              <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
+              <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
+            </ul>
+          </div>
+          <div class="social-icons">
+            <!-- <h5>Newsletter</h5> -->
+            <!-- <div class="input-newletter">
           <label for="newsletter"><h5>Newsletter</h5></label>
           <input placeholder="Enter your email" type="email" ></input>
           <button class="btn-subs">Subscribe</button>
         </div> -->
 
-        <form type="newsletter">
-          <label for="email">Subscribe to our Newsletter</label>
-          <div class="row-flex">
+            <form type="newsletter">
+              <label for="email">Subscribe to our Newsletter</label>
+              <div class="row-flex">
 
 
 
-            <!--email write-->
-            <input type="news" value="" name="email" placeholder="email address" required>
-            <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
-          </div>
-        </form>
-        <style>
-          .icons .icon i {
-            font-size: 24px;
-            /* Set the default font size for icons */
-            transition: all 0.3s ease;
-            /* Add transition for smooth animation */
-          }
+                <!--email write-->
+                <input type="news" value="" name="email" placeholder="email address" required>
+                <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn">
+              </div>
+            </form>
+            <style>
+              .icons .icon i {
+                font-size: 24px;
+                /* Set the default font size for icons */
+                transition: all 0.3s ease;
+                /* Add transition for smooth animation */
+              }
+
+              .icons .icon:hover i {
+                transform: scale(1.2);
+                /* Scale the icon on hover */
+              }
+
+              .icons .icon:hover .fab.fa-facebook-square {
+                color: #3B5998;
+                /* Change to Facebook color on hover */
+              }
+
+              .icons .icon:hover .fa-brands.fa-square-x-twitter {
+                color: #090e11;
+                /* Change to Twitter color on hover */
+              }
+
+              .icons .icon:hover .fab.fa-instagram-square {
+                background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+                background-clip: text;
+                border-radius: 20%;
+                transform: scale(1.5);
+                color: transparent;
+                /* Change to Instagram color on hover */
+              }
+
+              .icons .icon:hover .fab.fa-youtube-square {
+                color: #C31A1E;
+                /* Change to YouTube color on hover */
+              }
+            </style>
+
+            <div class="icons">
+              <a href="#">
+                <div class="icon">
+                  <i class="fab fa-facebook-square" title="Facebook" style="cursor: pointer;"></i>
+                </div>
+              </a>
+
+              <a href="#">
+                <div class="icon">
+                  <i class="fa-brands fa-square-x-twitter" title="X" style="cursor: pointer;"></i>
+                </div>
+              </a>
+
+              <a href="#">
+                <div class="icon">
+                  <i class="fab fa-instagram-square" title="Instagram" style="cursor: pointer;"></i>
+                </div>
+              </a>
+
+              <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
+                <div class="icon">
+                  <i class="fab fa-youtube-square" style="cursor: pointer;"></i>
+                </div>
+              </a>
+            </div>
+            <div class="footer-bottom">
+              <p class="copyright" style="text-align: center">
+                &copy;
+                <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
+                Hackers.
+              </p>
+            </div>
 
-          .icons .icon:hover i {
-            transform: scale(1.2);
-            /* Scale the icon on hover */
-          }
+            <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
+              <div class="circle1">
+                <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
+                  class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+                  <path
+                    d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+                </svg>
+              </div>
+            </div>
 
-          .icons .icon:hover .fab.fa-facebook-square {
-            color: #3B5998;
-            /* Change to Facebook color on hover */
-          }
+      </footer>
 
-          .icons .icon:hover .fa-brands.fa-square-x-twitter {
-            color: #090e11;
-            /* Change to Twitter color on hover */
-          }
+      <script>
+        // Function to animate counting from 0 to a target number
+        function countUp(target, elementId) {
+          let count = 0;
+          const increment = target / 100; // Increment by a fraction of the target number
+
+          const interval = setInterval(() => {
+            count += increment;
+            document.getElementById(elementId).textContent = Math.round(count) + "+"; // Add the "+" sign
+
+            // Stop the interval when count reaches or exceeds the target number
+            if (count >= target) {
+              clearInterval(interval);
+              document.getElementById(elementId).textContent = target + "+"; // Ensure final value is exact with the "+"
+              // Start counting animation again after a delay
+              setTimeout(() => {
+                countUp(target, elementId);
+              }, 3000); // Delay before restarting the animation (adjust as needed)
+            }
+          }, 20); // Adjust interval speed as needed
+        }
 
-          .icons .icon:hover .fab.fa-instagram-square {
-            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-            background-clip: text;
-            border-radius: 20%;
-            transform: scale(1.5);
-            color: transparent;
-            /* Change to Instagram color on hover */
-          }
+        // Start counting animation for each stat
+        countUp(150, 'stat1'); // Example target number for stat 1
+        countUp(100, 'stat2'); // Example target number for stat 2
+        countUp(500, 'stat3'); // Example target number for stat 3
 
-          .icons .icon:hover .fab.fa-youtube-square {
-            color: #C31A1E;
-            /* Change to YouTube color on hover */
-          }
-        </style>
 
-        <div class="icons">
-          <a href="#">
-            <div class="icon">
-              <i class="fab fa-facebook-square" title="Facebook" style="cursor: pointer;"></i>
-            </div>
-          </a>
+        // JavaScript for hover effects
+        document.querySelectorAll('.about-us-community').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/bookhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/book.png';
+          });
+        });
 
-          <a href="#">
-            <div class="icon">
-              <i class="fa-brands fa-square-x-twitter" title="X" style="cursor: pointer;"></i>
-            </div>
-          </a>
+        document.querySelectorAll('.about-us-event').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/bookshelfhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/bookshelf.png';
+          });
+        });
 
-          <a href="#">
-            <div class="icon">
-              <i class="fab fa-instagram-square" title="Instagram" style="cursor: pointer;"></i>
-            </div>
-          </a>
+        document.querySelectorAll('.about-us-product').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/communityhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/community.png';
+          });
+        });
 
-          <a href="https://www.youtube.com/@anuragbytes" title="YouTube">
-            <div class="icon">
-              <i class="fab fa-youtube-square" style="cursor: pointer;"></i>
-            </div>
-          </a>
-        </div>
-        <div class="footer-bottom">
-          <p class="copyright" style="text-align: center">
-            &copy;
-            <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
-            Hackers.
-          </p>
-        </div>
+        document.querySelectorAll('.about-us-location').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/readhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/read.png';
+          });
+        });
 
-        <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
-          <div class="circle1">
-            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
-              class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-              <path
-                d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
-            </svg>
-          </div>
-        </div>
+        //Custom Cursor
+
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        const colors = [
+          "#ffb56b",
+          "#fdaf69",
+          "#f89d63",
+          "#f59761",
+          "#ef865e",
+          "#ec805d",
+          "#e36e5c",
+          "#df685c",
+          "#d5585c",
+          "#d1525c",
+          "#c5415d",
+          "#c03b5d",
+          "#b22c5e",
+          "#ac265e",
+          "#9c155f",
+          "#950f5f",
+          "#830060",
+          "#7c0060",
+          "#680060",
+          "#60005f",
+          "#48005f",
+          "#3d005e"
+        ];
+
+        circles.forEach(function (circle, index) {
+          circle.x = 0;
+          circle.y = 0;
+          circle.style.backgroundColor = colors[index % colors.length];
+        });
+
+        window.addEventListener("mousemove", function (e) {
+          coords.x = e.clientX;
+          coords.y = e.clientY;
+
+        });
+
+        function animateCircles() {
+
+          let x = coords.x;
+          let y = coords.y;
 
-  </footer>
-
-  <script>
-    // Function to animate counting from 0 to a target number
-function countUp(target, elementId) {
-  let count = 0;
-  const increment = target / 100; // Increment by a fraction of the target number
-  
-  const interval = setInterval(() => {
-    count += increment;
-    document.getElementById(elementId).textContent = Math.round(count) + "+"; // Add the "+" sign
-    
-    // Stop the interval when count reaches or exceeds the target number
-    if (count >= target) {
-      clearInterval(interval);
-      document.getElementById(elementId).textContent = target + "+"; // Ensure final value is exact with the "+"
-      // Start counting animation again after a delay
-      setTimeout(() => {
-        countUp(target, elementId);
-      }, 3000); // Delay before restarting the animation (adjust as needed)
-    }
-  }, 20); // Adjust interval speed as needed
-}
-
-// Start counting animation for each stat
-countUp(150, 'stat1'); // Example target number for stat 1
-countUp(100, 'stat2'); // Example target number for stat 2
-countUp(500, 'stat3'); // Example target number for stat 3
-
-
-    // JavaScript for hover effects
-    document.querySelectorAll('.about-us-community').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/bookhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/book.png';
-      });
-    });
-
-    document.querySelectorAll('.about-us-event').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/bookshelfhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/bookshelf.png';
-      });
-    });
-
-    document.querySelectorAll('.about-us-product').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/communityhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/community.png';
-      });
-    });
-
-    document.querySelectorAll('.about-us-location').forEach(function (element) {
-      element.addEventListener('mouseover', function () {
-        element.querySelector('img').src = '../images/readhover.png';
-      });
-      element.addEventListener('mouseleave', function () {
-        element.querySelector('img').src = '../images/read.png';
-      });
-    });
-
-      //Custom Cursor
-      
-      const coords = { x: 0, y: 0 };
-          const circles = document.querySelectorAll(".circle");
-      
-          const colors = [
-            "#ffb56b",
-            "#fdaf69",
-            "#f89d63",
-            "#f59761",
-            "#ef865e",
-            "#ec805d",
-            "#e36e5c",
-            "#df685c",
-            "#d5585c",
-            "#d1525c",
-            "#c5415d",
-            "#c03b5d",
-            "#b22c5e",
-            "#ac265e",
-            "#9c155f",
-            "#950f5f",
-            "#830060",
-            "#7c0060",
-            "#680060",
-            "#60005f",
-            "#48005f",
-            "#3d005e"
-          ];
-      
           circles.forEach(function (circle, index) {
-            circle.x = 0;
-            circle.y = 0;
-            circle.style.backgroundColor = colors[index % colors.length];
-          });
-      
-          window.addEventListener("mousemove", function (e) {
-            coords.x = e.clientX;
-            coords.y = e.clientY;
-      
+            circle.style.left = x - 12 + "px";
+            circle.style.top = y - 12 + "px";
+
+            circle.style.scale = (circles.length - index) / circles.length;
+
+            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;
           });
-      
-          function animateCircles() {
-      
-            let x = coords.x;
-            let y = coords.y;
-      
-            circles.forEach(function (circle, index) {
-              circle.style.left = x - 12 + "px";
-              circle.style.top = y - 12 + "px";
-      
-              circle.style.scale = (circles.length - index) / circles.length;
-      
-              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);
-          }
-      
-          animateCircles();
-      
-          document.addEventListener('DOMContentLoaded', function () {
+
+          requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+
+        document.addEventListener('DOMContentLoaded', function () {
           var switchCheckbox = document.querySelector('.switch-checkbox');
           var body = document.body;
           var navbar = document.querySelector('.navbar');
-      
+
           switchCheckbox.addEventListener('change', function () {
             if (switchCheckbox.checked) {
               body.classList.add('dark-mode');
@@ -657,30 +754,112 @@ <h2>Quick Links</h2>
       </script>
       <script>
         document.addEventListener("DOMContentLoaded", function () {
-            const backToTopButton = document.getElementById('back-to-top-container');
-        
-            function checkButtonVisibility() {
-                if (window.innerWidth > 100 && window.scrollY > 100) {
-                    backToTopButton.style.display = 'block';
-                } else {
-                    backToTopButton.style.display = 'none';
-                }
+          const backToTopButton = document.getElementById('back-to-top-container');
+
+          function checkButtonVisibility() {
+            if (window.innerWidth > 100 && window.scrollY > 100) {
+              backToTopButton.style.display = 'block';
+            } else {
+              backToTopButton.style.display = 'none';
             }
-        
-            window.addEventListener('scroll', checkButtonVisibility);
-            window.addEventListener('resize', checkButtonVisibility);
-        
-            backToTopButton.addEventListener('click', function () {
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth' 
-                });
+          }
+
+          window.addEventListener('scroll', checkButtonVisibility);
+          window.addEventListener('resize', checkButtonVisibility);
+
+          backToTopButton.addEventListener('click', function () {
+            window.scrollTo({
+              top: 0,
+              behavior: 'smooth'
             });
-            checkButtonVisibility();
+          });
+          checkButtonVisibility();
         });
-        
       </script>
 
-</body>
+      <script>
+
+        // Function for the contributors section
+
+        const owner = 'anuragverma108';
+        const repo = 'SwapReads';
+        const contributorsPerPage = 8;
+        let contributors = [];
+        let currentPage = 1;
+
+        async function fetchContributors() {
+          const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+          if (!response.ok) {
+            console.error('Failed to fetch contributors:', response.statusText);
+            return;
+          }
+          contributors = await response.json();
+          displayContributors();
+          createPaginationButtons();
+        }
+
+        function displayContributors() {
+          const container = document.getElementById('contributor-cards');
+          container.innerHTML = '';
+          const start = (currentPage - 1) * contributorsPerPage;
+          const end = start + contributorsPerPage;
+          const currentContributors = contributors.slice(start, end);
+
+          currentContributors.forEach(contributor => {
+            const card = document.createElement('div');
+            card.className = 'contributor-member';
+
+            const img = document.createElement('img');
+            img.src = contributor.avatar_url;
+            img.alt = contributor.login;
+
+            const name = document.createElement('h3');
+            name.textContent = contributor.login;
+
+            const contributions = document.createElement('p');
+            contributions.textContent = `${contributor.contributions} contributions`;
+
+            card.appendChild(img);
+            card.appendChild(name);
+            card.appendChild(contributions);
+            container.appendChild(card);
+          });
+        }
+
+        function createPaginationButtons() {
+          const paginationContainer = document.getElementById('pagination');
+          paginationContainer.innerHTML = '';
+          const totalPages = Math.ceil(contributors.length / contributorsPerPage);
+
+          for (let i = 1; i <= totalPages; i++) {
+            const button = document.createElement('button');
+            button.textContent = i;
+            button.classList.add('pagination-button');
+            if (i === currentPage) {
+              button.classList.add('active');
+            }
+            button.addEventListener('click', () => {
+              currentPage = i;
+              displayContributors();
+              updatePaginationButtons();
+            });
+            paginationContainer.appendChild(button);
+          }
+        }
+
+        function updatePaginationButtons() {
+          const buttons = document.querySelectorAll('.pagination-button');
+          buttons.forEach(button => {
+            button.classList.remove('active');
+            if (parseInt(button.textContent) === currentPage) {
+              button.classList.add('active');
+            }
+          });
+        }
+
+        fetchContributors();
+      </script>
+
+    </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e83da24f7..2c408ae7e 100644
--- a/index.html
+++ b/index.html
@@ -168,7 +168,7 @@
       letter-spacing: 1px;
       transition: ease-in-out;
     }
-  
+
 
 
     /* Dark Mode Styles */
@@ -409,7 +409,7 @@
       }
     </script>
 
-    
+
 
     </li>
     </ul>
@@ -433,7 +433,7 @@
       </button>
     </div>
 
-    
+
 
     </div>
   </header>
@@ -1248,7 +1248,7 @@ <h2 class="h2 section-title has-underline">
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
           style="border:0; margin-bottom:30px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
       </iframe>
-      
+
         </div>
 
       </section>
@@ -1527,11 +1527,11 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
   <footer>
     <div class="foot-top">
       <div class="foot-left">
-  
+
         <div class="desc">
 <!--google translate-->
           <div id="google_translate_element"></div>
- 
+
           <script type="text/javascript">
               function googleTranslateElementInit() {
                   new google.translate.TranslateElement(
@@ -1540,23 +1540,12 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
                   );
               }
           </script>
-       
+
           <script type="text/javascript"
                   src=
       "https://translate.google.com/translate_a/element.js?
       cb=googleTranslateElementInit">
           </script>
-          <!-- <a href="#" class="logo">SwapReads</a>
-          <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book lovers
-            seeking to swap and
-
-            discover new literary gems.
-            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
-            world of literature—all on one convenient platform. Join us and dive into a universe of endless
-            possibilities!
-          </p> -->
-
-
           <div><a href="#" class="logo">SwapReads</a></div>
           <div>
             <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
@@ -1692,7 +1681,7 @@ <h2>Quick Links</h2>
             <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
             Hackers.
           </p>
-          
+
         </div> -->
 
         <div id="back-to-top-container" onclick="lenis.scrollTo('#home')">
@@ -1712,13 +1701,13 @@ <h2>Quick Links</h2>
             <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
             Hackers.
           </p>
-          
+
         </div>
 
-       
+
 
   </footer>
-  
+
   <!-- Footer ended-->
   <script src="./assets/js/script.js" defer></script>