diff --git a/- fonts.txt b/- fonts.txt
new file mode 100644
index 00000000..e645abd8
--- /dev/null
+++ b/- fonts.txt	
@@ -0,0 +1,4 @@
+Font -
+
+Poppins
+https://fonts.google.com/specimen/Poppins
\ No newline at end of file
diff --git a/- read me.txt b/- read me.txt
new file mode 100644
index 00000000..303ac0ad
--- /dev/null
+++ b/- read me.txt	
@@ -0,0 +1,8 @@
+IMPORTANT NOTICE:
+
+Please use this source code as best as possible. Download and save
+this source code to your computer. Thank You.
+
+
+-------------------
+copyrigth © hellocode
\ No newline at end of file
diff --git a/index.html b/index.html
index b2ebad3f..d4277787 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@ <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href=
           <li><a href="#patient-portal">patient Portal</a></li>
           <li><a href="#doctors">Doctor</a></li>
           <li><a href="Html-Files/contact.html">Contact us</a></li>
-          <li><a href="login.html">Sign up</a></li>
+          <a href="login.html"><button>Sign in/Sign up</button></a>
         </ul>
       </nav>
       </div>
diff --git a/log/image.gif b/log/image.gif
new file mode 100644
index 00000000..1eb81938
Binary files /dev/null and b/log/image.gif differ
diff --git a/log/login.css b/log/login.css
index fd8da9ec..d933b3ba 100644
--- a/log/login.css
+++ b/log/login.css
@@ -1,116 +1,219 @@
-@import url("https://fonts.googlepis.com/css?family=Montserrat:400,800");
+@import url("https://fonts.googleapis.com/css2?family=Poppins");
+
 * {
-  margin: 0;
-  padding: 0;
   box-sizing: border-box;
 }
+
 body {
-  image-rendering: pixelated;
-  background:black;
-  background-size: auto; /* Maintain original size */
   display: flex;
+  background-color: #f6f5f7;
   justify-content: center;
   align-items: center;
-  font-family: "Montserrat", sans-serif;
+  flex-direction: column;
+  font-family: "Poppins", sans-serif;
+  overflow: hidden;
   height: 100vh;
-  margin: 0 auto;
 }
 
