diff --git a/TODO.md b/TODO.md
index b8ff420d..e81d4549 100644
--- a/TODO.md
+++ b/TODO.md
@@ -14,10 +14,12 @@
 - [ ] Separated server vs client settings + interface (new events?)
 - [x] Schema validation + default with valibot
 - [ ] Use invariant in state handlers + other places
+- [ ] Get rid of /writers endpoint and send that data along with relevant responses
+- [ ] Switch to node subpath imports
 
 ## Schemas
 
-- [ ] Write tests for schemas package
+- [x] Write tests for schemas package
 
 ## Backend
 
@@ -49,7 +51,7 @@
 - [ ] Use new events from BE
 - [ ] Refactor into concept of `content`
 - [ ] Render navigator's bar extra icons in controller
-- [ ] Better settings management via hooks
+- [x] Better settings management via hooks
 
 ## Electron
 
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index f5b16b4e..985b0ba8 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -29,6 +29,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/material": "^5.16.6",
+    "@presenter/schemas": "*",
     "@presenter/swiss-knife": "*",
     "@presenter/themes": "*",
     "@sentry/browser": "^6.19.7",
@@ -36,6 +37,7 @@
     "@tanstack/router-zod-adapter": "^1.51.6",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
+    "dequal": "^2.0.3",
     "detect-browser": "^5.3.0",
     "eventemitter3": "^5.0.1",
     "gurmukhi-utils": "^3.2.2",
@@ -66,7 +68,7 @@
     "@types/scroll-into-view": "^1.16.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/ui": "^1.6.0",
+    "@vitest/ui": "^2.1.4",
     "happy-dom": "^14.11.0",
     "jest-environment-jsdom": "^29.5.0",
     "source-map-explorer": "^2.5.2",
diff --git a/apps/frontend/src/app/__root.tsx b/apps/frontend/src/app/__root.tsx
index bb067890..be6a817f 100644
--- a/apps/frontend/src/app/__root.tsx
+++ b/apps/frontend/src/app/__root.tsx
@@ -5,6 +5,7 @@ import { RecommendedSources, Writer } from '@presenter/contract'
 import { createRootRoute, Navigate, Outlet } from '@tanstack/react-router'
 import classNames from 'classnames'
 import { Provider } from 'jotai'
+import { DevTools } from 'jotai-devtools'
 import { SnackbarProvider } from 'notistack'
 import { PureComponent, Suspense } from 'react'
 
@@ -13,16 +14,9 @@ import { API_URL, isDesktop, isMobile, isTablet } from '~/helpers/consts'
 import {
   HistoryContext,
   RecommendedSourcesContext,
-  SettingsContext,
   WritersContext,
 } from '~/helpers/contexts'
-import { DEFAULT_OPTIONS } from '~/helpers/options'
-import { merge } from '~/helpers/utils'
 import { store } from '~/services/jotai'
