diff --git a/ui/src/provider/theme.provider.tsx b/ui/src/provider/theme.provider.tsx
index 9117f27..a5f7960 100644
--- a/ui/src/provider/theme.provider.tsx
+++ b/ui/src/provider/theme.provider.tsx
@@ -2,6 +2,14 @@ import createStore from "@/lib/makeStore";
 
 export type Theme = "dark" | "light";
 
+function initialState(): Theme {
+  if (localStorage.getItem("theme") !== null) {
+    return localStorage.getItem("theme") === "dark" ? "dark" : "light"
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"
+}
+
 export const {
   StoreProvider: ThemeProvider,
   useDispatch: setTheme,
@@ -11,5 +19,5 @@ export const {
     localStorage.setItem("theme", next);
     return next;
   },
-  (localStorage.getItem("theme") === "dark" ? "dark" : "light") as Theme,
+  initialState(),
 );