diff --git a/management-dashboard-web-app/src/components/Login.tsx b/management-dashboard-web-app/src/components/Login.tsx
index f564f30..062a99c 100755
--- a/management-dashboard-web-app/src/components/Login.tsx
+++ b/management-dashboard-web-app/src/components/Login.tsx
@@ -39,10 +39,10 @@ export function Login({ onLoginSuccess }: LoginProps) {
     <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
       <div className="max-w-md w-full space-y-8">
         <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
             Sign in to your account
           </h2>
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
             RBAC Authentication System
           </p>
         </div>
@@ -58,7 +58,12 @@ export function Login({ onLoginSuccess }: LoginProps) {
                 type="email"
                 autoComplete="email"
                 required
-                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                className="appearance-none rounded-none relative block w-full px-3 py-2
+                  border border-gray-300 dark:border-gray-700
+                  bg-white dark:bg-gray-800
+                  placeholder-gray-500 dark:placeholder-gray-400
+                  text-gray-900 dark:text-gray-100
+                  rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 placeholder="Email address"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
diff --git a/management-dashboard-web-app/src/index.css b/management-dashboard-web-app/src/index.css
index 8169f40..fee4611 100755
--- a/management-dashboard-web-app/src/index.css
+++ b/management-dashboard-web-app/src/index.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap") layer(base);
 
 @import "tailwindcss";
 
@@ -179,7 +179,7 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200);
+    border-color: var(--color-gray-200, currentColor);
   }
 
   button:not(:disabled),
@@ -188,7 +188,7 @@
   }
 
   body {
-    @apply relative font-normal font-outfit z-1 bg-gray-50 dark:bg-gray-900 dark:text-gray-300;
+    @apply relative font-normal font-outfit z-1 bg-gray-50 dark:bg-gray-900;
   }
 }