diff --git a/client/src/app/services/theme.service.ts b/client/src/app/services/theme.service.ts
index 45fa8d2..4d89920 100644
--- a/client/src/app/services/theme.service.ts
+++ b/client/src/app/services/theme.service.ts
@@ -8,6 +8,7 @@ export class ThemeService {
 
   constructor() {
     this.applyClass(this.isDark());
+    this.listenToSystemTheme();
   }
 
   toggle() {
@@ -25,4 +26,17 @@ export class ThemeService {
     if (stored) return stored === 'dark';
     return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
   }
+
+  private listenToSystemTheme(): void {
+    const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    if (!mediaQuery) return;
+
+    mediaQuery.addEventListener('change', (event) => {
+      // Only follow system changes if the user hasn't set a manual preference
+      if (!localStorage.getItem(this.STORAGE_KEY)) {
+        this.isDark.set(event.matches);
+        this.applyClass(event.matches);
+      }
+    });
+  }
 }