diff --git a/index.html b/index.html
index bba4d7de..7ad4b041 100644
--- a/index.html
+++ b/index.html
@@ -3941,7 +3941,7 @@ <h3 id="profileNameDisplay">XYZ<br /><span>Book Lover</span></h3>
                     <a href="./assets/html/event.html" class="navbar-link" data-nav-link="">Events</a>
                 </li>
                 <li class="navbar-item" id="login-signup-link">
-                    <a href="./assets/html/login.html" class="navbar-link">Login</a>
+                    <a href="./signup.html" class="navbar-link">Signup/Register</a>
                 </li>
                 <li class="navbar-item dropdown">
                     <a href="#" class="navbar-link" onclick="toggleMoreMenu(event)">More 
diff --git a/signup.css b/signup.css
new file mode 100644
index 00000000..7327b7b8
--- /dev/null
+++ b/signup.css
@@ -0,0 +1,445 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body,
+input {
+  font-family: "Poppins", sans-serif;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.forms-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.signin-signup {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  left: 75%;
+  width: 50%;
+  transition: 1s 0.7s ease-in-out;
+  display: grid;
+  grid-template-columns: 1fr;
+  z-index: 5;
+}
+
+#signup-success-message {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 128, 0, 0.8); /* Green with translucency */
+  color: white;
+  font-size: 18px;
+  text-align: center;
+  padding: 20px 40px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  display: none; /* Hidden by default */
+  z-index: 1000;
+}
+.hidden {
+  display: none;
+}
+
+
+form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0rem 5rem;
+  transition: all 0.2s 0.7s;
+  overflow: hidden;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+form.sign-up-form {
+  opacity: 0;
+  z-index: 1;
+}
+
+form.sign-in-form {
+  z-index: 2;
+}
+
+.title {
+  font-size: 2.2rem;
+  color: #444;
+  margin-bottom: 10px;
+}
+
+.input-field {
+  max-width: 380px;
+  width: 100%;
+  background-color: #f0f0f0;
+  margin: 10px 0;
+  height: 55px;
+  border-radius: 55px;
+  display: grid;
+  grid-template-columns: 15% 85%;
+  padding: 0 0.4rem;
+  position: relative;
+}
+
+.input-field i {
+  text-align: center;
+  line-height: 55px;
+  color: #acacac;
+  transition: 0.5s;
+  font-size: 1.1rem;
+}
+
+.input-field input {
+  background: none;
+  outline: none;
+  border: none;
+  line-height: 1;
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.input-field input::placeholder {
+  color: #aaa;
+  font-weight: 500;
+}
+
+.social-text {
+  padding: 0.7rem 0;
+  font-size: 1rem;
+}
+
+.social-media {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.social-icon {
+  margin: 0 10px;
+}
+
+.social-icon i {
+  transition: transform 0.2s ease-in-out;
+}
+
+.social-icon:hover i {
+  transform: scale(1.1);
+}
+
+.btn {
+  width: 150px;
+  background-color: hsl(356.81deg 79.02% 71.96%);
+  border: none;
+  outline: none;
+  height: 49px;
+  border-radius: 49px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 10px 0;
+  cursor: pointer;
+  transition: 0.5s;
+}
+
+.btn:hover {
+  background-color: hsl(356.81deg 79.02% 71.96%);
+}
+.panels-container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.container:before {
+  content: "";
+  position: absolute;
+  height: 2000px;
+  width: 2000px;
+  top: -10%;
+  right: 48%;
+  transform: translateY(-50%);
+  background-image: linear-gradient(-45deg, hsl(356.81deg 79.02% 71.96%) 0%, hsl(356.81deg 79.02% 71.96%) 100%);
+  transition: 1.8s ease-in-out;
+  border-radius: 50%;
+  z-index: 6;
+}
+
+.image {
+  width: 100%;
+  transition: transform 1.1s ease-in-out;
+  transition-delay: 0.4s;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  text-align: center;
+  z-index: 6;
+}
+
+.left-panel {
+  pointer-events: all;
+  padding: 4rem 17% 2rem 12%;
+}
+
+.right-panel {
+  pointer-events: none;
+  padding: 3rem 12% 2rem 17%;
+}
+
+.panel .content {
+  color: #fff;
+  transition: transform 0.9s ease-in-out;
+  transition-delay: 0.6s;
+}
+
+.panel h3 {
+  font-weight: 600;
+  line-height: 1;
+  font-size: 1.5rem;
+}
+
+.panel p {
+  font-size: 0.95rem;
+  padding: 0.7rem 0;
+}
+
+.btn.transparent {
+  margin: 0;
+  background: none;
+  border: 2px solid #fff;
+  width: 130px;
+  height: 41px;
+  font-weight: 600;
+  font-size: 0.8rem;
+}
+
+.right-panel .image,
+.right-panel .content {
+  transform: translateX(800px);
+}
+
+/* ANIMATION */
+
+.container.sign-up-mode:before {
+  transform: translate(100%, -50%);
+  right: 52%;
+}
+
+.container.sign-up-mode .left-panel .image,
+.container.sign-up-mode .left-panel .content {
+  transform: translateX(-800px);
+}
+
+.container.sign-up-mode .signin-signup {
+  left: 25%;
+}
+
+.container.sign-up-mode form.sign-up-form {
+  opacity: 1;
+  z-index: 2;
+}
+
+.container.sign-up-mode form.sign-in-form {
+  opacity: 0;
+  z-index: 1;
+}
+
+.container.sign-up-mode .right-panel .image,
+.container.sign-up-mode .right-panel .content {
+  transform: translateX(0%);
+}
+
+.container.sign-up-mode .left-panel {
+  pointer-events: none;
+}
+
+.container.sign-up-mode .right-panel {
+  pointer-events: all;
+}
+
+@media (max-width: 870px) {
+  .container {
+    min-height: 800px;
+    height: 100vh;
+  }
+  .signin-signup {
+    width: 100%;
+    top: 95%;
+    transform: translate(-50%, -100%);
+    transition: 1s 0.8s ease-in-out;
+  }
+
+  .signin-signup,
+  .container.sign-up-mode .signin-signup {
+    left: 50%;
+  }
+
+  .panels-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
+  }
+
+  .panel {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 2.5rem 8%;
+    grid-column: 1 / 2;
+  }
+
+  .right-panel {
+    grid-row: 3 / 4;
+  }
+
+  .left-panel {
+    grid-row: 1 / 2;
+  }
+
+  .image {
+    width: 200px;
+    transition: transform 0.9s ease-in-out;
+    transition-delay: 0.6s;
+  }
+
+  .panel .content {
+    padding-right: 15%;
+    transition: transform 0.9s ease-in-out;
+    transition-delay: 0.8s;
+  }
+
+  .panel h3 {
+    font-size: 1.2rem;
+  }
+
+  .panel p {
+    font-size: 0.7rem;
+    padding: 0.5rem 0;
+  }
+
+  .btn.transparent {
+    width: 110px;
+    height: 35px;
+    font-size: 0.7rem;
+  }
+
+  .container:before {
+    width: 1500px;
+    height: 1500px;
+    transform: translateX(-50%);
+    left: 30%;
+    bottom: 68%;
+    right: initial;
+    top: initial;
+    transition: 2s ease-in-out;
+  }
+
+  .container.sign-up-mode:before {
+    transform: translate(-50%, 100%);
+    bottom: 32%;
+    right: initial;
+  }
+
+  .container.sign-up-mode .left-panel .image,
+  .container.sign-up-mode .left-panel .content {
+    transform: translateY(-300px);
+  }
+
+  .container.sign-up-mode .right-panel .image,
+  .container.sign-up-mode .right-panel .content {
+    transform: translateY(0px);
+  }
+
+  .right-panel .image,
+  .right-panel .content {
+    transform: translateY(300px);
+  }
+
+  .container.sign-up-mode .signin-signup {
+    top: 5%;
+    transform: translate(-50%, 0);
+  }
+}
+
+@media (max-width: 570px) {
+  form {
+    padding: 0 1.5rem;
+  }
+
+  .image {
+    display: none;
+  }
+  .panel .content {
+    padding: 0.5rem 1rem;
+  }
+  .container {
+    padding: 1.5rem;
+  }
+
+  .container:before {
+    bottom: 72%;
+    left: 50%;
+  }
+
+  .container.sign-up-mode:before {
+    bottom: 28%;
+    left: 50%;
+  }
+}
+.homeBtn {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: linear-gradient(hwb(357 6% 30%), #d26d6d);
+  color: #000; 
+  padding: 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s;
+  z-index: 111;
+  text-decoration: none;
+  border: 1px solid hsl(356.81deg 79.02% 71.96%); 
+}
+
+.homeBtn:hover {
+  background: #ffffff; 
+  color: hsl(356.81deg 79.02% 71.96%); 
+  border: 1px solid hsl(356.81deg 79.02% 71.96%); 
+  transform: none; 
+}
+.circle {
+  height: 35px;
+  width: 35px;
+  border-radius: 24px;
+  background-color: black;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 99999999;
+  /* Stays on top of all elements */
+}
\ No newline at end of file
diff --git a/signup.html b/signup.html
new file mode 100644
index 00000000..b6c13058
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Register & Login</title>
+  <link rel="stylesheet" href="signup.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>
+
+<body>
+  <!-- preloader -->
+  <div id="preloader">
+    <div class="wrapper">
+      <div class="box-wrap">
+        <div class="box one"></div>
+        <div class="box two"></div>
+        <div class="box three"></div>
+        <div class="box four"></div>
+        <div class="box five"></div>
+        <div class="box six"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="forms-container">
+      <div class="signin-signup">
+        <form action="#" class="sign-in-form" onsubmit="return validateSignInForm()">
+          <h2 class="title">Sign in</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" id="username" placeholder="Username" />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-lock" id="toggle-password"></i>
+            <input type="password" placeholder="Password" id="password-input" />
+          </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>
+          </div>
+
+          <input type="submit" value="Login" class="btn solid" />
+          <p class="social-text">Or Sign in with social platforms</p>
+          <div class="social-media">
+            <div class="social-icon g-signin2" id="google_btn">
+              <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>
+            </a>
+            <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
+              <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
+            </a>
+          </div>
+        </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;">
+          <h2 class="title">Sign up</h2>
+          <div class="input-field">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" />
+          </div>
+          <div class="input-field">
+            <i class="fas fa-envelope"></i>
+            <input type="email" placeholder="Email" />
+          </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>
+          </div>
+          <input type="submit" class="btn" value="Sign up" />
+          <p class="social-text">Or Sign up with social platforms</p>
+          <div class="social-media">
+            <div class="social-icon g-signin2" id="google_btn">
+              <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>
+            </a>
+            <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
+              <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>
+            Create your account.
+          </p>
+
+          <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 colors = [
+      "#ffb56b",
+      "#fdaf69",
+      "#f89d63",
+      "#f59761",
+      "#ef865e",
+      "#ec805d",
+      "#e36e5c",
+      "#df685c",
+      "#d5585c",
+      "#d1525c",
+      "#c5415d",
+      "#c03b5d",
+      "#b22c5e",
+      "#ac265e",
+      "#9c155f",
+      "#950f5f",
+      "#830060",
+      "#7c0060",
+      "#680060",
+      "#60005f",
+      "#48005f",
+      "#3d005e",
+    ];
+
+
+  </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> -->
+</body>
+
+</html>
\ No newline at end of file