diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 35faa43b1..11bda85a1 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
   headingLevel: 'h2',
 })
 
-const appSettings = useSettings()
+const { userLocalSettings } = useUserLocalSettings()
 
 const buttonId = `${props.id}-collapsible-button`
 const contentId = `${props.id}-collapsible-content`
@@ -23,8 +23,8 @@ const contentId = `${props.id}-collapsible-content`
 const isOpen = shallowRef(true)
 
 onPrehydrate(() => {
-  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const collapsed: string[] = settings?.sidebar?.collapsed || []
+  const sidebar = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const collapsed: string[] = sidebar?.sidebar?.collapsed || []
   for (const id of collapsed) {
     if (!document.documentElement.dataset.collapsed?.split(' ').includes(id)) {
       document.documentElement.dataset.collapsed = (
@@ -47,17 +47,16 @@ onMounted(() => {
 function toggle() {
   isOpen.value = !isOpen.value
 
-  const removed = appSettings.settings.value.sidebar.collapsed.filter(c => c !== props.id)
+  const removed = userLocalSettings.value.sidebar.collapsed.filter(c => c !== props.id)
 
   if (isOpen.value) {
-    appSettings.settings.value.sidebar.collapsed = removed
+    userLocalSettings.value.sidebar.collapsed = removed
   } else {
     removed.push(props.id)
-    appSettings.settings.value.sidebar.collapsed = removed
+    userLocalSettings.value.sidebar.collapsed = removed
   }
 
-  document.documentElement.dataset.collapsed =
-    appSettings.settings.value.sidebar.collapsed.join(' ')
+  document.documentElement.dataset.collapsed = userLocalSettings.value.sidebar.collapsed.join(' ')
 }
 
 const ariaLabel = computed(() => {
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index 445161dba..6e4c00727 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -2,7 +2,7 @@
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
-const { settings } = useSettings()
+const { userLocalSettings } = useUserLocalSettings()
 
 const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
@@ -67,7 +67,7 @@ function handleDisconnect() {
       <div class="flex flex-col gap-2">
         <SettingsToggle
           :label="$t('connector.modal.auto_open_url')"
-          v-model="settings.connector.autoOpenURL"
+          v-model="userLocalSettings.connector.autoOpenURL"
         />
       </div>
 
@@ -201,7 +201,7 @@ function handleDisconnect() {
             <div class="flex flex-col gap-2">
               <SettingsToggle
                 :label="$t('connector.modal.auto_open_url')"
-                v-model="settings.connector.autoOpenURL"
+                v-model="userLocalSettings.connector.autoOpenURL"
               />
             </div>
           </div>
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index 39003365a..f281099ed 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useAccentColor } from '~/composables/useSettings'
+import { useAccentColor } from '~/composables/useUserPreferences'
 
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {
-  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const id = settings.accentColorId
+  const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  const id = preferences.accentColorId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
index cd7f7f41a..775c36c40 100644
--- a/app/components/Settings/BgThemePicker.vue
+++ b/app/components/Settings/BgThemePicker.vue
@@ -2,8 +2,8 @@
 const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
 
 onPrehydrate(el => {
-  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const id = settings.preferredBackgroundTheme
+  const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  const id = preferences.preferredBackgroundTheme
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {
diff --git a/app/composables/useConnector.ts b/app/composables/useConnector.ts
index d1ef4296e..3ec5ed16b 100644
--- a/app/composables/useConnector.ts
+++ b/app/composables/useConnector.ts
@@ -57,7 +57,7 @@ const STORAGE_KEY = 'npmx-connector'
 const DEFAULT_PORT = 31415
 
 export const useConnector = createSharedComposable(function useConnector() {
-  const { settings } = useSettings()
+  const { userLocalSettings } = useUserLocalSettings()
 
   // Persisted connection config
   const config = useState<{ token: string; port: number } | null>('connector-config', () => null)
@@ -308,7 +308,7 @@ export const useConnector = createSharedComposable(function useConnector() {
       body: {
         otp,
         interactive: !otp,
-        openUrls: settings.value.connector.autoOpenURL,
+        openUrls: userLocalSettings.value.connector.autoOpenURL,
       },
     })
     if (response?.success) {
diff --git a/app/composables/useInstallCommand.ts b/app/composables/useInstallCommand.ts
index 827ac89f4..45fbe882a 100644
--- a/app/composables/useInstallCommand.ts
+++ b/app/composables/useInstallCommand.ts
@@ -12,11 +12,11 @@ export function useInstallCommand(
   installVersionOverride?: MaybeRefOrGetter<string | null>,
 ) {
   const selectedPM = useSelectedPackageManager()
-  const { settings } = useSettings()
+  const { preferences } = useUserPreferences()
 
   // Check if we should show @types in install command
   const showTypesInInstall = computed(() => {
-    return settings.value.includeTypesInInstall && !!toValue(typesPackageName)
+    return preferences.value.includeTypesInInstall && !!toValue(typesPackageName)
   })
 
   const installCommandParts = computed(() => {
diff --git a/app/composables/useLocalStorageHashProvider.ts b/app/composables/useLocalStorageHashProvider.ts
new file mode 100644
index 000000000..57944bb97
--- /dev/null
+++ b/app/composables/useLocalStorageHashProvider.ts
@@ -0,0 +1,35 @@
+import defu from 'defu'
+import { createLocalStorageProvider } from '~/utils/storage'
+
+export function useLocalStorageHashProvider<T extends object>(key: string, defaultValue: T) {
+  const provider = createLocalStorageProvider<T>(key)
+  const data = ref<T>(defaultValue)
+
+  onMounted(() => {
+    const stored = provider.get()
+    if (stored) {
+      data.value = defu(stored, defaultValue)
+    }
+  })
+
+  function save() {
+    provider.set(data.value)
+  }
+
+  function reset() {
+    data.value = { ...defaultValue }
+    provider.remove()
+  }
+
+  function update<K extends keyof T>(key: K, value: T[K]) {
+    data.value[key] = value
+    save()
+  }
+
+  return {
+    data,
+    save,
+    reset,
+    update,
+  }
+}
diff --git a/app/composables/usePackageListPreferences.ts b/app/composables/usePackageListPreferences.ts
index 653f3c626..0eec9260e 100644
--- a/app/composables/usePackageListPreferences.ts
+++ b/app/composables/usePackageListPreferences.ts
@@ -11,18 +11,18 @@ import type {
 } from '#shared/types/preferences'
 import { DEFAULT_COLUMNS, DEFAULT_PREFERENCES } from '#shared/types/preferences'
 
+const STORAGE_KEY = 'npmx-list-prefs'
+
 /**
  * Composable for managing package list display preferences
  * Persists to localStorage and provides reactive state
- *
  */
 export function usePackageListPreferences() {
   const {
     data: preferences,
-    isHydrated,
     save,
     reset,
-  } = usePreferencesProvider<PackageListPreferences>(DEFAULT_PREFERENCES)
+  } = useLocalStorageHashProvider<PackageListPreferences>(STORAGE_KEY, DEFAULT_PREFERENCES)
 
   // Computed accessors for common properties
   const viewMode = computed({
@@ -90,7 +90,6 @@ export function usePackageListPreferences() {
   return {
     // Raw preferences
     preferences,
-    isHydrated,
 
     // Individual properties with setters
     viewMode,
diff --git a/app/composables/usePreferencesProvider.ts b/app/composables/usePreferencesProvider.ts
deleted file mode 100644
index 305545540..000000000
--- a/app/composables/usePreferencesProvider.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { defu } from 'defu'
-
-/**
- * Abstraction for preferences storage
- * Currently uses localStorage, designed for future user prefs API
- */
-
-const STORAGE_KEY = 'npmx-list-prefs'
-
-interface StorageProvider<T> {
-  get: () => T | null
-  set: (value: T) => void
-  remove: () => void
-}
-
-/**
- * Creates a localStorage-based storage provider
- */
-function createLocalStorageProvider<T>(key: string): StorageProvider<T> {
-  return {
-    get: () => {
-      if (import.meta.server) return null
-      try {
-        const stored = localStorage.getItem(key)
-        if (stored) {
-          return JSON.parse(stored) as T
-        }
-      } catch {
-        // Corrupted data, remove it
-        localStorage.removeItem(key)
-      }
-      return null
-    },
-    set: (value: T) => {
-      if (import.meta.server) return
-      try {
-        localStorage.setItem(key, JSON.stringify(value))
-      } catch {
-        // Storage full or other error, fail silently
-      }
-    },
-    remove: () => {
-      if (import.meta.server) return
-      localStorage.removeItem(key)
-    },
-  }
-}
-
-// Future: API-based provider would look like this:
-// function createApiStorageProvider<T>(endpoint: string): StorageProvider<T> {
-//   return {
-//     get: async () => { /* fetch from API */ },
-//     set: async (value) => { /* POST to API */ },
-//     remove: async () => { /* DELETE from API */ },
-//   }
-// }
-
-/**
- * Composable for managing preferences storage
- * Abstracts the storage mechanism to allow future migration to API-based storage
- *
- */
-export function usePreferencesProvider<T extends object>(defaultValue: T) {
-  const provider = createLocalStorageProvider<T>(STORAGE_KEY)
-  const data = ref<T>(defaultValue)
-  const isHydrated = shallowRef(false)
-
-  // Load from storage on client
-  onMounted(() => {
-    const stored = provider.get()
-    if (stored) {
-      // Merge stored values with defaults to handle schema evolution
-      data.value = defu(stored, defaultValue)
-    }
-    isHydrated.value = true
-  })
-
-  // Persist changes
-  function save() {
-    provider.set(data.value)
-  }
-
-  // Reset to defaults
-  function reset() {
-    data.value = { ...defaultValue }
-    provider.remove()
-  }
-
-  // Update specific keys
-  function update<K extends keyof T>(key: K, value: T[K]) {
-    data.value[key] = value
-    save()
-  }
-
-  return {
-    data,
-    isHydrated,
-    save,
-    reset,
-    update,
-  }
-}
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
deleted file mode 100644
index 8502bfda7..000000000
--- a/app/composables/useSettings.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import type { RemovableRef } from '@vueuse/core'
-import { useLocalStorage } from '@vueuse/core'
-import { ACCENT_COLORS } from '#shared/utils/constants'
-import type { LocaleObject } from '@nuxtjs/i18n'
-import { BACKGROUND_THEMES } from '#shared/utils/constants'
-
-type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
-
-type AccentColorId = keyof typeof ACCENT_COLORS.light
-
-/** Available search providers */
-export type SearchProvider = 'npm' | 'algolia'
-
-/**
- * Application settings stored in localStorage
- */
-export interface AppSettings {
-  /** Display dates as relative (e.g., "3 days ago") instead of absolute */
-  relativeDates: boolean
-  /** Include @types/* package in install command for packages without built-in types */
-  includeTypesInInstall: boolean
-  /** Accent color theme */
-  accentColorId: AccentColorId | null
-  /** Preferred background shade */
-  preferredBackgroundTheme: BackgroundThemeId | null
-  /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
-  hidePlatformPackages: boolean
-  /** User-selected locale */
-  selectedLocale: LocaleObject['code'] | null
-  /** Search provider for package search */
-  searchProvider: SearchProvider
-  /** Connector preferences */
-  connector: {
-    /** Automatically open the web auth page in the browser */
-    autoOpenURL: boolean
-  }
-  sidebar: {
-    collapsed: string[]
-  }
-}
-
-const DEFAULT_SETTINGS: AppSettings = {
-  relativeDates: false,
-  includeTypesInInstall: true,
-  accentColorId: null,
-  hidePlatformPackages: true,
-  selectedLocale: null,
-  preferredBackgroundTheme: null,
-  searchProvider: import.meta.test ? 'npm' : 'algolia',
-  connector: {
-    autoOpenURL: false,
-  },
-  sidebar: {
-    collapsed: [],
-  },
-}
-
-const STORAGE_KEY = 'npmx-settings'
-
-// Shared settings instance (singleton per app)
-let settingsRef: RemovableRef<AppSettings> | null = null
-
-/**
- * Composable for managing application settings with localStorage persistence.
- * Settings are shared across all components that use this composable.
- */
-export function useSettings() {
-  if (!settingsRef) {
-    settingsRef = useLocalStorage<AppSettings>(STORAGE_KEY, DEFAULT_SETTINGS, {
-      mergeDefaults: true,
-    })
-  }
-
-  return {
-    settings: settingsRef,
-  }
-}
-
-/**
- * Composable for accessing just the relative dates setting.
- * Useful for components that only need to read this specific setting.
- */
-export function useRelativeDates() {
-  const { settings } = useSettings()
-  return computed(() => settings.value.relativeDates)
-}
-
-/**
- * Composable for managing accent color.
- */
-export function useAccentColor() {
-  const { settings } = useSettings()
-  const colorMode = useColorMode()
-
-  const accentColors = computed(() => {
-    const isDark = colorMode.value === 'dark'
-    const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
-
-    return Object.entries(colors).map(([id, value]) => ({
-      id: id as AccentColorId,
-      name: id,
-      value,
-    }))
-  })
-
-  function setAccentColor(id: AccentColorId | null) {
-    if (id) {
-      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
-    } else {
-      document.documentElement.style.removeProperty('--accent-color')
-    }
-    settings.value.accentColorId = id
-  }
-
-  return {
-    accentColors,
-    selectedAccentColor: computed(() => settings.value.accentColorId),
-    setAccentColor,
-  }
-}
-
-/**
- * Composable for managing the search provider setting.
- */
-export function useSearchProvider() {
-  const { settings } = useSettings()
-
-  const searchProvider = computed({
-    get: () => settings.value.searchProvider,
-    set: (value: SearchProvider) => {
-      settings.value.searchProvider = value
-    },
-  })
-
-  const isAlgolia = computed(() => searchProvider.value === 'algolia')
-
-  function toggle() {
-    searchProvider.value = searchProvider.value === 'npm' ? 'algolia' : 'npm'
-  }
-
-  return {
-    searchProvider,
-    isAlgolia,
-    toggle,
-  }
-}
-
-export function useBackgroundTheme() {
-  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
-    id: id as BackgroundThemeId,
-    name: id,
-    value,
-  }))
-
-  const { settings } = useSettings()
-
-  function setBackgroundTheme(id: BackgroundThemeId | null) {
-    if (id) {
-      document.documentElement.dataset.bgTheme = id
-    } else {
-      document.documentElement.removeAttribute('data-bg-theme')
-    }
-    settings.value.preferredBackgroundTheme = id
-  }
-
-  return {
-    backgroundThemes,
-    selectedBackgroundTheme: computed(() => settings.value.preferredBackgroundTheme),
-    setBackgroundTheme,
-  }
-}
diff --git a/app/composables/useUserLocalSettings.ts b/app/composables/useUserLocalSettings.ts
new file mode 100644
index 000000000..3ef9cd55b
--- /dev/null
+++ b/app/composables/useUserLocalSettings.ts
@@ -0,0 +1,42 @@
+interface UserLocalSettings {
+  sidebar: {
+    collapsed: string[]
+  }
+  connector: {
+    autoOpenURL: boolean
+  }
+}
+
+const STORAGE_KEY = 'npmx-settings'
+const DEFAULT_USER_LOCAL_SETTINGS: UserLocalSettings = {
+  sidebar: {
+    collapsed: [],
+  },
+  connector: {
+    autoOpenURL: false,
+  },
+}
+
+let userLocalSettingsRef: Ref<UserLocalSettings> | null = null
+
+/**
+ * Composable for managing local user settings.
+ * Uses its own LS key.
+ *
+ * This is for settings that are purely local and don't need to be synced
+ */
+export function useUserLocalSettings() {
+  if (!userLocalSettingsRef) {
+    userLocalSettingsRef = useLocalStorage<UserLocalSettings>(
+      STORAGE_KEY,
+      DEFAULT_USER_LOCAL_SETTINGS,
+      {
+        mergeDefaults: true,
+      },
+    )
+  }
+
+  return {
+    userLocalSettings: userLocalSettingsRef,
+  }
+}
diff --git a/app/composables/useUserPreferences.ts b/app/composables/useUserPreferences.ts
new file mode 100644
index 000000000..b8a44275f
--- /dev/null
+++ b/app/composables/useUserPreferences.ts
@@ -0,0 +1,159 @@
+import { ACCENT_COLORS, BACKGROUND_THEMES } from '#shared/utils/constants'
+import {
+  DEFAULT_USER_PREFERENCES,
+  type AccentColorId,
+  type BackgroundThemeId,
+  type ColorModePreference,
+  type SearchProvider,
+} from '#shared/schemas/userPreferences'
+
+/**
+ * Main composable for user preferences.
+ * Uses `npmx-user-preferences` localStorage key and syncs to the server
+ * for authenticated users via `useUserPreferencesProvider`.
+ */
+export function useUserPreferences() {
+  const provider = useUserPreferencesProvider(DEFAULT_USER_PREFERENCES)
+
+  return {
+    preferences: provider.data,
+    isAuthenticated: provider.isAuthenticated,
+    isSyncing: provider.isSyncing,
+    isSynced: provider.isSynced,
+    hasError: provider.hasError,
+    syncError: provider.syncError,
+    lastSyncedAt: provider.lastSyncedAt,
+    initSync: provider.initSync,
+  }
+}
+
+export function useRelativeDates() {
+  const { preferences } = useUserPreferences()
+  return computed(() => preferences.value.relativeDates)
+}
+
+export function useAccentColor() {
+  const { preferences } = useUserPreferences()
+  const colorMode = useColorMode()
+
+  const accentColors = computed(() => {
+    const isDark = colorMode.value === 'dark'
+    const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
+
+    return Object.entries(colors).map(([id, value]) => ({
+      id: id as AccentColorId,
+      name: id,
+      value,
+    }))
+  })
+
+  function setAccentColor(id: AccentColorId | null) {
+    if (id) {
+      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
+    } else {
+      document.documentElement.style.removeProperty('--accent-color')
+    }
+    preferences.value.accentColorId = id
+  }
+
+  return {
+    accentColors,
+    selectedAccentColor: computed(() => preferences.value.accentColorId),
+    setAccentColor,
+  }
+}
+
+export function useBackgroundTheme() {
+  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
+    id: id as BackgroundThemeId,
+    name: id,
+    value,
+  }))
+
+  const { preferences } = useUserPreferences()
+
+  function setBackgroundTheme(id: BackgroundThemeId | null) {
+    if (id) {
+      document.documentElement.dataset.bgTheme = id
+    } else {
+      document.documentElement.removeAttribute('data-bg-theme')
+    }
+    preferences.value.preferredBackgroundTheme = id
+  }
+
+  return {
+    backgroundThemes,
+    selectedBackgroundTheme: computed(() => preferences.value.preferredBackgroundTheme),
+    setBackgroundTheme,
+  }
+}
+
+/**
+ * Composable for managing the search provider preference.
+ */
+export function useSearchProvider() {
+  const { preferences } = useUserPreferences()
+
+  const searchProvider = computed({
+    get: () => preferences.value.searchProvider ?? 'algolia',
+    set: (value: SearchProvider) => {
+      preferences.value.searchProvider = value
+    },
+  })
+
+  const isAlgolia = computed(() => searchProvider.value === 'algolia')
+
+  function toggle() {
+    searchProvider.value = searchProvider.value === 'npm' ? 'algolia' : 'npm'
+  }
+
+  return {
+    searchProvider,
+    isAlgolia,
+    toggle,
+  }
+}
+
+/**
+ * Composable for syncing color mode preference.
+ * Keeps the user preference in sync with @nuxtjs/color-mode's own LS key (`npmx-color-mode`)
+ * so that the color-mode module picks up the correct value on page load.
+ */
+export function useColorModePreference() {
+  const { preferences } = useUserPreferences()
+  const colorMode = useColorMode()
+
+  /**
+   * Set color mode preference and sync to both user preferences and the
+   * `npmx-color-mode` LS key used by @nuxtjs/color-mode.
+   */
+  function setColorMode(mode: ColorModePreference) {
+    preferences.value.colorModePreference = mode
+    colorMode.preference = mode
+  }
+
+  /**
+   * On init, if the user has a stored preference, apply it to @nuxtjs/color-mode.
+   * This handles the case where preferences were synced from the server.
+   */
+  function applyStoredColorMode() {
+    const stored = preferences.value.colorModePreference
+    if (stored) {
+      colorMode.preference = stored
+    } else {
+      // No user preference stored yet — seed it from the current color-mode LS value
+      const currentPreference = colorMode.preference as ColorModePreference
+      if (currentPreference && currentPreference !== 'system') {
+        preferences.value.colorModePreference = currentPreference
+      }
+    }
+  }
+
+  return {
+    colorModePreference: computed(
+      () => preferences.value.colorModePreference ?? colorMode.preference,
+    ),
+    setColorMode,
+    applyStoredColorMode,
+  }
+}
diff --git a/app/composables/useUserPreferencesProvider.ts b/app/composables/useUserPreferencesProvider.ts
new file mode 100644
index 000000000..0daca9b07
--- /dev/null
+++ b/app/composables/useUserPreferencesProvider.ts
@@ -0,0 +1,100 @@
+/**
+ * Abstraction for user preferences storage
+ * Supports both localStorage (for anonymous users) and API-based storage (for authenticated users)
+ *
+ * Design:
+ * - Anonymous users: localStorage only
+ * - Authenticated users: localStorage as cache, API as source of truth
+ * - Changes sync to server with debounce (2s) and on route change/page unload
+ *
+ * Module-level singletons are safe here: on the server, useLocalStorage returns
+ * a ref with defaults (no real localStorage); on the client, there's only one app instance.
+ */
+
+import type { RemovableRef } from '@vueuse/core'
+import { useLocalStorage } from '@vueuse/core'
+import type { UserPreferences } from '#shared/schemas/userPreferences'
+
+const STORAGE_KEY = 'npmx-user-preferences'
+
+export type HydratedUserPreferences = Required<Omit<UserPreferences, 'updatedAt'>> &
+  Pick<UserPreferences, 'updatedAt'>
+
+let dataRef: RemovableRef<HydratedUserPreferences> | null = null
+let syncInitialized = false
+
+/**
+ * User preferences provider with server sync support.
+ */
+export function useUserPreferencesProvider(defaultValue: HydratedUserPreferences) {
+  if (!dataRef) {
+    dataRef = useLocalStorage<HydratedUserPreferences>(STORAGE_KEY, defaultValue, {
+      mergeDefaults: true,
+    })
+  }
+
+  // After the guard above, dataRef is guaranteed to be initialized.
+  const preferences: RemovableRef<HydratedUserPreferences> = dataRef
+
+  const { user } = useAtproto()
+
+  const isAuthenticated = computed(() => !!user.value?.did)
+  const {
+    status,
+    lastSyncedAt,
+    error,
+    loadFromServer,
+    scheduleSync,
+    setupRouteGuard,
+    setupBeforeUnload,
+  } = useUserPreferencesSync()
+
+  const isSyncing = computed(() => status.value === 'syncing')
+  const isSynced = computed(() => status.value === 'synced')
+  const hasError = computed(() => status.value === 'error')
+
+  async function initSync(): Promise<void> {
+    if (syncInitialized || import.meta.server) return
+    syncInitialized = true
+
+    setupRouteGuard(() => preferences.value)
+    setupBeforeUnload(() => preferences.value)
+
+    if (isAuthenticated.value) {
+      const serverPrefs = await loadFromServer()
+      if (serverPrefs) {
+        preferences.value = { ...preferences.value, ...serverPrefs }
+      }
+    }
+
+    watch(
+      preferences,
+      newPrefs => {
+        if (isAuthenticated.value) {
+          scheduleSync(newPrefs)
+        }
+      },
+      { deep: true },
+    )
+
+    watch(isAuthenticated, async newIsAuth => {
+      if (newIsAuth) {
+        const serverPrefs = await loadFromServer()
+        if (serverPrefs) {
+          preferences.value = { ...defaultValue, ...preferences.value, ...serverPrefs }
+        }
+      }
+    })
+  }
+
+  return {
+    data: preferences,
+    isAuthenticated,
+    isSyncing,
+    isSynced,
+    hasError,
+    syncError: error,
+    lastSyncedAt,
+    initSync,
+  }
+}
diff --git a/app/composables/useUserPreferencesSync.client.ts b/app/composables/useUserPreferencesSync.client.ts
new file mode 100644
index 000000000..9b6771153
--- /dev/null
+++ b/app/composables/useUserPreferencesSync.client.ts
@@ -0,0 +1,154 @@
+import type { UserPreferences } from '#shared/schemas/userPreferences'
+import { DEFAULT_USER_PREFERENCES } from '#shared/schemas/userPreferences'
+
+const SYNC_DEBOUNCE_MS = 2000
+
+type SyncStatus = 'idle' | 'syncing' | 'synced' | 'error'
+
+interface PreferencesSyncState {
+  status: Ref<SyncStatus>
+  lastSyncedAt: Ref<Date | null>
+  error: Ref<string | null>
+}
+
+let syncStateInstance: PreferencesSyncState | null = null
+let pendingSavePromise: Promise<boolean> | null = null
+let hasPendingChanges = false
+let debounceTimeoutId: ReturnType<typeof setTimeout> | null = null
+
+function getSyncState(): PreferencesSyncState {
+  if (!syncStateInstance) {
+    syncStateInstance = {
+      status: ref<SyncStatus>('idle'),
+      lastSyncedAt: ref<Date | null>(null),
+      error: ref<string | null>(null),
+    }
+  }
+  return syncStateInstance
+}
+
+async function fetchServerPreferences(): Promise<UserPreferences | null> {
+  try {
+    const response = await $fetch<UserPreferences>('/api/user/preferences', {
+      method: 'GET',
+    })
+    return response
+  } catch {
+    return null
+  }
+}
+
+async function saveToServer(preferences: UserPreferences): Promise<boolean> {
+  const state = getSyncState()
+  state.status.value = 'syncing'
+  state.error.value = null
+
+  try {
+    await $fetch('/api/user/preferences', {
+      method: 'PUT',
+      body: preferences,
+    })
+    state.status.value = 'synced'
+    state.lastSyncedAt.value = new Date()
+    hasPendingChanges = false
+    return true
+  } catch (err) {
+    state.status.value = 'error'
+    state.error.value = err instanceof Error ? err.message : 'Failed to save preferences'
+    return false
+  }
+}
+
+function cancelPendingDebounce(): void {
+  if (debounceTimeoutId) {
+    clearTimeout(debounceTimeoutId)
+    debounceTimeoutId = null
+  }
+}
+
+export function useUserPreferencesSync() {
+  const { user } = useAtproto()
+  const state = getSyncState()
+  const router = useRouter()
+
+  const isAuthenticated = computed(() => !!user.value?.did)
+
+  function scheduleSync(preferences: UserPreferences): void {
+    if (!isAuthenticated.value) return
+
+    hasPendingChanges = true
+    cancelPendingDebounce()
+
+    debounceTimeoutId = setTimeout(async () => {
+      debounceTimeoutId = null
+      pendingSavePromise = saveToServer(preferences)
+      await pendingSavePromise
+      pendingSavePromise = null
+    }, SYNC_DEBOUNCE_MS)
+  }
+
+  async function loadFromServer(): Promise<UserPreferences> {
+    if (!isAuthenticated.value) {
+      return { ...DEFAULT_USER_PREFERENCES }
+    }
+
+    state.status.value = 'syncing'
+    const serverPreferences = await fetchServerPreferences()
+
+    if (serverPreferences) {
+      state.status.value = 'synced'
+      state.lastSyncedAt.value = new Date()
+      return serverPreferences
+    }
+
+    state.status.value = 'idle'
+    return { ...DEFAULT_USER_PREFERENCES }
+  }
+
+  async function flushPendingSync(preferences: UserPreferences): Promise<void> {
+    if (!isAuthenticated.value || !hasPendingChanges) return
+
+    cancelPendingDebounce()
+
+    if (pendingSavePromise) {
+      await pendingSavePromise
+    } else {
+      await saveToServer(preferences)
+    }
+  }
+
+  function setupRouteGuard(getPreferences: () => UserPreferences): void {
+    router.beforeEach(async (_to, _from, next) => {
+      if (hasPendingChanges && isAuthenticated.value) {
+        await flushPendingSync(getPreferences())
+      }
+      next()
+    })
+  }
+
+  function setupBeforeUnload(getPreferences: () => UserPreferences): void {
+    if (import.meta.server) return
+
+    window.addEventListener('beforeunload', () => {
+      if (hasPendingChanges && isAuthenticated.value) {
+        const preferences = getPreferences()
+        navigator.sendBeacon(
+          '/api/user/preferences',
+          new Blob([JSON.stringify(preferences)], { type: 'application/json' }),
+        )
+      }
+    })
+  }
+
+  return {
+    isAuthenticated,
+    status: state.status,
+    lastSyncedAt: state.lastSyncedAt,
+    error: state.error,
+    loadFromServer,
+    scheduleSync,
+    flushPendingSync,
+    setupRouteGuard,
+    setupBeforeUnload,
+  }
+}
diff --git a/app/pages/search.vue b/app/pages/search.vue
index e0cf0c9ed..d4649e7a8 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -63,7 +63,7 @@ onMounted(() => {
 const rawVisibleResults = computed(() => results.value)
 
 // Settings for platform package filtering
-const { settings } = useSettings()
+const { preferences } = useUserPreferences()
 
 /**
  * Reorder results to put exact package name match at the top,
@@ -76,7 +76,7 @@ const visibleResults = computed(() => {
   let objects = raw.objects
 
   // Filter out platform-specific packages if setting is enabled
-  if (settings.value.hidePlatformPackages) {
+  if (preferences.value.hidePlatformPackages) {
     objects = objects.filter(r => !isPlatformSpecificPackage(r.package.name))
   }
 
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 0b44449fd..62e51767e 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 const router = useRouter()
 const canGoBack = useCanGoBack()
-const { settings } = useSettings()
+const { preferences, isAuthenticated, isSyncing, isSynced, hasError } = useUserPreferences()
+const { colorModePreference, setColorMode } = useColorModePreference()
 const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
-const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 
 // Escape to go back (but not when focused on form elements or modal is open)
@@ -35,7 +35,7 @@ defineOgImageComponent('Default', {
 })
 
 const setLocale: typeof setNuxti18nLocale = locale => {
-  settings.value.selectedLocale = locale
+  preferences.value.selectedLocale = locale
   return setNuxti18nLocale(locale)
 }
 </script>
@@ -62,6 +62,30 @@ const setLocale: typeof setNuxti18nLocale = locale => {
         <p class="text-fg-muted text-lg">
           {{ $t('settings.tagline') }}
         </p>
+        <!-- Sync status indicator for authenticated users -->
+        <ClientOnly>
+          <div v-if="isAuthenticated" class="mt-4 flex items-center gap-2 text-sm">
+            <template v-if="isSyncing">
+              <span
+                class="i-carbon:cloud-upload w-4 h-4 text-fg-muted animate-pulse"
+                aria-hidden="true"
+              />
+              <span class="text-fg-muted">{{ $t('settings.syncing') }}</span>
+            </template>
+            <template v-else-if="isSynced">
+              <span class="i-carbon:checkmark-filled w-4 h-4 text-green-500" aria-hidden="true" />
+              <span class="text-fg-muted">{{ $t('settings.synced') }}</span>
+            </template>
+            <template v-else-if="hasError">
+              <span class="i-carbon:warning-filled w-4 h-4 text-amber-500" aria-hidden="true" />
+              <span class="text-fg-muted">{{ $t('settings.sync_error') }}</span>
+            </template>
+            <template v-else>
+              <span class="i-carbon:cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
+              <span class="text-fg-muted">{{ $t('settings.sync_enabled') }}</span>
+            </template>
+          </div>
+        </ClientOnly>
       </header>
 
       <!-- Settings sections -->
@@ -77,18 +101,33 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <label for="theme-select" class="block text-sm text-fg font-medium">
                 {{ $t('settings.theme') }}
               </label>
-              <SelectField
-                id="theme-select"
-                v-model="colorMode.preference"
-                block
-                size="sm"
-                class="max-w-48"
-                :items="[
-                  { label: $t('settings.theme_system'), value: 'system' },
-                  { label: $t('settings.theme_light'), value: 'light' },
-                  { label: $t('settings.theme_dark'), value: 'dark' },
-                ]"
-              />
+              <ClientOnly>
+                <select
+                  id="theme-select"
+                  :value="colorModePreference"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                  @change="
+                    setColorMode(
+                      ($event.target as HTMLSelectElement).value as 'light' | 'dark' | 'system',
+                    )
+                  "
+                >
+                  <option value="system">
+                    {{ $t('settings.theme_system') }}
+                  </option>
+                  <option value="light">{{ $t('settings.theme_light') }}</option>
+                  <option value="dark">{{ $t('settings.theme_dark') }}</option>
+                </select>
+                <template #fallback>
+                  <select
+                    id="theme-select"
+                    disabled
+                    class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait duration-200 transition-colors hover:border-fg-subtle"
+                  >
+                    <option>{{ $t('settings.theme_system') }}</option>
+                  </select>
+                </template>
+              </ClientOnly>
             </div>
 
             <!-- Accent colors -->
@@ -118,7 +157,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             <!-- Relative dates toggle -->
             <SettingsToggle
               :label="$t('settings.relative_dates')"
-              v-model="settings.relativeDates"
+              v-model="preferences.relativeDates"
             />
 
             <!-- Divider -->
@@ -128,7 +167,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             <SettingsToggle
               :label="$t('settings.include_types')"
               :description="$t('settings.include_types_description')"
-              v-model="settings.includeTypesInInstall"
+              v-model="preferences.includeTypesInInstall"
             />
 
             <!-- Divider -->
@@ -138,7 +177,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             <SettingsToggle
               :label="$t('settings.hide_platform_packages')"
               :description="$t('settings.hide_platform_packages_description')"
-              v-model="settings.hidePlatformPackages"
+              v-model="preferences.hidePlatformPackages"
             />
           </div>
         </section>
@@ -164,7 +203,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                     { label: $t('settings.data_source.npm'), value: 'npm' },
                     { label: $t('settings.data_source.algolia'), value: 'algolia' },
                   ]"
-                  v-model="settings.searchProvider"
+                  v-model="preferences.searchProvider"
                   block
                   size="sm"
                   class="max-w-48"
@@ -184,7 +223,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <!-- Provider description -->
               <p class="text-xs text-fg-subtle mt-2">
                 {{
-                  settings.searchProvider === 'algolia'
+                  preferences.searchProvider === 'algolia'
                     ? $t('settings.data_source.algolia_description')
                     : $t('settings.data_source.npm_description')
                 }}
@@ -192,7 +231,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
 
               <!-- Algolia attribution -->
               <a
-                v-if="settings.searchProvider === 'algolia'"
+                v-if="preferences.searchProvider === 'algolia'"
                 href="https://www.algolia.com/developers"
                 target="_blank"
                 rel="noopener noreferrer"
diff --git a/app/plugins/i18n-loader.client.ts b/app/plugins/i18n-loader.client.ts
index b34894396..81f88ce72 100644
--- a/app/plugins/i18n-loader.client.ts
+++ b/app/plugins/i18n-loader.client.ts
@@ -1,20 +1,18 @@
 export default defineNuxtPlugin({
+  name: 'i18n-loader',
+  dependsOn: ['preferences-sync'],
   enforce: 'post',
   env: { islands: false },
   setup() {
     const { $i18n } = useNuxtApp()
     const { locale, locales, setLocale } = $i18n
-    const { settings } = useSettings()
-    const settingsLocale = settings.value.selectedLocale
+    const { preferences } = useUserPreferences()
+    const settingsLocale = preferences.value.selectedLocale
 
-    if (
-      settingsLocale &&
-      //   Check if the value is a supported locale
-      locales.value.map(l => l.code).includes(settingsLocale) &&
-      //   Check if the value is not a current locale
-      settingsLocale !== locale.value
-    ) {
-      setLocale(settingsLocale)
+    const matchedLocale = locales.value.map(l => l.code).find(code => code === settingsLocale)
+
+    if (matchedLocale && matchedLocale !== locale.value) {
+      setLocale(matchedLocale)
     }
   },
 })
diff --git a/app/plugins/preferences-sync.client.ts b/app/plugins/preferences-sync.client.ts
new file mode 100644
index 000000000..9c71b7c25
--- /dev/null
+++ b/app/plugins/preferences-sync.client.ts
@@ -0,0 +1,13 @@
+export default defineNuxtPlugin({
+  name: 'preferences-sync',
+  setup() {
+    const { initSync } = useUserPreferences()
+    const { applyStoredColorMode } = useColorModePreference()
+
+    // Apply stored color mode preference early (before components mount)
+    applyStoredColorMode()
+
+    // Initialize server sync for authenticated users
+    initSync()
+  },
+})
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
index cc6f88e1d..b2f664331 100644
--- a/app/utils/prehydrate.ts
+++ b/app/utils/prehydrate.ts
@@ -15,18 +15,16 @@ export function initPreferencesOnPrehydrate() {
     // Valid package manager IDs
     const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])
 
-    // Read settings from localStorage
-    const settings = JSON.parse(
-      localStorage.getItem('npmx-settings') || '{}',
-    ) as Partial<AppSettings>
+    // Read user preferences from localStorage
+    const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
 
-    const accentColorId = settings.accentColorId
+    const accentColorId = preferences.accentColorId
     if (accentColorId && accentColorIds.has(accentColorId)) {
       document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColorId})`)
     }
 
     // Apply background accent
-    const preferredBackgroundTheme = settings.preferredBackgroundTheme
+    const preferredBackgroundTheme = preferences.preferredBackgroundTheme
     if (preferredBackgroundTheme) {
       document.documentElement.dataset.bgTheme = preferredBackgroundTheme
     }
@@ -52,6 +50,8 @@ export function initPreferencesOnPrehydrate() {
     // Set data attribute for CSS-based visibility
     document.documentElement.dataset.pm = pm
 
-    document.documentElement.dataset.collapsed = settings.sidebar?.collapsed?.join(' ') ?? ''
+    // Read sidebar preferences from separate localStorage key
+    const sidebar = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+    document.documentElement.dataset.collapsed = sidebar.sidebar?.collapsed?.join(' ') ?? ''
   })
 }
diff --git a/app/utils/storage.ts b/app/utils/storage.ts
new file mode 100644
index 000000000..9706226a3
--- /dev/null
+++ b/app/utils/storage.ts
@@ -0,0 +1,34 @@
+export interface StorageProvider<T> {
+  get: () => T | null
+  set: (value: T) => void
+  remove: () => void
+}
+
+export function createLocalStorageProvider<T>(key: string): StorageProvider<T> {
+  return {
+    get: () => {
+      if (import.meta.server) return null
+      try {
+        const stored = localStorage.getItem(key)
+        if (stored) {
+          return JSON.parse(stored) as T
+        }
+      } catch {
+        localStorage.removeItem(key)
+      }
+      return null
+    },
+    set: (value: T) => {
+      if (import.meta.server) return
+      try {
+        localStorage.setItem(key, JSON.stringify(value))
+      } catch {
+        // Storage full or other error, fail silently
+      }
+    },
+    remove: () => {
+      if (import.meta.server) return
+      localStorage.removeItem(key)
+    },
+  }
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 17c8c6fee..7a033a36a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -108,7 +108,11 @@
     "accent_colors": "Accent colors",
     "clear_accent": "Clear accent color",
     "translation_progress": "Translation progress",
-    "background_themes": "Background shade"
+    "background_themes": "Background shade",
+    "syncing": "Syncing...",
+    "synced": "Settings synced",
+    "sync_error": "Sync failed",
+    "sync_enabled": "Cloud sync enabled"
   },
   "i18n": {
     "missing_keys": "{count} missing translation | {count} missing translations",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 2f49f7237..eca678b14 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -107,7 +107,11 @@
     "accent_colors": "Accent colors",
     "clear_accent": "Clear accent colour",
     "translation_progress": "Translation progress",
-    "background_themes": "Background shade"
+    "background_themes": "Background shade",
+    "syncing": "Syncing...",
+    "synced": "Settings synced",
+    "sync_error": "Sync failed",
+    "sync_enabled": "Cloud sync enabled"
   },
   "i18n": {
     "missing_keys": "{count} missing translation | {count} missing translations",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 0ae54989a..348eea344 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -107,7 +107,11 @@
     "accent_colors": "Accent colors",
     "clear_accent": "Clear accent color",
     "translation_progress": "Translation progress",
-    "background_themes": "Background shade"
+    "background_themes": "Background shade",
+    "syncing": "Syncing...",
+    "synced": "Settings synced",
+    "sync_error": "Sync failed",
+    "sync_enabled": "Cloud sync enabled"
   },
   "i18n": {
     "missing_keys": "{count} missing translation | {count} missing translations",
diff --git a/modules/cache.ts b/modules/cache.ts
index a2e7c3a41..bb7332a41 100644
--- a/modules/cache.ts
+++ b/modules/cache.ts
@@ -42,6 +42,9 @@ export default defineNuxtModule({
       const env = process.env.VERCEL_ENV
       nitroConfig.storage.atproto =
         env === 'production' ? upstash : { driver: 'vercel-runtime-cache' }
+
+      nitroConfig.storage['user-preferences'] =
+        env === 'production' ? upstash : { driver: 'vercel-runtime-cache' }
     })
   },
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e64c2a9ad..fa25c7f0a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -125,6 +125,7 @@ export default defineNuxtConfig({
     // never cache
     '/api/auth/**': { isr: false, cache: false },
     '/api/social/**': { isr: false, cache: false },
+    '/api/user/**': { isr: false, cache: false },
     '/api/opensearch/suggestions': {
       isr: {
         expiration: 60 * 60 * 24 /* one day */,
@@ -210,6 +211,10 @@ export default defineNuxtConfig({
         driver: 'fsLite',
         base: './.cache/atproto',
       },
+      'user-preferences': {
+        driver: 'fsLite',
+        base: './.cache/user-preferences',
+      },
     },
     typescript: {
       tsConfig: {
diff --git a/server/api/user/preferences.get.ts b/server/api/user/preferences.get.ts
new file mode 100644
index 000000000..3f660ff57
--- /dev/null
+++ b/server/api/user/preferences.get.ts
@@ -0,0 +1,15 @@
+import { safeParse } from 'valibot'
+import { PublicUserSessionSchema } from '#shared/schemas/publicUserSession'
+import { DEFAULT_USER_PREFERENCES } from '#shared/schemas/userPreferences'
+import { useUserPreferencesStore } from '#server/utils/preferences/user-preferences-store'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession, serverSession) => {
+  const session = safeParse(PublicUserSessionSchema, serverSession.data.public)
+  if (!session.success) {
+    throw createError({ statusCode: 401, message: 'Unauthorized' })
+  }
+
+  const preferences = await useUserPreferencesStore().get(session.output.did)
+
+  return preferences ?? { ...DEFAULT_USER_PREFERENCES, updatedAt: new Date().toISOString() }
+})
diff --git a/server/api/user/preferences.put.ts b/server/api/user/preferences.put.ts
new file mode 100644
index 000000000..9ab6e8558
--- /dev/null
+++ b/server/api/user/preferences.put.ts
@@ -0,0 +1,20 @@
+import { safeParse } from 'valibot'
+import { PublicUserSessionSchema } from '#shared/schemas/publicUserSession'
+import { UserPreferencesSchema } from '#shared/schemas/userPreferences'
+import { useUserPreferencesStore } from '#server/utils/preferences/user-preferences-store'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession, serverSession) => {
+  const session = safeParse(PublicUserSessionSchema, serverSession.data.public)
+  if (!session.success) {
+    throw createError({ statusCode: 401, message: 'Unauthorized' })
+  }
+
+  const settings = safeParse(UserPreferencesSchema, await readBody(event))
+  if (!settings.success) {
+    throw createError({ statusCode: 400, message: 'Invalid settings format' })
+  }
+
+  await useUserPreferencesStore().set(session.output.did, settings.output)
+
+  return { success: true }
+})
diff --git a/server/utils/preferences/user-preferences-store.ts b/server/utils/preferences/user-preferences-store.ts
new file mode 100644
index 000000000..5fed6ff38
--- /dev/null
+++ b/server/utils/preferences/user-preferences-store.ts
@@ -0,0 +1,49 @@
+import type { UserPreferences } from '#shared/schemas/userPreferences'
+import {
+  USER_PREFERENCES_STORAGE_BASE,
+  DEFAULT_USER_PREFERENCES,
+} from '#shared/schemas/userPreferences'
+
+export class UserPreferencesStore {
+  private readonly storage = useStorage<UserPreferences>(USER_PREFERENCES_STORAGE_BASE)
+
+  async get(did: string): Promise<UserPreferences | null> {
+    const result = await this.storage.getItem(did)
+    return result ?? null
+  }
+
+  async set(did: string, preferences: UserPreferences): Promise<void> {
+    const withTimestamp: UserPreferences = {
+      ...preferences,
+      updatedAt: new Date().toISOString(),
+    }
+    await this.storage.setItem(did, withTimestamp)
+  }
+
+  async merge(did: string, partial: Partial<UserPreferences>): Promise<UserPreferences> {
+    const existing = await this.get(did)
+    const base = existing ?? { ...DEFAULT_USER_PREFERENCES }
+
+    const merged: UserPreferences = {
+      ...base,
+      ...partial,
+      updatedAt: new Date().toISOString(),
+    }
+
+    await this.set(did, merged)
+    return merged
+  }
+
+  async delete(did: string): Promise<void> {
+    await this.storage.removeItem(did)
+  }
+}
+
+let storeInstance: UserPreferencesStore | null = null
+
+export function useUserPreferencesStore(): UserPreferencesStore {
+  if (!storeInstance) {
+    storeInstance = new UserPreferencesStore()
+  }
+  return storeInstance
+}
diff --git a/shared/schemas/userPreferences.ts b/shared/schemas/userPreferences.ts
new file mode 100644
index 000000000..cfbd520d9
--- /dev/null
+++ b/shared/schemas/userPreferences.ts
@@ -0,0 +1,55 @@
+import { object, string, boolean, nullable, optional, picklist, type InferOutput } from 'valibot'
+import { ACCENT_COLORS, BACKGROUND_THEMES } from '#shared/utils/constants'
+
+const AccentColorIdSchema = picklist(Object.keys(ACCENT_COLORS.light) as [string, ...string[]])
+
+const BackgroundThemeIdSchema = picklist(Object.keys(BACKGROUND_THEMES) as [string, ...string[]])
+
+const ColorModePreferenceSchema = picklist(['light', 'dark', 'system'])
+
+const SearchProviderSchema = picklist(['npm', 'algolia'])
+
+export const UserPreferencesSchema = object({
+  /** Display dates as relative (e.g., "3 days ago") instead of absolute */
+  relativeDates: optional(boolean()),
+  /** Include @types/* package in install command for packages without built-in types */
+  includeTypesInInstall: optional(boolean()),
+  /** Accent color theme ID (e.g., "rose", "amber", "emerald") */
+  accentColorId: optional(nullable(AccentColorIdSchema)),
+  /** Preferred background shade */
+  preferredBackgroundTheme: optional(nullable(BackgroundThemeIdSchema)),
+  /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
+  hidePlatformPackages: optional(boolean()),
+  /** User-selected locale code (e.g., "en", "de", "ja") */
+  selectedLocale: optional(nullable(string())),
+  /** Color mode preference: 'light', 'dark', or 'system' */
+  colorModePreference: optional(nullable(ColorModePreferenceSchema)),
+  /** Search provider for package search: 'npm' or 'algolia' */
+  searchProvider: optional(SearchProviderSchema),
+  /** Timestamp of last update (ISO 8601) - managed by server */
+  updatedAt: optional(string()),
+})
+
+export type UserPreferences = InferOutput<typeof UserPreferencesSchema>
+
+export type AccentColorId = keyof typeof ACCENT_COLORS.light
+export type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
+export type ColorModePreference = 'light' | 'dark' | 'system'
+export type SearchProvider = 'npm' | 'algolia'
+
+/**
+ * Default user preferences.
+ * Used when creating new user preferences or merging with partial updates.
+ */
+export const DEFAULT_USER_PREFERENCES: Required<Omit<UserPreferences, 'updatedAt'>> = {
+  relativeDates: false,
+  includeTypesInInstall: true,
+  accentColorId: null,
+  preferredBackgroundTheme: null,
+  hidePlatformPackages: true,
+  selectedLocale: null,
+  colorModePreference: null,
+  searchProvider: 'algolia',
+}
+
+export const USER_PREFERENCES_STORAGE_BASE = 'npmx-kv-user-preferences'
diff --git a/test/nuxt/components/DateTime.spec.ts b/test/nuxt/components/DateTime.spec.ts
index 1ae7c1644..c643c2cec 100644
--- a/test/nuxt/components/DateTime.spec.ts
+++ b/test/nuxt/components/DateTime.spec.ts
@@ -4,10 +4,10 @@ import DateTime from '~/components/DateTime.vue'
 
 // Mock the useRelativeDates composable
 const mockRelativeDates = shallowRef(false)
-vi.mock('~/composables/useSettings', () => ({
+vi.mock('~/composables/useUserPreferences', () => ({
   useRelativeDates: () => mockRelativeDates,
-  useSettings: () => ({
-    settings: ref({ relativeDates: mockRelativeDates.value }),
+  useUserPreferences: () => ({
+    preferences: ref({ relativeDates: mockRelativeDates.value }),
   }),
   useAccentColor: () => ({}),
 }))
diff --git a/test/nuxt/components/HeaderConnectorModal.spec.ts b/test/nuxt/components/HeaderConnectorModal.spec.ts
index bf1450998..a00378815 100644
--- a/test/nuxt/components/HeaderConnectorModal.spec.ts
+++ b/test/nuxt/components/HeaderConnectorModal.spec.ts
@@ -101,7 +101,7 @@ function resetMockState() {
     error: null,
     lastExecutionTime: null,
   }
-  mockSettings.value.connector = {
+  mockUserLocalSettings.value.connector = {
     autoOpenURL: false,
   }
 }
@@ -112,28 +112,21 @@ function simulateConnect() {
   mockState.value.avatar = 'https://example.com/avatar.png'
 }
 
-const mockSettings = ref({
-  relativeDates: false,
-  includeTypesInInstall: true,
-  accentColorId: null,
-  hidePlatformPackages: true,
-  selectedLocale: null,
-  preferredBackgroundTheme: null,
-  searchProvider: 'npm',
-  connector: {
-    autoOpenURL: false,
-  },
+const mockUserLocalSettings = ref({
   sidebar: {
     collapsed: [],
   },
+  connector: {
+    autoOpenURL: false,
+  },
 })
 
 mockNuxtImport('useConnector', () => {
   return createMockUseConnector
 })
 
-mockNuxtImport('useSettings', () => {
-  return () => ({ settings: mockSettings })
+mockNuxtImport('useUserLocalSettings', () => {
+  return () => ({ userLocalSettings: mockUserLocalSettings })
 })
 
 mockNuxtImport('useSelectedPackageManager', () => {
diff --git a/test/nuxt/components/compare/FacetRow.spec.ts b/test/nuxt/components/compare/FacetRow.spec.ts
index cfa30adc7..11467b5c0 100644
--- a/test/nuxt/components/compare/FacetRow.spec.ts
+++ b/test/nuxt/components/compare/FacetRow.spec.ts
@@ -3,10 +3,10 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import FacetRow from '~/components/Compare/FacetRow.vue'
 
 // Mock useRelativeDates for DateTime component
-vi.mock('~/composables/useSettings', () => ({
+vi.mock('~/composables/useUserPreferences', () => ({
   useRelativeDates: () => ref(false),
-  useSettings: () => ({
-    settings: ref({ relativeDates: false }),
+  useUserPreferences: () => ({
+    preferences: ref({ relativeDates: false }),
   }),
   useAccentColor: () => ({}),
   initAccentOnPrehydrate: () => {},
diff --git a/test/nuxt/composables/use-install-command.spec.ts b/test/nuxt/composables/use-install-command.spec.ts
index 579942794..83fa40ba8 100644
--- a/test/nuxt/composables/use-install-command.spec.ts
+++ b/test/nuxt/composables/use-install-command.spec.ts
@@ -217,9 +217,9 @@ describe('useInstallCommand', () => {
     })
 
     it('should only include main command when @types disabled via settings', () => {
-      // Get settings and disable includeTypesInInstall directly
-      const { settings } = useSettings()
-      settings.value.includeTypesInInstall = false
+      // Get preferences and disable includeTypesInInstall directly
+      const { preferences } = useUserPreferences()
+      preferences.value.includeTypesInInstall = false
 
       const { fullInstallCommand, showTypesInInstall } = useInstallCommand(
         'express',