diff --git a/public/css/login.css b/public/css/login.css
index 15e0d94..c193fd9 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,123 +1,270 @@
-.dark_mode {
-  color: #fff;
-}
-.main_container {
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-#sign_up,
-#sign_in {
-  background-color: rgba(15, 15, 15, 0.7);
-  position: fixed;
-  border-radius: 3rem;
-  left: 250px;
-  width: 900px;
-  height: 500px;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  filter: drop-shadow(5px 5px 5px 5px rgba(0, 0, 0, 0.3));
-  box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.3);
-}
-#sign_up {
-  display: flex;
-}
-#sign_in {
-  display: none;
-}
-.inputg {
-  width: 300px;
-  margin-left: 30px;
-  margin-bottom: 20px;
-}
-input[type="text"]::placeholder,
-input[type="email"]::placeholder,
-input[type="password"]::placeholder {
-  color: #7b7b7b;
-}
-input:not(:placeholder-shown) {
-  background-color: #7b7b7b;
-  color: #fff;
-}
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="password"]:focus {
-  color: #fff;
-}
-input[type="text"]:required:valid,
-input[type="email"]:required:valid,
-input[type="password"]:required:valid {
-  color: #fff;
-}
-.left_part,
-.right_part {
-  width: 450px; /* Half of the parent */
-  height: inherit;
-  overflow: hidden;
-}
-#sign_in > .left_part {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-}
-#sign_up > .left_part {
-  padding-left: 40px;
-}
-#sign_in > .right_part {
-  padding-right: 40px;
-}
-#sign_up > .right_part {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
+.cpsize{
+  font-size: 4vw;;
 }
