diff --git a/docker/ui/src/App.tsx b/docker/ui/src/App.tsx
index 003f839..3ca4dc1 100644
--- a/docker/ui/src/App.tsx
+++ b/docker/ui/src/App.tsx
@@ -21,7 +21,7 @@ function App() {
     <div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
       <div className="flex h-screen overflow-hidden">
         {/* Sidebar */}
-        <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col dark:bg-slate-900 dark:text-slate-100">
+        <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col">
           <div className="p-6">
             <div className="flex items-center gap-3">
               <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
diff --git a/docker/ui/src/context/ThemeContext.tsx b/docker/ui/src/context/ThemeContext.tsx
index 649df0d..63c466c 100644
--- a/docker/ui/src/context/ThemeContext.tsx
+++ b/docker/ui/src/context/ThemeContext.tsx
@@ -18,10 +18,10 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     
     if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
       setTheme('dark')
-      document.documentElement.setAttribute('data-theme', 'dark')
+      document.documentElement.classList.add('dark')
     } else {
       setTheme('light')
-      document.documentElement.setAttribute('data-theme', 'light')
+      document.documentElement.classList.remove('dark')
     }
   }, [])
 
@@ -29,7 +29,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     const newTheme = theme === 'dark' ? 'light' : 'dark'
     setTheme(newTheme)
     localStorage.setItem('theme', newTheme)
-    document.documentElement.setAttribute('data-theme', newTheme)
+    if (newTheme === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
   }
 
   return (