diff --git a/public/image/logo.png b/public/image/logo.png
new file mode 100644
index 0000000..3166230
Binary files /dev/null and b/public/image/logo.png differ
diff --git a/public/image/register.png b/public/image/register.png
new file mode 100644
index 0000000..afed746
Binary files /dev/null and b/public/image/register.png differ
diff --git a/public/index.html b/public/index.html
index f4d0266..d9ba0ad 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,7 +83,7 @@
                     <a href="resources.html">Resources</a>
                     <a href="events&webinar.html">Events/Webinars</a>
                     <a href="contributors/contributor.html">Contributors</a>
-                    <a href="login.html" class="login-btn magnet">Login</a>
+                    <a href="login.html" class="login-btn magnet">Register</a>
                     <!--
                     <i class="ri-user-3-line magnet"></i>
                 -->
diff --git a/public/login.css b/public/login.css
index d74b39e..e2e629e 100644
--- a/public/login.css
+++ b/public/login.css
@@ -1,161 +1,400 @@
-@import url('https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap');
-:root{
-  --accent-color: rgba(255, 203, 107, 0.952);
-  --base-color: white;
-  --text-color: #2E2B41;
-  --input-color: #F3F0FF;
-}
-.hit{
-  color: rgba(255, 203, 107, 0.952);
-}
-*{
+@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;
 }
