diff --git a/src/pages/login.rs b/src/pages/login.rs
index 02efdda..0d55a26 100644
--- a/src/pages/login.rs
+++ b/src/pages/login.rs
@@ -40,7 +40,7 @@ pub fn Login() -> impl IntoView {
     };
 
     view! {
-        <div class="page-container">
+        <div class="auth-page-container">
             <div class="login-container">
                 <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
                 <div class="header">
diff --git a/src/pages/signup.rs b/src/pages/signup.rs
index 3ede79f..c2de8f8 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -47,7 +47,7 @@ pub fn Signup() -> impl IntoView {
     };
 
     view! {
-        <div class="page-container">
+        <div class="auth-page-container">
             <div class="signup-container">
                 <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
                 <div class="header">
diff --git a/style/login.scss b/style/login.scss
index 0c55d02..e694d3a 100644
--- a/style/login.scss
+++ b/style/login.scss
@@ -19,7 +19,7 @@
 .login-container .header h1 {
   margin-top: 3rem;
   font-size: 2.5rem;
-  color: #2c1308;
+  color: $accent-color;
 }
 .login-container .login-form {
   width: 75%;
@@ -55,15 +55,15 @@
   left: 0;
   padding: 15px 0px 10px;
   pointer-events: none;
-  color: #907163;
+  color: black;
   font-size: 1.19em;
   letter-spacing: 0.5px;
   transition: 0.5s;
 }
 .login-form .input-box input:valid ~ span,
 .login-form .input-box input:focus ~ span {
-  color: #2c1308;
-  font-size: 1rem;
+  color: rgb(94, 93, 93);
+  font-size: 0.9rem;
   transform: translateY(-30px);
   font-weight: 400;
 }
@@ -73,7 +73,7 @@
   bottom: 0;
   width: 100%;
   height: 2px;
-  background: #907163;
+  background: $auth-inputs;
   border-radius: 4px;
   overflow: hidden;
   transition: 0.5s;
@@ -106,7 +106,7 @@
   cursor: pointer;
   font-size: 1.1rem;
   font-weight: 600;
-  background-color: #582b17;
+  background-color: $accent-color;
 }
 .login-form .go-to-signup {
   color: #8f8f8f;
@@ -118,7 +118,7 @@
   text-decoration: underline;
 }
 .login-form .go-to-signup a:hover {
-  color: #fff;
+  color: black;
   transition: all 0.2s;
 }
 .login-container .return {
diff --git a/style/signup.scss b/style/signup.scss
index 42199fe..30f87dc 100644
--- a/style/signup.scss
+++ b/style/signup.scss
@@ -1,5 +1,14 @@
 @import "theme.scss";
 
+.auth-page-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+}
+
 .signup-container {
   display: flex;
   flex-direction: column;
@@ -18,7 +27,7 @@
 .signup-container .header h1 {
   margin-top: 3rem;
   font-size: 2.5rem;
-  color: #2c1308;
+  color: $accent-color;
 }
 .signup-container .signup-form {
   width: 80%;
@@ -54,15 +63,15 @@
   left: 0;
   padding: 15px 0px 10px;
   pointer-events: none;
-  color: #907163;
+  color: black;
   font-size: 1.19em;
   letter-spacing: 0.5px;
   transition: 0.5s;
 }
 .signup-form .input-box input:valid ~ span,
 .signup-form .input-box input:focus ~ span {
-  color: #a8a2b0;
-  font-size: 1rem;
+  color: rgb(94, 93, 93);
+  font-size: 0.9rem;
   transform: translateY(-30px);
   font-weight: 400;
 }
@@ -90,11 +99,11 @@
   height: 45px;
   border: none;
   border-radius: 8px;
-  color: rgb(210, 207, 207);
+  color: white;
   cursor: pointer;
   font-size: 1.1rem;
   font-weight: 600;
-  background-color: #582b17;
+  background-color: $accent-color;
 }
 .signup-form .go-to-login {
   color: #8f8f8f;
@@ -106,7 +115,7 @@
   text-decoration: underline;
 }
 .signup-form .go-to-login a:hover {
-  color: #fff;
+  color: black;
   transition: all 0.2s;
 }
 .signup-container .return {
diff --git a/style/theme.scss b/style/theme.scss
index 29d39f8..3e5d81c 100644
--- a/style/theme.scss
+++ b/style/theme.scss
@@ -7,5 +7,5 @@ $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 
-$auth-inputs: #86659e;
-$auth-containers: #ccc9d1;
+$auth-inputs: #796dd4;
+$auth-containers: white;