diff --git a/feedback.html b/feedback.html
index 2aa4a28b..d39afd72 100644
--- a/feedback.html
+++ b/feedback.html
@@ -40,7 +40,7 @@
 
         </ul>
         <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
-            data-aos="fade-down">Login</button></a>
+          data-aos="fade-down">Login/SignUp</button></a>
         <div class="toggle-container" data-aos="fade-down">
           <input id="themeToggle" class="toggle" type="checkbox">
         </div>
diff --git a/index.html b/index.html
index 8392e6f0..735a1470 100644
--- a/index.html
+++ b/index.html
@@ -179,14 +179,14 @@ <h1>TourGuide . . .</h1>
           <li class="link" data-aos=""><a href="#ReviewGallery">Trip Gallery</a></li>
           <li class="link" data-aos=""><a href="#testimonials">Testimonials</a></li>
           <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
-          <li class="link" data-aos=""><a href="#contact">Contact Us</a></li>
+          <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
 
 
         </ul>
 
 
-        <a href="loginPage.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
-            data-aos="fade-down">Login</button></a>
+        <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+            data-aos="fade-down">Login/SignUp</button></a>
 
         <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"
               data-aos="fade-down" disabled>Log Out</button></a>
diff --git a/login/Aboe.gif b/login/Aboe.gif
new file mode 100644
index 00000000..f8bb41ee
Binary files /dev/null and b/login/Aboe.gif differ
diff --git a/login/login.css b/login/login.css
new file mode 100644
index 00000000..a2a8385e
--- /dev/null
+++ b/login/login.css
@@ -0,0 +1,321 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins");
+
+ * {
+   box-sizing: border-box;
+ }
+
+ body {
+   display: flex;
+   background-color: #f6f5f7;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+   font-family: "Poppins", sans-serif;
+   overflow: hidden;
+   height: 100vh;
+   /* width: 100vh; */
+   background: url("Aboe.gif");
+   background-size: cover;
+   /* opacity: 1; */
+   opacity: 1.2;
+
+ }
+
+ h1 {
+   font-weight: 700;
+   letter-spacing: -1.5px;
+   margin: 0;
+   margin-bottom: 15px;
+ }
+
+ h1.title {
+   font-size: 45px;
+   line-height: 45px;
+   margin: 0;
+   text-shadow: 0 0 10px rgba(16, 64, 74, 0.5);
+ }
+
+ 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);
+ }
+
+ 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: #296543;
+ }
+
+ .content {
+   display: flex;
+   width: 100%;
+   height: 50px;
+   align-items: center;
+   justify-content: space-around;
+ }
+
+ .content .checkbox {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+ }
+
+ .content input {
+   accent-color: #333;
+   width: 12px;
+   height: 12px;
+ }
+
+ .content label {
+   font-size: 14px;
+   user-select: none;
+   padding-left: 5px;
+ }
+
+ button {
+   position: relative;
+   border-radius: 20px;
+   border: 1px solid #296543;
+   background-color: #296543;
+   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;
+ }
+
+ button:hover {
+   letter-spacing: 3px;
+ }
+
+ button:active {
+   transform: scale(0.95);
+ }
+
+ button:focus {
+   outline: 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: #eee;
+   border-radius: 10px;
+   border: none;
+   padding: 12px 15px;
+   margin: 8px 0;
+   width: 100%;
+ }
+
+ .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;
+ }
+
+ .form-container {
+   position: absolute;
+   top: 0;
+   height: 100%;
+   transition: all 0.6s ease-in-out;
+ }
+
+ .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;
+   left: 50%;
+   width: 50%;
+   height: 100%;
+   overflow: hidden;
+   transition: transform 0.6s ease-in-out;
+   z-index: 100;
+ }
+
+ .container.right-panel-active .overlay-container {
+   transform: translate(-100%);
+ }
+
+ .overlay {
+   background-image: url('Aboe.gif');
+
+   background-repeat: no-repeat;
+   background-size: cover;
+   background-position: 0 0;
+   color: #fff;
+   position: relative;
+   left: -100%;
+   height: 100%;
+   width: 200%;
+   transform: translateX(0);
+   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;
+   flex-direction: column;
+   padding: 0 40px;
+   text-align: center;
+   top: 0;
+   height: 100%;
+   width: 50%;
+   transform: translateX(0);
+   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);
+ }
+
+ .container.right-panel-active .overlay-right {
+   transform: translateX(20%);
+ }
+
+ .social-container {
+   margin: 20px 0;
+ }
+
+ .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 #296543;
+ }
\ No newline at end of file
diff --git a/login/script.js b/login/script.js
new file mode 100644
index 00000000..b4859504
--- /dev/null
+++ b/login/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/newLogin.html b/newLogin.html
index afbdfdff..4f730cc1 100644
--- a/newLogin.html
+++ b/newLogin.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -253,4 +253,96 @@ <h1>Create Account</h1>
         });
     </script>
   </body>
-</html>
+</html> -->
+
+
+
+<!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">
+   <title>TOUR GUIDE</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="/login/login.css">
+ </head>
+ <body>
+   <div class="container" id="container">
+
+     <div class="form-container register-container">
+       <form action="#">
+         <h1>TOUR GUIDE </h1>
+         <input type="text" placeholder="Name">
+         <input type="email" placeholder="Email">
+         <input type="password" placeholder="Password">
+         <input type="password" placeholder="Confirm Password">
+         <button onclick="refreshPage()">Register</button>
+         <script>
+           function refreshPage() {
+             location.reload();
+           }
+         </script>
+         <span>or use your account</span>
+         <div class="social-container">
+           <a href="" class="social"><i class="lni lni-facebook-fill"></i></a>
+           <a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank"><i class="lni lni-google"></i></a>
+           <a href="" class="social"><i class="lni lni-linkedin-original"></i></a>
+           <a href="" class="social">
+             <i class="lni lni-github"></i></a>
+         </div>
+       </form>
+     </div>
+
+     <div class="form-container login-container">
+       <form action="#">
+         <h1>TOUR GUIDE</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="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="" class="social"><i class="lni lni-facebook-fill"></i></a>
+             <a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank"><i class="lni lni-google"></i></a>
+           <a href="" class="social"><i class="lni lni-linkedin-original"></i></a>
+           <a href="" class="social">
+             <i class="lni lni-github"></i></a>
+         </div>
+       </form>
+     </div>
+
+     <div class="overlay-container">
+       <div class="overlay">
+         <div class="overlay-panel overlay-left">
+           <h1 class="title">Welcome <br> Back!</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>
+
+   </div>
+
+   <script src="login/script.js"></script>
+
+ </body>
+ </html>
\ No newline at end of file