diff --git a/login.html b/login.html
index 8260029..8f06dc7 100644
--- a/login.html
+++ b/login.html
@@ -6,13 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Register & Login</title>
   <link rel="stylesheet" href="preloaderStyle.css">
-  <link rel="stylesheet" href="src\css/login.css" />
+  <link rel="stylesheet" href="src/css/login.css" />
   <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
 </head>
-<div class="gtranslate_wrapper"></div>
-<script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
 <body>
   <!-- preloader -->
@@ -28,27 +25,7 @@
       </div>
     </div>
   </div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
+
   <div class="container">
     <div class="forms-container">
       <div class="signin-signup">
@@ -56,17 +33,16 @@
           <h2 class="title">Sign in</h2>
           <div class="input-field">
             <i class="fas fa-user"></i>
-            <input type="text" id="username" placeholder="Username" />
+            <input type="text" id="username" placeholder="Username" aria-label="Username" required />
           </div>
           <div class="input-field">
             <i class="fas fa-lock" id="toggle-password"></i>
-            <input type="password" placeholder="Password" id="password-input" />
+            <input type="password" placeholder="Password" id="password-input" aria-label="Password" required />
           </div>
           <div class="form-check d-flex">
             <input type="checkbox" class="form-check-input" id="remember-me" />
-            <label class="form-check-label">Remember me</label>
+            <label class="form-check-label" for="remember-me">Remember me</label>
           </div>
-
           <input type="submit" value="Login" class="btn solid" />
           <p class="social-text">Or Sign in with social platforms</p>
           <div class="social-media">
@@ -80,67 +56,22 @@ <h2 class="title">Sign in</h2>
               <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
             </a>
           </div>
+          <div id="login-error" style="color: red; display: none;"></div> <!-- Error message -->
         </form>
-       <script>
-       function validateSignInForm() {
-                const username = document.querySelector('.sign-in-form input[type="text"]').value;
-                const password = document.querySelector('.sign-in-form input[type="password"]').value;
-        
-                // Sign-in validation logic
-                if (username.trim() === "") {
-                    alert("Please enter your username.");
-                    return false;
-                }
-        
-                if (password.trim() === "") {
-                    alert("Please enter your password.");
-                    return false;
-                }
-        
-                // Simulate successful login 
-                alert("You have successfully logged in to the website!");
-        
-                // Redirect to the home screen after a short delay
-                setTimeout(function() {
-                    window.location.href = "index.html"; 
-                }, 2000); // Redirect after 2 seconds
-        
-                // If all validations pass, return true to allow form submission
-                return false; // Prevent form submission since we are handling the redirect
-            };
-          </script>
-        <form action="#" class="sign-up-form"
-          style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
+
+        <form action="#" class="sign-up-form" onsubmit="return validateSignUpForm()">
           <h2 class="title">Sign up</h2>
           <div class="input-field">
             <i class="fas fa-user"></i>
-            <input type="text" placeholder="Username" />
+            <input type="text" placeholder="Username" aria-label="Username" required />
           </div>
           <div class="input-field">
             <i class="fas fa-envelope"></i>
-            <input type="email" placeholder="Email" />
+            <input type="email" placeholder="Email" aria-label="Email" required />
           </div>
           <div class="input-field">
-
             <i class="fas fa-lock" id="toggle-password-signup"></i>
-            <input type="password" placeholder="Password" id="password-input-signup" />
-          </div>
-
-          <!-- Password strength meter starts here (initially hidden) -->
-          <div id="password-strength-section" style="display: none;">
-            <label for="password-input-signup">Password Strength:</label>
-            <div class="strength-meter"
-              style="width: 100%; max-width: 300px; height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px auto;">
-              <div id="strength-bar-signup"
-                style="height: 100%; width: 1%; background-color: #d73f40; border-radius: 5px; transition: width 0.5s, background-color 0.5s;">
-              </div>
-            </div>
-            <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div>
-          </div>
-          <!-- Password strength meter ends here -->
-          <div class="form-check d-flex">
-            <input type="checkbox" class="form-check-input" id="login-remember" />
-            <label class="form-check-label">Remember me</label>
+            <input type="password" placeholder="Password" id="password-input-signup" aria-label="Password" required />
           </div>
           <input type="submit" class="btn" value="Sign up" />
           <p class="social-text">Or Sign up with social platforms</p>
