diff --git a/src/components/_Admin/AdminLoginBox.tsx b/src/components/_Admin/AdminLoginBox.tsx
index 498580e..0069e8d 100644
--- a/src/components/_Admin/AdminLoginBox.tsx
+++ b/src/components/_Admin/AdminLoginBox.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import "./css/AdminLoginBox.css";
 import ReusableButton from "../buttons/ReusableButton";
@@ -17,6 +17,15 @@ const AdminLogin: React.FC<AdminLoginProps> = ({ onLogin }) => {
   const [error, setError] = useState("");
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const darkMode = localStorage.getItem("theme") === "dark";
+    if (darkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+    }
+  }, []);
+
   const handleLogin = async () => {
     try {
       const response = await adminLogin({
diff --git a/src/components/_Admin/css/AdminLoginBox.css b/src/components/_Admin/css/AdminLoginBox.css
index cb4df1a..3abfb16 100644
--- a/src/components/_Admin/css/AdminLoginBox.css
+++ b/src/components/_Admin/css/AdminLoginBox.css
@@ -85,9 +85,15 @@ body.dark-mode .admin-login-button:hover {
   background-color: #144c2b;
 }
 
-input.admin-login-input:-webkit-autofill,
-input.admin-login-input:-webkit-autofill:focus,
-input.admin-login-input:-webkit-autofill:hover {
+input.admin-login-input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
+  -webkit-text-fill-color: #000 !important;
+  caret-color: #000 !important;
+  border: 1px solid #ccc !important;
+  transition: background-color 0s ease-in-out 0s;
+}
+
+body.dark-mode input.admin-login-input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px hsl(0, 0%, 16%) inset !important;
   -webkit-text-fill-color: #fff !important;
   caret-color: #fff !important;