diff --git a/core/accounts/static/accounts/css/base.css b/core/accounts/static/accounts/css/base.css
index 89c9924..e351427 100644
--- a/core/accounts/static/accounts/css/base.css
+++ b/core/accounts/static/accounts/css/base.css
@@ -1,7 +1,21 @@
-.login-container {
-    margin: auto;
-    padding: 30px;
-    width: 200px;
-    background-color: lightblue;
+/*color vars*/
+:root {
+    --main_bg: #1e1e1e;
+    --main_text_color: #d3d3d3;
+    --main_color: #3399cc;
+    --hover_main_color: #3399ccb0;
 
+  }
+
+
+
+body {
+    background-color: var(--main_bg); 
+    color: var(--main_text_color); 
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
 }
\ No newline at end of file
diff --git a/core/accounts/static/accounts/css/login.css b/core/accounts/static/accounts/css/login.css
index 927af23..c47f90e 100644
--- a/core/accounts/static/accounts/css/login.css
+++ b/core/accounts/static/accounts/css/login.css
@@ -1,22 +1,11 @@
 
-body {
-    background-color: #1e1e1e; 
-    color: #d3d3d3; 
-    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-}
-
 .register_link {
-    color:#d3d3d3;
+    color:var(--main_text_color);
     background-color: #2e2e2e;
 }
 
 .register_button {
-    color:#d3d3d3;
+    color:var(--main_text_color);
     background-color: #2e2e2e;
     border-radius: 5px;
     border:none;
@@ -32,11 +21,11 @@ body {
     width: 400px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
     text-align: center;
-    border: 2px solid #da1f3d;
+    border: 2px solid var(--main_color);
 }
 
 .login-header {
-    color: #d3d3d3;
+    color: var(--main_text_color);
     font-size: 24px;
     margin-bottom: 20px;
 }
@@ -59,7 +48,7 @@ body {
     border: 1px solid #555; 
     border-radius: 15px;
     background-color: #4a4a4a; 
-    color: #d3d3d3;
+    color: var(--main_text_color);
     outline: none;
     transition: transform 0.2s ease;
 }
@@ -67,15 +56,15 @@ body {
 
 .input-group input:focus {
     transform: scale(1.06); 
-    border-color: #da1f3d; 
+    border-color: var(--main_color); 
 }
 
 
 .login-button {
     width: 50%;
     padding: 13px;
-    background-color: #da1f3d; 
-    color: #d3d3d3; 
+    background-color: var(--main_color); 
+    color: var(--main_text_color); 
     border: none;
     border-radius: 15px;
     cursor: pointer;
@@ -88,7 +77,7 @@ body {
 
 
 .login-button:hover {
-    background-color: #d2324d; 
+    background-color: var(--hover_main_color); 
     transform: scale(1.06);
 }