diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 59d5859..e3bec05 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -27,6 +27,7 @@ function goHome(): void {
   position: sticky;
   top: 0;
   z-index: 100;
+  width: 100%;
   height: var(--header-height);
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
@@ -44,6 +45,12 @@ function goHome(): void {
   align-items: center;
 }
 
+@media (max-width: 767px) {
+  .header-content {
+    max-width: none;
+  }
+}
+
 .header-title {
   font-size: var(--font-size-xl);
   font-weight: 700;
diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
index 887f3ef..94be6a1 100644
--- a/frontend/src/stores/theme.ts
+++ b/frontend/src/stores/theme.ts
@@ -115,12 +115,22 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   /**
-   * Update admin theme config (called after saving settings).
+   * Update admin theme config and apply if current mode matches.
+   * Called after saving settings — gives live preview without page reload.
    */
   function updateAdminConfig(darkTheme: string, lightTheme: string, defaultMode: 'dark' | 'light'): void {
     adminDarkTheme.value = darkTheme
     adminLightTheme.value = lightTheme
     adminDefaultMode.value = defaultMode
+
+    // Apply the new theme if user's current mode matches the changed side
+    if (currentMode.value === 'dark') {
+      currentTheme.value = darkTheme
+      _apply(darkTheme)
+    } else {
+      currentTheme.value = lightTheme
+      _apply(lightTheme)
+    }
   }
 
   /**