diff --git a/login/icee.avif b/login/icee.avif
new file mode 100644
index 0000000..10c0bc4
Binary files /dev/null and b/login/icee.avif differ
diff --git a/login/login.css b/login/login.css
index b4b7fa1..439b6a3 100644
--- a/login/login.css
+++ b/login/login.css
@@ -1,161 +1,160 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
 body {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: linear-gradient(135deg, #ff8a00, #e52e71);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 20px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  max-width: 650px;
+  width: 100%;
+  gap: 20px;
 }
 
 .login-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    gap: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
 .login-box {
-    background: rgba(255, 255, 255, 0.2);
-    padding: 40px;
-    border-radius: 15px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    transform: perspective(1000px); /* Adding perspective for 3D effect */
-    width: 350px;
-    height: 450px;
-}
-
-h2 {
-    color: white;
-    margin-bottom: 20px;
+  width: 53%;
+  padding: 20px;
+  position: relative;
 }
 
-.login-form, .signup-form {
-    display: flex;
-    flex-direction: column;
+.welcome{
+  text-align: center;
 }
 
-.input-group {
-    position: relative;
-    margin-bottom: 20px;
+.ice-cream-image {
+  position: absolute;
+  width: 250px;
+  height: 368px;
+  border-radius: 0px 10px 10px 0px;
+  left: 800px;
 }
 
-.input-group input {
-    width: 100%;
-    padding: 10px 50px 10px 40px; /* Left padding increased for the icon */
-    border: none;
-    border-bottom: 2px solid white;
-    background: transparent;
-    color: white;
-    font-size: 16px;
+.login-box h2 {
+  color: #FF69B4;
+  margin-bottom: 30px;
+  font-size: 28px;
 }
+
 .login-btn{
-    margin-top: 30px;
+  width: 370px;
 }
-
-.input-group label {
-    position: absolute;
-    top: 50%;
-    left: 40px; /* Adjusted label positioning to avoid overlap with icon */
-    transform: translateY(-50%);
-    color: white;
-    pointer-events: none;
-    transition: 0.3s;
+.login-form {
+  display: flex;
+  flex-direction: column;
 }
 
-.input-group input:focus ~ label,
-.input-group input:valid ~ label {
-    top: -9px; /* When input is focused, label moves up */
-    left: -9px;
-    font-size: 12px;
-    color: #ff8a00; /* Highlighted color */
-}
-.input-group i {
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 16px;
-    color: white; /* Adjusted icon color */
+.input-group {
+  position: relative;
+  margin-bottom: 20px;
 }
 
+.input-group input {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 25px;
+  background-color: #F0F0F0;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
 
-
-.toggle-password {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: white;
+.input-group label {
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  pointer-events: none;
+  transition: all 0.3s ease;
 }
 
-.toggle-password:hover i {
-    color: #ff8a00; /* Change the color on hover */
-    cursor: pointer;
+.input-group input:focus + label,
+.input-group input:valid + label {
+  top: -10px;
+  left: 10px;
+  font-size: 12px;
+  color: #FF69B4;
+  background-color: white;
+  padding: 0 5px;
 }
-.login-btn, .signup-btn {
-    padding: 10px;
-    border: none;
-    border-radius: 30px;
-    background-color: #e52e71;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background 0.3s;
+
+.login-btn {
+  padding: 12px;
+  background-color: #FF69B4;
+  color: white;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.3s ease;
 }
 
-.login-btn:hover, .signup-btn:hover {
-    background-color: #ff8a00;
+.login-btn:hover {
+  background-color: #FF1493;
+  transform: scale(1.05);
 }
 
 .extra-links {
-    display: flex;
-    justify-content: center;
-    gap: 40px;
-    margin-top: 120px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
 }
 
-.extra-links button {
-    padding: 10px;
-    border: none;
-    border-radius: 30px;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: white;
-    cursor: pointer;
-    transition: background 0.3s;
+.home-btn, .signup-btn {
+  background: none;
+  border: none;
+  color: #FF69B4;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
 }
 
-.extra-links button:hover {
-    background-color: rgba(255, 255, 255, 0.3);
+.home-btn:hover, .signup-btn:hover {
+  color: #FF1493;
 }
 
-.extra-links .home-btn i,
-.extra-links .signup-btn i,
-.extra-links .login-btn i {
-    margin-right: 8px;
-}
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    padding: 10px;
+  }
 
-a{
-    text-decoration: none;
-    color: white;
-}
+  .login-box {
+    width: 100%;
+    margin-bottom: 20px;
+  }
 
-input:focus{
-    outline: none;
+  .ice-cream-image {
+    width: 200px;
+    height: auto;
+  }
 }
 
-.input-group input:focus {
-    border-bottom: 2px solid #ff8a00;
-    outline: none;
-    box-shadow: 0px 4px 10px rgba(255, 138, 0, 0.2); /* Subtle shadow on focus */
+@media (max-width: 480px) {
+  .login-container {
+    flex-direction: column;
+  }
+
+  .ice-cream-image {
+    width: 150px;
+    height: auto;
+  }
 }
diff --git a/login/login.html b/login/login.html
index bfb0c64..92f828d 100644
--- a/login/login.html
+++ b/login/login.html
@@ -8,9 +8,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 <body>
+   <div class="container">   
     <div class="login-container">
         <div id="login-box" class="login-box">
-            <h2>Welcome Back!</h2>
+            <h2 class="welcome">Welcome Back!</h2>
             <form class="login-form">
                 <div class="input-group">
                     <input type="email" name="email" required>
@@ -25,9 +26,12 @@ <h2>Welcome Back!</h2>
                     <button class="home-btn"><i class="fas fa-home"></i> <a href="../index.html">Home</a></button>
                     <button class="signup-btn"><i class="fas fa-user-plus"></i><a href="../signup/signup.html">Signup</a></button>
                 </div>
-            </form>
+            </form>         
         </div>
+        <img src="icee.avif" alt="ice-cream-image" class="ice-cream-image">
     </div>
+
+   </div>
     <script src="login.js"></script>
 </body>
 </html>
diff --git a/login/login.js b/login/login.js
index e7298af..9cb5c6f 100644
--- a/login/login.js
+++ b/login/login.js
@@ -90,8 +90,6 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
-
-
 // password toggle feature
 function togglePasswordVisibility() {
   const passwordInput = document.getElementById("password");
@@ -106,4 +104,4 @@ function togglePasswordVisibility() {
       eyeIcon.classList.remove("fa-eye-slash");
       eyeIcon.classList.add("fa-eye");
   }
-}
\ No newline at end of file
+}
diff --git a/login/loginImg.png b/login/loginImg.png
new file mode 100644
index 0000000..eac4e56
Binary files /dev/null and b/login/loginImg.png differ
diff --git a/signup/signup.css b/signup/signup.css
index 3aecbb8..272eb20 100644
--- a/signup/signup.css
+++ b/signup/signup.css
@@ -1,152 +1,162 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
 body {
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: linear-gradient(135deg, #ff8a00, #e52e71);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 20px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  max-width: 650px;
+  width: 100%;
 }
 
 .signup-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
 }
 
 .signup-box {
-    background: rgba(255, 255, 255, 0.2);
-    padding: 40px;
-    border-radius: 15px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    transform: perspective(1000px); /* Adding perspective for 3D effect */
-    width: 400px;
-    height: 500px;
+  width: 53%;
+  padding: 20px;
+  position: relative;
+  margin-left: 300px;
 }
 
-h2 {
-    color: white;
-    margin-bottom: 20px;
+.createAcc {
+  text-align: center;
 }
 
-.signup-form {
-    display: flex;
-    flex-direction: column;
+.ice-cream-image {
+  position: absolute;
+  width: 300px;
+  height: 485px;
+  border-radius: 10px 0px 0px 10px;
+  margin-right: 390px;
 }
 
-.input-group {
-    position: relative;
-    margin-bottom: 20px;
+.signup-box h2 {
+  color: #FF69B4;
+  margin-bottom: 30px;
+  font-size: 28px;
 }
 
-.input-group {
-    position: relative;
-    margin-bottom: 20px;
-    display: flex; /* Use flexbox for alignment */
-    align-items: center; /* Center items vertically */
-}
-.input-group input {
-    width: 100%;
-    padding: 10px;
-    padding-right: 30px; /* Make room for the eye icon */
-    border: none;
-    border-bottom: 2px solid white;
-    background: transparent;
-    color: white;
-    font-size: 16px;
+.signup-btn {
+  width: 100%;
 }
 
-.toggle-password {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: white;
+.signup-form {
+  display: flex;
+  flex-direction: column;
 }
 
-.toggle-password:hover i {
-    color: #ff8a00; /* Change the color on hover */
-    cursor: pointer;
+.input-group {
+  position: relative;
+  margin-bottom: 20px;
 }
-.input-group i {
-    margin-right: 10px; /* Space between icon and input */
-    color: white; /* Icon color */
-    font-size: 20px; /* Adjust the icon size */
+
+.input-group input {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 25px;
+  background-color: #F0F0F0;
+  font-size: 16px;
+  transition: all 0.3s ease;
 }
+
 .input-group label {
-    position: absolute;
-    top: 50%; /* Center vertically */
-    left: 40px; /* Adjust label position */
-    transform: translateY(-50%);
-    color: white;
-    pointer-events: none;
-    transition: 0.3s;
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  pointer-events: none;
+  transition: all 0.3s ease;
 }
 
-.input-group input:focus ~ label,
-.input-group input:valid ~ label {
-    top: -15px; /* Label moves up when focused or filled */
-    font-size: 12px;
-    color: #ff8a00; /* Label color change */
+.input-group input:focus + label,
+.input-group input:valid + label {
+  top: -10px;
+  left: 10px;
+  font-size: 12px;
+  color: #FF69B4;
+  background-color: white;
+  padding: 0 5px;
 }
 
 .signup-btn {
-    padding: 10px;
-    border: none;
-    border-radius: 30px;
-    background-color: #e52e71;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background 0.3s;
-    margin-top: 30px;
+  padding: 12px;
+  background-color: #FF69B4;
+  color: white;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.3s ease;
 }
 
 .signup-btn:hover {
-    background-color: #ff8a00; /* Button hover effect */
+  background-color: #FF1493;
+  transform: scale(1.05);
 }
 
 .extra-links {
-    display: flex;
-    justify-content: center;
-    gap: 30px;
-    margin-top: 30px; /* Adjusted margin for spacing */
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
 }
 
-.extra-links button {
-    padding: 10px;
-    border: none;
-    border-radius: 30px;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: white;
-    cursor: pointer;
-    transition: background 0.3s;
+.home-btn,
+.login-btn {
+  background: none;
+  border: none;
+  color: #FF69B4;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
 }
 
-.extra-links button:hover {
-    background-color: rgba(255, 255, 255, 0.3); /* Button hover effect */
+.home-btn:hover,
+.login-btn:hover {
+  color: #FF1493;
 }
 
-.extra-links .home-btn i,
-.extra-links .login-btn i {
-    margin-right: 8px; /* Space between icon and text */
-}
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    padding: 10px;
+  }
+
+  .signup-box {
+    width: 100%;
+  }
 
-a {
-    text-decoration: none;
-    color: white; /* Link color */
+  .ice-cream-image {
+    width: 200px;
+    height: auto;
+  }
 }
 
-input:focus {
-    outline: none; /* Remove default outline */
+@media (max-width: 480px) {
+  .signup-container {
+    flex-direction: column;
+  }
+
+  .ice-cream-image {
+    width: 150px;
+    height: auto;
+  }
 }
diff --git a/signup/signup.html b/signup/signup.html
index b3dd988..0acc39f 100644
--- a/signup/signup.html
+++ b/signup/signup.html
@@ -8,91 +8,40 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/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="signup-container">
-        <div id="signup-box" class="signup-box">
-            <h2>Create an Account</h2>
-            <form action="#" class="signup-form" id="signup-form">
+  <div class="container">
     <div class="signup-container">
-        <div id="signup-box" class="signup-box">
-            <h2>Create an Account</h2>
-            <form action="../profile.html" method="GET" class="signup-form">
-                <div class="input-group">
-                    <input type="text" name="username" required>
-                    <label>Username</label>
-                </div>
-                <div class="input-group">
-                    <i class="fas fa-envelope"></i>
-                    <input type="email" id="email" required>
-                    <label>Email</label>
-                </div>
-                <div class="input-group">
-                    <i class="fas fa-lock"></i>
-                    <input type="password" id="password" required>
-                    <label>Password</label>
-                    <span class="toggle-password" onclick="togglePasswordVisibility()">
-                        <i class="fas fa-eye" id="eye-icon"></i>
-                    </span>
-                    <input type="email" name="email" required>
-                    <label>Email</label>
-                </div>
-                <div class="input-group">
-                    <input type="password" name="password" required>
-                    <label>Password</label>
-                </div>
-                <button class="signup-btn" type="submit">Sign Up</button>
-                <div class="extra-links">
-                    <button class="home-btn"><i class="fas fa-home"></i><a href="../index.html">Home</a></button>
-                    <button class="login-btn"><i class="fas fa-sign-in-alt"></i><a href="../login/login.html">Login</a></button>
-                </div>
-            </form>
-        </div>
+      <img src="signup.webp" alt="ice-cream-image" class="ice-cream-image">
+      <div id="signup-box" class="signup-box">
+        <h2 class="createAcc">Create an Account</h2>
+        <form action="../profile.html" method="GET" class="signup-form" id="signup-form">
+          <div class="input-group">
+            <input type="text" name="username" required>
+            <label>Username</label>
+          </div>
+          <div class="input-group">
+            <i class="fas fa-envelope"></i>
+            <input type="email" id="email" name="email" required>
+            <label>Email</label>
+          </div>
+          <div class="input-group">
+            <i class="fas fa-lock"></i>
+            <input type="password" id="password" name="password" required>
+            <label>Password</label>
+            <span class="toggle-password" onclick="togglePasswordVisibility()">
+              <i class="fas fa-eye" id="eye-icon"></i>
+            </span>
+          </div>
+          <button class="signup-btn" type="submit">Sign Up</button>
+          <div class="extra-links">
+            <button class="home-btn"><i class="fas fa-home"></i><a href="../index.html">Home</a></button>
+            <button class="login-btn"><i class="fas fa-sign-in-alt"></i><a href="../login/login.html">Login</a></button>
+          </div>
+        </form>
+      </div>
     </div>
-    <script src="../preloader.js"></script>
-    <script>
-        // Trusted email domains
-        const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com" , "protonmail.com" , "icloud.com" , "tutanota.com"];
-
-        document.getElementById('signup-form').addEventListener('submit', function(event) {
-            const emailInput = document.getElementById('email');
-            const email = emailInput.value.trim();
-            const emailDomain = email.substring(email.lastIndexOf('@') + 1);
-
-            if (!trustedDomains.includes(emailDomain)) {
-                event.preventDefault(); // Prevent form submission
-                alert('Please use a valid email address from a trusted provider (e.g., Gmail, Outlook, Yahoo).');
-                emailInput.focus(); // Focus on the email input
-            }
-        });
-
-        function togglePasswordVisibility() {
-            const passwordInput = document.getElementById('password');
-            const eyeIcon = document.getElementById('eye-icon');
-
-            if (passwordInput.type === 'password') {
-                passwordInput.type = 'text';
-                eyeIcon.classList.remove('fa-eye');
-                eyeIcon.classList.add('fa-eye-slash');
-            } else {
-                passwordInput.type = 'password';
-                eyeIcon.classList.remove('fa-eye-slash');
-                eyeIcon.classList.add('fa-eye');
-            }
-        }
-    </script>
-    <script src="signup.js"></script>
+  </div>
+  
+  <script src="../preloader.js"></script>
+  <script src="signup.js"></script>
 </body>
 </html>
-
diff --git a/signup/signup.webp b/signup/signup.webp
new file mode 100644
index 0000000..86ef326
Binary files /dev/null and b/signup/signup.webp differ