diff --git a/frontend/.gitignore b/frontend/.gitignore
index 97aca2ea..8c94612c 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,2 +1,3 @@
 .env
+.env.local
 node_modules
\ No newline at end of file
diff --git a/frontend/src/components/user/common/ThemeToggle.tsx b/frontend/src/components/user/common/ThemeToggle.tsx
index 03307999..196c422c 100644
--- a/frontend/src/components/user/common/ThemeToggle.tsx
+++ b/frontend/src/components/user/common/ThemeToggle.tsx
@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react';
-import { useTheme } from './theme-provider';
-import { Sun, Moon } from 'lucide-react';
+import { useEffect, useState } from "react";
+import { useTheme } from "./theme-provider";
+import { Sun, Moon } from "lucide-react";
 
 interface ThemeToggleProps {
   className?: string;
 }
 
-const ThemeToggle: React.FC<ThemeToggleProps> = ({ className = '' }) => {
+const ThemeToggle: React.FC<ThemeToggleProps> = ({ className = "" }) => {
   const { theme, setTheme } = useTheme();
-  const [isDark, setIsDark] = useState(theme === 'dark');
+  const [isDark, setIsDark] = useState(theme === "dark");
 
   useEffect(() => {
-    setIsDark(theme === 'dark');
+    setIsDark(theme === "dark");
   }, [theme]);
 
   const handleToggle = () => {
-    const newTheme = isDark ? 'light' : 'dark';
+    const newTheme = isDark ? "light" : "dark";
     setTheme(newTheme);
     setIsDark(!isDark);
   };
@@ -23,12 +23,17 @@ const ThemeToggle: React.FC<ThemeToggleProps> = ({ className = '' }) => {
   return (
     <button
       onClick={handleToggle}
-      className={`flex items-center justify-center p-2 rounded-md transition-colors ${
-        isDark ? 'bg-muted text-brand-orange' : 'bg-muted text-black/70'
-      } ${className}`}
+      className={`flex items-center justify-center p-2 rounded-md cursor-pointer
+        transition-transform duration-500 
+        ${isDark ? "rotate-180 bg-muted text-yellow-500" : "rotate-0 bg-muted text-blue-500"}
+        ${className}`}
       aria-label="Toggle theme"
     >
-      {isDark ? <Sun size={16} /> : <Moon size={16} />}
+      {isDark ? (
+        <Sun className="h-6 w-6 text-yellow-500 transition-transform duration-500 rotate-180" />
+      ) : (
+        <Moon className="h-6 w-6 text-blue-500 transition-transform duration-500 rotate-0" />
+      )}
     </button>
   );
 };