diff --git a/Contributors/contributor.css b/Contributors/contributor.css
new file mode 100644
index 00000000..a9aadd71
--- /dev/null
+++ b/Contributors/contributor.css
@@ -0,0 +1,262 @@
+body {
+  font-family: "Poppins";
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.container {
+  text-align: center;
+}
+
+.title {
+  display: inline-block;
+  font-size: 3em;
+  margin-bottom: 20px;
+  padding: 10px;
+  color: #f6f2f6;
+  text-shadow: 1px 1px 2px rgb(184, 45, 235), 0 0 1em rgba(216, 130, 200, 0.617),
+    0 0 0.2em rgba(99, 1, 124, 0.623);
+  /* border-radius: 20px; */
+  /* background-color: rgba(209, 209, 255, 0.8); */
+}
+
+.contributors-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 20px;
+  gap: 40px;
+}
+
+.contributor-card {
+  width: 300px;
+  position: relative;
+  overflow: hidden;
+  max-width: calc(55% - 16px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f9e2f9;
+  /* border: 1px solid #00ebdf; */
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+  text-decoration: none;
+  color: inherit;
+  /* margin-bottom: 16px;  */
+}
+
+.contributor-card:hover {
+  transform: scale(1.02);
+  box-shadow: 1px 1px 23px rgba(170, 1, 175, 0.915);
+  border: none;
+  cursor: pointer;
+}
+
+.contributor-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(132deg, #5103fa 50%, rgb(218, 46, 146) 51%);
+  /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transform: translate(-100%, -100%);
+  opacity: 0;
+  z-index: -1;
+}
+
+.contributor-card:hover::before {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.contributor-card img {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  margin-bottom: 10px;
+  transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out;
+}
+
+.contributor-card:hover img {
+  border: 2px solid rgb(255, 234, 0);
+  box-shadow: -1px 2px 27px rgb(0, 217, 255);
+}
+
+/* 
+    .contributor-card h2 {
+      margin: 0 0 10px;
+    } */
+/* 
+    .contributor-card p {
+    } */
+
+.contributor-card h2 {
+  font-size: 1.2em;
+  color: #040404;
+  position: relative;
+  z-index: 1;
+  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+.contributor-card p {
+  font-size: 1.2em;
+  color: #040404;
+  position: relative;
+  z-index: 1;
+  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+  margin: 0 0 10px;
+}
+
+.contributor-card:hover h2 {
+  text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108),
+    0 0 0.8em rgb(0, 14, 108);
+  color: white;
+}
+
+.contributor-card:hover p {
+  text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168),
+    0 0 0.3em rgb(134, 136, 250);
+  color: white;
+
+  /* font-weight: 400; */
+}
+
+/* dark mode */
+/* Toggle button styles */
+.toggle-container {
+  position: fixed; /* Change this as needed for positioning */
+  top: 25px;
+  right: 40px;
+}
+
+.toggle {
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+  border-radius: 999px;
+  color: hsl(240, 100%, 95%);
+  transition: all 500ms;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.toggle:checked {
+  background-color: #333;
+}
+.toggle:checked:before {
+  transform: translateX(25px);
+}
+
+body {
+  background-color: #f8f9fa;
+  color: #212529;
+}
+
+.nav-container {
+  background-color: #ffffff;
+}
+
+.footer {
+  background-color: #ffffff;
+  color: #212529;
+}
+
+/* Dark mode styles */
+body.dark-mode {
+  background-color: #333;
+  color: #ffffff;
+}
+
+body.dark-mode .nav-container {
+  background-color: #343a40;
+}
+
+body.dark-mode .footer {
+  background-color: #343a40;
+  color: #ffffff;
+}
+#toggle {
+  display: inline-block;
+  border-radius: 50px;
+  transition: all 0.4s ease-in-out;
+  padding: 10px 10px;
+  background-color: transparent;
+  border: 2px solid #c6c9d8bf;
+  color: #c6c9d8bf;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-decoration: none;
+}
+.toggle-container {
+  --size: 2rem;
+  width: var(--size);
+  height: var(--size);
+}
+
+.toggle {
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+  border-radius: 999px;
+  color: hsl(240, 100%, 95%);
+  transition: all 500ms;
+  position: absolute;
+  top: 25px;
+  right: 0;
+
+  &:checked {
+    --ray-size: calc(var(--size) * -0.4);
+    --offset-orthogonal: calc(var(--size) * 0.65);
+    --offset-diagonal: calc(var(--size) * 0.45);
+    transform: scale(0.75);
+    color: hsl(40, 100%, 50%);
+    box-shadow: inset 0 0 0 var(--size),
+      calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+      var(--offset-orthogonal) 0 0 var(--ray-size),
+      0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+      0 var(--offset-orthogonal) 0 var(--ray-size),
+      calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0
+        var(--ray-size),
+      var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+      calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+      var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
+  }
+}
+
+/* Apply fade-down animation to the toggle container */
+.toggle-container[data-aos="fade-down"] {
+  transition: opacity 500ms ease-in-out;
+  opacity: 0;
+}
+
+.toggle-container[data-aos="fade-down"].aos-animate {
+  opacity: 1;
+}
+body.dark-mode .contributor-card {
+  background: #0e1525;
+}
+body.dark-mode .contributor-card p {
+  color: white;
+}
+body.dark-mode .contributor-card h2 {
+  color: white;
+}
diff --git a/Contributors/contributor.html b/Contributors/contributor.html
new file mode 100644
index 00000000..a55f7ac2
--- /dev/null
+++ b/Contributors/contributor.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contributors</title>
+    <link rel="stylesheet" href="contributor.css" />
+    <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>
+      html {
+        scroll-behavior: smooth;
+      }
+      body {
+        background: linear-gradient(90deg, #ff459f, #ff9532, #1a0259);
+      }
+      .top-btn {
+        display: none;
+        width: 50px;
+        height: 50px;
+        position: fixed;
+        bottom: 10px;
+        right: 0px;
+        background-color: #59038a;
+        color: #fff;
+        padding: 2px;
+        border: none;
+        margin-right: 36px;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+
+      .top-btn:hover {
+        background-color: #f689f2;
+      }
+
+      .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;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
+        <input id="themeToggle" class="toggle" type="checkbox" />
+      </div>
+      <h1 class="title">Our Contributors</h1>
+      <div id="contributors" class="contributors-grid"></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 src="contributor.js"></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>
+  </body>
+</html>
diff --git a/Contributors/contributor.js b/Contributors/contributor.js
new file mode 100644
index 00000000..017e37a7
--- /dev/null
+++ b/Contributors/contributor.js
@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const contributorsContainer = document.getElementById("contributors");
+
+  async function fetchContributors() {
+    try {
+      const response = await fetch(
+        `https://api.github.com/repos/swaraj-das/Collect-your-GamingTools/contributors`
+      );
+      const contributors = await response.json();
+
+      contributorsContainer.innerHTML = "";
+      contributors.forEach((contributor) => {
+        const contributorCard = document.createElement("div");
+        contributorCard.className = "contributor-card";
+
+        contributorCard.innerHTML = `
+            <a href="${contributor.html_url}" target="_blank" rel="noopener noreferrer">
+              <img src="${contributor.avatar_url}" alt="${contributor.login}">
+            </a>
+            <h2>${contributor.login}</h2>
+            <p>Contributions: ${contributor.contributions}</p>
+          `;
+
+        contributorsContainer.appendChild(contributorCard);
+      });
+    } catch (error) {
+      console.error("Error fetching contributors:", error);
+    }
+  }
+
+  fetchContributors();
+});
+
+// Dark mode (remains unchanged)
+document.addEventListener("DOMContentLoaded", () => {
+  const toggleCheckbox = document.getElementById("themeToggle");
+  const body = document.body;
+
+  if (localStorage.getItem("dark-mode") === "enabled") {
+    body.classList.add("dark-mode");
+    toggleCheckbox.checked = true;
+  } else {
+    toggleCheckbox.checked = false;
+  }
+
+  toggleCheckbox.addEventListener("change", () => {
+    if (toggleCheckbox.checked) {
+      body.classList.add("dark-mode");
+      localStorage.setItem("dark-mode", "enabled");
+    } else {
+      body.classList.remove("dark-mode");
+      localStorage.setItem("dark-mode", "disabled");
+    }
+  });
+});
diff --git a/SignUp/signup.css b/SignUp/signup.css
index 18c0f8d8..562e3578 100644
--- a/SignUp/signup.css
+++ b/SignUp/signup.css
@@ -257,4 +257,92 @@ a {
     text-shadow: none;
     font-family: 'Trebuchet MS', Arial, sans-serif;
     
-}
\ No newline at end of file
+}
+
+/* ... existing styles ... */
+
+.signup-button, .google-signup-button {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+.signup-button {
+  background-color: #f4a261;
+  color: white;
+}
+
+.signup-button:hover {
+  background-color: #e76f51;
+}
+
+.google-signup-button {
+  background-color: white;
+  color: #757575;
+  border: 1px solid #dadce0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.google-signup-button:hover {
+  background-color: #f8f9fa;
+}
+
+.google-signup-button img {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+
+.or-divider {
+  text-align: center;
+  margin: 20px 0;
+  color: #757575;
+  position: relative;
+  overflow: hidden;
+}
+
+.or-divider::before,
+.or-divider::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 45%;
+  height: 1px;
+  background-color: #dadce0;
+}
+
+.or-divider::before {
+  left: 0;
+}
+
+.or-divider::after {
+  right: 0;
+}
+
+.or-divider span {
+  display: inline-block;
+  position: relative;
+  padding: 0 10px;
+  background-color: #000; /* Match this with your form background color */
+}
+
+.links {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.links a {
+  color: #e76f51;
+  text-decoration: none;
+}
+
+.links a:hover {
+  text-decoration: underline;
+}
diff --git a/SignUp/signup.html b/SignUp/signup.html
index 2e5c4029..99f3d935 100644
--- a/SignUp/signup.html
+++ b/SignUp/signup.html
@@ -34,11 +34,19 @@ <h1>Create Your Account</h1>
             </div>
             <button type="submit" class="signup-button">Sign Up</button>
         </form>
+        <div class="or-divider">
+            <span>OR</span>
+        </div>
+        <button id="google-signup" class="google-signup-button">
+            <img src="../images/google-icon.png" alt="Google Icon" class="google-icon">
+            Sign up with Google
+        </button>
         <div class="links">
             <a href="../login/login.html"><u>Already have an account? Login</u></a>
         </div>
     </div>
 
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
     <script>
         const signup = document.querySelector(".signup-button");
 
@@ -82,6 +90,41 @@ <h1>Create Your Account</h1>
                 console.log(err.message)
             }
         }
