diff --git a/Frontend/src/routes/auth/login/login.module.scss b/Frontend/src/routes/auth/login/login.module.scss
index 8747459..903cf0d 100644
--- a/Frontend/src/routes/auth/login/login.module.scss
+++ b/Frontend/src/routes/auth/login/login.module.scss
@@ -5,6 +5,7 @@
 
     h1 {
         @include text-largest;
+        font-weight: 200;
         margin-bottom: 2rem;
 
         @include respond(tablet) {
@@ -25,6 +26,8 @@
         gap: 1.5rem;
         margin-bottom: 2rem;
 
+        @include base-transition;
+
         @include respond(tablet) {
             margin: 2rem;
         }
@@ -75,6 +78,8 @@
     }
 
     .federatedLogin {
+        @include base-transition;
+
         width: 100%;
         max-width: 500px;
         display: flex;
@@ -89,6 +94,7 @@
         position: relative;
 
         &::after {
+            @include base-transition;
             content: attr(data-label);
             position: absolute;
             top: 0;
@@ -111,6 +117,7 @@
 
         .federatedBtn {
             @include button-base;
+            @include base-transition;
             flex: 1;
 
             background-color: var(--bg-1);
diff --git a/Frontend/src/styles/_mixins.scss b/Frontend/src/styles/_mixins.scss
index 283e156..623d4fe 100644
--- a/Frontend/src/styles/_mixins.scss
+++ b/Frontend/src/styles/_mixins.scss
@@ -109,3 +109,7 @@ $desktop: 1440px;
         padding: 10px 20px 10px 15px;
     }
 }
+
+@mixin base-transition {
+    transition: all var(--transition-speed) var(--transition-ease);
+}
diff --git a/Frontend/src/styles/theme.scss b/Frontend/src/styles/theme.scss
index 1cf470e..4a6afb4 100644
--- a/Frontend/src/styles/theme.scss
+++ b/Frontend/src/styles/theme.scss
@@ -4,12 +4,12 @@
     --transition-speed: 0.5s;
     --transition-ease: ease-in-out;
 
-    --gray-50: hsl(40 25% 85%);
-    --gray-100: hsl(40 23% 80%);
-    --gray-200: hsl(40 20% 77%);
-    --gray-300: hsl(40 20% 70%);
-    --gray-400: hsl(40 10% 50%);
-    --gray-500: hsl(40 5% 40%);
+    --gray-50: hsl(40 25% 90%);
+    --gray-100: hsl(40 23% 87%);
+    --gray-200: hsl(40 20% 83%);
+    --gray-300: hsl(40 20% 77%);
+    --gray-400: hsl(40 10% 75%);
+    --gray-500: hsl(40 5% 60%);
     --gray-600: hsl(40 5% 30%);
     --gray-700: hsl(40 5% 25%);
     --gray-800: hsl(40 5% 20%);
@@ -64,8 +64,8 @@
 [data-color-scheme="dark"] {
     // Background and Text Colors
     --bg: var(--gray-900);
-    --text: var(--gray-50);
-    --text-muted: var(--gray-400);
+    --text: var(--gray-300);
+    --text-muted: var(--gray-500);
 
     // Accent
     --primary: var(--brown-700);