diff --git a/signup/signup.css b/signup/signup.css
index d675f2a..79e7fe3 100644
--- a/signup/signup.css
+++ b/signup/signup.css
@@ -1,202 +1,159 @@
-@keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
-      transform: translateY(0);
-  }
-  40% {
-      transform: translateY(-7px);
-  }
-  60% {
-      transform: translateY(-1px);
-  }
-}
-
-body {
-  font-family: 'Quicksand', sans-serif;
-  background: linear-gradient(135deg, #2d0232, #0d0722);
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+}
+
+body {
+  font-family: 'Press Start 2P', cursive; /* Retro pixel-style font */
+  background-color: #1a1a2e;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
-}
-
-section {
-  position: absolute;
-  width: 100vw;
   height: 100vh;
-  overflow-x: hidden;
-}
-
-section::before {
-  content: '';
-  position: absolute;
+  background-image: linear-gradient(45deg, #0f0c29, #302b63, #24243e); /* Retro gradient */
 }
 
 .signup-form-container {
-  background-color: #d5e0e1; 
+  background-color: #303a52;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
   width: 100%;
   max-width: 400px;
-  padding: 40px;
-  border-radius: 30px;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  transition: background-color 1s ease;
+  text-align: center;
+  border: 3px solid #00d4ff; /* Retro blue border */
 }
 
-h2 {
-  text-align: center;
-  color: #2C3E50;
-  font-size: 2.5em;
+.signup-title {
+  font-size: 24px;
+  color: #00d4ff;
+  margin-bottom: 30px;
+  text-shadow: 2px 2px 4px #000; /* Retro pixel text-shadow */
+}
+
+.inputBox {
   margin-bottom: 20px;
+  position: relative;
 }
 
-label {
-  font-size: 1.2em;
-  color: #333;
-  font-weight: bold;
-  margin-bottom: 10px;
+.inputBox label {
   display: block;
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: #d4f1f9; /* Lighter blue for labels */
+  text-align: left;
 }
 
-input {
-  border: solid 1px #000000;
+.inputBox input {
   width: 100%;
-  height: 40px;
   padding: 10px;
-  margin-bottom: 20px;
-  border-radius: 20px;
-  font-size: 1em;
-  box-sizing: border-box;
-  transition: border-color 0.3s ease;
+  font-size: 14px;
+  background-color: #1f4068;
+  color: white;
+  border: 2px solid #00d4ff;
+  border-radius: 8px;
+  outline: none;
+  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.5);
 }
 
-input[type="submit"] {
-  border: none;
-  width: 100%;
-  background-color: #3752e9;
-  color: white;
-  font-size: 1.1em;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.2s ease;
-  height: 45px;
-  border-radius: 20px;
+.inputBox input::placeholder {
+  color: #c0d6df;
 }
 
-input[type="submit"]:hover {
-  background-color: #0d11da;
-  transform: scale(1.05);
+.inputBox input:focus {
+  border-color: #00b3e6;
 }
 
-#submitBtn {
-  margin-top: 18px;
-  border-radius: 20px;
-  padding: 10px;
-  font-size: larger;
+.inputBox button {
   width: 100%;
+  padding: 12px;
+  background-color: #00d4ff;
+  color: #0f0c29;
+  font-size: 14px;
+  font-weight: bold;
+  border: 2px solid #00b3e6;
+  border-radius: 8px;
+  cursor: pointer;
   transition: background-color 0.3s ease;
-  background-color: #2472c5;
 }
 
-#submitBtn:hover {
-  background-color: #0e55a1;
-  color:white;
-  transform: scale(1.05);
-
+.inputBox button:hover {
+  background-color: #00a3cc;
+  border-color: #007799;
 }
 
-.return {
-  color:black;
-  text-decoration: none;
-  font-size: larger;
-  width: 100%;
-  border-radius: 20px;
-  border: none;
-  padding: 10px;
-  background-color: #2472c5;
-  width: 100%;
-  transition: background-color 0.3s ease;
+.return-link {
+  display: inline-block;
   margin-top: 20px;
+  font-size: 12px;
+  color: #00d4ff;
+  text-decoration: none;
+  text-shadow: 1px 1px 2px #000;
 }
-.return:hover
-{
-  background-color:#0e55a1;
-  color:white;
-  transform: scale(1.05);
 
+.return-link:hover {
+  text-decoration: underline;
 }
 
 .form-message {
-  color: green;
-  font-size: 1.2em;
-  margin-top: 20px;
+  margin-top: 10px;
+  font-size: 14px;
+  color: #ff5959;
   text-align: center;
+  font-weight: bold;
 }
 
-.link {
+.toast {
+  visibility: hidden;
+  min-width: 250px;
+  background-color: #1f4068;
+  color: #00d4ff;
   text-align: center;
-  margin-top: 20px;
-  padding: 10px;
+  border-radius: 8px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1000;
+  right: 30px;
+  top: 30px;
+  font-size: 12px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
+  border: 2px solid #00b3e6;
 }
 
-.link a {
-  background-color: #3752e9;
-  color: white;
-  text-decoration: none;
-  padding: 10px 20px;
-  border-radius: 20px;
-  transition: background-color 0.3s ease;
+.toast.show {
+  visibility: visible;
+  animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
 }
 
-.link a:hover {
-  background-color: #0d11da;
+.toast.success {
+  background-color: #00d4ff;
+  color: #0f0c29;
 }
 
-@media screen and (max-width: 600px) {
-  .signup-form-container {
-    padding: 20px;
-  }
+.toast.error {
+  background-color: #ff5959;
+  color: #fff;
 }
 
-
-.snowflake {
-  --size: 1vw;
-  background: url('https://github.com/Jay-1409/Jay_Shah_Portfolio/blob/main/public/Static/Images/SnowFlake.png?raw=true') no-repeat center center;
-  width: calc(4 * var(--size));
-  height: calc(4 * var(--size));
-  background-size: cover;
-  position: absolute;
-  top: -5vh;
-  z-index: -1;
-  animation: snowfall 100s linear infinite;
-}
-
-@keyframes snowfall {
-  0% {
-    transform: translate3d(var(--left-ini), 0, 0);
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
   }
-  100% {
-    transform: translate3d(var(--left-end), 80vh, 0);
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-
-.snowflake:nth-child(1) {
-  --size: 0.8vw;
-  --left-ini: 4vw;
-  --left-end: 2vw;
-  left: 55vw;
-  animation: snowfall 18s linear infinite;
-  animation-delay: -8s;
-}
-
-.snowflake:nth-child(2) {
-  --size: 0.8vw;
-  --left-ini: 5vw;
-  --left-end: 5vw;
-  left: 63vw;
-  animation: snowfall 9s linear infinite;
-  animation-delay: -7s;
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
 }
-
-
diff --git a/signup/signup.html b/signup/signup.html
index fbc5d1b..5746c13 100644
--- a/signup/signup.html
+++ b/signup/signup.html
@@ -1,228 +1,109 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Signup Form</title>
-    <link rel="stylesheet" href="./signup.css" />
-  </head>
-  <body>
-    <div class="signup-form-container">
-      <h2 class="signup-title">Sign Up</h2>
-      <form id="signup-form">
-        <label for="full-name">Full Name:</label>
-        <input
-          type="text"
-          id="full-name"
-          name="full-name"
-          placeholder="Enter your full name"
-          required
-        />
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Signup Page</title>
+  <title>Signup Form</title>
   <link rel="stylesheet" href="./signup.css">
-  <style>
-    
-    .toast {
-      visibility: hidden;
-      min-width: 250px;
-      background-color: #333;
-      color: white;
-      text-align: center;
-      border-radius: 8px;
-      padding: 16px;
-      position: fixed;
-      z-index: 1000;
-      right: 30px;
-      top: 30px;
-      font-size: 16px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    }
-
-    .toast.success {
-      background-color: #4CAF50;
-    }
-
-    .toast.show {
-      visibility: visible;
-      animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
-    }
-
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-20px);
-      }
-
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    @keyframes fadeOut {
-      from {
-        opacity: 1;
-        transform: translateY(0);
-      }
-
-      to {
-        opacity: 0;
-        transform: translateY(-20px);
-      }
-    }
-
-    .password-field {
-      position: relative;
-      width: 100%;
-    }
-
-    .password-toggle {
-    position: absolute;
-    right: 10px;
-    top: 56%;
-    transform: translateY(-50%);
-    border: none;
-    background: none;
-    cursor: pointer;
-    color: #666;
-    padding: 0;
-}
-
-    .password-toggle:hover {
-      color: #333;
-    }
-
-    .password-field input {
-      padding-right: 40px; 
-    }
-
-    .signup-title {
-      text-align: center;
-      font-size: 35px;
-      margin-bottom: 20px;
-      color: black;
-    }
-  </style>
 </head>
 <body>
-  <div class="snowflake"></div>
-  <div class="snowflake"></div>
-
-  <div id="toast" class="toast"></div>
-
   <div class="signup-form-container">
     <h2 class="signup-title">Sign Up</h2>
     <form id="signup-form">
       <div class="inputBox">
-        <label for="fullname">Full Name:</label>
-        <input type="text" id="fullname" name="fullname" placeholder="Enter your full name" required>
+        <label for="full-name">Full Name:</label>
+        <input type="text" id="full-name" name="full-name" placeholder="Enter your full name" required>
       </div>
 
       <div class="inputBox">
         <label for="email">Email:</label>
-        <input
-          type="email"
-          id="email"
-          name="email"
-          placeholder="Enter your email"
-          required
-        />
+        <input type="email" id="email" name="email" placeholder="Enter your email" required>
+      </div>
 
+      <div class="inputBox password-field">
         <label for="password">Password:</label>
-        <input
-          type="password"
-          id="password"
-          name="password"
-          placeholder="Enter a password"
-          required
-        />
-
-        <div class="next">
-          <input type="submit" id="submitBtn" value="Sign Up" />
-        </div>
-      </form>
-
-      <div id="form-message" class="form-message"></div>
-      <div class="link"><a id="submitBtn" style="background-color: #3752e9; color: white; text-decoration: none; transform: scale(1.2);" href="../index.html">Return Home</a></div>
-    </div>
         <input type="password" id="password" name="password" placeholder="Enter your password" required>
-        <button type="button" class="password-toggle" onclick="togglePassword()">👁️</button>
       </div>
 
       <div class="inputBox">
         <button type="submit" id="submitBtn">Sign Up</button>
       </div>
     </form>
-      <a href="./index.html"><button class="return">Return Home </button></a>
+
+    <div id="form-message" class="form-message"></div>
+    <a href="./index.html" class="return-link">Return Home</a>
   </div>
 
+  <div id="toast" class="toast"></div>
+
   <script>
-  
-    function togglePassword() {
-      const passwordField = document.getElementById("password");
-      const type = passwordField.type === "password" ? "text" : "password";
-      passwordField.type = type;
-    }
+    document.addEventListener("DOMContentLoaded", function () {
+      const allowedDomains = ["gmail.com", "outlook.com", "yahoo.com", "protonmail.com", "icloud.com", "tutanota.com"];
+
+      // Load stored data from localStorage if it exists
+      const storedSignupData = localStorage.getItem("signupData");
+      if (storedSignupData) {
+        const formData = JSON.parse(storedSignupData);
+        document.getElementById("full-name").value = formData.fullName;
+        document.getElementById("email").value = formData.email;
+        document.getElementById("password").value = formData.password;
+      }
 
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        // Allowed email domains
-        const allowedDomains = ["gmail.com", "outlook.com", "yahoo.com", "protonmail.com", "icloud.com", "tutanota.com"];
-
-        // Load stored data from localStorage if exists
-        const storedSignupData = localStorage.getItem("signupData");
-        if (storedSignupData) {
-          const formData = JSON.parse(storedSignupData);
-          document.getElementById("full-name").value = formData.fullName;
-          document.getElementById("email").value = formData.email;
-          document.getElementById("password").value = formData.password;
+      // Form submission handler
+      document.getElementById("signup-form").addEventListener("submit", function (event) {
+        event.preventDefault(); // Prevent form submission
+
+        const email = document.getElementById("email").value;
+        const emailDomain = email.split("@").pop();
+
+        // Check if email domain is allowed
+        if (!allowedDomains.includes(emailDomain)) {
+          document.getElementById("form-message").innerText = "Invalid email domain. Please use a valid domain.";
+          showToast("Invalid email domain", "error");
+          return; // Stop form submission
         }
 
-        // Form submission handler
-        document
-          .getElementById("signup-form")
-          .addEventListener("submit", function (event) {
-            event.preventDefault(); // Prevent form submission
-
-            const email = document.getElementById("email").value;
-            const emailDomain = email.split("@").pop();
-
-            // Check if email domain is allowed
-            if (!allowedDomains.includes(emailDomain)) {
-              document.getElementById("form-message").innerText =
-                "Invalid email domain. Please use Gmail, Outlook, Yahoo, protonmail, icloud, or tutanota. "
-                ;
-              return; // Stop form submission
-            }
-
-            // Capture form data
-            const formData = {
-              fullName: document.getElementById("full-name").value,
-              email: email,
-              password: document.getElementById("password").value,
-            };
-
-            // Store data in localStorage
-            localStorage.setItem("signupData", JSON.stringify(formData));
-
-            // Display success message
-            document.getElementById("form-message").innerText =
-              "Signup successful!";
-
-            // Clear form after signup
-            document.getElementById("full-name").value = "";
-            document.getElementById("email").value = "";
-            document.getElementById("password").value = "";
-
-            setTimeout(function () {
-              window.location.href = "../login/login.html"; // Redirect to login page after signup
-            }, 500);
-          });
+        // Capture form data
+        const formData = {
+          fullName: document.getElementById("full-name").value,
+          email: email,
+          password: document.getElementById("password").value
+        };
+
+        // Store data in localStorage
+        localStorage.setItem("signupData", JSON.stringify(formData));
+
+        // Display success message and show toast
+        document.getElementById("form-message").innerText = "Signup successful!";
+        showToast("Signup successful!", "success");
+
+        // Clear form after signup
+        document.getElementById("full-name").value = "";
+        document.getElementById("email").value = "";
+        document.getElementById("password").value = "";
+
+        // Redirect after a short delay
+        setTimeout(function () {
+          window.location.href = "../login/login.html"; // Redirect to login page after signup
+        }, 1500);
       });
-    </script>
-  </body>
+    });
+
+    // Toast notification function
+    function showToast(message, type) {
+      const toast = document.getElementById("toast");
+      toast.textContent = message;
+      toast.classList.add("show");
+      if (type === "success") {
+        toast.classList.add("success");
+      } else {
+        toast.classList.add("error");
+      }
+      setTimeout(function () {
+        toast.classList.remove("show");
+        toast.classList.remove("success", "error");
+      }, 3000); // Hide after 3 seconds
+    }
+  </script>
+</body>
 </html>