+
+        // Add Google Sign-In
+        function handleCredentialResponse(response) {
+            // Send the token to your server to verify and create a session
+            const token = response.credential;
+            // You should implement a function to handle the token on your server
+            signUpWithGoogle(token);
+        }
+
+        window.onload = function () {
+            google.accounts.id.initialize({
+                client_id: 'YOUR_GOOGLE_CLIENT_ID', // Replace with your actual Google Client ID
+                callback: handleCredentialResponse
+            });
+            google.accounts.id.renderButton(
+                document.getElementById("google-signup"),
+                { theme: "outline", size: "large", width: "100%" }
+            );
+        };
+
+        async function signUpWithGoogle(token) {
+            try {
+                const res = await fetch("http://localhost:5000/auth/google-signup", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ token })
+                });
+
+                const data = await res.json();
+                console.log(data);
+                window.location.href = "http://127.0.0.1:5500/Collect-your-GamingTools/login/login.html";
+            } catch (err) {
+                console.log(err.message);
+            }
+        }
     </script>
 </body>
 </html>
diff --git a/images/cart.png b/images/cart.png
new file mode 100644
index 00000000..93046e4e
Binary files /dev/null and b/images/cart.png differ
diff --git a/images/review-1.png b/images/review-1.png
new file mode 100644
index 00000000..46aaedb5
Binary files /dev/null and b/images/review-1.png differ
diff --git a/images/review-2.png b/images/review-2.png
new file mode 100644
index 00000000..b21a9050
Binary files /dev/null and b/images/review-2.png differ
diff --git a/images/review-3.png b/images/review-3.png
new file mode 100644
index 00000000..d2881fc4
Binary files /dev/null and b/images/review-3.png differ
diff --git a/images/review-4.png b/images/review-4.png
new file mode 100644
index 00000000..9b930959
Binary files /dev/null and b/images/review-4.png differ
diff --git a/images/review-5.png b/images/review-5.png
new file mode 100644
index 00000000..a5da3ea1
Binary files /dev/null and b/images/review-5.png differ
diff --git a/index.html b/index.html
index c2ee2cf5..2de9bf2a 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,13 @@
                             <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
                             <span class="slider"></span>
                         </label></li>
+                        <!-- Inside the navbar ul -->
+                        <li class="cart-nav">
+                         
+                                <a href="#"><img height="25px " width="25px" src="images/cart.png" alt="Cart Icon"> <span id="cart-count">0</span></a>
+                          
+                        </li>
+                        
                     </ul>
                     
                     <!-- Hamburger Menu Icon -->
@@ -359,83 +366,96 @@ <h3>Ergonomic Gaming Chair</h3>
         </div>
     </div>
 
-    <!--faq section-->
-    <section id="faq">
-                
+<!-- FAQ Section -->
+<section id="faq">          
     <div class="faq-container">
-        <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
-    
-        <div class="faq">
-          <input type="checkbox" id="faq1" >
-          <label for="faq1" class="faq-question" data-aos="fade-right">1. Does your website consist of all types of gaming tools?</label>
-          <input type="checkbox" id="faq1">
-          <label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span class="arrow"></span></label>
-          <div class="faq-answer">
-            We have tried our best to make all the tools available for enthusiastic gamers.
-          </div>
+        <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>  
+        
+        <div class="faq" data-aos="fade-right">
+            <input type="checkbox" id="faq1">
+            <label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span class="arrow"></span></label>
+            <div class="faq-answer">
+                We have tried our best to make all the tools available for enthusiastic gamers.
+            </div>
         </div>
