diff --git a/assets/css/app.css b/assets/css/app.css
index 0efb0eb..9748baa 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -6,6 +6,8 @@
 :root {
   --bg: #13151a;
   --accent: #b283e5;
+  --input-bg: #28253c;
+  --input-border: #4c4c6d;
 }
 
 html {
diff --git a/assets/css/core_components.css b/assets/css/core_components.css
index b5eec67..9299565 100644
--- a/assets/css/core_components.css
+++ b/assets/css/core_components.css
@@ -148,8 +148,8 @@
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.5rem;
-  background-color: #312d51;
-  border: 2px solid #7a7abd;
+  background-color: var(--input-bg);
+  border: 2px solid var(--input-border);
   color: white;
   cursor: pointer;
   width: 100%;
@@ -160,14 +160,14 @@
   margin-top: 0.5rem;
   border-radius: 0.5rem;
   width: 100%;
-  background-color: #312d51;
-  border: 2px solid #7a7abd;
+  background-color: var(--input-bg);
+  border: 2px solid var(--input-border);
   padding: 4px 8px;
   color: white;
 }
 
 .input:focus {
-  outline: 1px solid #7a7abd;
+  outline: 1px solid var(--input-border);
 }
 
 @media (min-width: 640px) {
@@ -182,8 +182,8 @@
   margin-top: 0.5rem;
   border-radius: 0.5rem;
   width: 100%;
-  background-color: #312d51;
-  border: 2px solid #7a7abd;
+  background-color: var(--input-bg);
+  border: 2px solid var(--input-border);
   padding: 4px 8px;
   color: white;
   resize: vertical;
@@ -192,7 +192,7 @@
 }
 
 .textarea:focus {
-  outline: 1px solid #7a7abd;
+  outline: 1px solid var(--input-border);
 }
 
 @media (min-width: 640px) {