diff --git a/src/admin/pages/AttendanceHistory.tsx b/src/admin/pages/AttendanceHistory.tsx
index e093d1b..5c43b2f 100644
--- a/src/admin/pages/AttendanceHistory.tsx
+++ b/src/admin/pages/AttendanceHistory.tsx
@@ -540,8 +540,8 @@ export default function AttendanceHistory() {
                 width: 44,
                 height: 44,
                 borderRadius: 2,
-                bgcolor: "info.light",
-                color: "info.main",
+                bgcolor: "info.main",
+                color: "#fff",
                 flexShrink: 0,
               }}
             >
diff --git a/src/admin/pages/Dashboard.tsx b/src/admin/pages/Dashboard.tsx
index 2cea3f5..8aecf37 100644
--- a/src/admin/pages/Dashboard.tsx
+++ b/src/admin/pages/Dashboard.tsx
@@ -260,8 +260,8 @@ export default function Dashboard() {
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  bgcolor: "error.light",
-                  color: "error.main",
+                  bgcolor: "error.main",
+                  color: "#fff",
                   flexShrink: 0,
                 }}
               >
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index b0872a3..3eb910f 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -20,10 +20,14 @@ type ViewTransitionDocument = Document & {
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState(() => {
-    if (typeof window !== "undefined") {
-      return localStorage.getItem("boha-theme") || "dark";
-    }
-    return "dark";
+    if (typeof window === "undefined") return "dark";
+    // Single source of truth = MUI's own mode key. MUI's cssVariables provider
+    // reads `mui-mode` on mount and sets `data-theme` from it, so we read/write
+    // that SAME key (no separate boha-theme) — page and toggle stay in sync
+    // across reloads. Fall back to the legacy key for pre-existing sessions.
+    const stored =
+      localStorage.getItem("mui-mode") || localStorage.getItem("boha-theme");
+    return stored === "light" || stored === "dark" ? stored : "dark";
   });
 
   // Apply synchronously (layout effect) so the `data-theme` attribute flips
@@ -31,7 +35,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   // the "after" snapshot and cross-fade to it.
   useLayoutEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("boha-theme", theme);
+    localStorage.setItem("mui-mode", theme);
+    localStorage.removeItem("boha-theme"); // retire the duplicate legacy key
     const themeColor = theme === "dark" ? "#12121a" : "#ffffff";
     document
       .querySelector('meta[name="theme-color"]')