+
         <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq2" >
-          <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need?</label>
-        <div class="faq">
-          <input type="checkbox" id="faq2">
-          <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need? <span class="arrow"></span></label>
-          <div class="faq-answer">
-            By considering our terms and conditions, further actions will be taken.
-          </div>
+            <input type="checkbox" id="faq2">
+            <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need? <span class="arrow"></span></label>
+            <div class="faq-answer">
+                By considering our terms and conditions, further actions will be taken.
+            </div>
         </div>
-    
+
         <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq3">
-          <label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span class="arrow"></span></label>
-          <div class="faq-answer">
-            Yes, you are welcomed to buy multiple products at one time.
-          </div>
+            <input type="checkbox" id="faq3">
+            <label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span class="arrow"></span></label>
+            <div class="faq-answer">
+                Yes, you are welcome to buy multiple products at one time.
+            </div>
         </div>
-    
+
         <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq4">
-          <label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span class="arrow"></span></label>
-          <div class="faq-answer">
-            Currently that option is unavailable. Sorry for the inconvenience.
-          </div>
+            <input type="checkbox" id="faq4">
+            <label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span class="arrow"></span></label>
+            <div class="faq-answer">
+                We have courier services for our customers and it's absolutely free.
+            </div>
         </div>
-    
-      </div>
-  
-         <br>
-         <br>
+    </div>
+</section>
 
     <!--review section-->
   
