diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..f673a71 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9f8f98a..49c555c 100644
--- a/index.html
+++ b/index.html
@@ -113,14 +113,16 @@
 }
    body {
     font-family: 'Roboto', sans-serif;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+    /* background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); */
 }
 
 .intro-section {
-    position: relative;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity 1s ease-out;
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+  padding: 2rem 0;
+  overflow: hidden;
+
 }
 
 .intro-section.fade-in {
@@ -173,6 +175,11 @@
     
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 @keyframes float {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-20px); }
@@ -226,7 +233,7 @@
 
 .landing-animate {
 opacity: 0;
-animation: landingAnimation 0.8s ease-out forwards;
+animation: fadeIn 1s ease-out forwards;
 }
 
 .text-container.landing-animate {
@@ -248,6 +255,11 @@
 .delay-400 { animation-delay: 0.4s; }
 
   
+@media (max-width: 768px) {
+  .intro-section {
+    padding-top: 5rem; /* Adjust based on your navbar height */
+  }
+}
 
   </style>
 </head>
@@ -345,49 +357,49 @@
 
  
 
-      <div class="intro-section" id="home-section">
+      <div class="intro-section min-h-screen flex items-center" id="home-section">
         <div class="floating-shape shape-1"></div>
         <div class="floating-shape shape-2"></div>
         <div class="floating-shape shape-3"></div>
         <div class="floating-shape shape-4"></div>
-
-
-        
-        <div class="flex p-5 items-center justify-center ml-5 mr-5">
-            <div class="sm:w-full md:w-2/4">
-                <div class="mr-5 text-container landing-animate">
-                    <h1 class="text-4xl font-semibold sm:text-5xl md:text-6xl text-black mb-4 animate-fade-in-up">
-                        The <span style="color: rgb(219, 127, 219);">#1</span> Sorting 
-                        <span class="whitespace-nowrap">Visualization Tool</span>
-                    </h1>
-                    
-                    <p class="mb-4 text-base sm:text-sm md:text-lg text-black animate-fade-in-up delay-100">
-                        <i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
-                        <br>
-                        <i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
-                        <br>
-                        <i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
-                    </p>
-                </div>
-                <div class="button-container animate-fade-in-up delay-200">
-                    <a class="mr-3 p-2 rounded-md font-semibold text-white" style="background: rgb(219, 127, 219);" href="visual.html">
-                        <span>Get Started</span>
-                    </a>
-                    <a class="mr-3 bg-gray-300 p-2 rounded-md font-semibold hover:text-purple-700" href="#programs-section">
-                        <span class="items-center">Explore</span>
-                    </a>
-                </div>
+      
+        <div class="container mx-auto px-4">
+          <div class="flex flex-col md:flex-row items-center justify-between">
+            <div class="w-full md:w-1/2 mb-8 md:mb-0">
+              <div class="text-container landing-animate">
+                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4 animate-fade-in-up">
+                  <span class="block">The <span style="color: rgb(219, 127, 219);">#1</span> Sorting</span>
+                  <span class="block">Visualization Tool</span>
+                </h1>
+                
+                <p class="mb-6 text-sm sm:text-base text-gray-700 animate-fade-in-up delay-100">
+                  <i class="fas fa-chart-bar feature-icon"></i>Interactive visualization
+                  <br>
+                  <i class="fas fa-tachometer-alt feature-icon"></i>Understand algorithm efficiency
+                  <br>
+                  <i class="fas fa-lightbulb feature-icon"></i>Learn sorting techniques
+                </p>
+              </div>
+              <div class="button-container animate-fade-in-up delay-200">
+                <a class="inline-block mr-4 px-6 py-3 rounded-full font-semibold text-white transition duration-300 ease-in-out hover:shadow-lg" style="background: rgb(219, 127, 219);" href="visual.html">
+                  <span>Get Started</span>
+                </a>
+                <a class="inline-block px-6 py-3 bg-gray-200 rounded-full font-semibold text-gray-700 transition duration-300 ease-in-out hover:bg-gray-300 hover:text-purple-700" href="#programs-section">
+                  <span>Explore</span>
+                </a>
+              </div>
             </div>
-            <div class="w-2/4 md:flex hidden image-container animate-fade-in-up delay-300">
-                <div class="image-wrapper">
-                    <div class="image-inner">
-                        <img src="./images/home.png" alt="" class="main-image">
-                        <div class="ripple-effect"></div>
-                    </div>
+            <div class="w-full md:w-1/2 image-container animate-fade-in-up delay-300">
+              <div class="image-wrapper">
+                <div class="image-inner">
+                  <img src="./images/home.png" alt="Sorting Visualization" class="main-image w-full h-auto max-w-md mx-auto">
+                  <div class="ripple-effect"></div>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
-    </div>
+      </div>
 
     <div class="site-section algorithm-title" id="algorithm-section">
       <div class="container">
diff --git a/login.html b/login.html
index 841dd6b..0f6999f 100644
--- a/login.html
+++ b/login.html
@@ -2,31 +2,166 @@
 <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>Login</title>
-    <link rel="stylesheet" href="css/login.css"/>
+    <title>Login - Visual Sort</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: #f0f2f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow-x: hidden;
+            padding: 20px;
+        }
+        .container {
+            display: flex;
+            width: 100%;
+            max-width: 900px;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .left-side {
+            flex: 1;
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .right-side {
+            flex: 1;
+            background: linear-gradient(135deg, #db7fdb, #c84fd1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+        h1 {
+            font-size: 2.5em;
+            color: #333;
+            margin-bottom: 20px;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        .input-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: #666;
+        }
+        .input-group input {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-bottom: 2px solid #ddd;
+            font-size: 1em;
+            transition: border-color 0.3s;
+        }
+        .input-group input:focus {
+            outline: none;
+            border-color: #c84fd1;
+        }
+        button {
+            background: #c84fd1;
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 25px;
+            font-size: 1em;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #db7fdb;
+        }
+        .signup-link {
+            margin-top: 20px;
+            text-align: center;
+            color: #666;
+        }
+        .signup-link a {
+            color: #c84fd1;
+            text-decoration: none;
+        }
+        .back-btn {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: #c84fd1;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: background 0.3s;
+            text-decoration: none;
+            z-index: 1000;
+        }
+        .back-btn:hover {
+            background: #db7fdb;
+        }
+        .animated-bg {
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, #db7fdb, #c84fd1, #db7fdb, #c84fd1);
+            animation: bgAnimation 15s linear infinite;
+        }
+        @keyframes bgAnimation {
+            0% {
+                transform: translateX(-50%) translateY(-50%) rotate(0deg);
+            }
+            100% {
+                transform: translateX(-50%) translateY(-50%) rotate(360deg);
+            }
+        }
+        @media (max-width: 768px) {
+            .container {
+                flex-direction: column;
+            }
+            .right-side {
+                display: none;
+            }
+            .left-side {
+                padding: 30px;
+            }
+            h1 {
+                font-size: 2em;
+            }
+        }
+    </style>
 </head>
 <body>
+    <a href="index.html" class="back-btn">&#8592;</a>
     <div class="container">
-        <div class="left-section">
-            <button class="back-button" onclick="window.location.href='index.html'"><img src="./images/back-button.png" width="50px" height="50px"/></button>
-            <h1 class="animated-heading">Visual Sort<span class="blinking-cursor">|</span></h1>
-            <p class="description">
-                Visual Sort is a website designed to visually demonstrate how different sorting algorithms work. It provides an interactive and educational experience for users to understand the steps and logic behind various sorting methods.
-            </p>
-            <form id="loginForm" class="login-form">
-                <input type="text" id="username" placeholder="Username" class="input-field">
-                <input type="password" id="password" placeholder="Password" class="input-field">
-                <button type="submit" class="submit-button">Login</button>
+        <div class="left-side">
+            <h1>Welcome Back</h1>
+            <form>
+                <div class="input-group">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" required>
+                </div>
+                <div class="input-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" required>
+                </div>
+                <button type="submit">Login</button>
             </form>
-            <p class="already-signed-up">
-                Not signed up? <a href="signup.html">Sign In</a>
-            </p>
+            <p class="signup-link">Don't have an account? <a href="signup.html">Sign up</a></p>
         </div>
-        <div class="right-section">
-            <img src="./images/login_image.png" alt="Sorting images" class="transition-image">
+        <div class="right-side">
+            <div class="animated-bg"></div>
         </div>
     </div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/signup.html b/signup.html
index 4dd248c..138f818 100644
--- a/signup.html
+++ b/signup.html
@@ -2,33 +2,170 @@
 <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>Register</title>
-    <link rel="stylesheet" href="css/signup.css"/>
+    <title>Sign Up - Visual Sort</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: #f0f2f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow-x: hidden;
+            padding: 20px;
+        }
+        .container {
+            display: flex;
+            width: 100%;
+            max-width: 900px;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .left-side {
+            flex: 1;
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .right-side {
+            flex: 1;
+            background: linear-gradient(135deg, #db7fdb, #c84fd1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+        h1 {
+            font-size: 2.5em;
+            color: #333;
+            margin-bottom: 20px;
+        }
+        .input-group {
+            margin-bottom: 15px;
+        }
+        .input-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: #666;
+        }
+        .input-group input {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-bottom: 2px solid #ddd;
+            font-size: 1em;
+            transition: border-color 0.3s;
+        }
+        .input-group input:focus {
+            outline: none;
+            border-color: #c84fd1;
+        }
+        button {
+            background: #c84fd1;
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 25px;
+            font-size: 1em;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #db7fdb;
+        }
+        .login-link {
+            margin-top: 15px;
+            text-align: center;
+            color: #666;
+        }
+        .login-link a {
+            color: #c84fd1;
+            text-decoration: none;
+        }
+        .back-btn {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: #c84fd1;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: background 0.3s;
+            text-decoration: none;
+            z-index: 1000;
+        }
+        .back-btn:hover {
+            background: #db7fdb;
+        }
+        .animated-bg {
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, #db7fdb, #c84fd1, #db7fdb, #c84fd1);
+            animation: bgAnimation 15s linear infinite;
+        }
+        @keyframes bgAnimation {
+            0% {
+                transform: translateX(-50%) translateY(-50%) rotate(0deg);
+            }
+            100% {
+                transform: translateX(-50%) translateY(-50%) rotate(360deg);
+            }
+        }
+        @media (max-width: 768px) {
+            .container {
+                flex-direction: column;
+            }
+            .right-side {
+                display: none;
+            }
+            .left-side {
+                padding: 30px;
+            }
+            h1 {
+                font-size: 2em;
+            }
+        }
+    </style>
 </head>
 <body>
+    <a href="index.html" class="back-btn">&#8592;</a>
     <div class="container">
-        <div class="left-section">
-            <button class="back-button" onclick="window.location.href='index.html'"><img src="./images/back-button.png" width="50px" height="50px"/></button>
-            <h1 class="animated-heading">Visual Sort<span class="blinking-cursor">|</span></h1>
-            <p class="description">
-                Visual Sort is a website designed to visually demonstrate how different sorting algorithms work. It provides an interactive and educational experience for users to understand the steps and logic behind various sorting methods.
-            </p>
-            <form id="signupForm" class="login-form">
-                <input type="text" id="name" placeholder="Name" class="input-field">
-                <input type="text" id="username" placeholder="Username" class="input-field">
-                <input type="email" id="email" placeholder="Email" class="input-field">
-                <input type="password" id="password" placeholder="Password" class="input-field">
-                <button type="submit" class="submit-button">Sign up</button>
+        <div class="left-side">
+            <h1>Join Us</h1>
+            <form>
+                <div class="input-group">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" required>
+                </div>
+                <div class="input-group">
+                    <label for="email">Email</label>
+                    <input type="email" id="email" required>
+                </div>
+                <div class="input-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" required>
+                </div>
+                <button type="submit">Sign Up</button>
             </form>
-            <p class="already-signed-up">
-                Already signed up? <a href="login.html">Login</a>
-            </p>
+            <p class="login-link">Already have an account? <a href="login.html">Login</a></p>
         </div>
-        <div class="right-section">
-            <img src="./images/login_image.png" alt="Sorting images" class="transition-image">
+        <div class="right-side">
+            <div class="animated-bg"></div>
         </div>
     </div>
 </body>
-</html>
+</html>
\ No newline at end of file