diff --git a/frontend/src/models/Settings.model.ts b/frontend/src/models/Settings.model.ts
index 4980b8a5..5bb6e87b 100644
--- a/frontend/src/models/Settings.model.ts
+++ b/frontend/src/models/Settings.model.ts
@@ -67,7 +67,10 @@ class BaseSettings {
   }
 
   getMode = (): 'light' | 'dark' => {
-    return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light';
+    return (systemClient.getSyncItem?.('settings_mode') as 'light' | 'dark') ||
+      window?.matchMedia('(prefers-color-scheme: dark)')?.matches
+      ? 'dark'
+      : 'light';
   };
 
   public frontend: 'basic' | 'pro' = 'basic';
diff --git a/frontend/src/services/System/SystemWebClient/index.ts b/frontend/src/services/System/SystemWebClient/index.ts
index 5a9f3ce2..379e49b9 100644
--- a/frontend/src/services/System/SystemWebClient/index.ts
+++ b/frontend/src/services/System/SystemWebClient/index.ts
@@ -33,6 +33,12 @@ class SystemWebClient implements SystemClient {
     return value ?? '';
   };
 
+  // Local storage
+  public getSyncItem: (key: string) => string | undefined = (key) => {
+    const value = window.localStorage.getItem(key);
+    return value ?? '';
+  };
+
   public setItem: (key: string, value: string) => void = (key, value) => {
     window.localStorage.setItem(key, value);
   };
diff --git a/frontend/src/services/System/index.ts b/frontend/src/services/System/index.ts
index 62e6454e..63ed7dba 100644
--- a/frontend/src/services/System/index.ts
+++ b/frontend/src/services/System/index.ts
@@ -5,6 +5,7 @@ import SystemAndroidClient from './SystemAndroidClient';
 export interface SystemClient {
   loading: boolean;
   copyToClipboard: (value: string) => void;
+  getSyncItem?: (key: string) => string | undefined;
   getItem: (key: string) => Promise<string | undefined>;
   setItem: (key: string, value: string) => void;
   deleteItem: (key: string) => void;
diff --git a/frontend/templates/frontend/index.ejs b/frontend/templates/frontend/index.ejs
index 5fca6f57..41a853d8 100644
--- a/frontend/templates/frontend/index.ejs
+++ b/frontend/templates/frontend/index.ejs
@@ -63,6 +63,14 @@
                 color: #c0392b;
                 text-decoration: underline;
               }
+
+              /* Dark mode styles based on system preference */
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: black;
+                  color: #f0f0f0;
+                }
+              }
             </style>
 </head>
 
@@ -116,4 +124,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>