diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1e6b0f5..7498d90 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "../hooks/useTranslation"
 import { Button } from "./ui/button"
 import { SettingsMenu } from "./SettingsMenu"
 import { LogOut, User, Moon, Sun, Globe, Command, Menu } from "lucide-react"
+import { useTheme } from "./ThemeProvider"
 import { logoutUser, getUserProfile } from "../api/users"
 import { WorkspaceSelector } from "./WorkspaceSelector"
 import { toast } from "sonner"
@@ -16,18 +17,16 @@ type NavbarProps = {
 
 export function Navbar({ onOpenSidebar }: NavbarProps) {
   const { t, lang, setLanguage } = useTranslation()
+  const { theme, setTheme } = useTheme()
   const navigate = useNavigate()
   const [showLogoutModal, setShowLogoutModal] = useState(false)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [user, setUser] = useState<any>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const isFa = lang === "fa"
-
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const savedTheme = localStorage.getItem("theme")
-    if (savedTheme) return savedTheme === "dark"
-    return document.documentElement.classList.contains("dark")
-  })
+  const isDarkMode =
+    theme === "dark" ||
+    (theme === "system" && document.documentElement.classList.contains("dark"))
 
   useEffect(() => {
     const handleProfileUpdated = ((e: CustomEvent) => {
@@ -40,14 +39,6 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
     return () => window.removeEventListener("profile_updated", handleProfileUpdated)
   }, [])
 
-  useEffect(() => {
-    if (isDarkMode) {
-      document.documentElement.classList.add("dark")
-    } else {
-      document.documentElement.classList.remove("dark")
-    }
-  }, [isDarkMode])
-
   useEffect(() => {
     const fetchUser = async () => {
       const token = getAccessToken()
@@ -92,9 +83,7 @@ export function Navbar({ onOpenSidebar }: NavbarProps) {
   }
 
   const toggleTheme = () => {
-    const newThemeState = !isDarkMode
-    setIsDarkMode(newThemeState)
-    localStorage.setItem("theme", newThemeState ? "dark" : "light")
+    setTheme(isDarkMode ? "light" : "dark")
   }
 
   const toggleLanguage = () => {