diff --git a/README.md b/README.md
index 89095a2..4e57876 100644
--- a/README.md
+++ b/README.md
@@ -114,15 +114,46 @@ https://collect-your-gamingtools.netlify.app/
 ## 🤝 Contributing
 Contributions are what make the **open-source** community such an amazing place to learn, inspire, and create. Here’s how you can contribute:
 
-🍴 <b>Fork the repo</b> by clicking the "Fork" button at the top right of this page. 
+<div align="center">
+   <img src="https://github.com/apu52/METAVERSE/assets/114172928/e79eb6de-81b1-4ffb-b6ed-f018bb977e88" alt="GSSoC 2024 Extd" width="80%">
+ </div>
+
+ <div align="center">
+   <img src="https://github.com/neeru24/Connect_icons/blob/main/hacktober.png" alt="Hacktober fest 2024" width="80%">
+ </div>
+
+ <br>
+ 
+ ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
-🛠️ Create a <b>branch</b>.
 
-💡 <b>Commit</b> your changes.
+ ### 💵 How to Contribute
 
-📤 <b>Push</b> to the branch.
+    #### 1. Fork the repository to your GitHub account.
+    #### 2. Clone the forked repository to your local machine.
+    ```bash
+    git clone https://github.com/<github_username>/Collect-your-GamingTools.git
+    ```
+    #### 3. Create a new branch for your changes.
+    ```bash
+    git checkout -b feature/your-feature
+    ```
+    #### 4. Make your changes, whether they're bug fixes, new features, or improvements.
+    #### 5. add the change in your branch
+    ```bash
+    git add .
+    ```
+    #### 6. Commit your changes with descriptive commit messages.
+    ```bash
+    git commit -m "Add your descriptive commit message here"
+    git push origin feature/your-feature
+    ```
+    #### 7. Open a Pull Request (PR) against the main repository.
+ ### Additional Notes
+    #### Start working on the issue, Don't wait to get it assigned by the maintainers
+    #### Your every contribution counts, Thanks for contributing to Collect-your-GamingTools
 
-🔃 Open a <b>pull request</b>.
+ ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
 We welcome all contributions to improve **Collect Your GamingTools**! If you'd like to contribute, please follow the [Contributing.md](./Contributing.md) to get details on how to get started.
 
diff --git a/SignUp/signup.html b/SignUp/signup.html
index d4a3506..966fbec 100644
--- a/SignUp/signup.html
+++ b/SignUp/signup.html
@@ -20,6 +20,33 @@
             font-size: 0.85em;
             margin-top: 5px;
         }
+
+        .social-buttons {
+            display: flex;
+            flex-direction: column; /* Stack buttons vertically */
+            gap: 10px; /* Space between buttons */
+            margin-top: 20px; /* Space above buttons */
+        }
+        .google-signup-button, .apple-signup-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 10px;
+            background-color: #db4437; /* Google color */
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1em;
+            width: 100%; /* Full width */
+        }
+        .apple-signup-button {
+            background-color: #000; /* Apple color */
+        }
+        .google-icon, .apple-icon {
+            margin-right: 8px; /* Space between icon and text */
+        }
+
         .input-group {
             position: relative;
             display: flex;
@@ -49,6 +76,7 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+
     </style>
 
     <!-- Bootstrap Icons -->
@@ -83,6 +111,7 @@ <h1>Create Your Account</h1>
                 <p id="number" class="condition">Contains numbers</p>
                 <p id="special" class="condition">Contains special characters</p>
             </div>
+
             <div class="input-group">
                 <label for="confirm-password">Confirm Password</label>
                 <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" required>
@@ -91,13 +120,22 @@ <h1>Create Your Account</h1>
             <div id="password-error" class="error-message"></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="social-buttons">
+            <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>
+            <button id="apple-signup" class="apple-signup-button">
+                <img src="../images/apple-icon.png" alt="Apple Icon" class="apple-icon">
+                Sign up with Apple
+            </button>
+        </div>
+
         <div class="links">
             <a href="../login/login.html"><u>Already have an account? Login</u></a>
         </div>
@@ -126,3 +164,4 @@ <h1>Create Your Account</h1>
     </script>
 </body>
 </html>
+
diff --git a/index.html b/index.html
index d20c7fd..87541be 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,42 @@
         integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="style.css">
+    <style>
+        .scroll-button {
+            position: fixed;
+            right: 20px;
+            bottom: 20px; /* Adjust for positioning */
+            padding: 10px 15px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            z-index: 1000;
+        }
+
+        .scroll-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="navbar">
+            <img src="images/logo.png" class="logo" alt="Logo">
+            <span class="website-name">Collect your GamingTools</span>
+            <nav>
+                <ul id="menuList">
+                    <li><a href="#">Game Controllers</a></li>
+                    <li><a href="#">VR Accessories</a></li>
+                    <li><a href="#">Media Remotes</a></li>
+                    <li><a href="#">Others</a></li>
+                    <li class="login"><a href="login/login.html">Login</a></li>
+                </ul>
+            </nav>
+            <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+        </div>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
         integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMhZj7z9qvhs8kcJ6D6t3h7jsKK4Gk16+/D57g" crossorigin="anonymous">
 
@@ -131,7 +167,6 @@ <h2 class="h2">Sign up for exclusive offers & updates</h2>
 
         <!-- Pop up HTML Ends here -->
 
-
         <!-- PS4 Controller Section -->
 
         <div class="row" id="controller">
@@ -722,7 +757,7 @@ <h2>Feedback Form</h2>
         </div>
 
     </footer>
-
+    <button id="scrollToTop" class="scroll-button">Scroll to Top</button>
     <!-- SIDEBAR -->
 
     <div class="social-sidebar">
@@ -781,7 +816,14 @@ <h2>Feedback Form</h2>
     <script src="popup/popup.js"></script>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-
+    <script>
+        document.getElementById('scrollToTop').onclick = function() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        };
+    </script>
     <script>
         window.embeddedChatbotConfig = {
             chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
@@ -801,6 +843,7 @@ <h2>Feedback Form</h2>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
     <script src="./Loader/Loader.js"></script>
 
+
     </script>
     </div>
  poll
diff --git a/login/login.css b/login/login.css
index 80c74ff..f3ed5d5 100644
--- a/login/login.css
+++ b/login/login.css
@@ -184,12 +184,34 @@ body {
     transition: all 0.3s ease;
 }
 
+.social-buttons {
+    display: flex; /* Use flexbox for alignment */
+    gap: 10px; /* Add gap between buttons */
+}
+
+.social-button {
+    /* Optional: Add padding and styling to buttons */
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.5rem; /* Adjust font size as needed */
+}
+
 .google {
-    background-color: #171a21;
-    color: #fff;
+    background-color: #ede5e4; /* Google color */
+    color: rgb(9, 7, 7); /* Text color */
 }
 
+.apple {
+    background-color: #000; /* Apple color */
+    color: white; /* Text color */
+}
 .google:hover {
+    background-color: #e6f0f3;
+    color: rgb(21, 164, 240);
+}
+.apple:hover {
     background-color: #cccccc;
     color: black;
 }
@@ -348,3 +370,4 @@ body {
         right: 10px; /* Reduce right spacing for smaller screens */
     }
 }