-#sign_up > .right_part > img {
-  object-fit: cover;
-  height: 500px;
-  width: 500px;
-}
-#sign_in > .left_part > img {
-  object-fit: cover;
-  height: 500px;
-  width: 500px;
-}
-h1 {
-  color: #ffffff;
-  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
-    0px -4px 10px rgba(255, 255, 255, 0.3);
-}
-.input-group{
-    margin-left: -5px;
-}
-li{
-    text-align: left;
-}
-.password-strength-icon {
-  position: relative;
-  cursor: pointer;
-  top: 30%;
-  left: 40px;
-}
-.password-suggestions-tooltip {
-  position: absolute;
-  background: rgba(0, 0, 0, 0.7);
-  color: #fff;
-  border-radius: 3px;
-  font-size: 12px;
-  white-space: nowrap;
-  visibility: hidden;
-  opacity: 0;
-  z-index: 1000;
-  max-width: 200px;
-  overflow-wrap: break-word;
+.welsize{
+  font-size: 3vw;
 }
 
-.password-strength-icon:hover .password-suggestions-tooltip {
-  visibility: visible;
-  opacity: 1;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-70%);
-  max-width: 200px;
-}
+
+.dark_mode {
+    color: #fff;
+  }
+  .main_container {
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  }
+  #sign_up,
+  #sign_in {
+    background-color: rgba(15, 15, 15, 0.7);
+    /* position: fixed; */
+    border-radius: 3rem;
+    left: 250px;
+    width: 900px;
+    height: 500px;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    filter: drop-shadow(5px 5px 5px 5px rgba(0, 0, 0, 0.3));
+    box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.3);
+  }
+  #sign_up {
+    display: flex;
+  }
+  #sign_in {
+    display: none;
+  }
+  .inputg {
+    width: 300px;
+    margin-left: 30px;
+    margin-bottom: 20px;
+  }
+  input[type="text"]::placeholder,
+  input[type="email"]::placeholder,
+  input[type="password"]::placeholder {
+    color: #7b7b7b;
+  }
+  input:not(:placeholder-shown) {
+    background-color: #7b7b7b;
+    color: #fff;
+  }
+  input[type="text"]:focus,
+  input[type="email"]:focus,
+  input[type="password"]:focus {
+    color: #fff;
+  }
+  input[type="text"]:required:valid,
+  input[type="email"]:required:valid,
+  input[type="password"]:required:valid {
+    color: #fff;
+  }
+  .left_part,
+  .right_part {
+    width: 450px; /* Half of the parent */
+    height: inherit;
+    overflow: hidden;
+  }
+  #sign_in > .left_part {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  #sign_up > .left_part {
+    padding-left: 40px;
+  }
+  #sign_in > .right_part {
+    padding-right: 40px;
+  }
+  #sign_up > .right_part {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  #sign_up > .right_part > img {
+    object-fit: cover;
+    height: 500px;
+    width: 500px;
+  }
+  #sign_in > .left_part > img {
+    object-fit: cover;
+    height: 500px;
+    width: 500px;
+  }
+  h1 {
+    color: #ffffff;
+    text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3),
+      0px -4px 10px rgba(255, 255, 255, 0.3);
+  }
+  .input-group{
+      margin-left: -5px;
+  }
+
+  input{
+    font-size: 2rem !important;
+  }
+
+  .spanf{
+      font-size: 2rem;
+      margin: -8px;
+  }
+
+  .bigfont{
+    font-size: 2rem !important;
+  }
+
+  li{
+      text-align: left;
+  }
+  .password-strength-icon {
+    position: relative;
+    cursor: pointer;
+    top: 30%;
+    left: 40px;
+  }
+  .password-suggestions-tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    border-radius: 3px;
+    font-size: 12px;
+    white-space: nowrap;
+    visibility: hidden;
+    opacity: 0;
+    z-index: 1000;
+    max-width: 200px;
+    overflow-wrap: break-word;
+  }
+  
+  .password-strength-icon:hover .password-suggestions-tooltip {
+    visibility: visible;
+    opacity: 1;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-70%);
+    max-width: 200px;
+  }
+
+  @media screen and (max-width: 900px) {
+
+    .left_part , .right_part{
+      width: 100%;
+      display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    }
+
+    #sign_up > .right_part > img {
+      height: 100%;
+      width: 100%;
+    }
+
+
+    #sign_in > .left_part > img{
+      height: 100%;
+      width: 100%;
+    }
+
+    .right_part form , .left_part form{
+      width: 80%;
+      max-width: 100%;
+
+    }
+
+    .inputg{
+      width: 80%;
+      max-width: 100%;
+    }
+
+    .right_part form .inputg{
+      display: block;
+      margin: auto;
+    }
+
+    .left_part h2{
+      padding-right: 29px;
+    }
+
+    
+    input{
+      font-size: 1.5rem !important;
+    }
+
+    .row{
+      margin-bottom: 13px !important;
+    }
+    .spanf{
+      font-size: 1.5rem;
+      margin: -8px;
+  }
+
+  .bigfont{
+    font-size: 1.5rem !important;
+  }
+
+  .left_part,.right_part{
+    height: auto !important;
+  }
+
+  .right_part h2{
+    padding-right: 29px;
+  }
+
+  }
+
+  @media screen and (max-width: 500px) {
+
+    .left_part , .right_part{
+      width: 100%;
+      display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    }
+
+    .left_part form{
+      width: 80%;
+      max-width: 100%;
+      display: block;
+      margin: auto;
+    }
+
+    .right_part form{
+      width: 80%;
+      max-width: 100%;
+      display: block;
+      margin: auto;
+    }
+
+    #sign_up > .left_part{
+      padding-left: 0px;
+    }
+
+    #sign_in > .right_part{
+      padding-right: 0px;
+    }
+
+    input{
+      font-size: 1rem !important;
+    }
+
+
+    .inputg{
+      width: 80%;
+      max-width: 100%;
+    }
+
+
+    .spanf{
+      font-size: 1rem;
+      margin: -8px;
+  }
+
+  .bigfont{
+    font-size: 1rem !important;
+  }
+
+  }
+
+
+  
\ No newline at end of file
diff --git a/views/home/login.html b/views/home/login.html
index d792f77..f668475 100644
--- a/views/home/login.html
+++ b/views/home/login.html
@@ -1,269 +1,180 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css"
-    />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
-    <title>Login | CP-GRIND</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap"
-      rel="stylesheet"
-    />
-    <link href="/css/partial.css" rel="stylesheet" />
-    <link rel="stylesheet" href="/css/login.css" />
-  </head>
-  <body>
-    <div class="main_container">
-      <br />
-      <h1>CP GRIND</h1>
-      <br />
-      <!-- <p>{{.Message }}</p> -->
-      <p>Welcome to CP-GRIND</p>
-      <div id="sign_up" class="center-block">
-        <div class="left_part">
-          <br />
-          <h2>Sign Up</h2>
-          <br />
-          <form
-            action="/signup"
-            class="text-center"
-            method="POST"
-            onsubmit="return validateForm()"
-          >
-            <div class="inputg">
-              <div class="row">
-                <div class="col">
-                  <input
-                    type="text"
-                    class="form-control"
-                    name="fname"
-                    placeholder="First name"
-                    style="
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
+  <title>Login | CP-GRIND</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet" />
+  <link href="/css/partial.css" rel="stylesheet" />
+  <link rel="stylesheet" href="/css/login.css" />
+</head>
+
+<body>
+  <div class="main_container">
+    <br />
+    <h1 class="cpsize">CP GRIND</h1>
+    <br />
+    <!-- <p>{{.Message }}</p> -->
+    <p class="welsize">Welcome to CP-GRIND</p>
+
+    <div class="d-flex justify-content-center">
+
+    <div id="sign_up" class="flex-row flex-wrap">
+      <div class="left_part">
+        <br />
+        <h2>Sign Up</h2>
+        <br />
+        <form action="/signup" class="text-center fs-3" method="POST" onsubmit="return validateForm()">
+          <div class="inputg">
+            <div class="row">
+              <div class="col">
+                <input type="text" class="form-control" name="fname" placeholder="First name" style="
                       border: 1px solid #141c1f;
                       background-color: rgba(15, 15, 15, 0.7);
