diff --git a/src/statego-frontend/src/components/LogIn.vue b/src/statego-frontend/src/components/LogIn.vue
index 03019ca..d728d79 100644
--- a/src/statego-frontend/src/components/LogIn.vue
+++ b/src/statego-frontend/src/components/LogIn.vue
@@ -14,24 +14,27 @@ function togglePass() {
 </script>
 
 <template>
-   <div class="flex h-1/2 w-1/4 flex-col rounded-lg border-t-8 border-t-indigo-500 bg-gray-100 drop-shadow-2xl">
+   <div class="flex min-h-[250px] w-5/6 flex-none flex-col rounded-lg border-t-8 border-t-violet-500 bg-gray-100 drop-shadow-2xl md:w-1/4">
       <h1 class="flex w-full justify-center pb-12 font-Nunito-Sans text-3xl font-bold">Login</h1>
       <form class="flex w-full">
-         <div class="flex h-full w-full flex-col items-center justify-center">
-            <label class="w-4/5 font-Nunito-Sans text-xs" for="userName">Username or email</label>
-            <input
-               class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
-               v-model="userName"
-            />
+         <div class="flex h-full w-full flex-col items-center justify-center gap-3">
+            <div class="flex w-full flex-col items-center justify-center">
+               <label class="w-4/5 font-Nunito-Sans text-xs" for="userName">Username or email</label>
+               <input
+                  class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
+                  v-model="userName"
+               />
+            </div>
 
             <br />
-
-            <label class="justify-left w-4/5 font-Nunito-Sans text-xs" for="password">Password</label>
-            <input
-               class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
-               :type="showPass"
-               v-model="password"
-            />
+            <div class="flex w-full flex-col items-center justify-center">
+               <label class="justify-left w-4/5 font-Nunito-Sans text-xs" for="password">Password</label>
+               <input
+                  class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
+                  :type="showPass"
+                  v-model="password"
+               />
+            </div>
             <button @click.prevent="togglePass">
                <span class="icon">
                   <i class="fas" :class="{ 'fa-eye-slash': showPass, 'fa-eye': !showPass }"></i>
@@ -40,7 +43,7 @@ function togglePass() {
             <br />
             <div class="justify-left flex w-4/5">
                <button
-                  class="flex h-10 w-2/5 items-center justify-center rounded-md bg-indigo-500 font-Nunito-Sans text-xl font-bold shadow-md hover:text-white hover:shadow-lg"
+                  class="flex h-10 w-2/5 items-center justify-center rounded-md bg-violet-500 font-Nunito-Sans text-xl font-bold shadow-md hover:text-white hover:shadow-lg"
                   type="submit"
                   value="Log In"
                >
@@ -48,7 +51,7 @@ function togglePass() {
                </button>
             </div>
 
-            <p class="justify-left w-4/5 pt-4 font-Nunito-Sans text-xs">
+            <p class="justify-left w-4/5 pb-5 font-Nunito-Sans text-xs">
                Don't have an account yet?
                <RouterLink class="text-violet-400 underline" to="/signup"> Sign Up! </RouterLink>
             </p>
diff --git a/src/statego-frontend/src/components/SignupForm.vue b/src/statego-frontend/src/components/SignupForm.vue
index 6adfaa6..aada37f 100644
--- a/src/statego-frontend/src/components/SignupForm.vue
+++ b/src/statego-frontend/src/components/SignupForm.vue
@@ -15,7 +15,7 @@ function submit() {
 </script>
 
 <template>
-   <div class="flex w-5/6 flex-col items-center rounded-md border-t-8 border-violet-500 bg-gray-100 shadow-lg md:h-3/5 md:w-1/4">
+   <div class="flex w-5/6 flex-col items-center rounded-md border-t-8 border-violet-500 bg-gray-100 shadow-lg md:w-1/4">
       <h1 class="p-3 font-Nunito-Sans text-3xl font-bold">Sign Up</h1>
       <form class="flex w-full flex-col items-center justify-center gap-y-4">
          <!-- email addrees field -->