diff --git a/index.html b/index.html
index a178cd604..ea0874f00 100644
--- a/index.html
+++ b/index.html
@@ -21,9 +21,15 @@
   <body>
     <script>
       // Apply theme before first paint to prevent flash of white on dark mode.
-      // Must stay in sync with the storageKey and logic in src/lib/theme-provider.tsx.
+      // Must stay in sync with the storageKey and logic in src/stores/local-settings-store.ts.
       ;(function () {
-        var theme = localStorage.getItem('ui_theme')
+        var theme = null
+        try {
+          var raw = localStorage.getItem('thunderbolt-local-settings')
+          if (raw) {
+            theme = JSON.parse(raw).state.theme
+          }
+        } catch (e) {}
         var isDark =
           theme === 'dark' || (theme !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches)
         document.documentElement.classList.add(isDark ? 'dark' : 'light')
diff --git a/src/ai/eval/debug-single.ts b/src/ai/eval/debug-single.ts
index 270ceabc9..d114f1269 100644
--- a/src/ai/eval/debug-single.ts
+++ b/src/ai/eval/debug-single.ts
@@ -7,9 +7,8 @@
  * Usage: bun run src/ai/eval/debug-single.ts
  */
 import { aiFetchStreamingResponse } from '@/ai/fetch'
-import { getSettings } from '@/dal'
 import { setupTestDatabase, teardownTestDatabase } from '@/dal/test-utils'
-import { getDb } from '@/db/database'
+import { getLocalSetting } from '@/stores/local-settings-store'
 import { defaultModelGptOss120b } from '@/defaults/models'
 import { defaultModeChat } from '@/defaults/modes'
 import { isSsoMode } from '@/lib/auth-mode'
@@ -40,8 +39,7 @@ const run = async () => {
   console.log(`[2/5] Mode: ${defaultModeChat.name}`)
   console.log(`[2/5] Prompt: "${prompt}"\n`)
 
-  const db = getDb()
-  const { cloudUrl } = await getSettings(db, { cloud_url: 'http://localhost:8000/v1' })
+  const cloudUrl = getLocalSetting('cloudUrl')
   const httpClient = createAuthenticatedClient(cloudUrl, getAuthToken, {
     credentials: isSsoMode() ? 'include' : undefined,
   })
diff --git a/src/ai/eval/runner.ts b/src/ai/eval/runner.ts
index 29d52ae4e..d9fc2f625 100644
--- a/src/ai/eval/runner.ts
+++ b/src/ai/eval/runner.ts
@@ -8,6 +8,7 @@ import { getSettings } from '@/dal'
 import { getModel } from '@/dal/models'
 import { getModelProfile } from '@/dal/model-profiles'
 import { getDb } from '@/db/database'
+import { getLocalSetting } from '@/stores/local-settings-store'
 import { isSsoMode } from '@/lib/auth-mode'
 import { getAuthToken } from '@/lib/auth-token'
 import { createAuthenticatedClient } from '@/lib/http'
@@ -24,8 +25,7 @@ let _evalHttpClientPromise: Promise<import('@/lib/http').HttpClient> | null = nu
 const getEvalHttpClient = () => {
   if (!_evalHttpClientPromise) {
     _evalHttpClientPromise = (async () => {
-      const db = getDb()
-      const { cloudUrl } = await getSettings(db, { cloud_url: 'http://localhost:8000/v1' })
+      const cloudUrl = getLocalSetting('cloudUrl')
       return createAuthenticatedClient(cloudUrl, getAuthToken, {
         credentials: isSsoMode() ? 'include' : undefined,
       })
diff --git a/src/ai/fetch.ts b/src/ai/fetch.ts
index 12f008a66..d263446b3 100644
--- a/src/ai/fetch.ts
+++ b/src/ai/fetch.ts
@@ -14,6 +14,7 @@ import {
 } from '@/ai/step-logic'
 import { getModel, getModelProfile, getSettings } from '@/dal'
 import { getDb } from '@/db/database'
+import { getLocalSetting } from '@/stores/local-settings-store'
 import { isSsoMode } from '@/lib/auth-mode'
 import { getAuthToken } from '@/lib/auth-token'
 import { fetch as baseFetch } from '@/lib/fetch'
@@ -72,8 +73,7 @@ type AiFetchStreamingResponseOptions = {
 export const createModel = async (modelConfig: Model) => {
   switch (modelConfig.provider) {
     case 'thunderbolt': {
-      const db = getDb()
-      const { cloudUrl } = await getSettings(db, { cloud_url: 'http://localhost:8000/v1' })
+      const cloudUrl = getLocalSetting('cloudUrl')
       const token = getAuthToken() || 'thunderbolt'
       // SSO web flow authenticates via session cookies — the SSO callback is a
       // browser redirect, not an XHR, so `set-auth-token` never reaches the
diff --git a/src/app.tsx b/src/app.tsx
index fb48daad1..150a6102b 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -252,7 +252,7 @@ export const App = () => {
   }
 
   return (
-    <ThemeProvider defaultTheme="system">
+    <ThemeProvider>
       {renderAppContent()}
       <RevokedDeviceModal open={revokedDeviceOpen} />
     </ThemeProvider>
diff --git a/src/components/chat/citation-badge.tsx b/src/components/chat/citation-badge.tsx
index b6d7f1421..f375fcea2 100644
--- a/src/components/chat/citation-badge.tsx
+++ b/src/components/chat/citation-badge.tsx
@@ -5,7 +5,7 @@
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { useIsMobile } from '@/hooks/use-mobile'
-import { useSettings } from '@/hooks/use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import type { CitationSource } from '@/types/citation'
 import { memo, useState } from 'react'
 import { useCitationPopover } from './citation-popover'
@@ -91,7 +91,7 @@ ManagedBadge.displayName = 'ManagedBadge'
 const StandaloneBadge = memo(({ sources }: { sources: CitationSource[] }) => {
   const [isOpen, setIsOpen] = useState(false)
   const { isMobile } = useIsMobile()
-  const { cloudUrl } = useSettings({ cloud_url: 'http://localhost:8000/v1' })
+  const cloudUrl = useLocalSettingsStore((s) => s.cloudUrl)
   const { displayName, additionalCount, ariaLabel } = getBadgeLabel(sources)
 
   const badge = (
@@ -118,7 +118,7 @@ const StandaloneBadge = memo(({ sources }: { sources: CitationSource[] }) => {
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger asChild>{badge}</PopoverTrigger>
         <PopoverContent align="start" side="bottom" className="w-[420px] overflow-hidden rounded-2xl p-0">
-          <SourceList sources={sources} proxyBase={cloudUrl.value} />
+          <SourceList sources={sources} proxyBase={cloudUrl} />
         </PopoverContent>
       </Popover>
     )
@@ -137,7 +137,7 @@ const StandaloneBadge = memo(({ sources }: { sources: CitationSource[] }) => {
           <SheetHeader className="sr-only">
             <SheetTitle>{sources.length === 1 ? 'Source' : 'Sources'}</SheetTitle>
           </SheetHeader>
-          <SourceList sources={sources} proxyBase={cloudUrl.value} />
+          <SourceList sources={sources} proxyBase={cloudUrl} />
         </SheetContent>
       </Sheet>
     </>
diff --git a/src/components/chat/citation-popover.tsx b/src/components/chat/citation-popover.tsx
index 259c3980c..12c5f34bb 100644
--- a/src/components/chat/citation-popover.tsx
+++ b/src/components/chat/citation-popover.tsx
@@ -5,7 +5,7 @@
 import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { useIsMobile } from '@/hooks/use-mobile'
-import { useSettings } from '@/hooks/use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import type { CitationSource } from '@/types/citation'
 import {
   createContext,
@@ -64,7 +64,7 @@ export const CitationPopoverProvider = ({ children }: { children: ReactNode }) =
 
 const CitationOverlay = memo(({ popover, close }: { popover: PopoverData | null; close: () => void }) => {
   const { isMobile } = useIsMobile()
-  const { cloudUrl } = useSettings({ cloud_url: 'http://localhost:8000/v1' })
+  const cloudUrl = useLocalSettingsStore((s) => s.cloudUrl)
   const anchorRef = useRef<HTMLSpanElement>(null)
 
   useEffect(() => {
@@ -105,7 +105,7 @@ const CitationOverlay = memo(({ popover, close }: { popover: PopoverData | null;
           <SheetHeader className="sr-only">
             <SheetTitle>{sources.length === 1 ? 'Source' : 'Sources'}</SheetTitle>
           </SheetHeader>
-          <SourceList sources={sources} proxyBase={cloudUrl.value} />
+          <SourceList sources={sources} proxyBase={cloudUrl} />
         </SheetContent>
       </Sheet>
     )
@@ -124,7 +124,7 @@ const CitationOverlay = memo(({ popover, close }: { popover: PopoverData | null;
         />
       </PopoverAnchor>
       <PopoverContent align="start" side="bottom" className="w-[420px] overflow-hidden rounded-2xl p-0">
-        <SourceList sources={sources} proxyBase={cloudUrl.value} />
+        <SourceList sources={sources} proxyBase={cloudUrl} />
       </PopoverContent>
     </Popover>
   )
diff --git a/src/components/chat/tool-icon.tsx b/src/components/chat/tool-icon.tsx
index b14e6c990..28446a0c9 100644
--- a/src/components/chat/tool-icon.tsx
+++ b/src/components/chat/tool-icon.tsx
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { useSettings } from '@/hooks/use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import { getProxiedFaviconUrl } from '@/lib/url-utils'
 import { cn } from '@/lib/utils'
 import { motion } from 'framer-motion'
@@ -44,13 +44,13 @@ export const extractFaviconUrl = (toolName: string, output: unknown): string | n
  */
 const useToolFavicon = (toolName: string, toolOutput: unknown, isLoading: boolean, isError: boolean) => {
   const [failedFavicons, setFailedFavicons] = useState<Set<string>>(new Set())
-  const { cloudUrl } = useSettings({ cloud_url: 'http://localhost:8000/v1' })
+  const cloudUrl = useLocalSettingsStore((s) => s.cloudUrl)
 
   const handleFaviconError = (url: string) => {
     setFailedFavicons((prev) => new Set(prev).add(url))
   }
 
-  if (!toolOutput || isLoading || isError || !cloudUrl.value) {
+  if (!toolOutput || isLoading || isError) {
     return { favicon: null, originalFaviconUrl: null, handleFaviconError }
   }
 
@@ -60,7 +60,7 @@ const useToolFavicon = (toolName: string, toolOutput: unknown, isLoading: boolea
       return { favicon: null, originalFaviconUrl, handleFaviconError }
     }
 
-    const favicon = getProxiedFaviconUrl(originalFaviconUrl, cloudUrl.value)
+    const favicon = getProxiedFaviconUrl(originalFaviconUrl, cloudUrl)
     return { favicon, originalFaviconUrl, handleFaviconError }
   } catch {
     return { favicon: null, originalFaviconUrl: null, handleFaviconError }
diff --git a/src/components/pending-device-modal.test.tsx b/src/components/pending-device-modal.test.tsx
index 6fb1f82f9..ddfa98677 100644
--- a/src/components/pending-device-modal.test.tsx
+++ b/src/components/pending-device-modal.test.tsx
@@ -5,6 +5,7 @@
 import { getDb } from '@/db/database'
 import { devicesTable } from '@/db/tables'
 import { resetTestDatabase, setupTestDatabase, teardownTestDatabase } from '@/dal/test-utils'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import { renderWithReactivity, waitForElement } from '@/test-utils/powersync-reactivity-test'
 import { createMockHttpClient } from '@/test-utils/http-client'
 import { HttpClientProvider } from '@/contexts/http-client-context'
@@ -20,15 +21,15 @@ const pendingDeviceId1 = uuidv7()
 
 const deviceIdKey = 'thunderbolt_device_id'
 const authTokenKey = 'thunderbolt_auth_token'
-const syncEnabledKey = 'powersync_sync_enabled'
 const sessionStorageKey = 'pending_device_dismissed_ids'
 
-// Re-export real powersync module with localStorage-based isSyncEnabled to prevent
-// bleed from other test files that mock.module('@/db/powersync').
+// Defend against bleed from other test files that fully mock '@/db/powersync'.
+// `isSyncEnabled` is pinned to the real production source (useLocalSettingsStore),
+// which the suite below seeds directly.
 const realPowersync = await import('@/db/powersync')
 mock.module('@/db/powersync', () => ({
   ...realPowersync,
-  isSyncEnabled: () => localStorage.getItem('powersync_sync_enabled') === 'true',
+  isSyncEnabled: () => useLocalSettingsStore.getState().syncEnabled,
 }))
 
 // These tests verify E2EE pending device behavior — encryption must be enabled.
@@ -65,14 +66,14 @@ describe('PendingDeviceModal', () => {
     await resetTestDatabase()
     localStorage.setItem(deviceIdKey, currentDeviceId)
     localStorage.setItem(authTokenKey, 'test-token')
-    localStorage.setItem(syncEnabledKey, 'true')
+    useLocalSettingsStore.setState({ syncEnabled: true })
     sessionStorage.removeItem(sessionStorageKey)
   })
 
   afterEach(() => {
     localStorage.removeItem(deviceIdKey)
     localStorage.removeItem(authTokenKey)
-    localStorage.removeItem(syncEnabledKey)
+    useLocalSettingsStore.setState({ syncEnabled: false })
     sessionStorage.removeItem(sessionStorageKey)
     cleanup()
   })
@@ -195,7 +196,7 @@ describe('PendingDeviceModal', () => {
   })
 
   it('does not render modal when sync is disabled', async () => {
-    localStorage.removeItem(syncEnabledKey)
+    useLocalSettingsStore.setState({ syncEnabled: false })
     const db = getDb()
 
     await db.insert(devicesTable).values([
diff --git a/src/components/sign-in/sign-in-form.tsx b/src/components/sign-in/sign-in-form.tsx
index 58f5b1ded..b447433be 100644
--- a/src/components/sign-in/sign-in-form.tsx
+++ b/src/components/sign-in/sign-in-form.tsx
@@ -4,6 +4,7 @@
 
 import { useAuth, useHttpClient } from '@/contexts'
 import { useSettings } from '@/hooks/use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import { isLocalhostUrl } from '@/lib/utils'
 import { type ReactNode, type RefObject, useCallback, useEffect } from 'react'
 import { SignInEmailStep } from './sign-in-email-step'
@@ -78,8 +79,9 @@ export const SignInForm = ({
 }: SignInFormProps) => {
   const authClient = useAuth()
   const httpClient = useHttpClient()
-  const { cloudUrl, preferredName } = useSettings({ cloud_url: 'http://localhost:8000/v1', preferred_name: '' })
-  const isLocalhost = isLocalhostUrl(cloudUrl.value)
+  const cloudUrl = useLocalSettingsStore((s) => s.cloudUrl)
+  const { preferredName } = useSettings({ preferred_name: '' })
+  const isLocalhost = isLocalhostUrl(cloudUrl)
   const displayName = preferredName.value as string
 
   const { state, isValidEmail, actions } = useSignInFormState({
diff --git a/src/components/sso-redirect.tsx b/src/components/sso-redirect.tsx
index 7ab9277ff..d21898167 100644
--- a/src/components/sso-redirect.tsx
+++ b/src/components/sso-redirect.tsx
@@ -8,7 +8,7 @@ import { setAuthToken } from '@/lib/auth-token'
 import { isSafeUrl } from '@/lib/url-utils'
 import { isTauri } from '@/lib/platform'
 import { startSsoFlowLoopback } from '@/lib/sso-loopback'
-import { useSettings } from '@/hooks/use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import Loading from '@/loading'
 
 /**
@@ -19,18 +19,14 @@ import Loading from '@/loading'
  * of navigating the webview (WKWebView drops cookies during cross-origin redirects).
  */
 const SsoRedirect = () => {
-  const { cloudUrl } = useSettings({ cloud_url: String })
+  const cloudUrl = useLocalSettingsStore((s) => s.cloudUrl)
   const [error, setError] = useState(false)
   const [retryKey, setRetryKey] = useState(0)
 
   useEffect(() => {
-    if (cloudUrl.isLoading || !cloudUrl.value) {
-      return
-    }
-
     setError(false)
     const abortController = new AbortController()
-    const baseUrl = cloudUrl.value.replace(/\/v1$/, '')
+    const baseUrl = cloudUrl.replace(/\/v1$/, '')
 
     const redirectToSso = async () => {
       try {
@@ -74,7 +70,7 @@ const SsoRedirect = () => {
     redirectToSso()
 
     return () => abortController.abort()
-  }, [cloudUrl.isLoading, cloudUrl.value, retryKey])
+  }, [cloudUrl, retryKey])
 
   if (error) {
     return (
diff --git a/src/db/powersync/database.ts b/src/db/powersync/database.ts
index 303ed2979..c279a0ea9 100644
--- a/src/db/powersync/database.ts
+++ b/src/db/powersync/database.ts
@@ -3,8 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { fetchConfig } from '@/api/config'
-import { getSettings } from '@/dal'
-import { defaultSettingCloudUrl } from '@/defaults/settings'
+import { getLocalSetting, useLocalSettingsStore } from '@/stores/local-settings-store'
 import { withTimeout } from '@/lib/timeout'
 import type { AbstractPowerSyncDatabase } from '@powersync/common'
 import { SyncStreamConnectionMethod, WASQLiteOpenFactory, WASQLiteVFS } from '@powersync/web'
@@ -45,9 +44,6 @@ export const getPowerSyncDatabaseConfig = (
   return 'safari-tauri'
 }
 
-/** LocalStorage key for sync enabled flag */
-const syncEnabledKey = 'powersync_sync_enabled'
-
 /** Max time to wait for initial sync before continuing (e.g. when network is down) */
 const initialSyncTimeoutMs = 10_000
 
@@ -90,23 +86,14 @@ export const reconnectSync = async (): Promise<void> => {
 /**
  * Check if sync is enabled by user preference
  */
-export const isSyncEnabled = (): boolean => {
-  if (typeof localStorage === 'undefined') {
-    return false
-  }
-  return localStorage.getItem(syncEnabledKey) === 'true'
-}
+export const isSyncEnabled = (): boolean => getLocalSetting('syncEnabled')
 
 /**
  * Set sync enabled preference, connect/disconnect from PowerSync, and dispatch change event
  */
 export const setSyncEnabled = async (enabled: boolean): Promise<void> => {
-  if (typeof localStorage === 'undefined') {
-    return
-  }
-
-  // Update localStorage and dispatch event
-  localStorage.setItem(syncEnabledKey, String(enabled))
+  // Update store and dispatch event
+  useLocalSettingsStore.getState().setLocalSetting('syncEnabled', enabled)
   window.dispatchEvent(new CustomEvent(syncEnabledChangeEvent, { detail: enabled }))
 
   // Connect or disconnect from PowerSync Cloud
@@ -245,7 +232,7 @@ export class PowerSyncDatabaseImpl implements DatabaseInterface {
     }
 
     try {
-      const { cloudUrl } = await getSettings(this._db, { cloud_url: defaultSettingCloudUrl.value })
+      const cloudUrl = getLocalSetting('cloudUrl')
 
       // Re-fetch config before connecting so the upload encoder has the correct E2EE flag.
       // If /config failed at app init (e.g. offline), this retries before sync starts.
diff --git a/src/defaults/settings.ts b/src/defaults/settings.ts
index ef850266d..f462bc086 100644
--- a/src/defaults/settings.ts
+++ b/src/defaults/settings.ts
@@ -50,22 +50,6 @@ export const defaultSettingExperimentalFeatureTasks: Setting = {
   userId: null,
 }
 
-export const defaultSettingNativeFetchEnabled: Setting = {
-  key: 'is_native_fetch_enabled',
-  value: 'false',
-  updatedAt: null,
-  defaultHash: null,
-  userId: null,
-}
-
-export const defaultSettingDebugPosthog: Setting = {
-  key: 'debug_posthog',
-  value: 'false',
-  updatedAt: null,
-  defaultHash: null,
-  userId: null,
-}
-
 export const defaultSettingPreferredName: Setting = {
   key: 'preferred_name',
   value: null,
@@ -98,22 +82,6 @@ export const defaultSettingLocationLng: Setting = {
   userId: null,
 }
 
-export const defaultSettingCloudUrl: Setting = {
-  key: 'cloud_url',
-  value: import.meta.env.VITE_THUNDERBOLT_CLOUD_URL || 'http://localhost:8000/v1',
-  updatedAt: null,
-  defaultHash: null,
-  userId: null,
-}
-
-export const defaultSettingTheme: Setting = {
-  key: 'ui-theme',
-  value: 'system',
-  updatedAt: null,
-  defaultHash: null,
-  userId: null,
-}
-
 export const defaultSettingDistanceUnit: Setting = {
   key: 'distance_unit',
   value: null,
@@ -186,14 +154,6 @@ export const defaultSettingIntegrationsDoNotAskAgain: Setting = {
   userId: null,
 }
 
-export const defaultSettingHapticsEnabled: Setting = {
-  key: 'haptics_enabled',
-  value: 'true',
-  updatedAt: null,
-  defaultHash: null,
-  userId: null,
-}
-
 /**
  * Array of all default settings for iteration
  */
@@ -201,14 +161,10 @@ export const defaultSettings: ReadonlyArray<Setting> = [
   defaultSettingDataCollection,
   defaultSettingTriggersEnabled,
   defaultSettingExperimentalFeatureTasks,
-  defaultSettingNativeFetchEnabled,
-  defaultSettingDebugPosthog,
   defaultSettingPreferredName,
   defaultSettingLocationName,
   defaultSettingLocationLat,
   defaultSettingLocationLng,
-  defaultSettingCloudUrl,
-  defaultSettingTheme,
   defaultSettingDistanceUnit,
   defaultSettingTemperatureUnit,
   defaultSettingDateFormat,
@@ -218,5 +174,4 @@ export const defaultSettings: ReadonlyArray<Setting> = [
   defaultSettingUserHasCompletedOnboarding,
   defaultSettingContentViewWidth,
   defaultSettingIntegrationsDoNotAskAgain,
-  defaultSettingHapticsEnabled,
 ] as const
diff --git a/src/hooks/use-app-initialization.ts b/src/hooks/use-app-initialization.ts
index 1e9640f07..30c2ffe38 100644
--- a/src/hooks/use-app-initialization.ts
+++ b/src/hooks/use-app-initialization.ts
@@ -8,7 +8,7 @@ import { getSettings } from '@/dal'
 import { getAuthToken } from '@/lib/auth-token'
 import { Database, getCurrentDatabase, setDatabase } from '@/db/database'
 import type { AnyDrizzleDatabase } from '@/db/database-interface'
-import { defaultSettingCloudUrl } from '@/defaults/settings'
+import { getLocalSetting } from '@/stores/local-settings-store'
 import { createHandleError } from '@/lib/error-utils'
 import { createAppDir, resetAppDir } from '@/lib/fs'
 import { isSsoMode } from '@/lib/auth-mode'
@@ -59,7 +59,7 @@ const initializePostHog = async (httpClient?: HttpClient): Promise<PostHog | nul
 const executeInitializationSteps = async (httpClient?: HttpClient): Promise<HandleResult<InitData>> => {
   // Step 0: Fetch backend config and hydrate store (only on success).
   // When fetch fails (offline/error), the store retains its persisted localStorage value.
-  await fetchConfig(defaultSettingCloudUrl.value!, httpClient)
+  await fetchConfig(getLocalSetting('cloudUrl'), httpClient)
 
   // Step 1: App directory creation
   let appDirPath: string
@@ -115,8 +115,8 @@ const executeInitializationSteps = async (httpClient?: HttpClient): Promise<Hand
   }
 
   // Step 5: Get cloud url and experimental feature tasks
-  const { cloudUrl, experimentalFeatureTasks } = await getSettings(db, {
-    cloud_url: defaultSettingCloudUrl.value,
+  const cloudUrl = getLocalSetting('cloudUrl')
+  const { experimentalFeatureTasks } = await getSettings(db, {
     experimental_feature_tasks: false,
   })
 
diff --git a/src/hooks/use-haptics.tsx b/src/hooks/use-haptics.tsx
index 5f72e6e2d..185aef6df 100644
--- a/src/hooks/use-haptics.tsx
+++ b/src/hooks/use-haptics.tsx
@@ -4,7 +4,7 @@
 
 import { createContext, type ReactNode, useCallback, useContext } from 'react'
 import { useWebHaptics } from 'web-haptics/react'
-import { useSettings } from './use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import {
   triggerImpact,
   triggerNotification,
@@ -34,12 +34,11 @@ const HapticsContext = createContext<HapticsContextValue>({
  * a provider get silent no-ops, keeping them usable as dumb components.
  */
 export const HapticsProvider = ({ children }: { children: ReactNode }) => {
-  const { hapticsEnabled } = useSettings({ haptics_enabled: true })
+  const hapticsEnabled = useLocalSettingsStore((s) => s.hapticsEnabled)
   const { trigger } = useWebHaptics({ debug: import.meta.env.DEV })
-  const enabled = hapticsEnabled.value === true
 
   const triggerSelectionHaptic = useCallback(() => {
-    if (!enabled) {
+    if (!hapticsEnabled) {
       return
     }
     if (isTauri() && isMobile()) {
@@ -47,11 +46,11 @@ export const HapticsProvider = ({ children }: { children: ReactNode }) => {
     } else {
       void trigger('selection')
     }
-  }, [enabled, trigger])
+  }, [hapticsEnabled, trigger])
 
   const triggerImpactHaptic = useCallback(
     (style: ImpactFeedbackStyle = 'light') => {
-      if (!enabled) {
+      if (!hapticsEnabled) {
         return
       }
       if (isTauri() && isMobile()) {
@@ -60,12 +59,12 @@ export const HapticsProvider = ({ children }: { children: ReactNode }) => {
         void trigger(style)
       }
     },
-    [enabled, trigger],
+    [hapticsEnabled, trigger],
   )
 
   const triggerNotificationHaptic = useCallback(
     (type: NotificationFeedbackType) => {
-      if (!enabled) {
+      if (!hapticsEnabled) {
         return
       }
       if (isTauri() && isMobile()) {
@@ -74,7 +73,7 @@ export const HapticsProvider = ({ children }: { children: ReactNode }) => {
         void trigger(type)
       }
     },
-    [enabled, trigger],
+    [hapticsEnabled, trigger],
   )
 
   return (
diff --git a/src/hooks/use-pending-device-notification.test.tsx b/src/hooks/use-pending-device-notification.test.tsx
index 8d89b0ed2..8d1ad9762 100644
--- a/src/hooks/use-pending-device-notification.test.tsx
+++ b/src/hooks/use-pending-device-notification.test.tsx
@@ -5,6 +5,7 @@
 import { getDb } from '@/db/database'
 import { devicesTable } from '@/db/tables'
 import { resetTestDatabase, setupTestDatabase, teardownTestDatabase } from '@/dal/test-utils'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import { renderWithReactivity, waitForElement } from '@/test-utils/powersync-reactivity-test'
 import '@testing-library/jest-dom'
 import { cleanup, screen } from '@testing-library/react'
@@ -17,14 +18,14 @@ const pendingDeviceId2 = uuidv7()
 
 const deviceIdKey = 'thunderbolt_device_id'
 const authTokenKey = 'thunderbolt_auth_token'
-const syncEnabledKey = 'powersync_sync_enabled'
 
-// Re-export the real module but override isSyncEnabled to read localStorage directly,
-// preventing bleed from other test files that mock.module('@/db/powersync').
+// Defend against bleed from other test files that fully mock '@/db/powersync'.
+// `isSyncEnabled` is pinned to the real production source (useLocalSettingsStore),
+// which the suite below seeds directly.
 const realPowersync = await import('@/db/powersync')
 mock.module('@/db/powersync', () => ({
   ...realPowersync,
-  isSyncEnabled: () => localStorage.getItem(syncEnabledKey) === 'true',
+  isSyncEnabled: () => useLocalSettingsStore.getState().syncEnabled,
 }))
 
 // These tests verify E2EE pending device behavior — encryption must be enabled.
@@ -60,18 +61,18 @@ describe('usePendingDeviceNotification', () => {
     await resetTestDatabase()
     localStorage.setItem(deviceIdKey, currentDeviceId)
     localStorage.setItem(authTokenKey, 'test-token')
-    localStorage.setItem(syncEnabledKey, 'true')
+    useLocalSettingsStore.setState({ syncEnabled: true })
   })
 
   afterEach(() => {
     localStorage.removeItem(deviceIdKey)
     localStorage.removeItem(authTokenKey)
-    localStorage.removeItem(syncEnabledKey)
+    useLocalSettingsStore.setState({ syncEnabled: false })
     cleanup()
   })
 
   it('returns null when sync is not enabled', async () => {
-    localStorage.removeItem(syncEnabledKey)
+    useLocalSettingsStore.setState({ syncEnabled: false })
     const db = getDb()
 
     await db.insert(devicesTable).values([
diff --git a/src/hooks/use-powersync-credentials-invalid-listener.test.tsx b/src/hooks/use-powersync-credentials-invalid-listener.test.tsx
index d5bb8085a..08b416e10 100644
--- a/src/hooks/use-powersync-credentials-invalid-listener.test.tsx
+++ b/src/hooks/use-powersync-credentials-invalid-listener.test.tsx
@@ -6,6 +6,7 @@ import { getDevice } from '@/dal'
 import { resetTestDatabase, setupTestDatabase, teardownTestDatabase } from '@/dal/test-utils'
 import { ThunderboltConnector } from '@/db/powersync/connector'
 import { powersyncCredentialsInvalid } from '@/db/powersync/connector'
+import { syncEnabledChangeEvent } from '@/db/powersync/database'
 import { devicesTable } from '@/db/tables'
 import { getAuthToken, setAuthToken } from '@/lib/auth-token'
 import { createTestProvider } from '@/test-utils/test-provider'
@@ -55,7 +56,7 @@ mock.module('@/db/powersync', () => ({
   getPowerSyncInstance: () => null,
   isSyncEnabled: () => false,
   setSyncEnabled: mock(() => Promise.resolve()),
-  syncEnabledChangeEvent: 'powersync_sync_enabled_change',
+  syncEnabledChangeEvent,
 }))
 
 describe('usePowerSyncCredentialsInvalidListener', () => {
diff --git a/src/hooks/use-sync-enabled-toggle.test.ts b/src/hooks/use-sync-enabled-toggle.test.ts
index 597e216ad..5b0183d94 100644
--- a/src/hooks/use-sync-enabled-toggle.test.ts
+++ b/src/hooks/use-sync-enabled-toggle.test.ts
@@ -5,6 +5,7 @@
 import { act, renderHook } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, mock } from 'bun:test'
 import { ThunderboltConnector } from '@/db/powersync/connector'
+import { syncEnabledChangeEvent } from '@/db/powersync/database'
 
 const mockSetSyncEnabled = mock(() => Promise.resolve())
 const mockTrackEvent = mock(() => {})
@@ -17,7 +18,7 @@ mock.module('@/db/powersync', () => ({
   getPowerSyncInstance: () => null,
   isSyncEnabled: () => false,
   setSyncEnabled: mockSetSyncEnabled,
-  syncEnabledChangeEvent: 'powersync_sync_enabled_change',
+  syncEnabledChangeEvent,
 }))
 
 mock.module('@/lib/posthog', () => ({
diff --git a/src/lib/cleanup.ts b/src/lib/cleanup.ts
index b9085e73c..c96219713 100644
--- a/src/lib/cleanup.ts
+++ b/src/lib/cleanup.ts
@@ -6,6 +6,7 @@ import { setSyncEnabled } from '@/db/powersync'
 import { clearAuthToken, clearDeviceId } from '@/lib/auth-token'
 import { resetAppDir } from '@/lib/fs'
 import { handleFullWipe } from '@/services/encryption'
+import { initialLocalSettings, useLocalSettingsStore } from '@/stores/local-settings-store'
 
 type ClearLocalDataOptions = {
   /** Disable PowerSync sync connection (default: true) */
@@ -49,6 +50,9 @@ export const clearLocalData = async (options?: ClearLocalDataOptions): Promise<v
     } catch (error) {
       console.error('[clearLocalData] Failed to reset app directory:', error)
     }
+
+    // Reset local settings to defaults (previously these lived in the DB and were deleted with it)
+    useLocalSettingsStore.setState(initialLocalSettings)
   }
 
   if (clearAuth) {
diff --git a/src/lib/fetch.ts b/src/lib/fetch.ts
index 6da13dc99..e09d7c279 100644
--- a/src/lib/fetch.ts
+++ b/src/lib/fetch.ts
@@ -2,9 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { getSettings } from '@/dal'
-import { getDb } from '@/db/database'
 import { isTauri } from '@/lib/platform'
+import { getLocalSetting } from '@/stores/local-settings-store'
 
 /**
  * Custom fetch function that handles CORS issues by routing through Tauri when available
@@ -17,10 +16,7 @@ export const fetch = async (input: RequestInfo | URL, init?: RequestInit): Promi
     return globalThis.fetch(input, init)
   }
 
-  const db = getDb()
-  const { isNativeFetchEnabled } = await getSettings(db, { is_native_fetch_enabled: false })
-
-  if (isNativeFetchEnabled) {
+  if (getLocalSetting('isNativeFetchEnabled')) {
     const { fetch: tauriFetch } = await import('@tauri-apps/plugin-http')
     return tauriFetch(input, init)
   }
diff --git a/src/lib/posthog.tsx b/src/lib/posthog.tsx
index a644f5674..e3be28471 100644
--- a/src/lib/posthog.tsx
+++ b/src/lib/posthog.tsx
@@ -5,6 +5,7 @@
 import { type HttpClient } from '@/contexts'
 import { getSettings } from '@/dal'
 import { getDb } from '@/db/database'
+import { getLocalSetting } from '@/stores/local-settings-store'
 import { createHandleError } from '@/lib/error-utils'
 import { createClient } from '@/lib/http'
 import type { HandleError, HandleResult } from '@/types/handle-errors'
@@ -53,11 +54,11 @@ export const sanitizeUrl = (url: string): string => {
  */
 export const initPosthog = async (httpClient?: HttpClient): Promise<HandleResult<PostHog | null>> => {
   try {
+    const cloudUrl = getLocalSetting('cloudUrl')
+    const debugPosthog = getLocalSetting('debugPosthog')
     const db = getDb()
-    const { cloudUrl, dataCollection, debugPosthog } = await getSettings(db, {
-      cloud_url: 'http://localhost:8000/v1',
+    const { dataCollection } = await getSettings(db, {
       data_collection: true,
-      debug_posthog: false,
     })
 
     const client = httpClient ?? createClient({ prefixUrl: cloudUrl })
diff --git a/src/lib/theme-provider.tsx b/src/lib/theme-provider.tsx
index 6707b9185..a1d0aa4dc 100644
--- a/src/lib/theme-provider.tsx
+++ b/src/lib/theme-provider.tsx
@@ -2,8 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import { invoke } from '@tauri-apps/api/core'
-import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { createContext, useCallback, useContext, useEffect, type ReactNode } from 'react'
 import { isTauri } from './platform'
 import { setAndroidBarColor } from './set-android-bar-color'
 
@@ -33,12 +34,6 @@ const persistThemeToNativeStore = async (theme: string) => {
 
 type Theme = 'dark' | 'light' | 'system'
 
-type ThemeProviderProps = {
-  children: ReactNode
-  defaultTheme?: Theme
-  storageKey?: string
-}
-
 type ThemeProviderState = {
   theme: Theme
   setTheme: (theme: Theme) => void
@@ -51,23 +46,15 @@ const initialState: ThemeProviderState = {
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 
-const isValidTheme = (value: string | null): value is Theme =>
-  value === 'dark' || value === 'light' || value === 'system'
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const theme = useLocalSettingsStore((s) => s.theme)
+  const setLocalSetting = useLocalSettingsStore((s) => s.setLocalSetting)
 
-export const ThemeProvider = ({
-  children,
-  defaultTheme = 'system',
-  storageKey = 'ui_theme',
-  ...props
-}: ThemeProviderProps) => {
-  const savedTheme = window.localStorage.getItem(storageKey)
-
-  const [theme, setTheme] = useState<Theme>(isValidTheme(savedTheme) ? savedTheme : defaultTheme)
+  const setTheme = useCallback((newTheme: Theme) => setLocalSetting('theme', newTheme), [setLocalSetting])
 
   useEffect(() => {
-    window.localStorage.setItem(storageKey, theme)
     persistThemeToNativeStore(theme).catch(() => {})
-  }, [storageKey, theme])
+  }, [theme])
 
   useEffect(() => {
     const root = window.document.documentElement
@@ -130,11 +117,7 @@ export const ThemeProvider = ({
     setTheme,
   }
 
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  )
+  return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>
 }
 
 export const useTheme = () => {
diff --git a/src/settings/dev-settings.tsx b/src/settings/dev-settings.tsx
index 0876b06d2..b1e57d067 100644
--- a/src/settings/dev-settings.tsx
+++ b/src/settings/dev-settings.tsx
@@ -8,16 +8,26 @@ import { PageHeader } from '@/components/ui/page-header'
 import { SectionCard } from '@/components/ui/section-card'
 import { Switch } from '@/components/ui/switch'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { useSettings } from '@/hooks/use-settings'
+import { initialLocalSettings, useLocalSettingsStore } from '@/stores/local-settings-store'
 import { getCapabilities, isTauri } from '@/lib/platform'
 import { useQuery } from '@tanstack/react-query'
+import { useShallow } from 'zustand/react/shallow'
 
 export default function DevSettingsPage() {
-  const { cloudUrl, isNativeFetchEnabled, debugPosthog } = useSettings({
-    cloud_url: '',
-    is_native_fetch_enabled: false,
-    debug_posthog: false,
-  })
+  const settings = useLocalSettingsStore(
+    useShallow((s) => ({
+      cloudUrl: s.cloudUrl,
+      isNativeFetchEnabled: s.isNativeFetchEnabled,
+      debugPosthog: s.debugPosthog,
+    })),
+  )
+  const { cloudUrl, isNativeFetchEnabled, debugPosthog } = settings
+  const setLocalSetting = useLocalSettingsStore((s) => s.setLocalSetting)
+
+  const isModified = <K extends keyof typeof settings>(key: K) => settings[key] !== initialLocalSettings[key]
+
+  const resetSetting = <K extends keyof typeof initialLocalSettings>(key: K) =>
+    setLocalSetting(key, initialLocalSettings[key])
 
   const { data: capabilities } = useQuery({
     queryKey: ['capabilities'],
@@ -36,15 +46,15 @@ export default function DevSettingsPage() {
             <ModificationIndicator
               as="label"
               className="block text-sm font-medium"
-              hasModifications={cloudUrl.isModified}
-              onReset={cloudUrl.reset}
+              hasModifications={isModified('cloudUrl')}
+              onReset={() => resetSetting('cloudUrl')}
             >
               Cloud URL
             </ModificationIndicator>
             <Input
               type="url"
-              value={cloudUrl.value}
-              onChange={(e) => cloudUrl.setValue(e.target.value || null)}
+              value={cloudUrl}
+              onChange={(e) => setLocalSetting('cloudUrl', e.target.value || initialLocalSettings.cloudUrl)}
               placeholder="http://localhost:8000"
             />
             <p className="text-sm text-muted-foreground">The URL of the Thunderbolt backend</p>
@@ -58,8 +68,8 @@ export default function DevSettingsPage() {
               <ModificationIndicator
                 as="label"
                 className="text-sm font-medium"
-                hasModifications={isNativeFetchEnabled.isModified}
-                onReset={isNativeFetchEnabled.reset}
+                hasModifications={isModified('isNativeFetchEnabled')}
+                onReset={() => resetSetting('isNativeFetchEnabled')}
               >
                 Use Native Fetch
               </ModificationIndicator>
@@ -69,8 +79,8 @@ export default function DevSettingsPage() {
               <TooltipTrigger asChild>
                 <span>
                   <Switch
-                    checked={isNativeFetchEnabled.value}
-                    onCheckedChange={isNativeFetchEnabled.setValue}
+                    checked={isNativeFetchEnabled}
+                    onCheckedChange={(value) => setLocalSetting('isNativeFetchEnabled', value)}
                     disabled={!capabilities?.native_fetch}
                   />
                 </span>
@@ -92,14 +102,14 @@ export default function DevSettingsPage() {
               <ModificationIndicator
                 as="label"
                 className="text-sm font-medium"
-                hasModifications={debugPosthog.isModified}
-                onReset={debugPosthog.reset}
+                hasModifications={isModified('debugPosthog')}
+                onReset={() => resetSetting('debugPosthog')}
               >
                 Debug PostHog
               </ModificationIndicator>
               <p className="text-sm text-muted-foreground">Enable verbose analytics logging in the console</p>
             </div>
-            <Switch checked={debugPosthog.value} onCheckedChange={debugPosthog.setValue} />
+            <Switch checked={debugPosthog} onCheckedChange={(value) => setLocalSetting('debugPosthog', value)} />
           </div>
         </div>
       </SectionCard>
diff --git a/src/settings/preferences.tsx b/src/settings/preferences.tsx
index 0feed2524..611b60d6b 100644
--- a/src/settings/preferences.tsx
+++ b/src/settings/preferences.tsx
@@ -7,6 +7,7 @@ import { useSignInModal } from '@/contexts/sign-in-modal-context'
 import { useCountryUnits } from '@/hooks/use-country-units'
 import type { LocationData } from '@/hooks/use-location-search'
 import { useSettings } from '@/hooks/use-settings'
+import { initialLocalSettings, useLocalSettingsStore } from '@/stores/local-settings-store'
 import { useUnitsOptions } from '@/hooks/use-units-options'
 import { privacyPolicyUrl } from '@/lib/constants'
 import { extractCountryFromLocation } from '@/lib/country-utils'
@@ -112,7 +113,6 @@ export default function PreferencesSettingsPage() {
     locationLng,
     dataCollection,
     experimentalFeatureTasks,
-    hapticsEnabled,
     distanceUnit,
     temperatureUnit,
     dateFormat,
@@ -125,15 +125,16 @@ export default function PreferencesSettingsPage() {
     location_lng: '',
     data_collection: true,
     experimental_feature_tasks: false,
-    haptics_enabled: true,
     distance_unit: 'imperial',
     temperature_unit: 'f',
     date_format: 'MM/DD/YYYY',
     time_format: '12h',
     currency: 'USD',
-    cloud_url: 'http://localhost:8000/v1',
   })
 
+  const hapticsEnabled = useLocalSettingsStore((s) => s.hapticsEnabled)
+  const setLocalSetting = useLocalSettingsStore((s) => s.setLocalSetting)
+
   // Local state for name input (only save on blur to avoid DB writes on every keystroke)
   const [nameInput, setNameInput] = useState('')
   const prevPreferredNameRef = useRef(preferredName.value)
@@ -362,14 +363,14 @@ export default function PreferencesSettingsPage() {
               <ModificationIndicator
                 as="label"
                 className="text-sm font-medium"
-                hasModifications={hapticsEnabled.isModified}
-                onReset={hapticsEnabled.reset}
+                hasModifications={hapticsEnabled !== initialLocalSettings.hapticsEnabled}
+                onReset={() => setLocalSetting('hapticsEnabled', initialLocalSettings.hapticsEnabled)}
               >
                 Haptic Feedback
               </ModificationIndicator>
               <p className="text-sm text-muted-foreground">Vibrate on tap</p>
             </div>
-            <Switch checked={hapticsEnabled.value} onCheckedChange={(value) => hapticsEnabled.setValue(value)} />
+            <Switch checked={hapticsEnabled} onCheckedChange={(value) => setLocalSetting('hapticsEnabled', value)} />
           </div>
         </div>
       </SectionCard>
diff --git a/src/stores/local-settings-store.ts b/src/stores/local-settings-store.ts
new file mode 100644
index 000000000..f7d6237c0
--- /dev/null
+++ b/src/stores/local-settings-store.ts
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type LocalSettingsState = {
+  cloudUrl: string
+  debugPosthog: boolean
+  isNativeFetchEnabled: boolean
+  hapticsEnabled: boolean
+  syncEnabled: boolean
+  theme: 'light' | 'dark' | 'system'
+}
+
+type LocalSettingsActions = {
+  setLocalSetting: <K extends keyof LocalSettingsState>(key: K, value: LocalSettingsState[K]) => void
+}
+
+type LocalSettingsStore = LocalSettingsState & LocalSettingsActions
+
+export const initialLocalSettings: LocalSettingsState = {
+  cloudUrl: import.meta.env.VITE_THUNDERBOLT_CLOUD_URL || 'http://localhost:8000/v1',
+  debugPosthog: false,
+  isNativeFetchEnabled: false,
+  hapticsEnabled: true,
+  syncEnabled: false,
+  theme: 'system',
+}
+
+export const useLocalSettingsStore = create<LocalSettingsStore>()(
+  persist(
+    (set) => ({
+      ...initialLocalSettings,
+      setLocalSetting: (key, value) => set({ [key]: value }),
+    }),
+    {
+      name: 'thunderbolt-local-settings',
+      // Listed explicitly (rather than spread + omit) so TS errors if a new
+      // LocalSettingsState field is added without persisting it, and so no
+      // future store action can silently leak into localStorage.
+      partialize: (s): LocalSettingsState => ({
+        cloudUrl: s.cloudUrl,
+        debugPosthog: s.debugPosthog,
+        isNativeFetchEnabled: s.isNativeFetchEnabled,
+        hapticsEnabled: s.hapticsEnabled,
+        syncEnabled: s.syncEnabled,
+        theme: s.theme,
+      }),
+    },
+  ),
+)
+
+/**
+ * Type-safe synchronous read for non-React consumers.
+ * Return type narrows per key (e.g. `getLocalSetting('cloudUrl')` → `string`).
+ */
+export const getLocalSetting = <K extends keyof LocalSettingsState>(key: K): LocalSettingsState[K] =>
+  useLocalSettingsStore.getState()[key]
diff --git a/src/widgets/link-preview/widget.tsx b/src/widgets/link-preview/widget.tsx
index 870076e31..ac4527ca8 100644
--- a/src/widgets/link-preview/widget.tsx
+++ b/src/widgets/link-preview/widget.tsx
@@ -6,7 +6,7 @@ import { Card, CardHeader } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useHttpClient } from '@/contexts'
 import { useMessageCache } from '@/hooks/use-message-cache'
-import { useSettings } from '@/hooks/use-settings'
+import { useLocalSettingsStore } from '@/stores/local-settings-store'
 import { fetchLinkPreview } from '@/integrations/thunderbolt-pro/api'
 import type { SourceMetadata } from '@/types/source'
 import { LinkPreview } from './display'
@@ -47,23 +47,23 @@ export const LinkPreviewSkeleton = () => {
 }
 
 /** Builds a proxied image URL via /proxy-image (when direct image URL is known) */
-const buildProxyImageUrl = (imageUrl: string | null | undefined, cloudUrl: string | null): string | null => {
-  if (!imageUrl || !cloudUrl?.trim()) {
+const buildProxyImageUrl = (imageUrl: string | null | undefined, cloudUrl: string): string | null => {
+  if (!imageUrl) {
     return null
   }
   return `${cloudUrl}/pro/link-preview/proxy-image/${encodeURIComponent(imageUrl)}`
 }
 
 /** Builds an image URL via /image (extracts og:image from page and proxies it in one request) */
-const buildPageImageUrl = (pageUrl: string, cloudUrl: string | null): string | null => {
-  if (!pageUrl || !cloudUrl?.trim()) {
+const buildPageImageUrl = (pageUrl: string, cloudUrl: string): string | null => {
+  if (!pageUrl) {
     return null
   }
   return `${cloudUrl}/pro/link-preview/image/${encodeURIComponent(pageUrl)}`
 }
 
 /** Renders a link preview instantly from source registry metadata */
-const InstantLinkPreview = ({ sourceData, cloudUrl }: { sourceData: SourceMetadata; cloudUrl: string | null }) => {
+const InstantLinkPreview = ({ sourceData, cloudUrl }: { sourceData: SourceMetadata; cloudUrl: string }) => {
   return (
     <LinkPreview
       title={sourceData.title || getHostname(sourceData.url)}
@@ -75,19 +75,19 @@ const InstantLinkPreview = ({ sourceData, cloudUrl }: { sourceData: SourceMetada
 }
 
 export const LinkPreviewWidget = ({ url, source, sources, messageId, fetchPreviewFn }: LinkPreviewWidgetProps) => {
-  const { cloudUrl } = useSettings({ cloud_url: 'http://localhost:8000/v1' })
+  const cloudUrl = useLocalSettingsStore((s) => s.cloudUrl)
 
   // Instant render path: resolve from source registry (O(1) index lookup)
   if (source && sources) {
     const sourceIndex = parseInt(source, 10)
     const sourceData = sources[sourceIndex - 1]
     if (sourceData && sourceData.title) {
-      return <InstantLinkPreview sourceData={sourceData} cloudUrl={cloudUrl.value} />
+      return <InstantLinkPreview sourceData={sourceData} cloudUrl={cloudUrl} />
     }
   }
 
   // Fallback: existing fetch-based path
-  return <FetchLinkPreview url={url} messageId={messageId} cloudUrl={cloudUrl.value} fetchPreviewFn={fetchPreviewFn} />
+  return <FetchLinkPreview url={url} messageId={messageId} cloudUrl={cloudUrl} fetchPreviewFn={fetchPreviewFn} />
 }
 
 /** Fallback component that fetches link preview data via the message cache */
@@ -99,7 +99,7 @@ const FetchLinkPreview = ({
 }: {
   url: string
   messageId: string
-  cloudUrl: string | null
+  cloudUrl: string
   fetchPreviewFn?: (params: { url: string }) => Promise<{
     title: string | null
     description: string | null