+
diff --git a/login/login.html b/login/login.html
index 3980ba9..122a915 100644
--- a/login/login.html
+++ b/login/login.html
@@ -9,7 +9,11 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
 
     <link rel="stylesheet" href="login.css">
+
+
+
     <script src="auth.js" defer type="module"></script>
+
 </head>
 <body>
     <div class="button-container">
@@ -37,6 +41,12 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
                 <a href="forgot.html" class="hal2">Forgot Password?</a>
                 <a href="../SignUp/signup.html" class="hal">Sign Up</a>
             </div>
+
+            <div class="social-login">
+                <p>Or Login With</p>
+
+            </div>
+
         </div>
     </div>
     <footer class="footer">
diff --git a/style.css b/style.css
index 60701ca..134e712 100644
--- a/style.css
+++ b/style.css
@@ -1906,7 +1906,7 @@ button {
   /* Slightly tighter line height */
 }
 
-/* testimonial */
+/* testimonial section */
 .site {
   font-family: "Poppins", sans-serif;
   font-weight: 200;
@@ -1914,15 +1914,11 @@ button {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: white;
-  color: #000;
-}
-
-.dark-mode .site{
-  background-color: #1b1b1b;
-  color: white;
+  background-color: var(--background-color); /* Adapt based on theme */
+  color: var(--text-color); /* Adapt based on theme */
 }
 
+\
 .container-swipe {
   max-width: 1200px;
   width: 100%;
@@ -1945,14 +1941,22 @@ button {
 .testi .head p {
   font-weight: 600;
   font-size: 25px;
+
+  color: var(--text-color); /* Adapt based on theme */
+
   text-shadow: 5px 5px 9px #000;
+
 }
 
 .testi .head h3 {
   font-size: 34px;
   font-weight: 800;
+
+  color: #ff8552; /* This color is fixed for branding */
+
   color: #FFD700;
   text-shadow: -5px 5px 3px magenta
+
 }
 
 .testi .wrapper {
@@ -1961,8 +1965,11 @@ button {
   align-items: self-end;
   gap: 66px;
   padding: 30px 0;
+  background-color: var(--background-color); /* Adapt based on theme */
+  color: var(--text-color); /* Adapt based on theme */
 }
 
+
 /*thumbnail*/
 .testi .thumbnail {
   width: 150px;
@@ -2147,7 +2154,7 @@ button {
   .footer-bottom {
     width: 1000vw !important;
   }
-}
+
 
 
 /* Add hover effects and shadows to the card */
@@ -2252,13 +2259,14 @@ button {
     font-size: 18px;
   }
 }
-poll
+
 
 
 
 body {
 
     font-family: Arial, sans-serif;
+
 }
 
 
@@ -2343,6 +2351,7 @@ body {
 
 }
 
+
 .vote-button:hover {
 
     background-color: #d32f2f; /* Darker red */
@@ -2369,4 +2378,4 @@ body {
 
 }
 
- main
+