diff --git a/src/web/src/plugins/vuetify.ts b/src/web/src/plugins/vuetify.ts
index 7200f49..f9127bb 100644
--- a/src/web/src/plugins/vuetify.ts
+++ b/src/web/src/plugins/vuetify.ts
@@ -16,9 +16,21 @@ import { createVuetify } from 'vuetify'
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
+// Detect system theme preferences
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+// Get saved theme or fallback to system
+const savedTheme = localStorage.getItem('theme')
+const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light')
+
+// Save if no theme was already saved
+if (!savedTheme) {
+  localStorage.setItem('theme', initialTheme)
+}
+
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'system',
+    defaultTheme: initialTheme,
   },
 })