-                    "
-                  />
-                </div>
-                <div class="col">
-                  <input
-                    type="text"
-                    class="form-control"
-                    name="lname"
-                    placeholder="Last name"
-                    style="
+                    " />
+              </div>
+              <div class="col">
+                <input type="text" class="form-control" name="lname" placeholder="Last name" style="
                       border: 1px solid #141c1f;
                       background-color: rgba(15, 15, 15, 0.7);
-                    "
-                  />
-                </div>
+                    " />
               </div>
             </div>
-            <div class="row inputg">
-              <input
-                type="text"
-                class="form-control"
-                name="username"
-                placeholder="Username"
-                required
-                style="
+          </div>
+          <div class="row inputg">
+            <input type="text" class="form-control" name="username" placeholder="Username" required style="
                   border: 1px solid #141c1f;
                   background-color: rgba(15, 15, 15, 0.7);
-                "
-              />
-            </div>
-            <div class="row inputg">
-              <input
-                type="email"
-                class="form-control"
-                name="email"
-                placeholder="Email"
-                required
-                style="
+                " />
+          </div>
+          <div class="row inputg">
+            <input type="email" class="form-control" name="email" placeholder="Email" required style="
                   border: 1px solid #141c1f;
                   background-color: rgba(15, 15, 15, 0.7);
-                "
-              />
-            </div>
+                " />
+          </div>
 
-            <div class="row inputg">
-              <div class="input-group">
-                <input
-                  type="password"
-                  class="form-control"
-                  name="password"
-                  id="password"
-                  placeholder="Password"
-                  required
-                  style="
+          <div class="row inputg">
+            <div class="input-group">
+              <input type="password" class="form-control" name="password" id="password" placeholder="Password" required
+                style="
                     border: 1px solid #141c1f;
                     background-color: rgba(15, 15, 15, 0.7);
                     padding-right: 30px;
-                  "
-                />
-                <span class="password-strength-icon">
-                  <i class="fa fa-question-circle" aria-hidden="true"></i>
-                  <div class="password-suggestions-tooltip">
-                    <ul>
-                      <li>Use upper and lowercase letters.</li>
-                      <li>Include special characters.</li>
-                      <li>Make it at least 8 characters long.</li>
-                      <li>Avoid using common words.</li>
-                    </ul>
-                  </div>
-                </span>
+                  " />
+              <span class="password-strength-icon spanf">
+                <i class="fa fa-question-circle" aria-hidden="true"></i>
+                <div class="password-suggestions-tooltip">
+                  <ul>
+                    <li>Use upper and lowercase letters.</li>
+                    <li>Include special characters.</li>
+                    <li>Make it at least 8 characters long.</li>
+                    <li>Avoid using common words.</li>
+                  </ul>
+                </div>
+              </span>
 
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  id="show-password"
-                  onclick="showPass()"
-                >
-                  <i class="far fa-eye" id="togglePassword"></i>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  id="hide-password"
-                  style="display: none"
-                  onclick="hidePass()"
-                >
-                  <i class="fa fa-eye-slash" aria-hidden="true"></i>
-                </button>
-              </div>
+              <button type="button" class="btn btn-secondary" id="show-password" onclick="showPass()">
+                <i class="far fa-eye" id="togglePassword"></i>
+              </button>
+              <button type="button" class="btn btn-secondary" id="hide-password" style="display: none"
+                onclick="hidePass()">
+                <i class="fa fa-eye-slash" aria-hidden="true"></i>
+              </button>
             </div>
-            <div class="row inputg">
-              <div
-                class="progress"
-                id="progress-strength-meter"
-                style="display: none; height: 5px"
-              >
-                <div
-                  id="password-strength-indicator"
-                  class="progress-bar"
-                  role="progressbar"
-                  style="width: 0%"
-                  aria-valuenow="0"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                ></div>
-              </div>
-              <div
-                class="message"
-                id="password-strength-message"
-                style="display: block; margin-top: 4px"
-              ></div>
+          </div>
+          <div class="row inputg">
+            <div class="progress" id="progress-strength-meter" style="display: none; height: 5px">
+              <div id="password-strength-indicator" class="progress-bar" role="progressbar" style="width: 0%"
+                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
             </div>
