diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index ed97b67f9..c8fb60d54 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -39,6 +39,14 @@ import { useDispatch } from "react-redux";
 import { getAppSettings, updateAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
+import { setMode } from "./Features/UI/uiSlice";
+
+const getPreferredTheme = () => {
+	if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		return 'dark';
+	}
+	return 'light';
+}
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -58,6 +66,11 @@ function App() {
 		}
 	}, [dispatch, authToken]);
 
+	useEffect(() => {
+		const theme = getPreferredTheme();
+		dispatch(setMode(theme));
+	},[dispatch]);
+
 	// Cleanup
 	useEffect(() => {
 		return () => {