-  <section id="review-body">
-      <div class="reviews-container">
+    <section id="review-body">
+        <div class="reviews-container">
           <h1 class="reviews-title" data-aos="fade-right">What Our Customers Say</h1>
+          <div class="review-card-container" id="slider">
+            <div class="review-card" data-aos="fade-right">
+                <div class="review-section-image"><img class="reviewer-img-block" src="images/review-4.png"></div>
+              <div class="reviewer-name">John Doe</div>
+              <div class="review-rating">★★★★★</div>
+              <p class="review-text">
+                The tools on this website are fantastic! It has made gaming much more enjoyable and efficient. Highly recommend!
+              </p>
+            </div>
       
-          <div class="review-card" data-aos="fade-right">
-            <div class="reviewer-name">John Doe</div>
-            <div class="review-rating">★★★★★</div>
-            <p class="review-text" >The tools on this website are fantastic! It has made gaming much more enjoyable and efficient. Highly recommend!</p>
-          </div>
-      
-          <div class="review-card" data-aos="fade-right">
-            <div class="reviewer-name">Jane Smith</div>
-            <div class="review-rating">★★★★☆</div>
-            <p class="review-text">Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!</p>
-          </div>
+            <div class="review-card" data-aos="fade-right">
+                <div class="review-section-image"><img class="reviewer-img-block" src="images/review-2.png"></div>
+              <div class="reviewer-name">Jane Smith</div>
+              <div class="review-rating">★★★★☆</div>
+              <p class="review-text">
+                Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!
+              </p>
+            </div>
+            <div class="review-card" data-aos="fade-right">
+                <div class="review-section-image"><img class="reviewer-img-block" src="images/review-3.png"></div>
+                <div class="reviewer-name">Sandeep Maddhesiya</div>
+                <div class="review-rating">★★★★☆</div>
+                <p class="review-text">
+                  Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!
+                </p>
+              </div>
+              <div class="review-card" data-aos="fade-right">
+                <div class="review-section-image"><img class="reviewer-img-block" src="images/review-1.png"></div>
+                <div class="reviewer-name">Ambar Mishra</div>
+                <div class="review-rating">★★★★☆</div>
+                <p class="review-text">
+                  Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!
+                </p>
+              </div>
       
-          <div class="review-card" data-aos="fade-right">
-            <div class="reviewer-name">Alex Johnson</div>
-            <div class="review-rating">★★★★★</div>
-            <p class="review-text">Excellent customer service! I had an issue with my order, but it was resolved quickly. Definitely will buy again.</p>
+            <div class="review-card" data-aos="fade-right">
+                <div class="review-section-image"><img class="reviewer-img-block" src="images/review-5.png"></div>
+              <div class="reviewer-name">Alex Johnson</div>
+              <div class="review-rating">★★★★★</div>
+              <p class="review-text">
+                Excellent customer service! I had an issue with my order, but it was resolved quickly. Definitely will buy again.
+              </p>
+            </div>
           </div>
-      
         </div>
       </section>
-      
-      <br>
-      <br>
-      <br>
 
 
             <section id="contact" data-aos="fade-right">
@@ -500,10 +520,11 @@ <h2>Quick Links</h2>
                     <li><a href="#">About Us</a></li>
                     <li><a href="#contact">Contact</a></li>
                     <li><a href="#faq">FAQ</a></li>
+                    <li><a href="Contributors/contributor.html">Contributors</a></li>
                 </ul>
             </div>
             <div class="footer-section contact-form">
-                <h2>Contact Us</h2>
+                <h2>Feedback Form</h2>
                 <form action="#" method="post">
                     <input type="email" name="email" class="text-input contact-input" placeholder="Your email address...">
                     <textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
@@ -532,7 +553,7 @@ <h2>Contact Us</h2>
         </ul>
     </div>
     <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
