diff --git a/html/css/login.css b/html/css/login.css
index 1998b1d..59a842b 100644
--- a/html/css/login.css
+++ b/html/css/login.css
@@ -7,7 +7,8 @@
 }
 
 body {
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   background-color: var(--main-bg-color);
   margin: 0;
   padding: 0;
@@ -15,7 +16,14 @@ body {
 }
 
 img {
-  height: 400px;
+  width: 45%;
+  height: auto;
+  max-width: 400px;
+}
+
+.login {
+  flex: 1;
+  min-width: 300px;
 }
 
 .login,
@@ -25,11 +33,11 @@ img {
 }
 
 .container {
-  height: 100vh;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  padding: 20px;
 }
 
 #load {
@@ -115,9 +123,11 @@ img {
   -o-text-overflow: clip;
   text-overflow: clip;
   background: var(--main-icon-color);
-  background: linear-gradient(0deg,
-      rgba(96, 9, 240, 1) 0%,
-      var(--main-icon-color) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(96, 9, 240, 1) 0%,
+    var(--main-icon-color) 100%
+  );
   border: none;
 }
 
@@ -157,74 +167,74 @@ img {
   display: none;
 }
 
+.fullpage-container {
+  display: flex;
+  justify-content: center; /* horizontal centering */
+  align-items: center;     /* vertical centering */
+  min-height: 100vh;       /* full viewport height */
+  background-color: var(--main-bg-color);
+  padding: 20px;
+  box-sizing: border-box;
+}
 
-@media screen and (max-width: 1920px) {
-  img {
-    width: 40%;
-    height: 2%;
-    margin: -25em 45em;
-    margin-top: 8%;
-  }
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 40px; /* space between image and form */
+}
 
-  .login ,.register {
+
+
+@media screen and (min-width: 1024px) {
+  .welcome {
     margin-left: 8%;
-    margin-top: -5%;
   }
-
   .forgotpass span {
     margin-left: 230px;
   }
+}
 
-  .back{
-    margin-top: -3.5%;
-  }
-
-  .welcome {
-    margin-left:8%;
+@media screen and (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   }
 
-  .welcome span {
-   margin-left: 10%;
-  }
-}
-@media screen and (max-width: 970px) {
-  img {
-    margin: 6em 25em;
-    width: 70%;
-  }
-}
-@media screen and (max-width: 720px) {
   img {
-    margin: 0em 0em;
     width: 80%;
-    height: 40%;
-    padding-bottom: 12%;
+    margin: 5rem auto;
 
   }
+
   .login {
-    margin-top: 8%;
+    margin-top: 20px;
+    margin: auto;
   }
-  
 }
-@media screen and (max-width: 575px) {
-  img {
-    width: 50%;
-    height: 42%;
-    padding-bottom: 20%;
+
+
+@media screen and (max-width: 1920px) {
+  .forgotpass span {
+    margin-left: 230px;
   }
-  
-}
-@media screen and (max-width: 484px) {
-  img {
-    width: 140%;
-    margin-top: 15%;
+
+  .back {
+    margin-top: -3.5%;
   }
-  .login {
-    margin-top: 45%;
+
+  .welcome {
+    margin-left: 8%;
+  }
+
+  .welcome span {
+    margin-left: 10%;
   }
 }
-@media screen and (max-width: 380px) {
 
+@media screen and (max-width: 380px) {
   .welcome {
     text-align: center;
     margin-top: -20%;
@@ -257,7 +267,7 @@ img {
     margin: 2.2em 0em;
     margin-bottom: 0em;
   }
-  
+
   .inputs span {
     margin-left: 15px;
   }
@@ -265,7 +275,7 @@ img {
     width: 270px;
     margin-left: 15px;
   }
-  
+
   .forgotpass span {
     margin-left: 200px;
   }
@@ -277,7 +287,7 @@ img {
 
   .signin {
     width: 300px;
-    margin-left:12px ;
+    margin-left: 12px;
     margin-top: 0;
     align-items: center;
     justify-content: center;
@@ -290,4 +300,4 @@ img {
   .welcome span {
     margin-right: 15%;
   }
-}
\ No newline at end of file
+}
diff --git a/html/login.html b/html/login.html
index a761045..2982abb 100644
--- a/html/login.html
+++ b/html/login.html
@@ -54,53 +54,65 @@
   <div class="alert" id="emptyFieldsAlert" style="display: none">
     Please fill in all fields!
   </div>
-  <img src="../images/signupill.png" alt="" />
-  <div class="login">
-    <div class="welcome">
-      <h1 class="titletext">Welcome Back &#x1F917</h1>
-      <span>Please enter your details.</span>
-    </div>
-    <div class="inputs">
-      <span>Email<br /></span>
-      <input class="inputbox" placeholder="Enter your email" id="loginEmail" /><br />
-      <span>Password<br /></span>
-      <input type="password" class="inputbox" placeholder="••••••••" id="loginPassword" />
-      <i class="fas fa-eye-slash" id="toggleLoginPassword" style="margin-left: -30px; cursor: pointer;"></i>
-    </div>
-    <div class="forgotpass">
-      <span>Forgot Password</span>
-    </div>
-    <p class="back"><a class="tag" href="../index.html">&#8592; Back</a></p>
-    <div class="button">
-      <input type="button" class="signin" value="Sign in" id="loginButton" />
-    </div>
-    <div class="signupline">
-      <span>Don't have an account?</span>
-      <span class="signupbutton"> Sign up</span>
+  <div class="fullpage-container">
+    <div class="container">
+      <img src="../images/signupill.png" alt="" />
+     <div class="login">
+       <div class="welcome">
+         <h1 class="titletext">Welcome Back &#x1F917</h1>
+         <span>Please enter your details.</span>
+       </div>
+       <div class="inputs">
+         <span>Email<br /></span>
+         <input class="inputbox" placeholder="Enter your email" id="loginEmail" /><br />
+         <span>Password<br /></span>
+         <input type="password" class="inputbox" placeholder="••••••••" id="loginPassword" />
+         <i class="fas fa-eye-slash" id="toggleLoginPassword" style="margin-left: -30px; cursor: pointer;"></i>
+       </div>
+       <div class="forgotpass">
+         <span>Forgot Password</span>
+       </div>
+       <p class="back"><a class="tag" href="../index.html">&#8592; Back</a></p>
+       <div class="button">
+         <input type="button" class="signin" value="Sign in" id="loginButton" />
+       </div>
+       <div class="signupline">
+         <span>Don't have an account?</span>
+         <span class="signupbutton"> Sign up</span>
+       </div>
+     </div>
     </div>
   </div>
-  <div class="register">
-    <div class="welcome">
-      <h1 class="titletext">Create an account</h1>
-      <span>Let's get started.</span>
-    </div>
-    <div class="inputs">
-      <span>Username<br /></span>
-      <input class="inputbox" placeholder="Enter your username" id="signupUsername" /><br />
-      <span>Email<br /></span>
-      <input class="inputbox" placeholder="Enter your email" id="signupEmail" /><br />
-      <span>Password<br /></span>
-      <input type="password" class="inputbox" placeholder="••••••••" id="signupPassword" />
-      <i class="fas fa-eye-slash" id="toggleSignupPassword" style="margin-left: -30px; cursor: pointer;"></i>
-    </div>
-    <p class="back-1"><a class="tag1" href="../index.html">&#8592; Back</a></p>
-    <div class="button">
-      <input type="button" class="signin" value="Sign up" id="signupButton" />
-    </div>
-    <div class="signupline">
-      <span>Already have an account?</span>
-      <span class="signinbutton"> Sign in</span>
+
+
+  <div class="fullpage-container">
+
+   <div class="container">
+     <div class="register">
+      <div class="welcome">
+        <h1 class="titletext">Create an account</h1>
+        <span>Let's get started.</span>
+      </div>
+      <div class="inputs">
+        <span>Username<br /></span>
+        <input class="inputbox" placeholder="Enter your username" id="signupUsername" /><br />
+        <span>Email<br /></span>
+        <input class="inputbox" placeholder="Enter your email" id="signupEmail" /><br />
+        <span>Password<br /></span>
+        <input type="password" class="inputbox" placeholder="••••••••" id="signupPassword" />
+        <i class="fas fa-eye-slash" id="toggleSignupPassword" style="margin-left: -30px; cursor: pointer;"></i>
+      </div>
+      <p class="back-1"><a class="tag1" href="../index.html">&#8592; Back</a></p>
+      <div class="button">
+        <input type="button" class="signin" value="Sign up" id="signupButton" />
+      </div>
+      <div class="signupline">
+        <span>Already have an account?</span>
+        <span class="signinbutton"> Sign in</span>
+      </div>
     </div>
+   </div>
+
   </div>
 
   <!-- Alert messages -->