diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4d68920..0c0b116 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -24,6 +24,8 @@ export default defineNuxtConfig({
 					colors: {
 						primary: '#0c0c0d',
 						secondary: '#18181b',
+						darkgray: '#121213',
+						lightgray: '#27272a',
 					},
 				},
 			},
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 19416fc..ac18b70 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -7,7 +7,7 @@
 				<label class="w-full text-[#b3b3b3]"> Email </label>
 				<input
 					type="text"
-					class="h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
+					class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
 					v-model="credential.email"
 					placeholder="username" />
 			</div>
@@ -15,7 +15,7 @@
 				<label class="w-full text-[#b3b3b3]"> Password </label>
 				<input
 					type="password"
-					class="h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
+					class="bg-lightgray border-lightgray h-12 w-full rounded-md border p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
 					v-model="credential.password"
 					placeholder="password" />
 			</div>