+            <div class="message" id="password-strength-message" style="display: block; margin-top: 4px"></div>
+          </div>
 
-            <div class="row inputg">
-              <div class="input-group">
-                <input
-                  type="password"
-                  class="form-control"
-                  name="cpassword"
-                  placeholder="Confirm Password"
-                  required
-                  style="
+          <div class="row inputg">
+            <div class="input-group">
+              <input type="password" class="form-control" name="cpassword" placeholder="Confirm Password" required
+                style="
                     border: 1px solid #141c1f;
                     background-color: rgba(15, 15, 15, 0.7);
-                  "
-                />
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  id="show-cpassword"
-                  onclick="showCPass()"
-                >
-                  <i class="far fa-eye" id="togglePassword"></i>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  id="hide-cpassword"
-                  style="display: none"
-                  onclick="hideCPass()"
-                >
-                  <i class="fa fa-eye-slash" aria-hidden="true"></i>
-                </button>
-              </div>
+                  " />
+              <button type="button" class="btn btn-secondary" id="show-cpassword" onclick="showCPass()">
+                <i class="far fa-eye" id="togglePassword"></i>
+              </button>
+              <button type="button" class="btn btn-secondary" id="hide-cpassword" style="display: none"
+                onclick="hideCPass()">
+                <i class="fa fa-eye-slash" aria-hidden="true"></i>
+              </button>
             </div>
-            <button type="submit" class="btn btn-outline-primary">
-              Sign Up
-            </button>
-          </form>
-          Already registered?
-          <button type="button" class="btn dark_mode" onclick="toggleit();">
+          </div>
+          <button type="submit" class="btn btn-outline-primary bigfont">
+            Sign Up
+          </button>
+        </form>
+        <div class="mt-3 d-flex justify-content-center align-items-center">
+          <span class="bigfont"> Already registered? </span>
+          <button type="button" class="btn dark_mode bigfont" onclick="toggleit();">
             Sign In
           </button>
         </div>
-        <div class="right_part">
-          <img src="/assets/img1.png" alt="" srcset="" />
-        </div>
       </div>
-      <div id="sign_in" class="center-block">
-        <div class="left_part">
-          <img src="/assets/img2.png" alt="" srcset="" />
-        </div>
-        <div class="right_part">
-          <br />
-          <h2>Sign In</h2>
-          <br />
-          <form action="/login" class="text-center" method="POST">
-            <div class="inputg">
-              <div class="row inputg">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="username"
-                  placeholder="Username"
-                  required
-                  style="
+      <div class="right_part">
+        <img src="/assets/img1.png" alt="" srcset="" class="img-fluid"/>
+      </div>
+    </div>
+
+    </div>
+
+    <div class="d-flex justify-content-center">
+
+    <div id="sign_in" class="flex-row flex-wrap">
+      <div class="left_part">
+        <img src="/assets/img2.png" alt="" srcset="" class="img-fluid"/>
+      </div>
+      <div class="right_part">
+        <br />
+        <h2>Sign In</h2>
+        <br />
+        <form action="/login" class="text-center" method="POST">
+          <div class="inputg">
+            <div class="row inputg">
+              <input type="text" class="form-control" name="username" placeholder="Username" required style="
                     border: 1px solid #141c1f;
                     background-color: rgba(15, 15, 15, 0.7);
-                  "
-                />
-              </div>
-              <div class="row inputg">
-                <input
-                  type="password"
-                  class="form-control"
-                  name="password"
-                  placeholder="Password"
-                  required
-                  style="
+                  " />
+            </div>
+            <div class="row inputg">
+              <input type="password" class="form-control" name="password" placeholder="Password" required style="
                     border: 1px solid #141c1f;
                     background-color: rgba(15, 15, 15, 0.7);
-                  "
-                />
-              </div>
-              <button type="submit" class="btn btn-outline-success">
-                Sign In
-              </button>
+                  " />
             </div>
-          </form>
-          <br /><br />
-          Not registered yet?
-          <button type="button" class="btn dark_mode" onclick="toggleit();">
+            <button type="submit" class="btn btn-outline-success bigfont">
+              Sign In
+            </button>
+          </div>
+        </form>
+      
+        <div class="d-flex flex-row justify-content-center align-items-center">
+          <span class="bigfont"> Not registered yet? </span>
+          <button type="button" class="btn dark_mode bigfont" onclick="toggleit();">
             Sign Up
           </button>
         </div>
       </div>
     </div>
-    <script src="/js/login.js"></script>
-  </body>
-</html>
+
+    <!-- <div class="d-flex justify-content-center"></div> -->
+  </div>
+  <script src="/js/login.js"></script>
+</body>
+
+</html>
\ No newline at end of file