-html{
-  font-family: SUSE , Georgia, 'Times New Roman', Times, serif;
-  font-size: 12pt;
-  color: var(--text-color);
-  text-align: center;
+
+body,
+input {
+  font-family: "Poppins", sans-serif;
 }
-body{
+
+.container {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
   min-height: 100vh;
-  background-image: url(./image/10299985.jpg);
-  background-size: contain;
-  background-position: right;
   overflow: hidden;
 }
-.car{
-    height: auto;
-    width: 50%;
-    background-image: url(./image/10299985.jpg);
-    background-size: contain;
 
+.forms-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
-.wrapper{
-  box-sizing: border-box;
-  background-color: var(--base-color);
-  height: 100vh;
-  width: max(50%, 600px);
-  padding: 10px;
-  border-radius: 0 20px 20px 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;
+}
+
+form {
   display: flex;
-  flex-direction: column;
   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;
 }
-h1{
-  font-size: 3rem;
-  font-weight: 900;
-  text-transform: uppercase;
+
+form.sign-up-form {
+  opacity: 0;
+  z-index: 1;
 }
-form{
-  width: min(400px, 100%);
-  margin-top: 20px;
-  margin-bottom: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
+
+form.sign-in-form {
+  z-index: 2;
+}
+
+.title {
+  font-size: 2.2rem;
+  color: #444;
+  margin-bottom: 10px;
 }
-form > div{
+
+.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: center;
 }
-form label{
-  flex-shrink: 0;
-  height: 50px;
-  width: 50px;
-  background-color: var(--accent-color);
-  fill: var(--base-color);
-  color: var(--base-color);
-  border-radius: 10px 0 0 10px;
+
+.social-icon {
+  height: 46px;
+  width: 46px;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 1.5rem;
-  font-weight: 500;
+  margin: 0 0.45rem;
+  color: #333;
+  border-radius: 50%;
+  border: 1px solid #333;
+  text-decoration: none;
+  font-size: 1.1rem;
+  transition: 0.3s;
 }
-form input{
-  box-sizing: border-box;
-  flex-grow: 1;
-  min-width: 0;
-  height: 50px;
-  padding: 1em;
-  font: inherit;
-  border-radius: 0 10px 10px 0;
-  border: 2px solid var(--input-color);
-  border-left: none;
-  background-color: var(--input-color);
-  transition: 150ms ease;
-}
-form input:hover{
-  border-color: var(--accent-color);
-}
-form input:focus{
+
+.social-icon:hover {
+  color: #c4912bf3;
+  border-color: #a37519f3;
+}
+
+.btn {
+  width: 150px;
+  background-color: #edbb57f3;
+  border: none;
   outline: none;
-  border-color: var(--text-color);
+  height: 49px;
+  border-radius: 49px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 10px 0;
+  cursor: pointer;
+  transition: 0.5s;
 }
-div:has(input:focus) > label{
-  background-color: var(--text-color);
+
+.btn:hover {
+  background-color: #e2a222f3;
 }
-form input::placeholder{
-  color: var(--text-color);
+.panels-container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
-form button{
-  margin-top: 10px;
-  border: none;
-  border-radius: 1000px;
-  padding: .85em 4em;
-  background-color: var(--accent-color);
-  color: var(--base-color);
-  font: inherit;
+
+.container:before {
+  content: "";
+  position: absolute;
+  height: 2000px;
+  width: 2000px;
+  top: -10%;
+  right: 48%;
+  transform: translateY(-50%);
+  background-image: linear-gradient(-45deg, #cfa041f3 0%, #f6d89cf3 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;
+  align-items: flex-end;
+  justify-content: space-around;
+  text-align: center;
+  z-index: 6;
+}
+
+.left-panel {
+  pointer-events: all;
+  padding: 3rem 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;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: 150ms ease;
+  line-height: 1;
+  font-size: 1.5rem;
 }
-form button:hover{
-  background-color: var(--text-color);
+
+.panel p {
+  font-size: 0.95rem;
+  padding: 0.7rem 0;
 }
-form button:focus{
-  outline: none;
-  background-color: var(--text-color);
+
+.btn.transparent {
+  margin: 0;
+  background: none;
+  border: 2px solid #fff;
+  width: 130px;
+  height: 41px;
+  font-weight: 600;
+  font-size: 0.8rem;
 }
-a{
-  text-decoration: none;
-  color: var(--accent-color);
+
+.right-panel .image,
+.right-panel .content {
+  transform: translateX(800px);
 }
-a:hover{
-  text-decoration: underline;
+
+/* ANIMATION */
+
+.container.sign-up-mode:before {
+  transform: translate(100%, -50%);
+  right: 52%;
 }
-@media(max-width: 1100px){
-  .wrapper{
-    width: min(600px, 100%);
-    border-radius: 0;
-  }
+
+.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%;
 }
-form div.incorrect label{
-  background-color: #f06272;
+
+.container.sign-up-mode form.sign-up-form {
+  opacity: 1;
+  z-index: 2;
 }
-form div.incorrect input{
-  border-color: #f06272;
+
+.container.sign-up-mode form.sign-in-form {
+  opacity: 0;
+  z-index: 1;
 }
-#error-message{
-  color:#f06272;
+
+.container.sign-up-mode .right-panel .image,
+.container.sign-up-mode .right-panel .content {
+  transform: translateX(0%);
 }
-.password-container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  position: relative;
+
+.container.sign-up-mode .left-panel {
+  pointer-events: none;
 }
 
-.eye-icon {
-  position: absolute;
-  right: 10px;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
+.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%;
+  }
+}
\ No newline at end of file
diff --git a/public/login.html b/public/login.html
index 5512d9e..a412a0d 100644
--- a/public/login.html
+++ b/public/login.html
@@ -1,83 +1,114 @@
-<!-- public/login.html -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="./image/Lumina.ico" />
-    <title>Lumina - Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://kit.fontawesome.com/64d58efce2.js"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
     <link rel="stylesheet" href="login.css" />
-    <script src="validation.js" defer></script>
+    <title>Sign in & Sign up Form</title>
   </head>
   <body>
-    <div class="wrapper">
-      <h1>Sign In</h1>
-      <p id="error-message" style="color: red"></p>
-      <form id="form" action="/login" method="POST">
-        <div>
-          <label for="email-input">
-            <span>@</span>
-          </label>
-          <input
-            type="email"
-            name="email"
-            id="email-input"
-            placeholder="Email"
-            required
-          />
-        </div>
-        <div class="password-container">
-          <label for="password-input">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24"
-              viewBox="0 -960 960 960"
-              width="24"
-            >
-              <path
-                d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z"
-              />
-            </svg>
-          </label>
-          <input
-            type="password"
-            name="password"
-            id="password-input"
-            placeholder="Password"
-            required
-          />
-          <img
-            src="./image/eye-slash.svg"
-            id="eye-icon"
-            alt="Eye Icon"
-            class="eye-icon"
-          />
+    <div class="container">
+      <div class="forms-container">
+        <div class="signin-signup">
+          <form action="#" class="sign-in-form">
+            <h2 class="title">Sign in</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-lock"></i>
+              <input type="password" placeholder="Password" />
+            </div>
+            <input type="submit" value="Login" class="btn solid" />
+            <p class="social-text">Or Sign in with social platforms</p>
+            <div class="social-media">
+              <a href="#" class="social-icon">
+                <i class="fab fa-facebook-f"></i>
+              </a>
+              <a href="#" class="social-icon">
+                <i class="fab fa-twitter"></i>
+              </a>
+              <a href="#" class="social-icon">
+                <i class="fab fa-google"></i>
+              </a>
+              <a href="#" class="social-icon">
+                <i class="fab fa-linkedin-in"></i>
+              </a>
+            </div>
+          </form>
+          <form action="#" class="sign-up-form">
+            <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"></i>
+              <input type="password" placeholder="Password" />
+            </div>
+            <input type="submit" class="btn" value="Sign up" />
+            <p class="social-text">Or Sign up with social platforms</p>
+            <div class="social-media">
+              <a href="#" class="social-icon">
+                <i class="fab fa-facebook-f"></i>
+              </a>
+              <a href="#" class="social-icon">
+                <i class="fab fa-twitter"></i>
+              </a>
+              <a href="#" class="social-icon">
+                <i class="fab fa-google"></i>
+              </a>
+              <a href="#" class="social-icon">
+                <i class="fab fa-linkedin-in"></i>
+              </a>
+            </div>
+          </form>
         </div>
+      </div>
 
-        <p>
-          <a href="forgot-password.html" class="forgot-password-link">Forgot Password?</a>
-        </p>
-        <button type="submit">Login</button>
-      </form>
-      <p>New here? <a href="signup.html">Create an Account</a></p>
+      <div class="panels-container">
+        <div class="panel left-panel">
+          <div class="content">
+            <h3>New here ?</h3>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis,
+              ex ratione. Aliquid!
+            </p>
+            <button class="btn transparent" id="sign-up-btn">
+              Sign up
+            </button>
+          </div>
+          <img src="image/logo.png" class="image" alt="" />
+        </div>
+        <div class="panel right-panel">
+          <div class="content">
+            <h3>One of us ?</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
+              laboriosam ad deleniti.
+            </p>
+            <button class="btn transparent" id="sign-in-btn">
+              Sign in
+            </button>
+          </div>
+          <img src="image/register.png" class="image" alt="" />
+        </div>
+      </div>
     </div>
-    <div class="car"></div>
-
-    <script>
-      document
-        .getElementById("eye-icon")
-        .addEventListener("click", function () {
-          const passwordField = document.getElementById("password-input");
-          const eyeIcon = document.getElementById("eye-icon");
 
-          if (passwordField.type === "password") {
-            passwordField.type = "text"; // Show password
-            eyeIcon.src = "./image/eye.svg"; // Change to open eye icon
-          } else {
-            passwordField.type = "password"; // Hide password
-            eyeIcon.src = "./image/eye-slash.svg"; // Change to closed eye icon
-          }
-        });
-    </script>
+    <script src="login.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/login.js b/public/login.js
new file mode 100644
index 0000000..99f9264
--- /dev/null
+++ b/public/login.js
@@ -0,0 +1,11 @@
+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");
+});
\ No newline at end of file
diff --git a/public/signup.html b/public/signup.html
deleted file mode 100644
index 0376bfa..0000000
--- a/public/signup.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!-- public/signup.html -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="./image/Lumina.ico" />
-    <title>Lumina - Signup</title>
-    <link rel="stylesheet" href="login.css" />
-    <script src="validation.js" defer></script>
-  </head>
-  <body>
-    <div class="wrapper">
-      <h1 class="hit">Sign up</h1>
-      <p id="error-message" style="color: red"></p>
-      <form id="form" action="/signup" method="POST">
-        <div>
-          <label for="firstname-input">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24"
-              viewBox="0 -960 960 960"
-              width="24"
-            >
-              <path
-                d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Z"
-              />
-            </svg>
-          </label>
-          <input
-            type="text"
-            name="firstname"
-            id="firstname-input"
-            placeholder="Firstname"
-            required
-          />
-        </div>
-        <div>
-          <label for="email-input">
-            <span>@</span>
-          </label>
-          <input
-            type="email"
-            name="email"
-            id="email-input"
-            placeholder="Email"
-            required
-          />
-        </div>
-        <div class="password-container">
-          <label for="password-input">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24"
-              viewBox="0 -960 960 960"
-              width="24"
-            >
-              <path
-                d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z"
-              />
-            </svg>
-          </label>
-          <input
-            type="password"
-            name="password"
-            id="password-input"
-            placeholder="Password"
-            required
-          />
-          <img
-            src="./image/eye-slash.svg"
-            id="eye-icon"
-            alt="Eye Icon"
-            class="eye-icon"
-          />
-        </div>
-        <div>
-          <label for="repeat-password-input">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24"
-              viewBox="0 -960 960 960"
-              width="24"
-            >
-              <path
-                d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z"
-              />
-            </svg>
-          </label>
-          <input
-            type="password"
-            name="repeat-password"
-            id="repeat-password-input"
-            placeholder="Repeat Password"
-            required
-          />
-        </div>
-        <button type="submit">Signup</button>
-      </form>
-      <p>Already have an Account? <a href="login.html">Login</a></p>
-    </div>
-  </body>
-  <script>
-    document.getElementById("eye-icon").addEventListener("click", function () {
-      const passwordField = document.getElementById("password-input");
-      const eyeIcon = document.getElementById("eye-icon");
-
-      if (passwordField.type === "password") {
-        passwordField.type = "text"; // Show password
-        eyeIcon.src = "./image/eye.svg"; // Change to open eye icon
-      } else {
-        passwordField.type = "password"; // Hide password
-        eyeIcon.src = "./image/eye-slash.svg"; // Change to closed eye icon
-      }
-    });
-  </script>
-</html>