diff --git a/app/ycode/components/HeaderBar.tsx b/app/ycode/components/HeaderBar.tsx
index 0f702dd7..451b71a9 100644
--- a/app/ycode/components/HeaderBar.tsx
+++ b/app/ycode/components/HeaderBar.tsx
@@ -553,7 +553,7 @@ export default function HeaderBar({
         <InviteUserButton />
 
         {/* Save Status Indicator */}
-        <div className="flex items-center justify-end w-16 text-xs text-white/50">
+        <div className="flex items-center justify-end w-16 text-xs text-zinc-500 dark:text-white/50">
           {isSaving ? (
             <>
               <span>Saving</span>
diff --git a/components/DarkModeProvider.tsx b/components/DarkModeProvider.tsx
index f6e17ed7..b45f4e93 100644
--- a/components/DarkModeProvider.tsx
+++ b/components/DarkModeProvider.tsx
@@ -3,6 +3,19 @@
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
 
+/**
+ * Resolves whether dark mode should be active based on the user's
+ * saved theme preference and the system color scheme.
+ */
+function shouldApplyDark(): boolean {
+  const saved = localStorage.getItem('theme') as 'system' | 'light' | 'dark' | null;
+  const theme = saved || 'dark';
+
+  if (theme === 'light') return false;
+  if (theme === 'dark') return true;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 /**
  * DarkModeProvider
  * 
@@ -10,17 +23,23 @@ import { useEffect } from 'react';
  * based on the current pathname. This avoids using headers() in
  * the root layout which would force all pages to be dynamic.
  * 
- * Dark mode is applied for /ycode/* routes except /ycode/preview/*
+ * For /ycode/* routes (except preview), it respects the user's
+ * saved theme preference from localStorage.
+ * For all other routes, dark mode is removed.
  */
 export default function DarkModeProvider({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   
   useEffect(() => {
     const isPreviewRoute = pathname?.startsWith('/ycode/preview');
-    const isDarkMode = !isPreviewRoute && pathname?.startsWith('/ycode');
+    const isBuilderRoute = !isPreviewRoute && pathname?.startsWith('/ycode');
     
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark');
+    if (isBuilderRoute) {
+      if (shouldApplyDark()) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
     } else {
       document.documentElement.classList.remove('dark');
     }