-// import controller from '~/services/controller'
-
-// const loadSettings = () => merge( { local: controller.readSettings() }, DEFAULT_OPTIONS )
-const loadSettings = () => DEFAULT_OPTIONS
 
 class App extends PureComponent {
   state = {
@@ -31,25 +25,16 @@ class App extends PureComponent {
     latestLines: {},
     recommendedSources: {} as RecommendedSources['recommendedSources'],
     writers: {},
-    settings: loadSettings(),
   }
 
   componentDidMount() {
-    // Register controller event
-    // controller.on( 'history:viewed-lines', this.onViewedLines )
-    // controller.on( 'history:transitions', this.onTransitionHistory )
-    // controller.on( 'history:latest-lines', this.onLatestLineHistory )
-    // controller.on( 'banis:list', this.onBanis )
-    // controller.on( 'settings', this.onSettings )
-
-    // Get recommended sources and set as settings, if there are none
     void fetch( `${API_URL}/sources` )
       .then( ( res ) => res.json() )
       .then( ( { recommendedSources }: { recommendedSources: RecommendedSources['recommendedSources'] } ) => {
         //* Update default options and settings with fetched recommended sources
-        DEFAULT_OPTIONS.local.sources = recommendedSources
+        // DEFAULT_OPTIONS.local.sources = recommendedSources
         //! Re-load settings since we've modified DEFAULT_OPTIONS directly
-        this.setState( { recommendedSources, settings: loadSettings() } )
+        this.setState( { recommendedSources } )
       } )
 
     // Get writers
@@ -58,40 +43,6 @@ class App extends PureComponent {
       .then( ( { writers }: { writers: Writer[] } ) => this.setState( { writers } ) )
   }
 
-  componentWillUnmount() {
-    // Deregister event listeners from controller
-    // controller.off( 'shabads:current', this.onShabad )
-    // controller.off( 'lines:current', this.onLine )
-    // controller.off( 'history:transitions', this.onTransitionHistory )
-    // controller.off( 'history:latest-lines', this.onLatestLineHistory )
-    // controller.off( 'lines:main', this.onMainLine )
-    // controller.off( 'lines:next', this.onNextLine )
-    // controller.off( 'lines:viewed', this.onViewedLines )
-    // controller.off( 'banis:list', this.onBanis )
-    // controller.off( 'banis:current', this.onBani )
-    // controller.off( 'settings', this.onSettings )
-  }
-
-  onBanis = ( banis: any[] ) => this.setState( { banis } )
-
-  onSettings = ( { global = {}, local = {}, ...settings } ) => {
-    // controller.saveLocalSettings( local, false )
-
-    this.setState( ( state: typeof this.state ) => ( {
-      settings: {
-        ...Object
-          .entries( settings )
-          .filter( ( [ , config ] ) => config )
-          .reduce( ( deviceSettings, [ host, config ] ) => ( {
-            ...deviceSettings,
-            [ host ]: merge( DEFAULT_OPTIONS.local, config ),
-          } ), {} ),
-        // local: controller.readSettings(),
-        global: merge( state.settings.global, global ),
-      },
-    } ) )
-  }
-
   render() {
     const {
       recommendedSources,
@@ -99,7 +50,6 @@ class App extends PureComponent {
       viewedLines,
       transitionHistory,
       latestLines,
-      settings,
     } = this.state
 
     return (
@@ -107,17 +57,15 @@ class App extends PureComponent {
         <Provider store={store}>
           <DevTools store={store} />
           <Suspense fallback={<Loader />}>
-            <SettingsContext.Provider value={settings}>
-              <HistoryContext.Provider value={{ viewedLines, transitionHistory, latestLines }}>
-                <WritersContext.Provider value={writers}>
-                  <RecommendedSourcesContext.Provider value={recommendedSources}>
-                    <SnackbarProvider>
-                      <Outlet />
-                    </SnackbarProvider>
-                  </RecommendedSourcesContext.Provider>
-                </WritersContext.Provider>
-              </HistoryContext.Provider>
-            </SettingsContext.Provider>
+            <HistoryContext.Provider value={{ viewedLines, transitionHistory, latestLines }}>
+              <WritersContext.Provider value={writers}>
+                <RecommendedSourcesContext.Provider value={recommendedSources}>
+                  <SnackbarProvider>
+                    <Outlet />
+                  </SnackbarProvider>
+                </RecommendedSourcesContext.Provider>
+              </WritersContext.Provider>
+            </HistoryContext.Provider>
           </Suspense>
         </Provider>
       </div>
diff --git a/apps/frontend/src/app/overlay/index.lazy.tsx b/apps/frontend/src/app/overlay/index.lazy.tsx
index 86e16750..f611375a 100644
--- a/apps/frontend/src/app/overlay/index.lazy.tsx
+++ b/apps/frontend/src/app/overlay/index.lazy.tsx
@@ -1,44 +1,40 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import classNames from 'classnames'
-import { mapValues } from 'radashi'
-import { useContext } from 'react'
+import { mapValues, sift } from 'radashi'
 
-import { SettingsContext } from '~/helpers/contexts'
 import { LANGUAGES } from '~/helpers/data'
 import { customiseLine, getTransliterators } from '~/helpers/line'
-import { filterFalsyValues } from '~/helpers/utils'
-import { useCurrentLine, useTranslations } from '~/hooks'
+import { useTranslations } from '~/hooks'
+import { useContent } from '~/services/content'
+import { useGlobalSettings } from '~/services/settings'
 import { useStatus } from '~/services/status'
 
 import Line from './-components/Line'
 import ThemeLoader from './-components/ThemeLoader'
 
 const Overlay = () => {
-  const settings = useContext( SettingsContext )
   const { connected } = useStatus()
 
-  const { global: globalSettings } = settings || {}
-  const { overlay: { overlayName, ...overlay } } = globalSettings || {}
+  const [ { overlay: { name, ...overlay, lineEnding } } ] = useGlobalSettings()
 
-  const [ line ] = useCurrentLine()
+  const { line } = useContent()
   const { typeId } = line
-  const { lineEnding } = overlay
 
   const translations = mapValues(
-    useTranslations( filterFalsyValues( [
+    useTranslations( sift( [
       overlay.englishTranslation && LANGUAGES.english,
       overlay.punjabiTranslation && LANGUAGES.punjabi,
       overlay.spanishTranslation && LANGUAGES.spanish,
-    ] ) as number[] ),
+    ] ) ),
     ( line ) => customiseLine( line, { lineEnding, typeId } )
   )
 
   const transliterators = mapValues(
-    getTransliterators( filterFalsyValues( [
+    getTransliterators( sift( [
       overlay.englishTransliteration && LANGUAGES.english,
       overlay.hindiTransliteration && LANGUAGES.hindi,
       overlay.urduTransliteration && LANGUAGES.urdu,
-    ] ) as number[] ),
+    ] ) ),
     ( transliterate ) => ( text: string ) => transliterate(
       customiseLine( text, { lineEnding, typeId } )
     ),
@@ -48,7 +44,7 @@ const Overlay = () => {
 
   return (
     <div className={classNames( { empty: !line }, 'overlay' )}>
-      <ThemeLoader name={overlayName} />
+      <ThemeLoader name={name} />
 
       <Line
         {...overlay}
diff --git a/apps/frontend/src/app/presenter/-components/Display/index.tsx b/apps/frontend/src/app/presenter/-components/Display/index.tsx
index 0b26a395..b949284b 100644
--- a/apps/frontend/src/app/presenter/-components/Display/index.tsx
+++ b/apps/frontend/src/app/presenter/-components/Display/index.tsx
@@ -1,61 +1,55 @@
 import './index.css'
 
 import classNames from 'classnames'
-import { mapValues } from 'radashi'
+import { mapValues, sift } from 'radashi'
 
 import { LANGUAGES } from '~/helpers/data'
 import { customiseLine, getTransliterators } from '~/helpers/line'
-import { ClientSettings } from '~/helpers/options'
-import { filterFalsyValues } from '~/helpers/utils'
 import { useTranslations } from '~/hooks'
 import { useContent } from '~/services/content'
+import { useLocalSettings } from '~/services/settings'
 
 import Line from '../Line'
 
-type DisplayProps = {
-  settings: Pick<ClientSettings, 'layout' | 'display' | 'vishraams' | 'theme'>,
-}
-
-const Display = ( { settings }: DisplayProps ) => {
-  const {
-    layout,
-    display,
-    vishraams,
-    theme: {
-      simpleGraphics: simple,
-      backgroundImage: background,
-      highlightCurrentLine: highlight,
-      dimNextAndPrevLines: dim,
+const Display = () => {
+  const [ {
+    accessibility: {
+      reducedMotion: simple,
     },
-  } = settings
-
-  const { lineEnding } = display
+    dimNextAndPrevLines: dim,
+    backgroundImage: background,
+    highlightCurrentLine: highlight,
+    lineEnding,
+    nextLines: nextLineCount,
+    previousLines: previousLineCount,
+    translations: translationSettings,
+    transliterations,
+  } ] = useLocalSettings()
 
   // Find the correct line in the Shabad
   const { line, lineIndex, lines } = useContent()
 
   // Get the next lines
-  const { nextLines: nextLineCount, previousLines: previousLineCount } = display
   const previousLines = previousLineCount && lineIndex
     ? lines.slice( Math.max( lineIndex - previousLineCount, 0 ), lineIndex )
     : []
   const nextLines = line ? lines.slice( lineIndex + 1, lineIndex + nextLineCount + 1 ) : []
 
   const translations = mapValues(
-    useTranslations( filterFalsyValues( [
-      display.englishTranslation && LANGUAGES.english,
-      display.punjabiTranslation && LANGUAGES.punjabi,
-      display.spanishTranslation && LANGUAGES.spanish,
-    ] ) as number[] ),
+    useTranslations( sift( [
+      translationSettings.english && LANGUAGES.english,
+      translationSettings.punjabi && LANGUAGES.punjabi,
+      translationSettings.spanish && LANGUAGES.spanish,
+    ] ) ),
     ( line ) => customiseLine( line, { lineEnding, typeId: line.typeId } ),
   )
 
   const transliterators = mapValues(
-    getTransliterators( filterFalsyValues( [
-      display.englishTransliteration && LANGUAGES.english,
-      display.hindiTransliteration && LANGUAGES.hindi,
-      display.urduTransliteration && LANGUAGES.urdu,
-    ] ) as number[] ),
+    getTransliterators( sift( [
+      transliterations.english && LANGUAGES.english,
+      transliterations.hindi && LANGUAGES.hindi,
+      transliterations.urdu && LANGUAGES.urdu,
+    ] ) ),
     ( transliterate ) => ( text: string ) => transliterate(
       customiseLine( text, { lineEnding, typeId: line?.typeId } ),
     ),
@@ -70,10 +64,6 @@ const Display = ( { settings }: DisplayProps ) => {
           <Line
             key={id}
             className="previous-line"
-            simpleGraphics={simple}
-            {...layout}
-            {...display}
-            {...vishraams}
             gurmukhi={gurmukhi}
           />
         ) )}
@@ -82,13 +72,9 @@ const Display = ( { settings }: DisplayProps ) => {
       {line && (
         <Line
           className={classNames( { highlight }, 'current-line' )}
-          {...layout}
-          {...display}
-          {...vishraams}
           gurmukhi={line.gurmukhi}
           translations={translations}
           transliterators={transliterators}
-          simpleGraphics={simple}
         />
       )}
 
@@ -97,10 +83,6 @@ const Display = ( { settings }: DisplayProps ) => {
           <Line
             key={id}
             className="next-line"
-            simpleGraphics={simple}
-            {...layout}
-            {...display}
-            {...vishraams}
             gurmukhi={gurmukhi}
           />
         ) )}
diff --git a/apps/frontend/src/app/presenter/-components/Line/index.tsx b/apps/frontend/src/app/presenter/-components/Line/index.tsx
index 7ef2c430..f70a1ae7 100644
--- a/apps/frontend/src/app/presenter/-components/Line/index.tsx
+++ b/apps/frontend/src/app/presenter/-components/Line/index.tsx
@@ -14,134 +14,72 @@ import {
   Transliterators,
 } from '~/helpers/data'
 import { classifyWords, partitionLine, sortBy } from '~/helpers/line'
-import { DEFAULT_OPTIONS } from '~/helpers/options'
-import { filterFalsyObjectValues } from '~/helpers/utils'
+import { useLocalSettings } from '~/services/settings'
 
 type LineProps = {
   className?: string,
   gurmukhi: string,
   translations?: Translations,
   transliterators?: Transliterators,
-  syllabicWeights?: boolean,
-  syllableCount?: boolean,
-  inlineTransliteration?: boolean,
-  inlineColumnGuides?: boolean,
-  spacing?: string,
-  centerText?: boolean,
-  justifyText?: boolean,
-  larivaarGurbani?: boolean,
-  larivaarAssist?: boolean,
-  vishraamColors?: boolean,
-  vishraamCharacters?: boolean,
-  vishraamLight?: boolean,
-  vishraamMedium?: boolean,
-  vishraamHeavy?: boolean,
-  splitOnVishraam?: boolean,
-  simpleGraphics?: boolean,
-  presenterFontSize?: number,
-  relativeGurmukhiFontSize?: number,
-  relativeEnglishFontSize?: number,
-  relativePunjabiFontSize?: number,
-  relativeHindiFontSize?: number,
-  relativeUrduFontSize?: number,
 }
 
-const {
-  display: {
-    syllabicWeights: defaultSyllabicWeights,
-    syllableCount: defaultSyllableCount,
-    larivaarAssist: defaultLarivaarAssist,
-    larivaarGurbani: defaultLarivaarGurbani,
-  },
-  layout: {
-    spacing: defaultSpacing,
-    centerText: defaultCenterText,
-    justifyText: defaultJustifyText,
-    inlineTransliteration: defaultInlineTransliteration,
-    inlineColumnGuides: defaultInlineColumnGuides,
-    splitOnVishraam: defaultSplitOnVishraam,
-    presenterFontSize: defaultPresenterFontSize,
-    relativeGurmukhiFontSize: defaultRelativeGurmukhiFontSize,
-    relativeEnglishFontSize: defaultRelativeEnglishFontSize,
-    relativePunjabiFontSize: defaultRelativePunjabiFontSize,
-    relativeHindiFontSize: defaultRelativeHindiFontSize,
-    relativeUrduFontSize: defaultRelativeUrduFontSize,
-  },
-  vishraams: {
-    vishraamColors: defaultVishraamColors,
-    vishraamCharacters: defaultVishraamCharacters,
-    vishraamHeavy: defaultVishraamHeavy,
-    vishraamMedium: defaultVishraamMedium,
-    vishraamLight: defaultVishraamLight,
-  },
-  theme: { simpleGraphics },
-} = DEFAULT_OPTIONS.local
-
 const Line = ( {
   className = undefined,
   gurmukhi,
   translations = {},
   transliterators = {},
-  syllabicWeights = defaultSyllabicWeights,
-  syllableCount = defaultSyllableCount,
-  inlineTransliteration = defaultInlineTransliteration,
-  inlineColumnGuides = defaultInlineColumnGuides,
-  spacing = defaultSpacing,
-  centerText = defaultCenterText,
-  justifyText = defaultJustifyText,
-  presenterFontSize = defaultPresenterFontSize,
-  relativeGurmukhiFontSize = defaultRelativeGurmukhiFontSize,
-  relativeEnglishFontSize = defaultRelativeEnglishFontSize,
-  relativePunjabiFontSize = defaultRelativePunjabiFontSize,
-  relativeHindiFontSize = defaultRelativeHindiFontSize,
-  relativeUrduFontSize = defaultRelativeUrduFontSize,
-  larivaarGurbani: larivaar = defaultLarivaarGurbani,
-  larivaarAssist = defaultLarivaarAssist,
-  vishraamColors: vishraams = defaultVishraamColors,
-  vishraamCharacters = defaultVishraamCharacters,
-  vishraamLight = defaultVishraamLight,
-  vishraamMedium = defaultVishraamMedium,
-  vishraamHeavy = defaultVishraamHeavy,
-  splitOnVishraam: partition = defaultSplitOnVishraam,
-  simpleGraphics: simple,
 }: LineProps ) => {
-  const fontSizes = filterFalsyObjectValues( {
-    [ LANGUAGES.english ]: relativeEnglishFontSize,
-    [ LANGUAGES.spanish ]: relativeEnglishFontSize,
-    [ LANGUAGES.punjabi ]: relativePunjabiFontSize,
-    [ LANGUAGES.hindi ]: relativeHindiFontSize,
-    [ LANGUAGES.urdu ]: relativeUrduFontSize,
-  } )
+  const [ {
+    fontSizes,
+    larivaarGurbani,
+    larivaarAssist,
+    pauses,
+    accessibility: { reducedMotion },
+    spacing,
+    centerText,
+    inlineColumnGuides,
+    inlineTransliteration,
+    syllabicWeights,
+    syllableCount,
+  } ] = useLocalSettings()
+
+  const languageFontSizes = {
+    [ LANGUAGES.english ]: fontSizes.relativeEnglish,
+    [ LANGUAGES.spanish ]: fontSizes.relativeEnglish,
+    [ LANGUAGES.punjabi ]: fontSizes.relativePunjabi,
+    [ LANGUAGES.hindi ]: fontSizes.relativeHindi,
+    [ LANGUAGES.urdu ]: fontSizes.relativeUrdu,
+  }
 
   return (
     <div
       className={classNames(
         className,
         {
-          assist: larivaar && larivaarAssist,
-          light: vishraams && vishraamLight,
-          medium: vishraams && vishraamMedium,
-          heavy: vishraams && vishraamHeavy,
-          vishraams,
-          larivaar,
-          simple,
+          assist: larivaarGurbani && larivaarAssist,
+          light: pauses.mode === 'all',
+          medium: pauses.mode === 'all',
+          heavy: true,
+          vishraams: pauses.mode === 'all',
+          larivaar: larivaarGurbani,
+          simple: reducedMotion,
           'center-text': centerText,
-          'justify-text': justifyText,
+          'justify-text': spacing,
         },
         'line'
       )}
-      style={{ justifyContent: spacing, fontSize: `${presenterFontSize}vh` }}
+      style={{ justifyContent: spacing, fontSize: `${fontSizes.base}vh` }}
     >
       <TransitionGroup appear exit={false} component={null}>
         <CSSTransition key={gurmukhi} classNames="fade" timeout={0}>
           <p className="source">
-            {partitionLine( gurmukhi, !vishraamCharacters ).map(
+            {partitionLine( gurmukhi, !pauses.characters ).map(
               ( line, lineIndex ) => (
                 <span
                   key={lineIndex}
                   className={classNames(
                     'partition',
-                    partition ? 'block' : 'inline'
+                    pauses.splitLine ? 'block' : 'inline'
                   )}
                 >
                   {line.map( ( { word, type }, i ) => (
@@ -157,7 +95,7 @@ const Line = ( {
                           || syllabicWeights
                           || inlineColumnGuides,
                       } )}
-                      style={relativeGurmukhiFontSize ? { fontSize: `${relativeGurmukhiFontSize}em` } : {}}
+                      style={{ fontSize: `${fontSizes.relativeGurmukhi}em` }}
                     >
                       <span className="gurmukhi">{word}</span>
 
@@ -173,8 +111,8 @@ const Line = ( {
                           .map( ( [ languageId, transliterate ] ) => (
                             <span
                               key={`${word}-${type || ''}-${i}-${languageId}-transliteration`}
-                              className={classNames( LANGUAGE_NAMES[ languageId ] )}
-                              style={fontSizes[ Number( languageId ) ] ? { fontSize: `${fontSizes[ Number( languageId ) ]}em` } : {}}
+                              className={classNames( LANGUAGE_NAMES[ Number( languageId ) ] )}
+                              style={languageFontSizes[ Number( languageId ) ] ? { fontSize: `${languageFontSizes[ Number( languageId ) ]}em` } : {}}
                             >
                               {transliterate( word )}
                             </span>
@@ -201,10 +139,10 @@ const Line = ( {
             >
               <p
                 className={classNames(
-                  LANGUAGE_NAMES[ languageId ],
+                  LANGUAGE_NAMES[ Number( languageId ) ],
                   'translation'
                 )}
-                style={{ fontSize: `${fontSizes[ Number( languageId ) ]}em` }}
+                style={{ fontSize: `${languageFontSizes[ Number( languageId ) ]}em` }}
               >
                 {translation}
               </p>
@@ -222,14 +160,14 @@ const Line = ( {
               >
                 <p
                   className={classNames(
-                    LANGUAGE_NAMES[ languageId ],
+                    LANGUAGE_NAMES[ Number( languageId ) ],
                     'transliteration'
                   )}
-                  style={{ fontSize: `${fontSizes[ Number( languageId ) ]}em` }}
+                  style={{ fontSize: `${languageFontSizes[ Number( languageId ) ]}em` }}
                 >
                   {classifyWords(
                     transliterate( gurmukhi ),
-                    !vishraamCharacters
+                    !pauses.characters
                   ).map( ( { word, type }, i ) => (
                     <span
                       key={`${word}-${type || ''}-${i}`}
diff --git a/apps/frontend/src/app/presenter/controller/navigator/index.tsx b/apps/frontend/src/app/presenter/controller/navigator/index.tsx
index 4c00a4c5..4e591f1a 100644
--- a/apps/frontend/src/app/presenter/controller/navigator/index.tsx
+++ b/apps/frontend/src/app/presenter/controller/navigator/index.tsx
@@ -26,7 +26,6 @@ import { getJumpLines, getNextJumpLine } from '~/helpers/auto-jump'
 import { HistoryContext } from '~/helpers/contexts'
 import { LINE_HOTKEYS } from '~/helpers/keyMap'
 import { setLine, useContent } from '~/services/content'
-import controller from '~/services/controller'
 import { useTracker } from '~/services/tracker'
 
 import ToolbarButton from '../-components/ToolbarButton'
diff --git a/apps/frontend/src/app/presenter/controller/route.tsx b/apps/frontend/src/app/presenter/controller/route.tsx
index f909a359..8062c6e3 100644
--- a/apps/frontend/src/app/presenter/controller/route.tsx
+++ b/apps/frontend/src/app/presenter/controller/route.tsx
@@ -16,13 +16,13 @@ import Typography from '@mui/material/Typography'
 import { createFileRoute, Outlet, ToPathOption, useLocation, useNavigate, useRouter } from '@tanstack/react-router'
 import { zodSearchValidator } from '@tanstack/router-zod-adapter'
 import classNames from 'classnames'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { z } from 'zod'
 
-import { SettingsContext } from '~/helpers/contexts'
 import { usePrevious } from '~/hooks'
 import { useNavigateUtils } from '~/hooks/navigate'
 import { clearLine, useContent } from '~/services/content'
+import { useLocalSettings } from '~/services/settings'
 
 import ToolbarButton from './-components/ToolbarButton'
 
@@ -181,8 +181,7 @@ const Controller = ( props ) => {
     }
   }, [ history, lines, previousLines, navigate, pathname ] )
 
-  const settings = useContext( SettingsContext )
-  const { local: { theme: { simpleGraphics: simple } } } = settings
+  const [ { accessibility: { reducedMotion: simple } } ] = useLocalSettings()
 
   return (
     <div className={classNames( { simple }, 'controller' )}>
diff --git a/apps/frontend/src/app/presenter/controller/search/-components/Result.tsx b/apps/frontend/src/app/presenter/controller/search/-components/Result.tsx
index bbbdb2ff..b888c6db 100644
--- a/apps/frontend/src/app/presenter/controller/search/-components/Result.tsx
+++ b/apps/frontend/src/app/presenter/controller/search/-components/Result.tsx
@@ -2,11 +2,11 @@ import { ListItem } from '@mui/material'
 import classNames from 'classnames'
 import { forwardRef, useContext } from 'react'
 
-import { RecommendedSourcesContext, SettingsContext, WritersContext } from '~/helpers/contexts'
+import { RecommendedSourcesContext, WritersContext } from '~/helpers/contexts'
 import { LANGUAGE_NAMES, SOURCE_ABBREVIATIONS, TRANSLITERATORS } from '~/helpers/data'
 import { customiseLine, getTranslation } from '~/helpers/line'
 import { setContent } from '~/services/content'
-import controller from '~/services/controller'
+import { useLocalSettings } from '~/services/settings'
 
 type ResultProps = {
   gurmukhi: string,
@@ -33,31 +33,31 @@ const Result = forwardRef( ( {
   sourcePage,
   translations,
 }: ResultProps, ref ) => {
-  const { local: {
+  const [ {
     sources,
-    search: {
-      showResultCitations,
-      resultTransliterationLanguage,
-      resultTranslationLanguage,
+    results: {
+      citations,
+      transliterationLanguage,
+      translationLanguage,
       lineEnding,
     },
-  } = {} } = useContext( SettingsContext )
+  } ] = useLocalSettings()
 
   const writers = useContext( WritersContext )
   const recommendedSources = useContext( RecommendedSourcesContext )
 
-  const transliteration = resultTransliterationLanguage && customiseLine(
-    TRANSLITERATORS[ resultTransliterationLanguage ]( gurmukhi ),
+  const transliteration = transliterationLanguage && customiseLine(
+    TRANSLITERATORS[ transliterationLanguage ]( gurmukhi ),
     { lineEnding, typeId },
   )
 
-  const translation = resultTranslationLanguage && translations && customiseLine(
+  const translation = translationLanguage && translations && customiseLine(
     getTranslation( {
       line: { translations },
       shabad: { sourceId },
       recommendedSources,
       sources,
-      languageId: resultTranslationLanguage,
+      languageId: translationLanguage,
     } ),
     { lineEnding, typeId },
   )
@@ -71,7 +71,7 @@ const Result = forwardRef( ( {
   const onClick = () => setContent( { id: shabadId, lineId, type: 'shabad' } )
 
   // Helper render functions for citation
-  const showCitation = showResultCitations && shabad?.section
+  const showCitation = citations && shabad?.section
   const getEnglish = ( { nameEnglish } ) => nameEnglish
   const getWriterName = () => getEnglish( writers[ shabad.writerId ] )
   const getPageName = () => recommendedSources[ shabad.sourceId ].pageNameEnglish
@@ -87,13 +87,13 @@ const Result = forwardRef( ( {
 
         <span className="secondary text">
           {translation && (
-            <div className={classNames( LANGUAGE_NAMES[ resultTranslationLanguage ], 'translation' )}>
+            <div className={classNames( LANGUAGE_NAMES[ translationLanguage ], 'translation' )}>
               {translation}
             </div>
           )}
 
           {transliteration && (
-            <div className={classNames( LANGUAGE_NAMES[ resultTransliterationLanguage ], 'transliteration' )}>
+            <div className={classNames( LANGUAGE_NAMES[ transliterationLanguage ], 'transliteration' )}>
               {translitBeforeMatch && <span className="translit">{translitBeforeMatch}</span>}
               {translitMatch && <span className="translit matched">{translitMatch}</span>}
               {translitAfterMatch && <span className="translit">{translitAfterMatch}</span>}
diff --git a/apps/frontend/src/app/presenter/controller/search/index.tsx b/apps/frontend/src/app/presenter/controller/search/index.tsx
index 1d35747e..a1a46b1c 100644
--- a/apps/frontend/src/app/presenter/controller/search/index.tsx
+++ b/apps/frontend/src/app/presenter/controller/search/index.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconButton, Input, InputAdornment, List } from '@mui/material'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import classNames from 'classnames'
-import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { withNavigationHotkeys } from '~/components/NavigationHotkeys'
 import {
@@ -14,8 +14,8 @@ import {
   SEARCH_CHARS,
   SEARCH_TYPES,
 } from '~/helpers/consts'
-import { SettingsContext } from '~/helpers/contexts'
 import { search, useSearchResults } from '~/services/search'
+import { useLocalSettings } from '~/services/settings'
 
 import Result from './-components/Result'
 import getHighlighter from './-match-highlighter'
@@ -44,13 +44,13 @@ type SearchProps = {
 }
 
 const Search = ( { updateFocus, register, focused }: SearchProps ) => {
-  const { local: {
-    search: {
-      showResultCitations,
-      resultTransliterationLanguage,
-      resultTranslationLanguage,
+  const [ {
+    results: {
+      citations,
+      transliterationLanguage,
+      translationLanguage,
     },
-  } = {} } = useContext( SettingsContext )
+  } ] = useLocalSettings()
 
   // Set the initial search query from URL
   const navigate = useNavigate()
@@ -86,9 +86,9 @@ const Search = ( { updateFocus, register, focused }: SearchProps ) => {
         query: searchValue,
         type: searchType,
         options: {
-          translations: !!resultTranslationLanguage,
-          transliterations: !!resultTransliterationLanguage,
-          citations: !!showResultCitations,
+          translations: !!translationLanguage,
+          transliterations: !!transliterationLanguage,
+          citations: !!citations,
         },
       } )
     } else clearResults()
@@ -106,9 +106,9 @@ const Search = ( { updateFocus, register, focused }: SearchProps ) => {
     } )
   }, [
     navigate,
-    resultTranslationLanguage,
-    resultTransliterationLanguage,
-    showResultCitations,
+    translationLanguage,
+    transliterationLanguage,
+    citations,
   ] )
 
   const filterInputKeys = ( event ) => {
@@ -129,9 +129,9 @@ const Search = ( { updateFocus, register, focused }: SearchProps ) => {
   }, [
     onChange,
     anchor,
-    resultTransliterationLanguage,
-    resultTranslationLanguage,
-    showResultCitations,
+    transliterationLanguage,
+    translationLanguage,
+    citations,
   ] )
 
   useEffect( () => { highlightSearch() }, [] )
diff --git a/apps/frontend/src/app/presenter/route.lazy.tsx b/apps/frontend/src/app/presenter/route.lazy.tsx
index daa32bf3..81810ca9 100644
--- a/apps/frontend/src/app/presenter/route.lazy.tsx
+++ b/apps/frontend/src/app/presenter/route.lazy.tsx
@@ -6,7 +6,7 @@ import { CssBaseline } from '@mui/material'
 import IconButton from '@mui/material/IconButton'
 import { createLazyFileRoute, Outlet, useLocation } from '@tanstack/react-router'
 import classNames from 'classnames'
-import { lazy, Suspense, useContext, useRef, useState } from 'react'
+import { lazy, Suspense, useRef, useState } from 'react'
 import { EventsType, useIdleTimer } from 'react-idle-timer'
 
 import CopyHotkeys from '~/components/CopyHotkeys'
@@ -16,12 +16,12 @@ import Loader from '~/components/Loader'
 import NavigatorHotKeys from '~/components/NavigatorHotkeys'
 import ThemeLoader from '~/components/ThemeLoader'
 import { isDesktop } from '~/helpers/consts'
-import { SettingsContext } from '~/helpers/contexts'
 import { toggleFullscreen } from '~/helpers/electron-utils'
 import { GLOBAL_SHORTCUTS } from '~/helpers/keyMap'
 import { CLIENT_OPTIONS } from '~/helpers/options'
 import { useNavigateUtils } from '~/hooks/navigate'
 import { clearLine, useContent } from '~/services/content'
+import { useLocalSettings } from '~/services/settings'
 
 import StatusToast from './-components/StatusToast'
 import { ControllerLocationHistoryProvider } from './-controller-location-history'
@@ -62,23 +62,22 @@ const Presenter = () => {
 
   const { lines } = useContent()
 
-  const { local: localSettings } = useContext( SettingsContext )
-  const {
-    theme: { themeName },
-    layout: { controllerZoom: zoom },
+  const [ {
+    themeName,
+    controllerZoom,
     hotkeys,
-  } = localSettings
+  } ] = useLocalSettings()
 
   const toggleController = () => void navigate( { to: isControllerOpen ? '/' : '/presenter/controller' } )
 
-  const { controllerZoom } = CLIENT_OPTIONS
+  // const { controllerZoom } = CLIENT_OPTIONS
   // const setZoom = ( controllerZoom: number ) => controller.setSettings( {
   //   layout: { controllerZoom },
   // } )
   const setZoom = () => {}
 
-  const zoomInController = () => setZoom( Math.min( controllerZoom.max, zoom + 0.1 ) )
-  const zoomOutController = () => setZoom( Math.max( controllerZoom.min, zoom - 0.1 ) )
+  const zoomInController = () => setZoom( Math.min( CLIENT_OPTIONS.controllerZoom.max, zoom + 0.1 ) )
+  const zoomOutController = () => setZoom( Math.max( CLIENT_OPTIONS.controllerZoom.min, zoom - 0.1 ) )
   const zoomResetController = () => setZoom( 1 )
 
   const toggleFullscreenController = () => {
@@ -131,10 +130,10 @@ const Presenter = () => {
           <CopyHotkeys>
 
             <Suspense fallback={<Loader />}>
-              {!( isControllerOpen && controllerOnly ) && <Display settings={localSettings} />}
+              {!( isControllerOpen && controllerOnly ) && <Display />}
             </Suspense>
 
-            <div className={classNames( 'controller-container', { fullscreen: controllerOnly } )} style={{ zoom }}>
+            <div className={classNames( 'controller-container', { fullscreen: controllerOnly } )} style={{ zoom: controllerZoom }}>
               <IconButton className="expand-icon" onClick={toggleController} size="large">
                 <FontAwesomeIcon icon={faPlus} />
               </IconButton>
diff --git a/apps/frontend/src/app/settings/-components/DynamicOptions.tsx b/apps/frontend/src/app/settings/-components/DynamicOptions.tsx
index 23ba881e..053b8034 100644
--- a/apps/frontend/src/app/settings/-components/DynamicOptions.tsx
+++ b/apps/frontend/src/app/settings/-components/DynamicOptions.tsx
@@ -2,11 +2,10 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Grid, Typography } from '@mui/material'
 import { ClientSettings, Settings } from '@presenter/contract'
-import { useContext } from 'react'
 
-import { SettingsContext } from '~/helpers/contexts'
-import { CLIENT_OPTIONS, DEFAULT_OPTIONS, FLAT_OPTION_GROUPS } from '~/helpers/options'
+import { CLIENT_OPTIONS, FLAT_OPTION_GROUPS } from '~/helpers/options'
 import controller from '~/services/controller'
+import { useClientsSettings, useLocalSettings } from '~/services/settings'
 
 import SettingComponentFactory, { Button } from './SettingsComponents'
 
@@ -85,12 +84,13 @@ type DynamicOptionsProps = {
 }
 
 const DynamicOptions = ( { device, group }: DynamicOptionsProps ) => {
-  const settings = useContext( SettingsContext )
+  const [ clients ] = useClientsSettings()
+  const [ local ] = useLocalSettings()
 
-  const selectedDeviceSettings = settings[ device ] || settings.local
+  const selectedDeviceSettings = clients[ device ] ?? local
 
   const isGlobal = device === 'global'
-  const defaultSettings = isGlobal ? DEFAULT_OPTIONS.global : DEFAULT_OPTIONS.local
+  // const defaultSettings = isGlobal ? DEFAULT_OPTIONS.global : DEFAULT_OPTIONS.local
 
   const setSettings = <Option extends keyof Settings>
   ( option: Option, value: Settings[typeof option] ) => controller.setSettings(
@@ -101,42 +101,42 @@ const DynamicOptions = ( { device, group }: DynamicOptionsProps ) => {
   const { isProtected: isGroupProtected } = FLAT_OPTION_GROUPS[ group ] || {}
   const isGroupDisabled = device !== 'local' && isGroupProtected
 
-  const renderOptions = () => Object
-    .entries( defaultSettings[ group ] || {} )
-    .map( ( [ option, defaultValue ] ) => {
-      const optionGroup = selectedDeviceSettings[ group ] || {}
-      const value = typeof optionGroup[ option ] === 'undefined' ? defaultValue : optionGroup[ option ]
-      const options = CLIENT_OPTIONS[ option ]
-      const { type, isProtected, name, icon, ...props } = options
-
-      // Determine if the component should be disabled
-      const isDisabled = ( device !== 'local' && isProtected ) || isGroupDisabled
-
-      // Get correct component
-      const Option = SettingComponentFactory( type )
-
-      return (
-        <OptionGrid key={option}>
-          <IconSlot icon={icon} />
-          <NameSlot>{name}</NameSlot>
-          <OptionSlot alignItems="center">
-            <Option
-              {...props}
-              option={option}
-              value={value}
-              onChange={setSettings}
-              disabled={isDisabled}
-            />
-          </OptionSlot>
-        </OptionGrid>
-      )
-    } )
+  // const renderOptions = () => Object
+  //   .entries( defaultSettings[ group ] || {} )
+  //   .map( ( [ option, defaultValue ] ) => {
+  //     const optionGroup = selectedDeviceSettings[ group ] || {}
+  //     const value = typeof optionGroup[ option ] === 'undefined' ? defaultValue : optionGroup[ option ]
+  //     const options = CLIENT_OPTIONS[ option ]
+  //     const { type, isProtected, name, icon, ...props } = options
+
+  //     // Determine if the component should be disabled
+  //     const isDisabled = ( device !== 'local' && isProtected ) || isGroupDisabled
+
+  //     // Get correct component
+  //     const Option = SettingComponentFactory( type )
+
+  //     return (
+  //       <OptionGrid key={option}>
+  //         <IconSlot icon={icon} />
+  //         <NameSlot>{name}</NameSlot>
+  //         <OptionSlot alignItems="center">
+  //           <Option
+  //             {...props}
+  //             option={option}
+  //             value={value}
+  //             onChange={setSettings}
+  //             disabled={isDisabled}
+  //           />
+  //         </OptionSlot>
+  //       </OptionGrid>
+  //     )
+  //   } )
 
   return (
     <>
-      {renderOptions()}
+      {/* {renderOptions()} */}
 
-      <ResetButton disabled={isGroupDisabled} group={group} device={device} />
+      {/* <ResetButton disabled={isGroupDisabled} group={group} device={device} /> */}
     </>
   )
 }
diff --git a/apps/frontend/src/app/settings/client/sources/index.tsx b/apps/frontend/src/app/settings/client/sources/index.tsx
index b9b863a6..9a3d5b69 100644
--- a/apps/frontend/src/app/settings/client/sources/index.tsx
+++ b/apps/frontend/src/app/settings/client/sources/index.tsx
@@ -2,12 +2,11 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Accordion, AccordionDetails, AccordionSummary, Grid, Typography } from '@mui/material'
 import { createFileRoute } from '@tanstack/react-router'
-import { useContext } from 'react'
 
 import Loader from '~/components/Loader'
 import { API_URL } from '~/helpers/consts'
-import { SettingsContext } from '~/helpers/contexts'
 import controller from '~/services/controller'
+import { useClientsSettings, useLocalSettings } from '~/services/settings'
 
 import { ResetButton } from '../../-components/DynamicOptions'
 import { Dropdown as Select } from '../../-components/SettingsComponents'
@@ -17,8 +16,10 @@ type SourcesProps = {
 }
 
 const Sources = ( { device }: SourcesProps ) => {
-  const settings = useContext( SettingsContext )
-  const selectedDeviceSettings = settings[ device ] || settings.local
+  const [ local ] = useLocalSettings()
+  const [ clients ] = useClientsSettings()
+
+  const selectedDeviceSettings = clients[ device ] ?? local
 
   const { languages, sources: { sources, recommendedSources } } = Route.useLoaderData()
 
diff --git a/apps/frontend/src/app/settings/route.tsx b/apps/frontend/src/app/settings/route.tsx
index 25c6b959..a76a28e1 100644
--- a/apps/frontend/src/app/settings/route.tsx
+++ b/apps/frontend/src/app/settings/route.tsx
@@ -24,12 +24,12 @@ import {
 } from '@mui/material'
 import { createFileRoute, Link, Outlet, ToOptions, useLocation } from '@tanstack/react-router'
 import classNames from 'classnames'
-import { Fragment, useContext, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 
 import { withErrorFallback } from '~/components/ErrorFallback'
 import ThemeLoader from '~/components/ThemeLoader'
-import { SettingsContext } from '~/helpers/contexts'
 import { FLAT_OPTION_GROUPS, OPTION_GROUPS } from '~/helpers/options'
+import { useClientsSettings, useGlobalSettings, useLocalSettings } from '~/services/settings'
 
 type ItemProps = {
   name: string,
@@ -58,11 +58,13 @@ const Settings = () => {
   const [ mobileOpen, setMobileOpen ] = useState( false )
   const [ device, setDevice ] = useState( 'local' )
 
-  const settings = useContext( SettingsContext )
+  const [ clients ] = useClientsSettings()
+  const [ local ] = useLocalSettings()
+  const [ global ] = useGlobalSettings()
 
-  const devices = Array.from( Object.keys( settings ) )
+  const devices = Array.from( Object.keys( clients ) )
 
-  const selectedDeviceSettings = settings[ device ] || settings.local
+  const selectedDeviceSettings = clients[ device ] ?? local
 
   useEffect( () => {
     if ( !devices.includes( device ) ) setDevice( 'local' )
@@ -74,8 +76,8 @@ const Settings = () => {
   const menu = [
     [ null, OPTION_GROUPS.none, selectedDeviceSettings, '/settings/client' ],
     [ 'Activities', OPTION_GROUPS.activities, selectedDeviceSettings, '/settings/client' ],
-    [ 'Server', OPTION_GROUPS.server, settings.global, '/settings/server' ],
-    [ 'Tools', OPTION_GROUPS.tools, settings.global, '/settings/tools' ],
+    [ 'Server', OPTION_GROUPS.server, global, '/settings/server' ],
+    [ 'Tools', OPTION_GROUPS.tools, global, '/settings/tools' ],
   ] satisfies [string | null, typeof OPTION_GROUPS[keyof typeof OPTION_GROUPS], typeof selectedDeviceSettings, ToOptions['to']][]
 
   const menuItems = (
@@ -86,7 +88,7 @@ const Settings = () => {
         value={device}
       >
         <MenuItem value="local">This Device</MenuItem>
-        {Object.keys( settings )
+        {Object.keys( { local, global, clients } )
           .filter( ( name ) => ![ 'local', 'global' ].includes( name ) )
           .map( ( device ) => (
             <MenuItem key={device} value={device}>
@@ -114,11 +116,11 @@ const Settings = () => {
     </List>
   )
 
-  const { theme: { simpleGraphics } } = settings.local
-  const { theme: { themeName = '' } = {} } = selectedDeviceSettings
+  const { accessibility: { reducedMotion } } = local
+  const { themeName } = selectedDeviceSettings
 
   return (
-    <div className={classNames( { simple: simpleGraphics }, 'settings' )}>
+    <div className={classNames( { simple: reducedMotion }, 'settings' )}>
       <ThemeLoader name={themeName} />
 
       <Hidden smUp implementation="css">
diff --git a/apps/frontend/src/components/CopyHotkeys.tsx b/apps/frontend/src/components/CopyHotkeys.tsx
index f71717ab..96b59aa2 100644
--- a/apps/frontend/src/components/CopyHotkeys.tsx
+++ b/apps/frontend/src/components/CopyHotkeys.tsx
@@ -2,12 +2,13 @@ import { stripVishraams, toUnicode } from 'gurmukhi-utils'
 import { mapValues } from 'radashi'
 import { ReactNode, useContext } from 'react'
 
-import { RecommendedSourcesContext, SettingsContext, WritersContext } from '~/helpers/contexts'
+import { RecommendedSourcesContext, WritersContext } from '~/helpers/contexts'
 import { LANGUAGES, SOURCE_ABBREVIATIONS } from '~/helpers/data'
 import { COPY_SHORTCUTS } from '~/helpers/keyMap'
 import { customiseLine, getTransliterators } from '~/helpers/line'
 import { useCopyToClipboard, useTranslations } from '~/hooks'
 import { useContent } from '~/services/content'
+import { useLocalSettings } from '~/services/settings'
 
 import GlobalHotKeys from './GlobalHotKeys'
 
@@ -16,7 +17,7 @@ type CopyHotkeysProps = {
 }
 
 const CopyHotkeys = ( { children }: CopyHotkeysProps ) => {
-  const { local: { hotkeys, display: { lineEnding } } } = useContext( SettingsContext )
+  const [ { hotkeys, lineEnding } ] = useLocalSettings()
   const { lines, line } = useContent()
 
   // Get Shabad, writer, sources for getting the author
diff --git a/apps/frontend/src/components/NavigatorHotkeys.tsx b/apps/frontend/src/components/NavigatorHotkeys.tsx
index 5c91c195..3113ff2e 100644
--- a/apps/frontend/src/components/NavigatorHotkeys.tsx
+++ b/apps/frontend/src/components/NavigatorHotkeys.tsx
@@ -2,11 +2,12 @@ import { noop } from 'radashi'
 import { useCallback, useContext, useEffect } from 'react'
 
 import { getJumpLines } from '~/helpers/auto-jump'
-import { HistoryContext, SettingsContext } from '~/helpers/contexts'
+import { HistoryContext } from '~/helpers/contexts'
 import { LINE_HOTKEYS, NAVIGATOR_SHORTCUTS } from '~/helpers/keyMap'
 import { useWindowFocus } from '~/hooks'
 import { setLine, setNextContent, setPreviousContent, useContent } from '~/services/content'
 import controller from '~/services/controller'
+import { useLocalSettings } from '~/services/settings'
 
 import GlobalHotKeys from './GlobalHotKeys'
 
@@ -138,8 +139,7 @@ const NavigatorHotKeys = (
     [ hotkey ]: [ hotkey ],
   } ), {} )
 
-  const settings = useContext( SettingsContext )
-  const { local: { hotkeys } } = settings || {}
+  const [ { hotkeys } ] = useLocalSettings()
 
   const keyMap = { ...hotkeys, ...numberKeyMap }
 
diff --git a/apps/frontend/src/helpers/contexts.tsx b/apps/frontend/src/helpers/contexts.tsx
index 9e191486..324b8ec2 100644
--- a/apps/frontend/src/helpers/contexts.tsx
+++ b/apps/frontend/src/helpers/contexts.tsx
@@ -1,7 +1,5 @@
 import { ComponentType, Context, createContext } from 'react'
 
-import { SettingsState } from './options'
-
 export const
   withContext = <T extends JSX.IntrinsicAttributes,>( Context: Context<T> ) => (
     Component: ComponentType
@@ -11,8 +9,6 @@ export const
     </Context.Consumer>
   )
 
-export const SettingsContext = createContext( {} as SettingsState )
-
 type TransitionHistory = {
   length: number,
 }
diff --git a/apps/frontend/src/helpers/options.ts b/apps/frontend/src/helpers/options.ts
index 25295149..7260ea66 100644
--- a/apps/frontend/src/helpers/options.ts
+++ b/apps/frontend/src/helpers/options.ts
@@ -51,7 +51,7 @@ import {
   faWindowMaximize,
   faWrench,
 } from '@fortawesome/free-solid-svg-icons'
-import type { RecommendedSources } from '@presenter/contract'
+import type { ClientSettings, RecommendedSources, ServerSettings } from '@presenter/contract'
 
 import { API_URL } from './consts'
 import { LANGUAGES } from './data'
@@ -180,7 +180,16 @@ export const CLIENT_OPTIONS = {
     ],
   },
   overlayName: { name: 'Overlay Name', icon: faPalette, type: 'urlDropdown', values: [], url: `${API_URL}/themes/overlay` },
-} satisfies Record<string, ClientOption>
+} satisfies {
+  display: Record<keyof ClientSettings['display'], ClientOption>,
+  layout: Record<keyof ClientSettings['layout'], ClientOption>,
+  theme: Record<keyof ClientSettings['theme'], ClientOption>,
+  vishraams: Record<keyof ClientSettings['vishraams'], ClientOption>,
+  sources: Record<keyof ClientSettings['sources'], ClientOption>,
+  hotkeys: Record<keyof ClientSettings['hotkeys'], ClientOption>,
+  security: Record<keyof ClientSettings['security'], ClientOption>,
+  search: Record<keyof ClientSettings['search'], ClientOption>,
+}
 
 export const SERVER_OPTIONS = {
   connectionEvents: { name: 'Connections', icon: faPlug, type: 'toggle' },
@@ -197,6 +206,7 @@ export const SERVER_OPTIONS = {
 } satisfies Record<string, ServerOption>
 
 // Possible options groups
+// Make these explicit in the UI definition as code, not config
 export const OPTION_GROUPS = {
   //* Linked to local -> settings default options
   none: {
@@ -322,115 +332,3 @@ type FlatOptionGroups = {
 export const FLAT_OPTION_GROUPS = Object
   .values( OPTION_GROUPS )
   .reduce( ( groups, section ) => ( { ...groups, ...section } ), {} as FlatOptionGroups )
-
-// Options with default values
-export const DEFAULT_OPTIONS = {
-  local: {
-    display: {
-      previousLines: 0,
-      nextLines: 1,
-      larivaarGurbani: false,
-      larivaarAssist: false,
-      syllabicWeights: false,
-      syllableCount: false,
-      englishTranslation: true,
-      spanishTranslation: false,
-      punjabiTranslation: false,
-      englishTransliteration: true,
-      hindiTransliteration: false,
-      urduTransliteration: false,
-      lineEnding: true,
-    },
-    layout: {
-      controllerZoom: 1,
-      presenterFontSize: 8,
-      relativeGurmukhiFontSize: 1,
-      relativeEnglishFontSize: 0.6,
-      relativePunjabiFontSize: 0.7,
-      relativeHindiFontSize: 0.71,
-      relativeUrduFontSize: 0.5,
-      centerText: true,
-      justifyText: false,
-      inlineTransliteration: false,
-      inlineColumnGuides: false,
-      splitOnVishraam: true,
-      spacing: CLIENT_OPTIONS.spacing.values[ 2 ].value,
-    },
-    theme: {
-      themeName: 'Day',
-      simpleGraphics: false,
-      backgroundImage: true,
-      highlightCurrentLine: false,
-      dimNextAndPrevLines: true,
-    },
-    vishraams: {
-      vishraamHeavy: true,
-      vishraamMedium: true,
-      vishraamLight: true,
-      vishraamColors: true,
-      vishraamCharacters: false,
-    },
-    sources: {} as RecommendedSources['sources'],
-    hotkeys: Object.values( SHORTCUTS ).reduce( ( hotkeys, { name, sequences } ) => ( {
-      ...hotkeys,
-      [ name ]: sequences,
-    } ), {} ),
-    security: {
-      displayAnalytics: true,
-      private: false,
-    },
-    search: {
-      resultTranslationLanguage: CLIENT_OPTIONS.resultTranslationLanguage.values[ 0 ].value,
-      resultTransliterationLanguage: CLIENT_OPTIONS.resultTransliterationLanguage.values[ 0 ].value,
-      showResultCitations: false,
-      lineEnding: true,
-    },
-  },
-  // Special serverside settings
-  // ! Must be in sync with settings.default.json
-  global: {
-    system: {
-      //! Currently not implemented
-      // launchOnStartup: false,
-      multipleDisplays: true,
-      fullscreenOnLaunch: false,
-      serverAnalytics: true,
-      automaticUpdates: true,
-      betaOptIn: false,
-    },
-    notifications: {
-      connectionEvents: true,
-      disconnectionEvents: false,
-      downloadEvents: true,
-      downloadedEvents: true,
-    },
-    overlay: {
-      overlayName: 'Floating Top Captions',
-      larivaarGurbani: false,
-      larivaarAssist: false,
-      englishTranslation: true,
-      spanishTranslation: false,
-      punjabiTranslation: false,
-      englishTransliteration: false,
-      hindiTransliteration: false,
-      urduTransliteration: false,
-      lineEnding: true,
-    },
-    closedCaptions: {
-      zoomApiToken: null,
-      larivaarGurbani: false,
-      englishTranslation: true,
-      spanishTranslation: false,
-      punjabiTranslation: false,
-      englishTransliteration: false,
-      hindiTransliteration: false,
-      urduTransliteration: false,
-      lineEnding: true,
-    },
-  },
-}
-
-export type ClientSettings = typeof CLIENT_OPTIONS
-export type ServerSettings = typeof SERVER_OPTIONS
-
-export type SettingsState = Record<string, ClientSettings> & { global: ServerSettings }
diff --git a/apps/frontend/src/helpers/utils.ts b/apps/frontend/src/helpers/utils.ts
index 4776cc5c..105d3b81 100644
--- a/apps/frontend/src/helpers/utils.ts
+++ b/apps/frontend/src/helpers/utils.ts
@@ -1,16 +1,9 @@
-import deepmerge from 'deepmerge'
 import { debounce } from 'radashi'
 import { findDOMNode } from 'react-dom'
 import scrollIntoView from 'scroll-into-view'
 
 import { isMac } from './consts'
 
-export const merge = <T1, T2>( source: Partial<T1>, destination: Partial<T2> ) => deepmerge(
-  source,
-  destination,
-  { arrayMerge: ( _, source ) => source },
-)
-
 // eslint-disable-next-line react/no-find-dom-node
 export const scrollIntoCenter = ( ref: any, options?: __ScrollIntoView.Settings ) => scrollIntoView(
   findDOMNode( ref ) as any,
@@ -30,13 +23,3 @@ export const mapPlatformKeys = ( keyMap: KeyMap ) => ( isMac
   } ), {} )
   : keyMap
 )
-
-export const filterFalsyValues = <T>(
-  valuesToFilter: T[]
-) => valuesToFilter.filter( ( item ) => item )
-
-export const filterFalsyObjectValues = <K extends string | number | symbol, T>(
-  valuesToFilter: Record<K, T>
-) => Object.fromEntries(
-  Object.entries( valuesToFilter ).filter( ( [ _, value ] ) => value )
-) as Record<K, T>
diff --git a/apps/frontend/src/hooks/index.ts b/apps/frontend/src/hooks/index.ts
index e226a954..8fe3879c 100644
--- a/apps/frontend/src/hooks/index.ts
+++ b/apps/frontend/src/hooks/index.ts
@@ -3,15 +3,16 @@ import { useSnackbar } from 'notistack'
 import { useContext, useEffect, useRef, useState } from 'react'
 
 import { isMac } from '~/helpers/consts'
-import { RecommendedSourcesContext, SettingsContext } from '~/helpers/contexts'
+import { RecommendedSourcesContext } from '~/helpers/contexts'
 import { getTranslations } from '~/helpers/line'
 import { useContent } from '~/services/content'
+import { useLocalSettings } from '~/services/settings'
 
 export const useTranslations = ( languageIds: number[] ) => {
   const { content, line } = useContent()
 
   const recommendedSources = useContext( RecommendedSourcesContext )
-  const { local: { sources } = {} } = useContext( SettingsContext )
+  const [ { sources } ] = useLocalSettings()
 
   return getTranslations( { content, line, recommendedSources, sources, languageIds } )
 }
diff --git a/apps/frontend/src/services/controller.ts b/apps/frontend/src/services/controller.ts
index ef6042ce..77e7b0f8 100644
--- a/apps/frontend/src/services/controller.ts
+++ b/apps/frontend/src/services/controller.ts
@@ -3,8 +3,6 @@ import EventEmitter from 'eventemitter3'
 import { getNextJumpLine } from '~/helpers/auto-jump'
 import { isDev, isElectron, WS_URL } from '~/helpers/consts'
 import { findLineIndex } from '~/helpers/line'
-import { ClientSettings, DEFAULT_OPTIONS, SettingsState } from '~/helpers/options'
-import { merge } from '~/helpers/utils'
 
 type ShabadOptions = {
   shabadId?: string,
@@ -20,8 +18,8 @@ class Controller extends EventEmitter {
     super()
 
     // Initialise settings
-    this.saveLocalSettings()
-    this.#settings = { local: this.readSettings( true ) } as any
+    // this.saveLocalSettings()
+    // this.#settings = { local: this.readSettings( true ) } as any
 
     this.on( 'ready', this.onReady )
   }
@@ -43,7 +41,7 @@ class Controller extends EventEmitter {
       // Transmit our local settings if the server does not have a copy
       const doSyncSettings = !Object.keys( local ).length
 
-      if ( doSyncSettings ) this.setSettings()
+      // if ( doSyncSettings ) this.setSettings()
 
       // Hook normal settings event handler
       this.on( 'settings:all', this.onSettings )
@@ -56,7 +54,7 @@ class Controller extends EventEmitter {
   }
 
   onClose = () => {
-    this.off( 'settings:all', this.onSettings )
+    // this.off( 'settings:all', this.onSettings )
     console.log( 'Disconnected from server' )
     this.emit( 'disconnected' )
   }
@@ -94,38 +92,38 @@ class Controller extends EventEmitter {
 
   bani = ( { baniId, lineId = null }: any ) => this.sendJSON( 'banis:current', { baniId, lineId } )
 
-  // eslint-disable-next-line class-methods-use-this
-  readSettings = ( onlyOverrides = false ): Partial<ClientSettings> => {
-    try {
-      const localSettings = JSON.parse( localStorage.getItem( 'settings' ) ?? '' )
-      return onlyOverrides ? localSettings : merge( DEFAULT_OPTIONS.local, localSettings )
-    } catch ( err ) {
-      console.warn( 'Settings corrupted. Resetting to default.', err )
-      return onlyOverrides ? {} : DEFAULT_OPTIONS.local
-    }
-  }
+  // // eslint-disable-next-line class-methods-use-this
+  // readSettings = ( onlyOverrides = false ): Partial<ClientSettings> => {
+  //   try {
+  //     const localSettings = JSON.parse( localStorage.getItem( 'settings' ) ?? '' )
+  //     return onlyOverrides ? localSettings : merge( DEFAULT_OPTIONS.local, localSettings )
+  //   } catch ( err ) {
+  //     console.warn( 'Settings corrupted. Resetting to default.', err )
+  //     return onlyOverrides ? {} : DEFAULT_OPTIONS.local
+  //   }
+  // }
 
-  saveLocalSettings = ( settings: Partial<ClientSettings> = {}, combine = true ) => {
-    const local = combine ? merge( this.readSettings( true ), settings ) : settings
+  // saveLocalSettings = ( settings: Partial<ClientSettings> = {}, combine = true ) => {
+  //   const local = combine ? merge( this.readSettings( true ), settings ) : settings
 
-    localStorage.setItem( 'settings', JSON.stringify( local ) )
-  }
+  //   localStorage.setItem( 'settings', JSON.stringify( local ) )
+  // }
 
-  setSettings = ( changed = {}, host = 'local', combine = true ) => {
-    let settings = {}
-    if ( host === 'local' ) {
-      this.saveLocalSettings( changed, combine )
+  // setSettings = ( changed = {}, host = 'local', combine = true ) => {
+  //   let settings = {}
+  //   if ( host === 'local' ) {
+  //     this.saveLocalSettings( changed, combine )
 
-      settings = { local: this.readSettings( true ) }
+  //     settings = { local: this.readSettings( true ) }
 
-      this.emit( 'settings', settings )
-    } else {
-      settings = { [ host ]: combine ? merge( this.#settings[ host ], changed ) : changed }
-    }
+  //     this.emit( 'settings', settings )
+  //   } else {
+  //     settings = { [ host ]: combine ? merge( this.#settings[ host ], changed ) : changed }
+  //   }
 
-    // Transmit all settings
-    this.sendJSON( 'settings:all', settings )
-  }
+  //   // Transmit all settings
+  //   this.sendJSON( 'settings:all', settings )
+  // }
 
   action = ( name: string, params: any ) => this.sendJSON( `action:${name}`, params )
 
@@ -137,15 +135,15 @@ class Controller extends EventEmitter {
     ? ( url: string ) => this.action( 'open-external-url', url )
     : ( url: string ) => window.open( url )
 
-  resetSettings = ( host = 'local' ) => {
-    localStorage.setItem( 'settings', '{}' )
-    this.setSettings( {}, host, false )
-  }
+  // resetSettings = ( host = 'local' ) => {
+  //   localStorage.setItem( 'settings', '{}' )
+  //   this.setSettings( {}, host, false )
+  // }
 
-  resetSettingGroup = ( group: keyof ClientSettings, host = 'local' ) => {
-    const { [ group ]: _, ...settings } = this.#settings[ host ]
-    this.setSettings( settings, host, false )
-  }
+  // resetSettingGroup = ( group: keyof ClientSettings, host = 'local' ) => {
+  //   const { [ group ]: _, ...settings } = this.#settings[ host ]
+  //   this.setSettings( settings, host, false )
+  // }
 }
 
 // Allow only one instance by exporting it
diff --git a/apps/frontend/src/services/settings/index.ts b/apps/frontend/src/services/settings/index.ts
new file mode 100644
index 00000000..7e24a773
--- /dev/null
+++ b/apps/frontend/src/services/settings/index.ts
@@ -0,0 +1,88 @@
+import { ClientSettings, ManyClientPartialSettings, ManyClientSettings, ServerSettings } from '@presenter/contract'
+import { definitions, getDefaults, migrate, parse } from '@presenter/schemas'
+import { decode, encode, merge } from '@presenter/swiss-knife'
+import { dequal } from 'dequal'
+import { atom, useAtom } from 'jotai'
+import { tryit } from 'radashi'
+import { PartialDeep } from 'type-fest'
+
+import { store } from '~/services/jotai'
+import websocketClient from '~/services/websocket-client'
+
+const writeSettings = ( settings: ClientSettings ) => {
+  localStorage.setItem(
+    'settings',
+    encode( { ...settings, schemaVersion: definitions.clientSettings.version } )
+  )
+}
+
+const readSettings = () => {
+  const [ err, data ] = tryit( decode<{ schemaVersion?: number }> )( localStorage.getItem( 'settings' ) ?? '' )
+
+  if ( err ) console.warn( 'Settings non-existent or corrupted. Resetting to default.', err )
+
+  const settings = migrate( definitions.clientSettings, data, data?.schemaVersion ?? 0 )
+  writeSettings( settings )
+
+  return settings
+}
+
+const baseLocalSettingsAtom = atom<ClientSettings>( readSettings() )
+const localSettingsAtom = atom(
+  ( get ) => get( baseLocalSettingsAtom ),
+  ( get, set, update: PartialDeep<ClientSettings> ) => {
+    const local = parse(
+      definitions.clientSettings.schema,
+      merge( get( baseLocalSettingsAtom ), update )
+    )
+
+    set( baseLocalSettingsAtom, local )
+    writeSettings( local )
+    websocketClient.json( 'settings:all', { local } )
+  }
+)
+
+websocketClient.on( 'settings:all', ( settings ) => {
+  if ( !settings.local ) return
+  if ( dequal( store.get( baseLocalSettingsAtom ), settings?.local ) ) return
+
+  const local = parse( definitions.clientSettings.schema, settings?.local )
+  store.set( baseLocalSettingsAtom, local )
+  writeSettings( local )
+} )
+
+const baseClientSettingsAtom = atom<ManyClientSettings>( {} )
+const clientSettingsAtom = atom(
+  ( get ) => get( baseClientSettingsAtom ),
+  ( get, set, clients: ManyClientPartialSettings ) => {
+    websocketClient.json( 'settings:all', { clients } )
+  }
+)
+
+websocketClient.on( 'settings:all', ( settings ) => {
+  if ( !settings.clients ) return
+  if ( dequal( store.get( baseClientSettingsAtom ), settings?.clients ) ) return
+
+  store.set( baseClientSettingsAtom, settings.clients )
+} )
+
+const baseGlobalSettingsAtom = atom<ServerSettings>( getDefaults(
+  definitions.serverSettings.schema
+) )
+const globalSettingsAtom = atom(
+  ( get ) => get( baseGlobalSettingsAtom ),
+  ( get, set, global: PartialDeep<ServerSettings> ) => {
+    websocketClient.json( 'settings:all', { global } )
+  }
+)
+
+websocketClient.on( 'settings:all', ( settings ) => {
+  if ( !settings.global ) return
+  if ( dequal( store.get( baseGlobalSettingsAtom ), settings?.global ) ) return
+
+  store.set( baseGlobalSettingsAtom, settings.global )
+} )
+
+export const useLocalSettings = () => useAtom( localSettingsAtom )
+export const useClientsSettings = () => useAtom( clientSettingsAtom )
+export const useGlobalSettings = () => useAtom( globalSettingsAtom )
diff --git a/apps/frontend/src/services/settings/settings.ts b/apps/frontend/src/services/settings/settings.ts
new file mode 100644
index 00000000..12e62556
--- /dev/null
+++ b/apps/frontend/src/services/settings/settings.ts
@@ -0,0 +1,200 @@
+import {
+  faBell,
+  faClosedCaptioning as farClosedCaptioning,
+  faKeyboard,
+  faPauseCircle,
+  IconDefinition,
+} from '@fortawesome/free-regular-svg-icons'
+import {
+  faAlignCenter,
+  faAlignJustify,
+  faArrowsAltH,
+  faBalanceScale,
+  faBook,
+  faCalculator,
+  faChartPie,
+  faClosedCaptioning,
+  faCompressAlt,
+  faDesktop,
+  faDoorOpen,
+  faDownload,
+  faEllipsisH,
+  faExpandArrowsAlt,
+  faFill,
+  faFillDrip,
+  faFlask,
+  faFont,
+  faHeadphones,
+  faImage,
+  faInfo,
+  faList,
+  faLock,
+  faLowVision,
+  faMarker,
+  faPaintBrush,
+  faPalette,
+  faParagraph,
+  faPercentage,
+  faPlug,
+  faPowerOff,
+  faRemoveFormat,
+  faSearch,
+  faSearchPlus,
+  faServer,
+  faShareSquare,
+  faShieldAlt,
+  faSubscript,
+  faSync,
+  faTags,
+  faTextHeight,
+  faTextWidth,
+  faWindowMaximize,
+  faWrench,
+} from '@fortawesome/free-solid-svg-icons'
+import type { ClientSettings, RecommendedSources, ServerSettings } from '@presenter/contract'
+
+import { API_URL } from './consts'
+import { LANGUAGES } from './data'
+import SHORTCUTS from './keyMap'
+
+type CommonOption = {
+  name: string,
+  icon: IconDefinition,
+}
+
+type DropdownOption<T> = CommonOption & {
+  type: 'dropdown',
+  values: { name: string, value: T }[],
+}
+
+type SliderOption = CommonOption & {
+  type: 'slider',
+  min: number,
+  max: number,
+  step: number,
+}
+
+type ColorPickerOption = CommonOption & {
+  type: 'colorPicker',
+}
+
+type TextInputOption = CommonOption & {
+  type: 'textInput',
+}
+
+type ToggleOption = CommonOption & {
+  type: 'toggle',
+}
+
+type UrlDropdownOption = CommonOption & {
+  type: 'urlDropdown',
+  values: string[],
+  url: string,
+}
+
+type Option<T = unknown> = DropdownOption<T>
+  | SliderOption
+  | ColorPickerOption
+  | TextInputOption
+  | ToggleOption
+  | UrlDropdownOption
+
+type ClientOption<T = unknown> = Option<T> & {
+  defaultValue: T,
+  isProtected?: boolean,
+}
+
+type ServerOption<T = unknown> = Option<T>
+
+export const CLIENT_SETTINGS_CONFIG = {
+  controllerZoom: { name: 'Controller Zoom', icon: faSearchPlus, type: 'slider', min: 0.1, max: 2.5, step: 0.1, defaultValue: 1 },
+  presenterFontSize: { name: 'Font Size', icon: faFont, type: 'slider', min: 3, max: 13, step: 0.1, defaultValue: 8 },
+  relativeGurmukhiFontSize: { name: 'Relative Gurmukhi Font Size', icon: faPercentage, type: 'slider', min: 0.5, max: 1.5, step: 0.01, defaultValue: 1 },
+  relativeEnglishFontSize: { name: 'Relative Latin Font Size', icon: faPercentage, type: 'slider', min: 0.5, max: 1.5, step: 0.01, defaultValue: 0.6 },
+  relativePunjabiFontSize: { name: 'Relative Punjabi Font Size', icon: faPercentage, type: 'slider', min: 0.5, max: 1.5, step: 0.01, defaultValue: 0.7 },
+  relativeHindiFontSize: { name: 'Relative Hindi Font Size', icon: faPercentage, type: 'slider', min: 0.5, max: 1.5, step: 0.01, defaultValue: 0.71 },
+  relativeUrduFontSize: { name: 'Relative Urdu Font Size', icon: faPercentage, type: 'slider', min: 0.5, max: 1.5, step: 0.01, defaultValue: 0.5 },
+  centerText: { name: 'Center Align', icon: faAlignCenter, type: 'toggle', defaultValue: true },
+  justifyText: { name: 'Justify Multiple Lines', icon: faAlignJustify, type: 'toggle', defaultValue: false },
+  inlineTransliteration: { name: 'Inline Transliterations', icon: faCompressAlt, type: 'toggle', defaultValue: false },
+  inlineColumnGuides: { name: 'Inline Column Guides', icon: faCompressAlt, type: 'toggle', defaultValue: false },
+  splitOnVishraam: { name: 'Primary Pause Wrap Gurbani', icon: faParagraph, type: 'toggle', defaultValue: true },
+  spacing: {
+    name: 'Current Line Spacing',
+    type: 'dropdown',
+    icon: faTextHeight,
+    values: [
+      { name: 'Space Between', value: 'space-between' },
+      { name: 'Space Around', value: 'space-around' },
+      { name: 'Space Evenly', value: 'space-evenly' },
+      { name: 'Top', value: 'flex-start' },
+      { name: 'Middle', value: 'center' },
+      { name: 'Bottom', value: 'flex-end' },
+    ],
+    defaultValue: 'space-evenly',
+  },
+  previousLines: { name: 'Previous Lines', icon: faAlignJustify, type: 'slider', min: 0, max: 5, step: 1, defaultValue: 0 },
+  nextLines: { name: 'Next Lines', icon: faAlignJustify, type: 'slider', min: 0, max: 5, step: 1, defaultValue: 1 },
+  larivaarGurbani: { name: 'Larivaar', icon: faTextWidth, type: 'toggle', defaultValue: false },
+  larivaarAssist: { name: 'Larivaar Assist', icon: faMarker, type: 'toggle', defaultValue: false },
+  syllabicWeights: { name: 'Syllabic Weights', icon: faBalanceScale, type: 'toggle', defaultValue: false },
+  syllableCount: { name: 'Syllable Count', icon: faCalculator, type: 'toggle', defaultValue: false },
+  englishTranslation: { name: 'English Translation', icon: faClosedCaptioning, type: 'toggle', defaultValue: true },
+  spanishTranslation: { name: 'Spanish Translation', icon: faClosedCaptioning, type: 'toggle', defaultValue: false },
+  punjabiTranslation: { name: 'Punjabi Translation', icon: faClosedCaptioning, type: 'toggle', defaultValue: false },
+  englishTransliteration: { name: 'English Transliteration', icon: farClosedCaptioning, type: 'toggle', defaultValue: true },
+  hindiTransliteration: { name: 'Hindi Transliteration', icon: farClosedCaptioning, type: 'toggle', defaultValue: false },
+  urduTransliteration: { name: 'Urdu Transliteration', icon: farClosedCaptioning, type: 'toggle', defaultValue: false },
+  lineEnding: { name: 'Hide Line Ending', icon: faRemoveFormat, type: 'toggle', defaultValue: true },
+  themeName: { name: 'Theme Name', icon: faPalette, type: 'urlDropdown', values: [], url: `${API_URL}/themes/presenter`, defaultValue: 'Day' },
+  simpleGraphics: { name: 'Remove Visual Effects', icon: faLowVision, type: 'toggle', defaultValue: false },
+  backgroundImage: { name: 'Background Image', icon: faImage, type: 'toggle', defaultValue: true },
+  highlightCurrentLine: { name: 'Current Line Background', icon: faFillDrip, type: 'toggle', defaultValue: false },
+  dimNextAndPrevLines: { name: 'Next and Previous Lines Background', icon: faFillDrip, type: 'toggle', defaultValue: true },
+  vishraamHeavy: { name: 'Primary Pause', icon: faPauseCircle, type: 'toggle', defaultValue: true },
+  vishraamMedium: { name: 'Secondary Pause', icon: faPauseCircle, type: 'toggle', defaultValue: true },
+  vishraamLight: { name: 'Tertiary Pause', icon: faPauseCircle, type: 'toggle', defaultValue: true },
+  vishraamCharacters: { name: 'Show Symbols', icon: faSubscript, type: 'toggle', defaultValue: false },
+  vishraamColors: { name: 'Show Colors', icon: faFill, type: 'toggle', defaultValue: true },
+  displayAnalytics: { name: 'Display Usage Analytics', icon: faChartPie, type: 'toggle', defaultValue: true },
+  private: { name: 'Private Settings', icon: faLock, type: 'toggle', isProtected: true, defaultValue: false },
+  showResultCitations: { name: 'Show Citations', icon: faTags, type: 'toggle', defaultValue: false },
+  resultTranslationLanguage: {
+    name: 'Translation',
+    icon: faClosedCaptioning,
+    type: 'dropdown',
+    values: [
+      { name: 'None', value: false },
+      { name: 'English', value: LANGUAGES.english },
+      { name: 'Spanish', value: LANGUAGES.spanish },
+      { name: 'Punjabi', value: LANGUAGES.punjabi },
+    ],
+    defaultValue: false,
+  },
+  resultTransliterationLanguage: {
+    name: 'Transliteration',
+    icon: farClosedCaptioning,
+    type: 'dropdown',
+    values: [
+      { name: 'None', value: false },
+      { name: 'English', value: LANGUAGES.english },
+      { name: 'Hindi', value: LANGUAGES.hindi },
+      { name: 'Urdu', value: LANGUAGES.urdu },
+    ],
+    defaultValue: false,
+  },
+} satisfies Record<keyof ClientSettings, ClientOption>
+
+export const SERVER_OPTIONS = {
+  connectionEvents: { name: 'Connections', icon: faPlug, type: 'toggle' },
+  disconnectionEvents: { name: 'Disconnections', icon: faPowerOff, type: 'toggle' },
+  downloadEvents: { name: 'Update Download', icon: faDownload, type: 'toggle' },
+  downloadedEvents: { name: 'Update Download Complete', icon: faServer, type: 'toggle' },
+  launchOnStartup: { name: 'Launch On Startup', icon: faDoorOpen, type: 'toggle' },
+  multipleDisplays: { name: 'Launch on All Displays', icon: faDesktop, type: 'toggle' },
+  fullscreenOnLaunch: { name: 'Launch In Fullscreen', icon: faExpandArrowsAlt, type: 'toggle' },
+  serverAnalytics: { name: 'Server Usage Analytics', icon: faChartPie, type: 'toggle' },
+  automaticUpdates: { name: 'Automatic Updates', icon: faSync, type: 'toggle' },
+  betaOptIn: { name: 'Beta Updates', icon: faFlask, type: 'toggle' },
+  zoomApiToken: { name: 'Zoom API Token', icon: faShareSquare, type: 'textInput' },
+} satisfies Record<string, ServerOption>
diff --git a/package-lock.json b/package-lock.json
index 0640dad9..d82a61e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -389,11 +389,13 @@
         "@tanstack/router-zod-adapter": "^1.51.6",
         "classnames": "^2.3.1",
         "copy-to-clipboard": "^3.3.1",
+        "dequal": "^2.0.3",
         "detect-browser": "^5.3.0",
         "eventemitter3": "^5.0.1",
         "gurmukhi-utils": "^3.2.2",
         "is-mobile": "^3.1.1",
         "jotai": "^2.10.1",
+        "jotai-devtools": "^0.10.1",
         "memoizee": "^0.4.17",
         "notistack": "^3.0.1",
         "partysocket": "^1.0.2",
@@ -1166,6 +1168,65 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fastify/deepmerge": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-2.0.0.tgz",
+      "integrity": "sha512-fsaybTGDyQ5KpPsplQqb9yKdCf2x/pbNpMNk8Tvp3rRz7lVcupKysH4b2ELMN2P4Hak1+UqTYdTj/u4FNV2p0g==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.27",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz",
+      "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@fontsource/roboto": {
       "version": "5.0.14",
       "license": "Apache-2.0"
@@ -1529,6 +1590,50 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@mantine/code-highlight": {
+      "version": "7.13.5",
+      "resolved": "https://registry.npmjs.org/@mantine/code-highlight/-/code-highlight-7.13.5.tgz",
+      "integrity": "sha512-GVMRitF0PwtSK0wiGXL1SxB3tiUtAuYGfQsuuB3DYn5GoiDyoRdVoZ/dBUnVrXjdA+1qDcB69aW37Uswz96k5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "highlight.js": "^11.10.0"
+      },
+      "peerDependencies": {
+        "@mantine/core": "7.13.5",
+        "@mantine/hooks": "7.13.5",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "node_modules/@mantine/core": {
+      "version": "7.13.5",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.13.5.tgz",
+      "integrity": "sha512-1m0C0qH9eIWJZy19M06kKNWbbSLZhsTDvHPqTxMgvFg6JuSN7a6r3v6fqCbvaI1kTQiK51NMe+9vMNVnw4zOsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.27",
+        "clsx": "^2.1.1",
+        "react-number-format": "^5.4.2",
+        "react-remove-scroll": "^2.6.0",
+        "react-textarea-autosize": "8.5.4",
+        "type-fest": "^4.26.1"
+      },
+      "peerDependencies": {
+        "@mantine/hooks": "7.13.5",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "node_modules/@mantine/hooks": {
+      "version": "7.13.5",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.13.5.tgz",
+      "integrity": "sha512-hxFOQn6NeN7fP37VXZh7z5KxwqA9HYmydivIay0jyQTYA4Falc8Pb4ozSxnyFbXyxzUWcFIQL4xayHRvedgE+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.x || ^19.x"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "5.16.6",
       "license": "MIT",
@@ -2401,6 +2506,19 @@
       "resolved": "packages/tsconfig",
       "link": true
     },
+    "node_modules/@redux-devtools/extension": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.3.0.tgz",
+      "integrity": "sha512-X34S/rC8S/M1BIrkYD1mJ5f8vlH0BDqxXrs96cvxSBo4FhMdbhU+GUGsmNYov1xjSyLMHgo8NYrUG8bNX7525g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "immutable": "^4.3.4"
+      },
+      "peerDependencies": {
+        "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/@sentry/browser": {
       "version": "6.19.7",
       "license": "BSD-3-Clause",
@@ -3011,6 +3129,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/base16": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/base16/-/base16-1.0.5.tgz",
+      "integrity": "sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/bluebird": {
       "version": "3.5.42",
       "license": "MIT"
@@ -3178,6 +3302,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
+      "license": "MIT"
+    },
     "node_modules/@types/memoizee": {
       "version": "0.4.11",
       "dev": true,
@@ -4464,6 +4594,12 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==",
+      "license": "MIT"
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "funding": [
@@ -5232,6 +5368,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "license": "MIT",
@@ -5246,6 +5392,16 @@
       "version": "1.1.4",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "license": "ISC",
@@ -5254,6 +5410,21 @@
         "color-support": "bin.js"
       }
     },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
     "node_modules/colorette": {
       "version": "1.0.8",
       "license": "MIT"
@@ -5868,7 +6039,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5905,6 +6075,12 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/detect-repo-changelog": {
       "version": "1.0.1",
       "license": "MIT",
@@ -5925,6 +6101,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
       "dev": true,
@@ -8309,6 +8491,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "dev": true,
@@ -8826,6 +9017,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "license": "BSD-3-Clause",
@@ -8996,6 +9196,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "license": "MIT"
+    },
     "node_modules/import-cwd": {
       "version": "3.0.0",
       "license": "MIT",
@@ -9205,6 +9411,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip-address": {
       "version": "9.0.5",
       "license": "MIT",
@@ -9892,6 +10107,12 @@
         "node": "*"
       }
     },
+    "node_modules/javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
+      "license": "MIT"
+    },
     "node_modules/jest-diff": {
       "version": "29.7.0",
       "dev": true,
@@ -10023,6 +10244,31 @@
         }
       }
     },
+    "node_modules/jotai-devtools": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/jotai-devtools/-/jotai-devtools-0.10.1.tgz",
+      "integrity": "sha512-l5AwNTC1tgcT5Pbjwcajlm+WC3we1qEMoTTe9qnItVIcOB8UIUAdphUrHKDWEIkG7lPgOAfnRgLE1mkvf+Jy3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@mantine/code-highlight": "^7.11.2",
+        "@mantine/core": "^7.11.2",
+        "@mantine/hooks": "^7.11.2",
+        "@redux-devtools/extension": "^3.3.0",
+        "clsx": "^2.1.1",
+        "javascript-stringify": "^2.1.0",
+        "jsondiffpatch": "^0.5.0",
+        "react-base16-styling": "^0.9.1",
+        "react-error-boundary": "^4.0.13",
+        "react-json-tree": "^0.18.0",
+        "react-resizable-panels": "2.0.10"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
     "node_modules/joycon": {
       "version": "3.1.1",
       "dev": true,
@@ -10177,6 +10423,35 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsondiffpatch": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsondiffpatch/-/jsondiffpatch-0.5.0.tgz",
+      "integrity": "sha512-Quz3MvAwHxVYNXsOByL7xI5EB2WYOeFswqaHIA3qOK3isRWTxiplBEocmmru6XmxDB2L7jDNYtYA4FyimoAFEw==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^3.0.0",
+        "diff-match-patch": "^1.0.0"
+      },
+      "bin": {
+        "jsondiffpatch": "bin/jsondiffpatch"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
+    "node_modules/jsondiffpatch/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "license": "MIT",
@@ -10398,6 +10673,12 @@
       "version": "4.17.21",
       "license": "MIT"
     },
+    "node_modules/lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.escaperegexp": {
       "version": "4.1.2",
       "license": "MIT"
@@ -12899,6 +13180,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-base16-styling": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.9.1.tgz",
+      "integrity": "sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "@types/base16": "^1.0.2",
+        "@types/lodash": "^4.14.178",
+        "base16": "^1.0.0",
+        "color": "^3.2.1",
+        "csstype": "^3.0.10",
+        "lodash.curry": "^4.1.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "license": "MIT",
@@ -12910,6 +13206,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-hotkeys": {
       "version": "2.0.0",
       "license": "ISC",
@@ -12932,6 +13240,31 @@
       "version": "16.13.1",
       "license": "MIT"
     },
+    "node_modules/react-json-tree": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.18.0.tgz",
+      "integrity": "sha512-Qe6HKSXrr++n9Y31nkRJ3XvQMATISpqigH1vEKhLwB56+nk5thTP0ITThpjxY6ZG/ubpVq/aEHIcyLP/OPHxeA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "@types/lodash": "^4.14.191",
+        "react-base16-styling": "^0.9.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-number-format": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.2.tgz",
+      "integrity": "sha512-cg//jVdS49PYDgmcYoBnMMHl4XNTMuV723ZnHD2aXYtWWWqbVF3hjQ8iB+UZEuXapLbeA8P8H+1o6ZB1lcw3vg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "dev": true,
@@ -12940,6 +13273,121 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/react-remove-scroll/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/react-resizable-panels": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.0.10.tgz",
+      "integrity": "sha512-1cQl5rp3VDWRL04XXX92lzM1hej2Fe5x+vpjYXcldfOjKwLV5JVrt5T6q0cTB5yfp4Wh+JIdYQ9A5EnZypO1DQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.4.tgz",
+      "integrity": "sha512-eSSjVtRLcLfFwFcariT77t9hcbVJHQV76b51QjQGarQIHml2+gM2lms0n3XrhnDmgK5B+/Z7TmQk5OHNzqYm/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "license": "BSD-3-Clause",
@@ -13096,6 +13544,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "dev": true,
@@ -14134,6 +14589,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
     "node_modules/simple-update-notifier": {
       "version": "1.1.0",
       "license": "MIT",
@@ -15128,6 +15598,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tape": {
       "version": "2.3.3",
       "license": "MIT",
@@ -15725,7 +16201,6 @@
       "version": "4.26.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
       "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
-      "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=16"
@@ -16156,6 +16631,101 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-callback-ref/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "license": "MIT",
@@ -17175,7 +17745,10 @@
       }
     },
     "packages/swiss-knife": {
-      "name": "@presenter/swiss-knife"
+      "name": "@presenter/swiss-knife",
+      "dependencies": {
+        "@fastify/deepmerge": "^2.0.0"
+      }
     },
     "packages/themes": {
       "name": "@presenter/themes"
diff --git a/packages/contract/src/data.ts b/packages/contract/src/data.ts
index 4f67c9be..5d03d45e 100644
--- a/packages/contract/src/data.ts
+++ b/packages/contract/src/data.ts
@@ -14,6 +14,7 @@ import type {
 } from '@shabados/database'
 import type { SetNonNullable } from 'type-fest'
 
+// TODO Use JSONIFY
 export type Line = SetNonNullable<Lines, 'translations' | 'transliterations'>
 export type Shabad = SetNonNullable<Shabads, 'lines' | 'section'>
 export type BaniList = Banis & { id: number }
diff --git a/packages/contract/src/settings.ts b/packages/contract/src/settings.ts
index 1d714116..b535dec3 100644
--- a/packages/contract/src/settings.ts
+++ b/packages/contract/src/settings.ts
@@ -7,6 +7,12 @@ export type ClientSettings = Infer<typeof definitions.clientSettings.schema>
 export type ManyClientSettings = Record<string, ClientSettings>
 export type ManyClientPartialSettings = Record<string, PartialDeep<ClientSettings>>
 
+export type RequiredSettings = {
+  local: ClientSettings,
+  global: ServerSettings,
+  clients: ManyClientSettings,
+}
+
 export type Settings = {
   global?: ServerSettings,
   local?: ClientSettings,
diff --git a/packages/contract/src/websocket.ts b/packages/contract/src/websocket.ts
index 46a2300f..4bbf5799 100644
--- a/packages/contract/src/websocket.ts
+++ b/packages/contract/src/websocket.ts
@@ -2,7 +2,7 @@ import type { Merge } from 'type-fest'
 
 import { BaniList, Content, Line, ViewedLines } from './data'
 import { SearchQuery } from './search'
-import { PartialSettings, Settings } from './settings'
+import { PartialSettings, RequiredSettings } from './settings'
 
 type DefineParameters<
   Name extends string,
@@ -66,6 +66,6 @@ export type ClientEventParameters = DefineParameters<ClientEvent, {
   'history:viewed-lines': ViewedLines,
   // 'history:transitions',
   // 'history:latest-lines',
-  'settings:all': PartialSettings,
+  'settings:all': RequiredSettings,
   'search:results': Line[],
 }>