@@ -149,316 +80,17 @@ <h2 class="title">Sign up</h2>
               <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
             </div>
             <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
-              <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i>
+              <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i>
             </a>
             <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
-              <i class="fab fa-github" style="font-size: 24px; color: #333;"></i>
+              <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
             </a>
           </div>
         </form>
-
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
-        <script>
-          let passwordSignup = document.getElementById("password-input-signup");
-          let strengthBarSignup = document.getElementById("strength-bar-signup");
-          let strengthLabelSignup = document.getElementById("strength-label-signup");
-          let passwordStrengthSection = document.getElementById("password-strength-section");
-
-          passwordSignup.oninput = function () {
-            let value = passwordSignup.value;
-
-            // Show the strength meter when the user starts typing
-            if (value.length > 0) {
-              passwordStrengthSection.style.display = "block";
-            } else {
-              passwordStrengthSection.style.display = "none";
-            }
-
-            let result = zxcvbn(value);
-            let score = result.score; // Score is between 0 and 4
-            let widths = ["1%", "25%", "50%", "75%", "100%"];
-            let colors = ["#d73f40", "#dc6551", "#f2b84f", "#bde952", "#3ba62f"];
-            let labels = ["Very Weak", "Weak", "Fair", "Good", "Strong"];
-
-            strengthBarSignup.style.width = widths[score];
-            strengthBarSignup.style.backgroundColor = colors[score];
-            strengthLabelSignup.textContent = labels[score];
-          };
-        </script>
-
-      </div>
-    </div>
-
-    <div class="panels-container">
-      <a href="index.html" class="homeBtn">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
-          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-        </svg>
-      </a>
-      <div class="panel left-panel">
-        <div class="content">
-          <h3>New here ?</h3>
-          <p>
-            Discover new experiences with AmbuFlow! <br />Get access to
-            exclusive content and features. <br />
-            Create your account.
-          </p>
-          <a href="index.html" class="homeBtn">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 24 20" width="30" height="30">
-              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-            </svg>
-          </a>
-          <button class="btn transparent" id="sign-up-btn">Sign up</button>
-        </div>
-        <img src="img/log.svg" class="image" alt="" />
-      </div>
-      <div class="panel right-panel">
-        <div class="content">
-          <h3>One of us ?</h3>
-          <p>Welcome to our community</p>
-          <button class="btn transparent" id="sign-in-btn">Sign in</button>
-        </div>
-        <img src="img/register.svg" class="image" alt="" />
       </div>
     </div>
   </div>
-  <script src="preloader.js"></script>
-  <script>
-    const sign_in_btn = document.querySelector("#sign-in-btn");
-    const sign_up_btn = document.querySelector("#sign-up-btn");
-    const container = document.querySelector(".container");
-
-    sign_up_btn.addEventListener("click", () => {
-      container.classList.add("sign-up-mode");
-    });
-
-    sign_in_btn.addEventListener("click", () => {
-      container.classList.remove("sign-up-mode");
-    });
-
-    // Sign in form submission
-    document.querySelector(".sign-in-form").addEventListener("submit", async function (event) {
-      event.preventDefault();
-
-      const username = document.querySelector(".sign-in-form input[type='text']").value;
-      const password = document.querySelector(".sign-in-form input[type='password']").value;
-
-      // Remove the below block of code when the server is ready (Written just for testing)
-      if (username === "username" && password === "123456") {
-        console.log("Login successful!");
-        localStorage.setItem("userID", "7887892rdwed3")
-        localStorage.setItem("JWTtoken", "dummyToken123"); // Example token
-        localStorage.setItem("login", "success");
-        window.location.href = "hospital.html";
-      }
-      // Testing block ends here, proceed with actual request once the server is ready
-
-      const data = JSON.stringify({ username, password });
-      console.log(data);
-
-      // Uncomment the below code when MongoDB is ready
-      /*
-      try {
-          const response = await fetch("http://localhost:3000/login", {
-              method: "POST",
-              headers: {
-                  "Content-Type": "application/json",
-              },
-              body: data,
-          });
-
-          if (!response.ok) {
-              throw new Error("Login failed: " + response.statusText);
-          }
-
-          const result = await response.json();
-          console.log("Server response:", result);
-          localStorage.setItem("token", result.token);
-          localStorage.setItem("userID", result.id);
-          console.log('Login successful!');
-          window.location.href = "hospital.html";
-      } catch (error) {
-          alert("Invalid username or password");
-          console.error("Error during login:", error);
-      }
-      */
-    });
-
 