-        <i class="fas fa-arrow-right"></i>
+        <i class="fas fa-arrow-left"></i>
     </div>
 
 
@@ -546,6 +567,18 @@ <h2>Contact Us</h2>
         </svg>
     </button>  
 
+    <script>
+        let cartItemCount = 0;
+
+    // Function to handle Add to Cart button click
+        document.getElementById('cart-btn').addEventListener('click', function () {
+            cartItemCount++; // Increment cart count
+            document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
+            alert('Item added to cart'); // Show alert
+        });
+
+    </script>
+
     <!-- this script is for twitter icon  starts -->
     <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
     <!-- this script is for twitter icon  ends -->
@@ -557,13 +590,13 @@ <h2>Contact Us</h2>
 
     <script>
         window.embeddedChatbotConfig = {
-        chatbotId: "PQ-VOcdM1R3PiYlZUrsTY",
+        chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
         domain: "www.chatbase.co"
         }
         </script>
         <script
         src="https://www.chatbase.co/embed.min.js"
-        chatbotId="PQ-VOcdM1R3PiYlZUrsTY"
+        chatbotId="awMKW3zFwW7jzUNsN4Q8O"
         domain="www.chatbase.co"
         defer>
         </script>
diff --git a/script.js b/script.js
index d9fe89ef..d4dcfcb4 100644
--- a/script.js
+++ b/script.js
@@ -112,14 +112,18 @@ window.onload = () => {
 
 //function to remove sidebar upon clicking close button
 function toggleSidebar() {
-  var sidebar = document.getElementById("SideBar");
-  var sidebarContent = document.getElementById("sidebar-content");
-  if (sidebar) {
-    // Remove the sidebar element and its content
-    sidebar.remove();
-    sidebarContent.remove();
+  const sidebar = document.querySelector('.social-sidebar');
+  const toggleArrow = document.querySelector('.toggle-arrow');
+  
+  // Check if the sidebar is currently visible
+  if (sidebar.style.display === "none") {
+      // If hidden, show the sidebar and hide the toggle arrow
+      sidebar.style.display = "block";
+      toggleArrow.style.display = "none";
   } else {
-    console.error("Sidebar element not found");
+      // If visible, hide the sidebar and show the toggle arrow
+      sidebar.style.display = "none";
+      toggleArrow.style.display = "block";
   }
 }
 
@@ -179,3 +183,34 @@ document.querySelectorAll('.faq input[type="checkbox"]').forEach((checkbox) => {
     }
   });
 });
+
+const slider = document.getElementById('slider');
+let currentIndex = 0;
+const reviews = slider.children;
+const totalReviews = reviews.length;
+const cardsPerRow = 3;
+
+function showNextReview() {
+  // Hide all cards first
+  for (let i = 0; i < totalReviews; i++) {
+    reviews[i].style.display = 'none';
+  }
+
+  // Show the next set of 3 cards
+  for (let i = 0; i < cardsPerRow; i++) {
+    const indexToShow = (currentIndex + i) % totalReviews;
+    reviews[indexToShow].style.display = 'block';
+  }
+
+  // Move to the next set of cards
+  currentIndex = (currentIndex + cardsPerRow) % totalReviews;
+}
+
+// Initialize the slider by showing the first 3 cards
+for (let i = cardsPerRow; i < totalReviews; i++) {
+  reviews[i].style.display = 'none';
+}
+
+// Automatically switch to the next set of cards every 3 seconds
+setInterval(showNextReview, 3000);
+ 
diff --git a/style.css b/style.css
index 6e6c4fc9..15f234a5 100644
--- a/style.css
+++ b/style.css
@@ -10,12 +10,10 @@
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
 }
 .card-header {
-    background-color: #333;
     color: #fff;
     padding: 10px;
     margin-bottom: 15px;
     text-align: center;
-    border-bottom: 1px solid #ddd;
     border-radius: 6px;
     align-items: center;
   }
