diff --git a/SignUp/signup.html b/SignUp/signup.html
index 723c3b67..679475c2 100644
--- a/SignUp/signup.html
+++ b/SignUp/signup.html
@@ -6,6 +6,13 @@
     <title>Sign Up for GamingTools</title>
     <link rel="stylesheet" href="signup.css">
     <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <style>
         .condition {
             color: gray; /* Default color */
@@ -41,7 +48,10 @@ <h1>Create Your Account</h1>
             </div>
             <div class="input-group">
                 <label for="password">Password</label>
-                <input type="password" id="password" name="password" placeholder="Create password" required>
+                <div class="pass">
+                    <input type="password" id="password" name="password" required>
+                    <button id="showPasswordBtn"><i class="fa-regular fa-eye" id="passicon"></i></button>
+                </div>
             </div>
 
             <!-- Password Recommendations Section -->
@@ -55,7 +65,10 @@ <h1>Create Your Account</h1>
 
             <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="pass">
+                    <input type="password" id="confirm-password" name="confirm-password" required>
+                    <button id="showPasswordBtn-conf"><i class="fa-regular fa-eye" id="passicon-conf"></i></button>
+                </div>
             </div>
             <div id="password-error" class="error-message"></div> <!-- Password error container -->
             <button type="submit" class="signup-button">Sign Up</button>
@@ -68,10 +81,85 @@ <h1>Create Your Account</h1>
             Sign up with Google
         </button>
         <div class="links">
-            <a href="../login/login.html"><u>Already have an account? Login</u></a>
+            <a>Already have an account? <u><a href="../login/login.html">Login</a></u></a>
         </div>
     </div>
+    <script>
+        const signup = document.querySelector(".signup-button");
 
+        signup.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;
+
+            if(!name || !email || !password || !confirmPassword){
+                alert("every feild is required");
+                return;
+            }
+            const userdata = {
+                name,
+                email,
+                password,
+                confirmPassword
+            }
+            registeruser(userdata);
+
+        } )
+
+        // Show password
+        document.getElementById("showPasswordBtn").addEventListener("click", () => {
+        const password = document.getElementById("password");
+        const icon = document.getElementById("passicon");
+
+        if (password.type === "password") {
+            password.type = "text";
+            icon.classList.remove("fa-regular", "fa-eye");
+            icon.classList.add("fa-solid", "fa-eye-slash");
+        } else {
+            password.type = "password";
+            icon.classList.remove("fa-solid", "fa-eye-slash");
+            icon.classList.add("fa-regular", "fa-eye");
+        }
+        });
+
+        // Show password-conf
+        document.getElementById("showPasswordBtn-conf").addEventListener("click", () => {
+        const password = document.getElementById("confirm-password");
+        const icon = document.getElementById("passicon-conf");
+
+        if (password.type === "password") {
+            password.type = "text";
+            icon.classList.remove("fa-regular", "fa-eye");
+            icon.classList.add("fa-solid", "fa-eye-slash");
+        } else {
+            password.type = "password";
+            icon.classList.remove("fa-solid", "fa-eye-slash");
+            icon.classList.add("fa-regular", "fa-eye");
+        }
+        });
+
+
+        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)
+            }
+        }
+    </script>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
     <script src="signup.js"></script> <!-- Link to the signup.js file -->
 </body>
diff --git a/login/login.html b/login/login.html
index 937f4e32..2301b89c 100644
--- a/login/login.html
+++ b/login/login.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Collect Your Gaming Tools - Login</title>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Collect your GamingTools</title>
+    <link rel="stylesheet" href="login.css">
     <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">
     <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons.js"></script>
@@ -42,6 +43,25 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
                 <button type="button" class="social-button google">Login with Google</button>
             </div>
         </div>
+        <div class="input-group">
+          <label for="password">Password</label>
+          <div class="pass">
+            <input type="password" id="password" name="password" required />
+            <button type="button" id="showPasswordBtn">
+              <i class="fa-regular fa-eye" id="passicon"></i>
+            </button>
+          </div>
+        </div>
+        <div ontouchstart="">
+          <div class="button">
+            <a href="#">Login</a>
+          </div>
+        </div>
+      </form>
+      <div class="links">
+        <a href="forgot.html" class="hal">Forgot Password?</a>
+        <a href="../SignUp/signup.html" class="hal2">Sign Up</a>
+      </div>
     </div>
     <footer class="footer">
         <ul class="social-icon">
@@ -66,12 +86,64 @@ <h1 class="login-title">Welcome to Gaming Tools Store!</h1>
             <li class="menu__item"><a class="menu__link" href="../index.html#contact">Contact</a></li>
         </ul>
         <p>&copy;2024 Collect your Gaming Tools | All Rights Reserved</p>
-    </footer>
+    </footer>    
 
-    <script>
-        const loginButton = document.querySelector(".login-button");
+</body>
+  <script>
+  const loginButton = document.querySelector(".login-button");
         const togglePassword = document.getElementById('togglePassword');
         const passwordInput = document.getElementById('password');
+    const login = document.querySelector(".button");
+
+    login.addEventListener("click", (e) => {
+      e.preventDefault();
+
+      const email = document.querySelector("#gmail").value;
+      const password = document.querySelector("#password").value;
+      const userData = {
+        email,
+        password,
+      };
+      console.log(userData);
+      loginUser(userData);
+    });
+
+    // Show password
+    document.getElementById("showPasswordBtn").addEventListener("click", () => {
+      const password = document.getElementById("password");
+      const icon = document.getElementById("passicon");
+
+      if (password.type === "password") {
+        password.type = "text";
+        icon.classList.remove("fa-regular", "fa-eye");
+        icon.classList.add("fa-solid", "fa-eye-slash");
+      } else {
+        password.type = "password";
+        icon.classList.remove("fa-solid", "fa-eye-slash");
+        icon.classList.add("fa-regular", "fa-eye");
+      }
+    });
+
+    const loginUser = async (user) => {
+      try {
+        const res = await fetch("http://localhost:5000/auth/signin", {
+          method: "POST",
+          credentials: "include",
+          redirect: "follow",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(user),
+        });
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`);
+        }
+        const data = await res.json();
+
+        window.location.href =
+          "http://127.0.0.1:5500/Collect-your-GamingTools/index.html";
+      } catch (e) {
+        console.log(e.message);
+    }
+    }
 
         togglePassword.addEventListener('click', function () {
             const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';