-.container {
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 10px;
-  width: 768px;
-  max-width: 100%;
-  min-height: 480px;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0px 14px 28px black;
+h1 {
+  font-weight: 700;
+  letter-spacing: -1.5px;
+  margin: 0;
+  margin-bottom: 15px;
 }
-.form-container {
-  position: absolute;
-  top: 0%;
-  height: 100%;
-  transition: all 0.6 ease-in-out;
+
+h1.title {
+  font-size: 45px;
+  line-height: 45px;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(16, 64, 74, 0.5);
 }
-.sign-up-container {
-  left: 0;
-  width: 50%;
-  z-index: 1;
-  opacity: 0;
+
+p {
+  font-size: 14px;
+  font-weight: 100;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 20px 0 30px;
+  text-shadow: 0 0 10px rgba(16, 64, 74, 0.5);
 }
-form {
-  background-color: rgb(55, 85, 106);
+
+span {
+  font-size: 14px;
+  margin-top: 25px;
+}
+
+a {
+  color: #333;
+  font-size: 14px;
+  text-decoration: none;
+  margin: 15px 0;
+  transition: 0.3s ease-in-out;
+}
+
+a:hover {
+  color: #4bb6b7;
+}
+
+.content {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.content .checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
-  padding: 0 50px;
-  height: 100%;
-  text-align: center;
 }
-h1 {
-  color: rgb(56, 189, 189);
-  font-weight: bold;
-  margin: 0;
+
+.content input {
+  accent-color: #333;
+  width: 12px;
+  height: 12px;
 }
-.social-container {
-  margin: 20px 0;
+
+.content label {
+  font-size: 14px;
+  user-select: none;
+  padding-left: 5px;
 }
-.social-container a {
-  display: inline-flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  margin: 0 5px;
-  height: 40px;
-  width: 40px;
+
+button {
+  position: relative;
+  border-radius: 20px;
+  border: 1px solid #4bb6b7;
+  background-color: #4bb6b7;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  margin: 10px;
+  padding: 12px 80px;
+  letter-spacing: 1px;
+  text-transform: capitalize;
+  transition: 0.3s ease-in-out;
 }
 
-#fb {
-  color: rgb(79, 79, 250);
-  font-size: 25px;
-  text-decoration: none;
+button:hover {
+  letter-spacing: 3px;
 }
 
-#ins {
-  color: rgb(245, 24, 61);
-  font-size: 25px;
-  text-decoration: none;
+button:active {
+  transform: scale(0.95);
 }
-#gm {
-  color: rgba(0, 255, 13, 0.438);
-  font-size: 25px;
+
+button:focus {
+  outline: none;
 }
-#tw {
-  color: rgb(94, 94, 249);
-  font-size: 25px;
-  text-decoration: none;
+
+button.ghost {
+  background-color: rgba(225, 225, 225, 0.2);
+  border: 2px solid #fff;
+  color: #fff;
+}
+
+button.ghost i{
+  position: absolute;
+  opacity: 0;
+  transition: 0.3s ease-in-out;
+}
+
+button.ghost i.register{
+  right: 70px;
+}
+
+button.ghost i.login{
+  left: 70px;
 }
+
+button.ghost:hover i.register{
+  right: 40px;
+  opacity: 1;
+}
+
+button.ghost:hover i.login{
+  left: 40px;
+  opacity: 1;
+}
+
+form {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 50px;
+  height: 100%;
+  text-align: center;
+}
+
 input {
-  background-color: rgb(215, 210, 210);
+  background-color: #eee;
+  border-radius: 10px;
   border: none;
-  text-decoration: none;
-  width: 100%;
-  margin: 8px 0;
   padding: 12px 15px;
+  margin: 8px 0;
+  width: 100%;
+}
 
-  border-radius: 10px;
+.container {
+  background-color: #fff;
+  border-radius: 25px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  position: relative;
+  overflow: hidden;
+  width: 768px;
+  max-width: 100%;
+  min-height: 500px;
 }
-button {
-  border-radius: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  background-color: rgb(0, 255, 55);
-  color: rgb(255, 255, 255);
-  font-size: 12px;
-  padding: 12px 45px;
-  letter-spacing: 1px;
-  transition: 0.8s ease-in;
+
+.form-container {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  transition: all 0.6s ease-in-out;
 }
-.sign-in-container {
+
+.login-container {
   left: 0;
   width: 50%;
   z-index: 2;
 }
+
+.container.right-panel-active .login-container {
+  transform: translateX(100%);
+}
+
+.register-container {
+  left: 0;
+  width: 50%;
+  opacity: 0;
+  z-index: 1;
+}
+
+.container.right-panel-active .register-container {
+  transform: translateX(100%);
+  opacity: 1;
+  z-index: 5;
+  animation: show 0.6s;
+}
+
+@keyframes show {
+  0%,
+  49.99% {
+    opacity: 0;
+    z-index: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 1;
+    z-index: 5;
+  }
+}
+
 .overlay-container {
   position: absolute;
   top: 0;
@@ -118,97 +221,94 @@ button {
   width: 50%;
   height: 100%;
   overflow: hidden;
+  transition: transform 0.6s ease-in-out;
   z-index: 100;
-  transition: 0.6s ease-in-out;
 }
+
+.container.right-panel-active .overlay-container {
+  transform: translate(-100%);
+}
+
 .overlay {
-  background-color: chartreuse;
-  background: linear-gradient(to right, rgba(0, 255, 13, 0.651), rgba(30, 255, 0, 0.616));
+  background-image: url('image.gif');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 0;
-  color: white;
+  color: #fff;
   position: relative;
   left: -100%;
   height: 100%;
   width: 200%;
   transform: translateX(0);
-  transition: 0.6s ease-in-out;
+  transition: transform 0.6s ease-in-out;
+}
+
+.overlay::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to top,
+    rgba(46, 94, 109, 0.4) 40%,
+    rgba(46, 94, 109, 0)
+  );
 }
+
+.container.right-panel-active .overlay {
+  transform: translateX(50%);
+}
+
 .overlay-panel {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0px 40px;
+  flex-direction: column;
+  padding: 0 40px;
   text-align: center;
   top: 0;
   height: 100%;
   width: 50%;
   transform: translateX(0);
-  flex-direction: column;
-  transition: 0.6s ease-in-out;
+  transition: transform 0.6s ease-in-out;
 }
+
 .overlay-left {
   transform: translateX(-20%);
 }
+
+.container.right-panel-active .overlay-left {
+  transform: translateX(0);
+}
+
 .overlay-right {
   right: 0;
   transform: translateX(0);
 }
-button:active {
-  transform: scale(0.95);
-}
-button.press {
-  background-color: transparent;
-  border-color: rgb(0, 0, 0);
-  border-width: 2px;
-}
-p {
-  font-family: "Courier New", Courier, monospace;
-  color: rgb(255, 255, 255);
-  font-size: 14px;
-  font-weight: 100;
-  line-height: 20px;
-  letter-spacing: 0.5px;
-  margin: 20px 0 30px;
-}
-.container.right-panel-active .sign-in-container {
-  transform: translateX(100%);
-}
-.container.right-panel-active .sign-up-container {
-  transform: translateX(100%);
-  opacity: 1;
-  z-index: 5;
-  animation: slide 0.6s;
-}
-@keyframes slide {
-  0%,
-  49.99% {
-    opacity: 0;
-    z-index: 5;
-  }
-  50%,
-  100% {
-    opacity: 1;
-    z-index: 5;
-  }
-}
-.container.right-panel-active .overlay-container {
-  transform: translateX(-100%);
-}
-.container.right-panel-active .overlay {
-  transform: translateX(50%);
-}
-.container.right-panel-active .overlay-left {
-  transform: translateX(0%);
-}
+
 .container.right-panel-active .overlay-right {
   transform: translateX(20%);
 }
-#vit {
-  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+.social-container {
+  margin: 20px 0;
 }
-#signIn {
-  color: rgb(7, 64, 64);
+
+.social-container a {
+  border: 1px solid #dddddd;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  height: 40px;
+  width: 40px;
+  transition: 0.3s ease-in-out;
 }
+
+.social-container a:hover {
+  border: 1px solid #4bb6b7;
+}
\ No newline at end of file
diff --git a/log/rd.png b/log/rd.png
deleted file mode 100644
index 087ced7d..00000000
Binary files a/log/rd.png and /dev/null differ
diff --git a/log/script.js b/log/script.js
new file mode 100644
index 00000000..acf88762
--- /dev/null
+++ b/log/script.js
@@ -0,0 +1,11 @@
+const registerButton = document.getElementById("register");
+const loginButton = document.getElementById("login");
+const container = document.getElementById("container");
+
+registerButton.addEventListener("click", () => {
+  container.classList.add("right-panel-active");
+});
+
+loginButton.addEventListener("click", () => {
+  container.classList.remove("right-panel-active");
+});
\ No newline at end of file
diff --git a/login.html b/login.html
index 250e067d..dce0659a 100644
--- a/login.html
+++ b/login.html
@@ -1,106 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="log/login.css" />
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
-    />
-    <link rel="icon" type="image/x-icon" href="log/favicon.ico">
-    <title>RAPIDOC</title>
-  </head>
-  <body>
-    <div class="container" id="container">
-      <div class="form-container sign-up-container">
-        <form action="#">
-          <h1 id="vit">RAPIDOC</h1>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>RAPIDOC</title>
+  <link rel="icon" type="image/x-icon" href="log/favicon.ico">
+  <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
+  <link rel="stylesheet" href="log/login.css">
+</head>
+<body>
+  <div class="container" id="container">
 
-          <input type="text" placeholder="Name" id="name" />
-          <input type="email" placeholder="Email" id="mail" />
-          <input type="password" placeholder="Password" id="pass" />
-          <button>Sign Up</button>
-          <br /><br /><br /><br />
-
-          <div class="social-container">
-            <a href="https:www.facebook.com" class="social" id="fb">
-              <i class="fab fa-facebook"></i>
-            </a>
-            <a href="https:www.instagram.com" class="social" id="ins">
-              <i class="fab fa-instagram"> </i>
-            </a>
-            <a href="https://www.gmail.com" class="social" id="gm">
-              <i class="fas fa-envelope"></i>
-            </a>
-            <a href="https://www.twitter.com" class="social" id="tw">
-              <i class="fab fa-twitter"></i>
-            </a>
-          </div>
-        </form>
-      </div>
-      <div class="form-container sign-in-container">
-        <form action="#">
-          <h1>Sign In</h1>
-
-          <input type="email" placeholder="Email" id="mail" />
-          <input type="password" placeholder="Password" id="pass" />
-          <button><a href="sig.html">Log In</a></button>
-          <br /><br /><br /><br /><br /><br />
+    <div class="form-container register-container">
+      <form action="#">
+        <h1>RAPIDOC </h1>
+        <input type="text" placeholder="Name">
+        <input type="email" placeholder="Email">
+        <input type="password" placeholder="Password">
+        <button onclick="refreshPage()">Register</button>
+        <script>
+          function refreshPage() {
+            location.reload();
+          }
+        </script>
+        <span>or use your account</span>
+        <div class="social-container">
+          <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
+          <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
+          <a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
+        </div>
+      </form>
+    </div>
 
-          <div class="social-container">
-            <a href="https:www.facebook.com" class="social" id="fb">
-              <i class="fab fa-facebook"></i>
-            </a>
-            <a href="https:www.instagram.com" class="social" id="ins">
-              <i class="fab fa-instagram"> </i>
-            </a>
-            <a href="https://www.gmail.com" class="social" id="gm">
-              <i class="fas fa-envelope"></i>
-            </a>
-            <a href="https://www.twitter.com" class="social" id="tw">
-              <i class="fab fa-twitter"></i>
-            </a>
-          </div>
-        </form>
-      </div>
-      <div class="overlay-container">
-        <div class="overlay">
-          <div class="overlay-panel overlay-left">
-            <h1>welcome</h1>
-            <p>
-              Wherever the art of Medicine is loved, there is also a love of
-              Humanity.
-            </p>
-            <br />
-            <p style="color: rgb(0, 68, 255)">Already have an account?</p>
-            <button class="press" id="signIn">Sign In</button>
+    <div class="form-container login-container">
+      <form action="#">
+        <h1>RAPIOC</h1>
+        <input type="email" placeholder="Email">
+        <input type="password" placeholder="Password">
+        <div class="content">
+          <div class="checkbox">
+            <input type="checkbox" name="checkbox" id="checkbox">
+            <label>Remember me</label>
           </div>
-          <div class="overlay-panel overlay-right">
-            <h1>RAPIDOC</h1>
-            <p>Passion for excellence. Compassion for people.</p>
-            <br />
-            <p style="color: rgb(0, 68, 255)">Don't have an account?</p>
-            <button class="press" id="signUp" style="color: rgb(57, 49, 5)">
-              Sign Up
-            </button>
+          <div class="pass-link">
+            <a href="#">Forgot password?</a>
           </div>
         </div>
+        <a href="index.html"><button>Login</button></a>
+        <span>or use your account</span>
+        <div class="social-container">
+          <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
+          <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
+          <a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
+        </div>
+      </form>
+    </div>
+
+    <div class="overlay-container">
+      <div class="overlay">
+        <div class="overlay-panel overlay-left">
+          <h1 class="title">Hello <br> friends</h1>
+          <p>if Yout have an account, login here and have fun</p>
+          <button class="ghost" id="login">Login
+            <i class="lni lni-arrow-left login"></i>
+          </button>
+        </div>
+        <div class="overlay-panel overlay-right">
+          <h1 class="title">Start your <br> journy now</h1>
+          <p>if you don't have an account yet, join us and start your journey.</p>
+          <button class="ghost" id="register">Register
+            <i class="lni lni-arrow-right register"></i>
+          </button>
+        </div>
       </div>
     </div>
-    <script type="text/javascript">
-      const signUpButton = document.getElementById("signUp");
-      const signInButton = document.getElementById("signIn");
-      const container = document.getElementById("container");
 
-      signUpButton.addEventListener("click", () => {
-        container.classList.add("right-panel-active");
-      });
+  </div>
+
+  <script src="log/script.js"></script>
 
-      signInButton.addEventListener("click", () => {
-        container.classList.remove("right-panel-active");
-      });
-    </script>
-  </body>
+</body>
 </html>
diff --git a/sig.html b/sig.html
deleted file mode 100644
index 08ef4c12..00000000
--- a/sig.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Task Tracker</title>
-<style>
-body {
-  font-family: Arial, sans-serif;
-  background-color: #f4f4f4;
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  max-width: 600px;
-  margin: 20px auto;
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.task {
-  display: flex;
-  align-items: center;
-  padding: 10px 0;
-  border-bottom: 1px solid #ddd;
-  cursor: pointer;
-}
-
-.task:last-child {
-  border-bottom: none;
-}
-
-.task .tick {
-  font-size: 24px;
-  margin-right: 10px;
-}
-
-.task.done .tick {
-  color: green;
-}
-
-.task.done .text {
-  text-decoration: line-through;
-  color: #999;
-}
-</style>
-</head>
-<body>
-
-<div class="container">
-  <div class="task" onclick="toggleTask(this)">
-    <span class="tick">&#x2705;</span>
-    <span class="text">Done</span>
-  </div>
-</div>
-
-<a id="redirectLink" href="index.html" style="display: none;"></a>
-
-<script>
-function toggleTask(task) {
-  task.classList.toggle('done');
-  setTimeout(function() {
-    document.getElementById('redirectLink').click();
-  }, 700); // Redirect after 1 second
-}
-</script>
-
-</body>
-</html>
diff --git a/style.css b/style.css
index 38f45bdb..52666d9e 100644
--- a/style.css
+++ b/style.css
@@ -29,6 +29,20 @@ h1, h2, h3, h4, h5, h6 {
   transition: all 0.3s ease 0s;
   color: white;
 }
+button {
+  position: relative;
+  border-radius: 10px;
+  border: 1px solid #4bb6b7;
+  background-color: #4bb6b7;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  margin: 8px;
+  padding: 8px 50px;
+  letter-spacing: 1px;
+  text-transform: capitalize;
+  transition: 0.3s ease-in-out;
+}
 
 .nav_link li a:hover {
   color: #55a5ea;