diff --git a/components/shared/user-settings-bridge.tsx b/components/shared/user-settings-bridge.tsx
index 6a8740e..71bd436 100644
--- a/components/shared/user-settings-bridge.tsx
+++ b/components/shared/user-settings-bridge.tsx
@@ -1,8 +1,13 @@
 'use client'
 
 import { useEffect } from 'react'
+import { updateUserSettingsAction } from '@/actions/user-settings'
 import { useUserSettingsStore } from '@/stores/user-settings/store'
 import type { UserSettings } from '@/lib/user-settings'
+import {
+  buildMigrationPatch,
+  clearLegacyLocalStorage,
+} from '@/lib/user-settings-migration'
 
 interface Props {
   initial: UserSettings
@@ -23,6 +28,29 @@ export function UserSettingsBridge({ initial, isDemo }: Props) {
     hydrate(initial, isDemo)
   }, [hydrate, initial, isDemo])
 
+  // One-shot migration: read legacy localStorage prefs, push to server, clear.
+  // Idempotent via marker; demo accounts skip (no server-write).
+  useEffect(() => {
+    if (isDemo) return
+    const result = buildMigrationPatch()
+    if (!result.hasData) {
+      clearLegacyLocalStorage([])
+      return
+    }
+    let cancelled = false
+    void (async () => {
+      const res = await updateUserSettingsAction(result.patch)
+      if (cancelled) return
+      if ('success' in res && res.success) {
+        applyServerPatch(result.patch)
+        clearLegacyLocalStorage(result.legacyKeys)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [isDemo, applyServerPatch])
+
   useEffect(() => {
     if (isDemo) return
     const es = new EventSource('/api/realtime/user-settings')