diff --git a/docker/ui/src/App.tsx b/docker/ui/src/App.tsx
index 384ec3a..003f839 100644
--- a/docker/ui/src/App.tsx
+++ b/docker/ui/src/App.tsx
@@ -18,10 +18,10 @@ function App() {
   ]
 
   return (
-    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans transition-colors duration-300">
+    <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 flex flex-col ${theme === 'dark' ? 'bg-slate-900 text-slate-100' : 'bg-slate-900 text-slate-100'}`}>
+        <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col dark:bg-slate-900 dark:text-slate-100">
           <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">
@@ -29,7 +29,7 @@ function App() {
               </div>
               <div>
                 <h1 className="text-xl font-bold tracking-tight">Rippy</h1>
-                <p className="text-xs text-slate-400">Automated Ripping</p>
+                <p className="text-xs text-slate-400 dark:text-slate-500">Automated Ripping</p>
               </div>
             </div>
           </div>
@@ -59,8 +59,8 @@ function App() {
             ))}
           </nav>
 
-          <div className="p-4 border-t border-slate-800">
-            <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800">
+          <div className="p-4 border-t border-slate-800 dark:border-slate-700">
+            <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-700">
               <LogOut size={20} />
               <span className="text-sm">Abmelden</span>
             </button>
@@ -68,7 +68,7 @@ function App() {
         </aside>
 
         {/* Main Content */}
-        <main className="flex-1 overflow-auto bg-slate-50/50 dark:bg-slate-50/50">
+        <main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950">
           <div className="max-w-7xl mx-auto p-6">
             {page === 'dashboard' && <Dashboard />}
             {page === 'metadata' && <MetadataPreview />}
diff --git a/docker/ui/src/pages/Dashboard.tsx b/docker/ui/src/pages/Dashboard.tsx
index 302f2ac..3b3c312 100644
--- a/docker/ui/src/pages/Dashboard.tsx
+++ b/docker/ui/src/pages/Dashboard.tsx
@@ -178,7 +178,7 @@ export default function Dashboard() {
     <div className="space-y-8 transition-colors duration-300">
       {/* Header */}
       <div className="flex flex-col gap-2 transition-colors duration-300">
-        <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Dashboard</h1>
+        <h1 className="text-3xl font-bold dark:text-slate-100 text-slate-900">Dashboard</h1>
         <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Übersicht über alle Ripping-Jobs und Geräte</p>
       </div>
 
diff --git a/docker/ui/tailwind.config.js b/docker/ui/tailwind.config.js
index dca8ba0..9121d4e 100644
--- a/docker/ui/tailwind.config.js
+++ b/docker/ui/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },