diff --git a/src/components/theme-toggle/index.tsx b/src/components/theme-toggle/index.tsx
index a2401ec..10933e5 100644
--- a/src/components/theme-toggle/index.tsx
+++ b/src/components/theme-toggle/index.tsx
@@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
 
 export default function ThemeToggle() {
   const [isSpinning, setIsSpinning] = useState<boolean>(false);
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState<boolean>(false);
 
   useEffect(() => {
@@ -19,7 +19,7 @@ export default function ThemeToggle() {
     setIsSpinning(true);
     setTimeout(() => setIsSpinning(false), 500);
 
-    setTheme(theme === "dark" ? "light" : "dark");
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
   };
 
   if (!mounted) {
@@ -33,8 +33,8 @@ export default function ThemeToggle() {
       className={`${isSpinning && "animate-[spin_0.5s_ease-out]"}  `}
     >
       <div className="duration-500 ease-in-out transition-all transform text-[#333] dark:text-white hover:scale-125">
-        {theme === "dark" && <Moon />}
-        {theme === "light" && <Sun />}
+        {resolvedTheme === "dark" && <Moon />}
+        {resolvedTheme === "light" && <Sun />}
       </div>
     </div>
   );