@@ -72,10 +70,13 @@ button[type="submit"] {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: all 0.3s ease;
 }
 
 button[type="submit"]:hover {
     background-color: #444;
+    transform: scale(1.1);
+
 }
 
 
@@ -113,6 +114,7 @@ button[type="submit"]:hover {
 }
 
 html {
+    overflow-x: hidden;
     overflow-y: scroll;
     scroll-behavior: smooth;
 }
@@ -149,8 +151,25 @@ html::-webkit-scrollbar-thumb:window-inactive {
     overflow: hidden;
     background-color: #fff;
     z-index: 1000;
+    box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
 }
 
+.cart-nav a {
+    display: flex;
+    align-items: center;
+    gap: 5px; /* Space between icon and count */
+  }
+  
+  .cart-nav img {
+    vertical-align: middle;
+  }
+  
+  #cart-count {
+    font-size: 16px; /* Adjust font size to match */
+    vertical-align: middle;
+  }
+  
+
 .dark-mode .navbar{
     background-color: #493d3d;
 }
@@ -280,6 +299,41 @@ nav ul li a:hover {
     color: #e00999;
     transform: scale(1.18);
 }
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav ul li {
+    display: inline-block; 
+    position: relative;
+    margin: 0 15px; 
+}
+
+nav ul li a {
+    text-decoration: none; 
+    position: relative; 
+    color: #000; 
+}
+
+
+nav ul li:not(.login) a::after {
+    content: ''; 
+    display: block; 
+    height: 0.5px; 
+    width: 0; 
+    background:  #ff3527;
+    transition: width 0.3s ease; 
+    position: absolute; 
+    left: 0; 
+    bottom: -1px; 
+}
+
+nav ul li:not(.login) a:hover::after {
+    width: 100%; 
+}
+
 
 nav ul li.login {
     background: linear-gradient(to right, #fb5283, #ff3527);
@@ -287,6 +341,11 @@ nav ul li.login {
     border-radius: 20px;
     padding: 4px 18px;
     cursor: pointer;
+    transition: all 0.5s ease;
+}
+.underline li :hover{
+    text-decoration: underline;
+
 }
 
 nav ul li.login a {
@@ -295,6 +354,8 @@ nav ul li.login a {
 
 nav ul li.login:hover {
     color: #fff;
+    transform: scale(1.18);
+
 }
 
 
@@ -530,6 +591,7 @@ button:hover img {
 .footer {
     background: #303036;
     color: #d3d3d3;
+    width: 100%;
     padding: 50px 0 0;
     font-family: 'Arial', sans-serif;
 }
@@ -707,12 +769,15 @@ button:hover img {
         width: 100%;
         float: none;
     }
+    .review-card{
+        width: none;
+    }
 }
 
 .close-btn {
     position: absolute;
     top: -10px;
-    right: -10px; 
+    left: -10px; 
     width: 25px;
     height: 25px;
     font-size: 20px;
@@ -730,29 +795,30 @@ button:hover img {
   .toggle-arrow {
     position: fixed;
     top: 50%;
-    left: 0;
+    right: 0;
     transform: translateY(-50%);
     transition: transform 0.3s ease-in-out;
     background-color: #333;
-    padding: 5px;
-    border-radius: 0 10px 10px 0;
+    border-radius: 10px 0 0 10px;
     cursor: pointer;
     color: white;
     font-size: 25px;
     padding: 12px;
+    z-index: 1;
 }
 
+
 .social-sidebar {
     position: fixed;
     top: 55%;
-    left: 0;
+    right: 0;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 15px;
     background-color: #333;
     padding: 3px;
-    border-radius: 0 15px 15px 0;
+    border-radius: 15px 0 0 15px;
     border: none;
     transition: background-color 0.3s ease, transform 0.3s ease; 
     z-index: 1;
@@ -908,6 +974,7 @@ button:hover img {
     .card-body {
         display: flex;
         width: 90%;
+        overflow-x: hidden;
         margin: 20px auto;
         padding: 20px;
         justify-content: space-between; /* Form on the right and image on the left */
@@ -955,8 +1022,9 @@ button:hover img {
     }
 
     .footer-bottom {
-        max-width: fit-content;
+        max-width: 100vw;
     }
+    
 }
 
 
@@ -1030,9 +1098,9 @@ button:hover img {
 
 .scroll-top {
     position: fixed;
-    bottom: 1%;
-    right: 50%;
-    background: linear-gradient(145deg, #ff459f, #ff6062);
+    bottom: 1.4%;
+    right: 5%;
+    background: linear-gradient(100deg,#ff393d, #ff3c76, #fffb05);
     color: white;
     width: 60px;
     height: 60px;
@@ -1232,18 +1300,17 @@ button:hover img {
     max-width: 800px;
     margin: 40px auto;
     padding: 20px;
-    background-color: #ffffff;
+    background-color: rgb(71,61,61);
     border: 1px solid #ddd;
     border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
   }
   
   .faq-title {
     text-align: center;
     font-size: 1.8em;
-    color: #333;
+    color: #ffffff;
     margin-bottom: 20px;
-    color: #ff6b6b;
   }
   
   .faq {
@@ -1307,15 +1374,14 @@ button:hover img {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: white;
+    background-color: rgb(71,61,61);
   }
   
   /* Review Section Container */
   .reviews-container {
-    max-width: 800px;
     margin: 40px auto;
     padding: 20px;
-    background-color: #ffffff;
+    background-color:rgb(71,61,61);
     border: 1px solid #ddd;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -1325,28 +1391,31 @@ button:hover img {
   .reviews-title {
     text-align: center;
     font-size: 1.8em;
-    color: #ff6b6b;
+    color: #ffffff;
     margin-bottom: 20px;
   }
   
-  /* Individual Review Card */
-  .review-card {
-    margin-bottom: 15px; /* Reduced margin to shorten height */
-    padding: 15px; /* Reduced padding */
-    background-color: #ffe0b5;
-    border-left: 3px solid #ff8552; /* Thinner border */
-    border-radius: 8px; /* Slightly smaller border radius */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease;
+/* Individual Review Card */
+.review-card {
+    width: 25%; 
+    margin-bottom: 15px; /* Reduces the margin at the bottom */
+    padding: 15px; /* Reduces padding around content */
+    background-color: #ffe0b5; /* Light orange background for the card */
+    border-left: 3px solid #ff8552; /* Adds a thinner left border */
+    border-radius: 8px; /* Adds rounded corners to the card */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for a lifted effect */
+    transition: transform 0.3s ease; /* Smooth animation on hover */
   }
   
   /* Hover Effect for Review Cards */
   .review-card:hover {
-    transform: translateY(-3px); /* Slightly less lift on hover */
+    transform: translateY(-3px); /* Adds a slight upward lift when hovering */
   }
   
   /* Reviewer Name */
   .reviewer-name {
+    display: flex;
+    justify-content: center;
     font-size: 1.2em;
     font-weight: bold;
     color: #333;
@@ -1355,6 +1424,8 @@ button:hover img {
   
   /* Review Rating */
   .review-rating {
+    display: flex;
+    justify-content: center;
     font-size: 1.2em;
     color: #ff8552;
     margin-bottom: 8px; /* Slightly smaller gap */
@@ -1367,3 +1438,26 @@ button:hover img {
     line-height: 1.5; /* Slightly tighter line height */
   }
   
+@media only screen and (max-width: 700px)  {
+    .footer-bottom{
+        width: 1000vw !important;
+    }
+}
+.review-card-container{
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.review-section-image{
+    display: flex;
+    justify-content: center;
+    margin-bottom:20px;
+}
+
+.reviewer-img-block {
+    width: 100px; 
+    height: 100px; 
+    border-radius: 100%;
+    object-fit: cover; 
+    border:1px solid black;
+  }
\ No newline at end of file