diff --git a/SignUp/gaming.jpg b/SignUp/gaming.jpg
new file mode 100644
index 00000000..8281e362
Binary files /dev/null and b/SignUp/gaming.jpg differ
diff --git a/SignUp/google.png b/SignUp/google.png
new file mode 100644
index 00000000..894ca6aa
Binary files /dev/null and b/SignUp/google.png differ
diff --git a/SignUp/signup.css b/SignUp/signup.css
index d426fd74..987c826b 100644
--- a/SignUp/signup.css
+++ b/SignUp/signup.css
@@ -1,358 +1,111 @@
-* {
 
-    box-sizing: border-box;
-    margin: 0;
-    padding:0;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Arial', sans-serif;
 }
 
 body {
-    background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
-    background-size: cover;
-    font-family: 'Trebuchet MS', Arial, sans-serif;
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    align-items: start;
-    height: 100vh;
-    color: white;
-    text-shadow: 1px 1px 2px #000;
-}
-
-
-.error-message {
-  color: red;
-  font-size: 0.85em;
-  margin-top: 5px;
-}
-
-.signup-container {
-    
-    opacity: 0.75;
-    background-color: rgba(0, 0, 0, 0);
-    padding:3rem 5rem;
-    border-radius: 20px;
-    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
-    text-align: center;
-    max-width: 500px;
-    width: 100%;
-    animation: fadeIn 2s ease-in-out;
-    background-color: black;
-    margin: auto;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 0.75;
-    transform: scale(1);
-  }
-}
-
-h1 {
-    margin-bottom: 1.5rem;
-    font-size: 1.5rem;
-    color: #fb5283;
-}
-
-.input-group {
-  margin-bottom: 1.5rem;
-  text-align: left;
-}
-
-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 16px;
+  background-image: url('gaming.jpg'); /* Add your background image */
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
-input[type="text"],
-input[type="email"],
-input[type="password"] {
+.register-container {
+  background-color: rgba(255, 255, 255, 0.003); /* Transparent background */
+  border-radius: 10px;
+  padding: 30px;
+  max-width: 400px;
   width: 100%;
-  padding: 0.75rem;
-  border: 2px solid #6a1b9a;
-  border-radius: 5px;
-  background-color: #3a3f44;
-  color: white;
-  font-family: "Press Start 2P", cursive;
-  font-size: 0.875rem;
+  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(12px);
 }
 
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="password"]:focus {
-  outline: none;
-  border-color: #ba68c8;
-  background-color: #2a2e32;
+.register-container:hover{
+  border: 2px solid rgb(18, 242, 18);
 }
 
-.signup-button {
+.register-form h2 {
   color: white;
-  font-family: Helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 20px;
   text-align: center;
-  background-color: #ffa12b;
-  display: block;
-  position: relative;
-  padding: 15px 60px;
-  margin: auto;
-
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  text-shadow: 0px 1px 0px #000;
-  filter: dropshadow(color=#000, offx=0px, offy=1px);
-
-  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
-  -moz-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
-  box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
-
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-
-.signup-button:active {
-  top: 10px;
-  background-color: #f78900;
-
-  -webkit-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
-  -moz-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3pxpx 0 #915100;
-  box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
-}
-.signup-button:after {
-  content: "";
-  height: 100%;
-  width: 100%;
-  padding: 4px;
-  position: absolute;
-  bottom: -15px;
-  left: -4px;
-  z-index: -1;
-  background-color: #2b1800;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-}
-.signup-button:hover {
-  background-color: #ffd198;
-  color: #f78900;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 2px rgb(91, 57, 57);
 }
 
-.links {
-  margin-top: 18px;
-}
-
-.links a {
-  color: #fb5283;
-  text-decoration: none;
-  transition: color 0.3s;
-  font-size: 18px;
-}
-
-.links a:hover {
-  color: #ff80ab;
-  text-decoration: underline;
+.input-field {
+  position: relative;
+  margin-bottom: 20px;
 }
 
-.linksHome {
+.input-field i {
   position: absolute;
-  top: 20px;
-  left: 20px;
-  cursor: pointer;
-  padding: 10px;
-  font-size: large;
-  text-decoration: none;
-  border-radius: 15px;
-  border: none;
-  background: linear-gradient(
-    0deg,
-    rgba(255, 193, 219, 1) 0%,
-    rgba(245, 131, 202, 1) 100%
-  );
+  top: 12px;
+  left: 10px;
   color: #fff;
-  overflow: hidden;
 }
 
-.linksHome:hover {
-  text-decoration: none;
-  background: linear-gradient(
-    0deg,
-    rgba(245, 131, 202, 1) 0%,
-    rgba(255, 193, 219, 1) 100%
-  );
-  color: #fff;
+.input-field input {
+  width: 100%;
+  padding: 12px 40px;
+  border: none;
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: rgb(255, 255, 255);
+  font-size: 16px;
 }
 
-.linksHome:before {
-  position: absolute;
-  content: "";
-  display: inline-block;
-  top: -180px;
-  left: 0;
-  width: 30px;
-  height: 100%;
+.input-field input:focus {
   background-color: rgba(255, 255, 255, 0.3);
-  animation: shiny-btn1 3s ease-in-out infinite;
-}
-
-.linksHome:active {
-  box-shadow: 4px 4px 6px 0 rgba(255, 193, 219, 0.3),
-    -4px -4px 6px 0 rgba(245, 131, 202, 0.3),
-    inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
-    inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
-}
-
-@keyframes shiny-btn1 {
-  0% {
-    transform: scale(0) rotate(45deg);
-    opacity: 0;
-  }
-  80% {
-    transform: scale(0) rotate(45deg);
-    opacity: 0.5;
-  }
-  81% {
-    transform: scale(4) rotate(45deg);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(50) rotate(45deg);
-    opacity: 0;
-  }
-}
-
-.linksHome a {
-  color: #ffe4e9;
-}
-
-a {
-  text-decoration: none;
-}
-
-#link-home{
-    border: 1px solid rgb(255, 255, 255);
-    box-shadow: 0 0 5px white;
-    border-radius: 15px;
-    padding: 8px 15px;
-
-    margin-left: 1rem;
-    margin-top: 1rem;
-    
-}
-
-#link-home:hover{
-    border: 1px solid rgb(202, 202, 202);
-    box-shadow: 0 0 5px #424242;
-    background-color: #42424222;
-    border-radius: 15px;
-    padding: 8px 15px;
-
-    margin-left: 1rem;
-    margin-top: 1rem;
-}
-
-#link-home a{
-    text-decoration: none;
-    color: #fff;
-    font-size: 1.4rem;
-    text-shadow: none;
-    font-family: 'Trebuchet MS', Arial, sans-serif;
-    
+  outline: none;
+  border:2px solid rgb(7, 231, 7);
 }
 
-/* ... existing styles ... */
-
-.signup-button, .google-signup-button {
+.btn {
   width: 100%;
   padding: 10px;
-  margin: 10px 0;
+  background-color: #28a745;
   border: none;
   border-radius: 5px;
-  cursor: pointer;
+  color: white;
   font-size: 16px;
-  transition: background-color 0.3s ease;
+  cursor: pointer;
+  transition: background-color 0.3s;
 }
 
-.signup-button {
-  background-color: #f4a261;
-  color: white;
+.btn:hover {
+  background-color: #218838;
 }
 
-.signup-button:hover {
-  background-color: #e76f51;
+.alternative-signup {
+  text-align: center;
+  color: white;
+  margin-top: 20px;
 }
 
-.google-signup-button {
+.google-signup {
   background-color: white;
-  color: #757575;
-  border: 1px solid #dadce0;
+  color: black;
+  width: 100%;
+  padding: 10px;
+  border-radius: 10px;
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border:1px d;
+  font-size: 16px;
+  margin-top: 5px;
 }
 
-.google-signup-button:hover {
-  background-color: #f8f9fa;
+.google-signup:hover{
+  background-color: #f2f2f2;
 }
 
-.google-signup-button img {
-  width: 18px;
-  height: 18px;
+.google-signup img {
+  width: 40px;
   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;
-}
-::placeholder {
-  color: white;
-}
diff --git a/SignUp/signup.html b/SignUp/signup.html
index 723c3b67..ecf94006 100644
--- a/SignUp/signup.html
+++ b/SignUp/signup.html
@@ -3,76 +3,47 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sign Up for GamingTools</title>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <link rel="stylesheet" href="signup.css">
-    <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
-    <style>
-        .condition {
-            color: gray; /* Default color */
-            font-size: 0.9em;
-        }
-        .condition.met {
-            color: lightgreen; /* Turns green when condition is met */
-        }
-        .error-message {
-            color: red;
-            font-size: 0.85em;
-            margin-top: 5px;
-        }
-    </style>
+    <title>Register</title>
 </head>
 <body>
-
-    <span id="link-home" class="linksHome">
-        <a href="../index.html">Home</a>
-    </span>
-
-    <div class="signup-container">
-        <h1>Create Your Account</h1>
-        <form action="#" method="post">
-            <div class="input-group">
-                <label for="username">Username</label>
-                <input type="text" id="username" name="username" placeholder="Create a Username" required>
+    <div class="register-container">
+        <form id="registerForm" class="register-form">
+            <h2>Welcome to Registration!</h2>
+            <div class="input-field">
+                <i class="fas fa-user"></i>
+                <input type="text" id="username" placeholder="Create a Username" required>
             </div>
+ vraccessories
+            <div class="input-field">
+                <i class="fas fa-envelope"></i>
+                <input type="email" id="email" placeholder="Enter your Email" required>
+
             <div class="input-group">
                 <label for="email">Email</label>
                 <div id="email-error" class="error-message"></div> <!-- Error message container -->
                 <input type="email" id="email" name="email" placeholder="Enter your mail-id" required>
+ main
             </div>
-            <div class="input-group">
-                <label for="password">Password</label>
-                <input type="password" id="password" name="password" placeholder="Create password" required>
+            <div class="input-field">
+                <i class="fas fa-lock"></i>
+                <input type="password" id="password" placeholder="Create Password" required>
             </div>
-
-            <!-- Password Recommendations Section -->
-            <div class="password-recommendations">
-                <p id="length" class="condition">At least 8 characters</p>
-                <p id="uppercase" class="condition">Contains uppercase letters</p>
-                <p id="lowercase" class="condition">Contains lowercase letters</p>
-                <p id="number" class="condition">Contains numbers</p>
-                <p id="special" class="condition">Contains special characters</p>
-    
-
-            <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>
+            <div class="input-field">
+                <i class="fas fa-lock"></i>
+                <input type="password" id="confirmPassword" placeholder="Confirm Password" required>
+            </div>
+            <button type="submit" class="btn">Sign Up</button>
+            <div class="alternative-signup">
+                <p>OR</p>
+                <button class="google-signup">
+                    <img src="google.png" alt="Google Logo"> Sign up with Google
+                </button>
             </div>
-            <div id="password-error" class="error-message"></div> <!-- Password error container -->
-            <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 src="signup.js"></script> <!-- Link to the signup.js file -->
+    <script src="signup.js"></script>
 </body>
 </html>
diff --git a/SignUp/signup.js b/SignUp/signup.js
index bd139f02..283e7738 100644
--- a/SignUp/signup.js
+++ b/SignUp/signup.js
@@ -1,96 +1,21 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const signupButton = document.querySelector(".signup-button");
-
-    // List of trusted email domains
-    const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com" , "protonmail.com" , "icloud.com" , "tutanota.com"];
-
-    signupButton.addEventListener("click", (e) => {
-        e.preventDefault();
-
-        const name = document.querySelector("#username").value;
-        const email = document.querySelector("#email").value;
-        const password = document.querySelector("#password").value;
-        const confirmPassword = document.querySelector("#confirm-password").value;
-        const emailError = document.querySelector("#email-error"); // Reference to email error div
-        const passwordError = document.querySelector("#password-error"); // Reference to password error div
-
-        // Clear any previous error messages
-        emailError.textContent = "";
-        emailError.style.display = "none"; // Hide the error message by default
-        passwordError.textContent = "";
-        passwordError.style.display = "none"; // Hide the error message by default
-
-        if (!name || !email || !password || !confirmPassword) {
-            emailError.textContent = "Every field is required.";
-            emailError.style.display = "block";
-            return;
-        }
-
-        // Email domain validation
-        const emailDomain = email.split("@")[1]; // Get the domain from the email
-        if (!trustedDomains.includes(emailDomain)) {
-            emailError.textContent = "Please use an email address from a trusted provider (e.g., Gmail, Outlook, Yahoo) etc.";
-            emailError.style.display = "block";
-            return;
-        }
-
-        // Password matching validation
-        if (password !== confirmPassword) {
-            passwordError.textContent = "Passwords do not match.";
-            passwordError.style.display = "block";
-            return;
-        }
-        
-        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-        if (!emailPattern.test(email)) {
-            alert("Please enter a valid email address.");
-            return; // Stop the function if the email is not in the right format
-        }
-
-        const userdata = {
-            name,
-            email,
-            password,
-            confirmPassword
-        };
-
-        registerUser(userdata);
-    });
-
-    const registerUser = async (user) => {
-        try {
-            const res = await fetch("http://localhost:5000/auth/signup", {
-                method: "POST",
-                headers: { "content-type": "application/json" },
-                body: JSON.stringify(user)
-            });
-
-            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);
-        }
-    };
-
-    // Password Strength Check
-    const passwordInput = document.querySelector("#password");
-    const conditions = {
-        length: document.getElementById("length"),
-        uppercase: document.getElementById("uppercase"),
-        lowercase: document.getElementById("lowercase"),
-        number: document.getElementById("number"),
-        special: document.getElementById("special")
-    };
-
-    passwordInput.addEventListener("input", () => {
-        const password = passwordInput.value;
-
-        // Check each condition and toggle the "met" class
-        conditions.length.classList.toggle("met", password.length >= 8);
-        conditions.uppercase.classList.toggle("met", /[A-Z]/.test(password));
-        conditions.lowercase.classList.toggle("met", /[a-z]/.test(password));
-        conditions.number.classList.toggle("met", /\d/.test(password));
-        conditions.special.classList.toggle("met", /[!@#$%^&*(),.?":{}|<>]/.test(password));
-    });
+document.getElementById('registerForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const username = document.getElementById('username').value;
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+    const confirmPassword = document.getElementById('confirmPassword').value;
+
+    if (password !== confirmPassword) {
+        alert('Passwords do not match!');
+        return;
+    }
+
+    if (password.length < 8) {
+        alert('Password must be at least 8 characters long!');
+        return;
+    }
+
+    alert('Registration successful!');
+    // You can add further code to submit the form data to the server.
 });
diff --git a/index.html b/index.html
index 650f7c40..6a597cb4 100644
--- a/index.html
+++ b/index.html
@@ -55,16 +55,56 @@
                             <span class="slider"></span>
                         </label></li>
                     <!-- Inside the navbar ul -->
+ vraccessories
+                    <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>
+
+
                     <a href="#" class="cart-button">
                         <img src="images/cart.png" alt="Cart Icon">
                         <span id="cart-count">0</span>
                         </a>
+ main
                 </ul>
 
                 <!-- Hamburger Menu Icon -->
                 <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
             </nav>
         </div>
+ vraccessories
+
+
+        <nav>
+            <ul id="menuList">
+                <li><a href="#controller">Game Controllers</a></li>
+                <li><a href="#vrsection">VR Accessories</a></li>
+                <li><a href="#keyboard">Gaming Keyboard</a></li>
+                <li><a href="#others">Others</a></li>
+                <li class="login"><a href="login/login.html">Login</a></li>
+                <!-- Theme Toggle -->
+                <li><label class="switch">
+                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+                        <span class="slider"></span>
+                    </label></li>
+            </ul>
+            <!-- Hamburger Menu Icon -->
+            <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+        </nav>
+
+        <section class="hero">
+            <div class="overlay"></div>
+            <div class="hero-content">
+                <!-- Search Bar (initially hidden) -->
+
+                <div class="searchbar-outer">
+                    <div class="search-bar hidden" id="searchBar">
+                        <input type="text" id="search-input" placeholder="Search..." />
+                        <button type="button" onclick="performSearch()">🔍</button>
+
         </nav>
 
         <section class="hero">
@@ -76,6 +116,7 @@
                     <div class="search-bar hidden" id="searchBar">
                         <input type="text" id="search-input" placeholder="Search..." />
                         <button type="button" onclick="performSearch()"><i class="fas fa-search"></i></button>
+ main
                     </div>
                 </div>
                 <h1 data-aos="fade-down">Welcome to GamingTools</h1>
@@ -534,8 +575,11 @@ <h4>Emily Davismore</h4>
 
 
     <!-- testimonial end -->
+ vraccessories
 
 
+ main
+
 
     <section id="contact" data-aos="fade-right">
         <div class="card pb-5 pt-1">
@@ -545,6 +589,17 @@ <h2>Contact Our Customer Support Team</h2>
                     We're here to assist you with any questions or concerns you may have.
                 </p>
 
+ vraccessories
+
+    <section id="contact" data-aos="fade-right">
+        <div class="card pb-5 pt-1">
+            <div class="card-header">
+                <h2>Contact Our Customer Support Team</h2>
+                <p class="contact-message">
+                    We're here to assist you with any questions or concerns you may have.
+                </p>
+
+ main
 
             </div>
             <div class="card-body">
@@ -652,18 +707,27 @@ <h2>Quick Links</h2>
                     <li><a href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
                 </ul>
             </div>
+
+
             <div class="footer-section contact-form">
                 <h2>Feedback Form</h2>
                 <form action="#" method="post">
                     <input type="email" name="email" class="text-input contact-input"
+ vraccessories
+                        placeholder="Your email address..." required>
+                    <textarea name="message" class="text-input contact-input" placeholder="Your message..."
+                        required></textarea>
+
                         placeholder="Your email address...">
                     <textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
+ main
                     <button type="submit" class="btn btn-big contact-btn">
-                        <i class="fas fa-envelope"></i>
-                        Send
+                        <i class="fas fa-envelope"></i> Send
                     </button>
                 </form>
             </div>
+
+
         </div>
         <div class="footer-bottom">
             <p><a href="PrivacyPolicy/PrivacyPolicy.html">© 2024 GamingTools | All Rights Reserved</a></p>
diff --git a/login/gaming.jpg b/login/gaming.jpg
new file mode 100644
index 00000000..8281e362
Binary files /dev/null and b/login/gaming.jpg differ
diff --git a/login/login.css b/login/login.css
index 80c74ff1..6744629e 100644
--- a/login/login.css
+++ b/login/login.css
@@ -3,6 +3,169 @@
 
 /* General Reset */
 * {
+ vraccessories
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  background-image: url('gaming.jpg'); /* Add your background image here */
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 70rem;
+}
+
+.login-box {
+  background: rgba(255, 255, 255, 0.1); /* Transparent background */
+  padding: 40px;
+  border-radius: 12px;
+  backdrop-filter: blur(5px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.login-box:hover {
+  border: 1px solid rgba(0, 128, 0, 0.901);
+}
+
+h2 {
+  color: white;
+  margin-bottom: 30px;
+  font-size: 28px;
+  letter-spacing: 1px;
+}
+
+.input-box {
+  position: relative;
+  margin-bottom: 20px;
+  transition: 0.3s ease;
+}
+
+.input-box input {
+  width: 100%;
+  padding: 15px;
+  padding-left: 50px;
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  outline: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 16px;
+  transition: border 0.3s ease, box-shadow 0.3s ease;
+}
+
+.input-box i {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  transform: translateY(-50%);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 20px;
+  transition: color 0.3s ease;
+}
+
+.input-box input:focus {
+  border: 1px solid rgba(0, 168, 120, 0.7);
+  box-shadow: 0 4px 15px rgba(0, 168, 120, 0.3);
+}
+
+.input-box input:focus + i {
+  color: rgb(0, 255, 183);
+}
+
+.forgot-password {
+  display: block;
+  margin: 10px 0;
+  color: rgb(255, 255, 255);
+  font-size: 14px;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.forgot-password:hover {
+  color:rgb(4, 153, 111);
+}
+
+.login-btn {
+  width: 100%;
+  padding: 15px;
+  background-color: #00A878;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.login-btn:hover {
+  background-color: #00875f;
+  box-shadow: 0 4px 15px rgba(0, 168, 120, 0.3);
+}
+
+.social-login p {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.social-login button {
+  width: 100%;
+  padding: 15px;
+  margin-top: 10px;
+  border-radius: 8px;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s ease, transform 0.3s ease;
+}
+
+.social-login button i {
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.apple-btn {
+  background-color: black;
+  color: white;
+}
+
+.google-btn {
+  background-color: white;
+  color: #333;
+}
+
+.social-login button:hover {
+  transform: scale(1.03);
+}
+
+.apple-btn:hover {
+  background-color: #333;
+}
+
+.google-btn:hover {
+  background-color: #f2f2f2;
+=======
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -347,4 +510,5 @@ body {
         font-size: 1em; /* Adjust icon size */
         right: 10px; /* Reduce right spacing for smaller screens */
     }
+ main
 }
diff --git a/login/login.html b/login/login.html
index 937f4e32..d030a631 100644
--- a/login/login.html
+++ b/login/login.html
@@ -3,6 +3,36 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ vraccessories
+    <title>Interactive Login Form</title>
+    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="login.css">
+</head>
+<body>
+    <div class="container">
+        <div class="login-box">
+            <h2>Welcome back!</h2>
+            <form id="loginForm">
+                <div class="input-box">
+                    <i class='bx bx-envelope'></i>
+                    <input type="email" id="email" placeholder="Email" required>
+                </div>
+                <div class="input-box">
+                    <i class='bx bx-lock'></i>
+                    <input type="password" id="password" placeholder="Password" required>
+                </div>
+                <a href="#" class="forgot-password">Forgot Password?</a>
+                <button type="submit" class="login-btn">Log in</button>
+                <div class="social-login">
+                    <p>Don't have an account? <a href="forgot.html">Sign up</a></p>
+                    <button class="apple-btn"><i class='bx bxl-apple'></i> Log in with Apple</button>
+                    <button class="google-btn"><i class='bx bxl-google'></i> Log in with Google</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script src="login.js"></script>
+
     <title>Collect Your Gaming Tools - Login</title>
     <link rel="shortcut icon" href="logo.png" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@400&display=swap" rel="stylesheet">
@@ -119,5 +149,6 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
         };
     </script>
     <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
+ main
 </body>
 </html>
diff --git a/login/login.js b/login/login.js
new file mode 100644
index 00000000..a4c39646
--- /dev/null
+++ b/login/login.js
@@ -0,0 +1,22 @@
+const form = document.getElementById('loginForm');
+
+form.addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const email = document.getElementById('email').value.trim();
+    const password = document.getElementById('password').value.trim();
+
+    if (!validateEmail(email)) {
+        alert('Please enter a valid email address');
+    } else if (password === '') {
+        alert('Password cannot be empty');
+    } else {
+        alert('Login successful');
+        // You can process login here or redirect
+    }
+});
+
+function validateEmail(email) {
+    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\.,;:\s@"]+\.)+[^<>()[\]\.,;:\s@"]{2,})$/i;
+    return re.test(email);
+}
diff --git a/script.js b/script.js
index 1787e9e1..9c354bd3 100644
--- a/script.js
+++ b/script.js
@@ -204,4 +204,12 @@ function testimonialJs() {
 
 });
 }
-testimonialJs();
\ No newline at end of file
+testimonialJs();
+
+// Optional JS for additional button click effect
+document.querySelector('.contact-btn').addEventListener('click', function() {
+  this.classList.add('clicked');
+  setTimeout(() => {
+      this.classList.remove('clicked');
+  }, 300);
+});
diff --git a/style.css b/style.css
index 8890a47c..4a42601e 100644
--- a/style.css
+++ b/style.css
@@ -886,6 +886,61 @@ button {
   transform: scaleY(1); /* Add a vertical line effect on hover */
 }
 
+ vraccessories
+/* Input Fields */
+.text-input {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 2px solid #444;
+    background-color: #1a1a1a;
+    color: #fff;
+    border-radius: 5px;
+    font-family: 'Orbitron', sans-serif; /* Futuristic font */
+    transition: border-color 0.4s, box-shadow 0.4s;
+}
+
+.contact-form form{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 10px;
+}
+
+/* Input focus effects */
+.text-input:focus {
+    border-color: #f39c12;
+    box-shadow: 0 0 8px #f39c12;
+    outline: none;
+}
+
+/* Button Styles */
+.contact-btn {
+    width: 100%;
+    padding: 12px;
+    background-color: #e74c3c;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: 'Orbitron', sans-serif;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.contact-btn i {
+    margin-right: 10px;
+}
+
+/* Button hover effects */
+.contact-btn:hover {
+    background-color: #f39c12;
+    box-shadow: 0 0 15px rgba(255, 165, 0, 0.8);
+
 
 .contact-form .text-input {
   background: #272727;
@@ -922,8 +977,27 @@ button {
 
 #contact {
   padding-top: 100px;
+ main
 }
 
+.contact-btn:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.2);
+    transition: left 0.4s ease;
+}
+
+.contact-btn:hover:before {
+    left: 100%;
+}
+
+/* Add glowing effect around the form on hover */
+
+
 .footer-bottom {
   background-color: #1c1917; /* Dark background color */
   padding: 12px 0; /* Spacing at the top and bottom */