-
-    // Uncomment the below code when MongoDB is ready
-    /*
-    try {
-      const response = await fetch("http://localhost:3000/signup", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: data,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || "Signup failed");
-      }
-
-      const result = await response.json();
-      console.log("Server response:", result);
-
-      alert("Signup successful!");
-      window.location.href = "login.html";
-    } catch (error) {
-      alert(error.message);
-      console.error("Error during signup:", error);
-    }
-    */
-
-    // Toggle password visibility
-    function togglePassword(fieldId, icon) {
-      const field = document.getElementById(fieldId);
-      const isPassword = field.type === "password";
-
-      // Toggle between 'password' and 'text'
-      field.type = isPassword ? "text" : "password";
-
-      // Change the icon class between eye and eye-slash
-      icon.classList.toggle("fa-lock-open", isPassword);
-      icon.classList.toggle("fa-lock", !isPassword);
-    }
-
-    document
-      .getElementById("toggle-password")
-      .addEventListener("click", function () {
-        togglePassword("password-input", this);
-      });
-
-    document
-      .getElementById("toggle-password-signup")
-      .addEventListener("click", function () {
-        togglePassword("password-input-signup", this);
-      });
-
-    // Check password strength
-    function checkPasswordStrength() {
-      const password = document.querySelector(
-        ".sign-up-form input[type='password']"
-      ).value;
-      const strengthWeak = document.getElementById("strength-weak");
-      const strengthMedium = document.getElementById("strength-medium");
-      const strengthStrong = document.getElementById("strength-strong");
-
-      let strength = 0;
-
-      if (password.length >= 8) strength++;
-      if (password.match(/[A-Z]/)) strength++;
-      if (password.match(/[a-z]/)) strength++;
-      if (password.match(/[0-9]/)) strength++;
-      if (password.match(/[^a-zA-Z0-9]/)) strength++;
-
-      strengthWeak.className = "";
-      strengthMedium.className = "";
-      strengthStrong.className = "";
-
-      if (strength >= 1) strengthWeak.className = "weak";
-      if (strength >= 3) strengthMedium.className = "medium";
-      if (strength >= 5) strengthStrong.className = "strong";
-    }
-
-    document
-      .querySelector(".sign-up-form input[type='password']")
-      .addEventListener("input", checkPasswordStrength);
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
-  <script>
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#ffb56b",
-      "#fdaf69",
-      "#f89d63",
-      "#f59761",
-      "#ef865e",
-      "#ec805d",
-      "#e36e5c",
-      "#df685c",
-      "#d5585c",
-      "#d1525c",
-      "#c5415d",
-      "#c03b5d",
-      "#b22c5e",
-      "#ac265e",
-      "#9c155f",
-      "#950f5f",
-      "#830060",
-      "#7c0060",
-      "#680060",
-      "#60005f",
-      "#48005f",
-      "#3d005e",
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-
-    animateCircles();
-  </script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const rememberMeCheckbox = document.getElementById("remember-me");
-      const usernameInput = document.getElementById("username");
-
-      // Load saved username if it exists
-      if (localStorage.getItem("rememberedUsername")) {
-        usernameInput.value = localStorage.getItem("rememberedUsername");
-        rememberMeCheckbox.checked = true;
-      }
-
-      // When the form is submitted, save the username if "Remember Me" is checked
-      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
-        e.preventDefault(); // Prevent default form submission
-
-        if (rememberMeCheckbox.checked) {
-          localStorage.setItem("rememberedUsername", usernameInput.value);
-        } else {
-          localStorage.removeItem("rememberedUsername");
-        }
-        // Add form submission logic here
-      });
-    });
-
-  </script>
-  <script src="https://apis.google.com/js/platform.js" async defer></script>
-  <!-- <script src="Firebase.js" type="module"></script> -->
+  <script src="script.js"></script>
 </body>
-
 </html>
\ No newline at end of file
