diff --git a/src/components/local-storage-input.tsx b/src/components/local-storage-input.tsx
deleted file mode 100644
index 578a0614..00000000
--- a/src/components/local-storage-input.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { InputDescription } from './input-description'
-import { InputLabel } from './input-label'
-
-export interface LocalStorageInputProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  localStorageKey: string
-  label: string
-  placeholder?: string
-  defaultValue: string
-  validationFn?(value: string): Error | null
-  resetKey: number
-  description?: string
-  preSaveFormat?(value: string): string
-  postLoadFormat?(value: string): string
-}
-
-const defaultValidationFunction = (value: string): Error | null => {
-  try {
-    value.split('\n')
-    return null
-  } catch (err) {
-    return err as Error
-  }
-}
-
-const getFromLocalStorage = (postLoadFormat?: (arg0: string) => string) => (key: string, fallback: string) => {
-  let localStorageValue = localStorage.getItem(key)
-  if (localStorageValue != null && postLoadFormat != null) {
-    localStorageValue = postLoadFormat(localStorageValue)
-  }
-  return localStorageValue ?? fallback
-}
-
-/**
- * A Local storage input (text area) component that saves the input to local storage.
- */
-export default ({ resetKey, localStorageKey, label, placeholder, validationFn, defaultValue, description, preSaveFormat, postLoadFormat, ...props }: LocalStorageInputProps): JSX.Element => {
-  const localStorageLoadFn = getFromLocalStorage(postLoadFormat)
-  const [value, setValue] = useState(localStorageLoadFn(localStorageKey, defaultValue))
-  const [error, setError] = useState<null | Error>(null)
-
-  useEffect(() => {
-    setValue(localStorageLoadFn(localStorageKey, defaultValue))
-  }, [resetKey])
-
-  if (validationFn == null) {
-    validationFn = defaultValidationFunction
-  }
-
-  const updateValue = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(e.target.value)
-  }, [])
-
-  const saveValue = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value
-    try {
-      const err = validationFn?.(newValue)
-      if (err != null) {
-        throw err
-      }
-      setValue(newValue)
-      localStorage.setItem(localStorageKey, preSaveFormat?.(newValue) ?? newValue)
-      setError(null)
-    } catch (err) {
-      setError(err as Error)
-    }
-  }, [validationFn, localStorageKey, preSaveFormat])
-
-  props = {
-    ...props,
-    className: `${props.className ?? ''} flex-column items-start`
-  }
-
-  return (
-    <div {...props}>
-      <InputLabel label={label} />
-      <InputDescription description={description} />
-        <textarea
-          className='input-reset ba br2 b--light-silver code lh-copy black-80 bg-white pa2 w-100 mt2'
-          id={localStorageKey}
-          name={localStorageKey}
-          placeholder={placeholder}
-          value={value}
-          onChange={updateValue}
-          onBlur={saveValue}
-        />
-        {error != null && <span className='db lh-copy red pt1 tr f6 w-100'>⬑ {error.message}</span>}
-    </div>
-  )
-}
diff --git a/src/components/textarea-input.tsx b/src/components/textarea-input.tsx
new file mode 100644
index 00000000..8bcc7749
--- /dev/null
+++ b/src/components/textarea-input.tsx
@@ -0,0 +1,65 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { InputDescription } from './input-description.js'
+import { InputLabel } from './input-label.js'
+
+export interface InputProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+  label: string
+  placeholder?: string
+  value: string
+  validationFn?(value: string): Error | null
+  resetKey: number
+  description?: string
+  preSaveFormat?(value: string): any
+  onChange(value: string): void
+}
+
+export default ({ resetKey, onChange, label, placeholder, validationFn, value, description, preSaveFormat, ...props }: InputProps): JSX.Element => {
+  const [internalValue, setInternalValue] = useState(value)
+  const [error, setError] = useState<null | Error>(null)
+
+  useEffect(() => {
+    setInternalValue(value)
+  }, [resetKey, value])
+
+  const updateValue = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInternalValue(e.target.value)
+  }, [])
+
+  const saveValue = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value
+    try {
+      const err = validationFn?.(newValue)
+      if (err != null) {
+        throw err
+      }
+      setInternalValue(newValue)
+
+      onChange(preSaveFormat?.(newValue) ?? newValue)
+      setError(null)
+    } catch (err) {
+      setError(err as Error)
+    }
+  }, [onChange, preSaveFormat, validationFn])
+
+  props = {
+    ...props,
+    className: `${props.className ?? ''} flex-column items-start`
+  }
+
+  return (
+    <div {...props}>
+      <InputLabel label={label} />
+      <InputDescription description={description} />
+        <textarea
+          className='input-reset ba br2 b--light-silver code lh-copy black-80 bg-white pa2 w-100 mt2'
+          id={label}
+          name={label}
+          placeholder={placeholder}
+          value={internalValue}
+          onChange={updateValue}
+          onBlur={saveValue}
+        />
+        {error != null && <span className='db lh-copy red pt1 tr f6 w-100'>⬑ {error.message}</span>}
+    </div>
+  )
+}
diff --git a/src/context/config-context.tsx b/src/context/config-context.tsx
index 2cfa5788..fcd673c6 100644
--- a/src/context/config-context.tsx
+++ b/src/context/config-context.tsx
@@ -1,16 +1,92 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, useCallback, useEffect, useState } from 'react'
+import { getConfig, type ConfigDb } from '../lib/config-db.js'
 import { isConfigPage } from '../lib/is-config-page.js'
+import { getUiComponentLogger } from '../lib/logger.js'
 
 const isLoadedInIframe = window.self !== window.top
 
-export const ConfigContext = createContext({
+type ConfigKey = keyof ConfigDb
+export interface ConfigContextType extends ConfigDb {
+  isConfigExpanded: boolean
+  setConfigExpanded(value: boolean): void
+  setConfig(key: ConfigKey, value: any): void
+}
+
+export const ConfigContext = createContext<ConfigContextType>({
   isConfigExpanded: isLoadedInIframe,
-  setConfigExpanded: (value: boolean) => {}
+  setConfigExpanded: (value: boolean) => {},
+  setConfig: (key, value) => {},
+  gateways: [],
+  routers: [],
+  dnsJsonResolvers: {},
+  enableWss: false,
+  enableWebTransport: false,
+  enableGatewayProviders: false,
+  enableRecursiveGateways: false,
+  debug: ''
 })
 
 export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => {
   const [isConfigExpanded, setConfigExpanded] = useState(isConfigPage(window.location.hash))
+  const [gateways, setGateways] = useState<string[]>([])
+  const [routers, setRouters] = useState<string[]>([])
+  const [dnsJsonResolvers, setDnsJsonResolvers] = useState<Record<string, string>>({})
+  const [enableWss, setEnableWss] = useState(false)
+  const [enableWebTransport, setEnableWebTransport] = useState(false)
+  const [enableGatewayProviders, setEnableGatewayProviders] = useState(false)
+  const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(false)
+  const [debug, setDebug] = useState('')
   const isExplicitlyLoadedConfigPage = isConfigPage(window.location.hash)
+  /**
+   * We need to make sure that the configDb types are loaded with the values from IDB
+   */
+  useEffect(() => {
+    void (async () => {
+      const config = await getConfig(getUiComponentLogger('config-context'))
+      setGateways(config.gateways)
+      setRouters(config.routers)
+      setDnsJsonResolvers(config.dnsJsonResolvers)
+      setEnableWss(config.enableWss)
+      setEnableWebTransport(config.enableWebTransport)
+      setEnableGatewayProviders(config.enableGatewayProviders)
+      setEnableRecursiveGateways(config.enableRecursiveGateways)
+      setDebug(config.debug)
+    })()
+  }, [])
+
+  /**
+   * Sets the config values for the context provider. To save to IDB, use the `setConfig` function from `lib/config-db.ts`.
+   */
+  const setConfigLocal = useCallback((key: ConfigKey, value: any) => {
+    switch (key) {
+      case 'gateways':
+        setGateways(value)
+        break
+      case 'routers':
+        setRouters(value)
+        break
+      case 'dnsJsonResolvers':
+        setDnsJsonResolvers(value)
+        break
+      case 'enableWss':
+        setEnableWss(value)
+        break
+      case 'enableWebTransport':
+        setEnableWebTransport(value)
+        break
+      case 'enableGatewayProviders':
+        setEnableGatewayProviders(value)
+        break
+      case 'enableRecursiveGateways':
+        setEnableRecursiveGateways(value)
+        break
+      case 'debug':
+        setDebug(value)
+        break
+      default:
+        throw new Error(`Unknown config key: ${key}`)
+    }
+  }, [])
 
   const setConfigExpandedWrapped = (value: boolean): void => {
     if (isLoadedInIframe || isExplicitlyLoadedConfigPage) {
@@ -21,7 +97,7 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
   }
 
   return (
-    <ConfigContext.Provider value={{ isConfigExpanded, setConfigExpanded: setConfigExpandedWrapped }}>
+    <ConfigContext.Provider value={{ isConfigExpanded, setConfigExpanded: setConfigExpandedWrapped, setConfig: setConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug }}>
       {children}
     </ConfigContext.Provider>
   )
diff --git a/src/lib/config-db.ts b/src/lib/config-db.ts
index ef0a460f..b484a502 100644
--- a/src/lib/config-db.ts
+++ b/src/lib/config-db.ts
@@ -25,21 +25,14 @@ export const defaultEnableGatewayProviders = true
 
 const configDb = new GenericIDB<ConfigDb>('helia-sw', 'config')
 
-export async function localStorageToIdb (): Promise<void> {
+export async function localStorageToIdb ({ gateways, routers, dnsJsonResolvers, debug }: Pick<ConfigDb, 'gateways' | 'routers' | 'dnsJsonResolvers' | 'debug'>): Promise<void> {
   if (typeof globalThis.localStorage !== 'undefined') {
     await configDb.open()
     const localStorage = globalThis.localStorage
-    const localStorageGatewaysString = localStorage.getItem(LOCAL_STORAGE_KEYS.config.gateways) ?? JSON.stringify(defaultGateways)
-    const localStorageRoutersString = localStorage.getItem(LOCAL_STORAGE_KEYS.config.routers) ?? JSON.stringify(defaultRouters)
-    const localStorageDnsResolvers = localStorage.getItem(LOCAL_STORAGE_KEYS.config.dnsJsonResolvers) ?? JSON.stringify(defaultDnsJsonResolvers)
     const enableRecursiveGateways = localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableRecursiveGateways) === null ? defaultEnableRecursiveGateways : localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableRecursiveGateways) === 'true'
     const enableWss = localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableWss) === null ? defaultEnableWss : localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableWss) === 'true'
     const enableWebTransport = localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableWebTransport) === null ? defaultEnableWebTransport : localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableWebTransport) === 'true'
     const enableGatewayProviders = localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableGatewayProviders) === null ? defaultEnableGatewayProviders : localStorage.getItem(LOCAL_STORAGE_KEYS.config.enableGatewayProviders) === 'true'
-    const debug = localStorage.getItem(LOCAL_STORAGE_KEYS.config.debug) ?? ''
-    const gateways = JSON.parse(localStorageGatewaysString)
-    const routers = JSON.parse(localStorageRoutersString)
-    const dnsJsonResolvers = JSON.parse(localStorageDnsResolvers)
     enable(debug)
 
     await configDb.put('gateways', gateways)
@@ -56,11 +49,8 @@ export async function localStorageToIdb (): Promise<void> {
 
 export async function resetConfig (): Promise<void> {
   await configDb.open()
-  localStorage.removeItem(LOCAL_STORAGE_KEYS.config.gateways)
   await configDb.put('gateways', defaultGateways)
-  localStorage.removeItem(LOCAL_STORAGE_KEYS.config.routers)
   await configDb.put('routers', defaultRouters)
-  localStorage.removeItem(LOCAL_STORAGE_KEYS.config.dnsJsonResolvers)
   await configDb.put('dnsJsonResolvers', defaultDnsJsonResolvers)
   localStorage.removeItem(LOCAL_STORAGE_KEYS.config.enableWss)
   await configDb.put('enableWss', defaultEnableWss)
@@ -70,7 +60,6 @@ export async function resetConfig (): Promise<void> {
   await configDb.put('enableRecursiveGateways', defaultEnableRecursiveGateways)
   localStorage.removeItem(LOCAL_STORAGE_KEYS.config.enableGatewayProviders)
   await configDb.put('enableGatewayProviders', defaultEnableGatewayProviders)
-  localStorage.removeItem(LOCAL_STORAGE_KEYS.config.debug)
   await configDb.put('debug', '')
   configDb.close()
 }
diff --git a/src/lib/input-helpers.ts b/src/lib/input-helpers.ts
new file mode 100644
index 00000000..e68856e8
--- /dev/null
+++ b/src/lib/input-helpers.ts
@@ -0,0 +1,18 @@
+export const convertUrlArrayToInput = (urls: string[]): string => {
+  return urls.join('\n')
+}
+
+export const convertUrlInputToArray = (newlineDelimitedString: string): string[] => {
+  return newlineDelimitedString.length > 0 ? newlineDelimitedString.split('\n').map((u) => u.trim()) : []
+}
+
+export const convertDnsResolverObjectToInput = (dnsResolvers: Record<string, string>): string => {
+  return Object.entries(dnsResolvers).map(([key, url]) => `${key} ${url}`).join('\n')
+}
+
+export const convertDnsResolverInputToObject = (dnsResolverInput: string): Record<string, string> => {
+  return dnsResolverInput.split('\n').map((u) => u.trim().split(' ')).reduce((acc, [key, url]) => {
+    acc[key] = url
+    return acc
+  }, {})
+}
diff --git a/src/lib/local-storage.ts b/src/lib/local-storage.ts
index f1c2ae2f..60ebd4aa 100644
--- a/src/lib/local-storage.ts
+++ b/src/lib/local-storage.ts
@@ -6,35 +6,12 @@ export function getLocalStorageKey (root: LocalStorageRoots, key: string): strin
 
 export const LOCAL_STORAGE_KEYS = {
   config: {
-    gateways: getLocalStorageKey('config', 'gateways'),
-    routers: getLocalStorageKey('config', 'routers'),
     enableWss: getLocalStorageKey('config', 'enableWss'),
     enableWebTransport: getLocalStorageKey('config', 'enableWebTransport'),
     enableRecursiveGateways: getLocalStorageKey('config', 'enableRecursiveGateways'),
-    enableGatewayProviders: getLocalStorageKey('config', 'enableGatewayProviders'),
-    dnsJsonResolvers: getLocalStorageKey('config', 'dnsJsonResolvers'),
-    debug: getLocalStorageKey('config', 'debug')
+    enableGatewayProviders: getLocalStorageKey('config', 'enableGatewayProviders')
   },
   forms: {
     requestPath: getLocalStorageKey('forms', 'requestPath')
   }
 }
-
-export const convertUrlArrayToInput = (urls: string[]): string => {
-  return urls.join('\n')
-}
-
-export const convertUrlInputToArray = (newlineDelimitedString: string): string[] => {
-  return newlineDelimitedString.length > 0 ? newlineDelimitedString.split('\n').map((u) => u.trim()) : []
-}
-
-export const convertDnsResolverObjectToInput = (dnsResolvers: Record<string, string>): string => {
-  return Object.entries(dnsResolvers).map(([key, url]) => `${key} ${url}`).join('\n')
-}
-
-export const convertDnsResolverInputToObject = (dnsResolverInput: string): Record<string, string> => {
-  return dnsResolverInput.split('\n').map((u) => u.trim().split(' ')).reduce((acc, [key, url]) => {
-    acc[key] = url
-    return acc
-  }, {})
-}
diff --git a/src/pages/config.tsx b/src/pages/config.tsx
index ba106b6b..e71bd66d 100644
--- a/src/pages/config.tsx
+++ b/src/pages/config.tsx
@@ -1,16 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import Header from '../components/Header.jsx'
 import { Collapsible } from '../components/collapsible.jsx'
 import { InputSection } from '../components/input-section.jsx'
-import LocalStorageInput from '../components/local-storage-input.jsx'
 import { LocalStorageToggle } from '../components/local-storage-toggle.jsx'
 import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
-import { ConfigProvider } from '../context/config-context.jsx'
+import Input from '../components/textarea-input.jsx'
+import { ConfigContext, ConfigProvider } from '../context/config-context.jsx'
 import { RouteContext } from '../context/router-context.jsx'
 import { ServiceWorkerProvider } from '../context/service-worker-context.jsx'
 import { HeliaServiceWorkerCommsChannel } from '../lib/channel.js'
-import { defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, getConfig, localStorageToIdb, resetConfig } from '../lib/config-db.js'
-import { LOCAL_STORAGE_KEYS, convertDnsResolverInputToObject, convertDnsResolverObjectToInput, convertUrlArrayToInput, convertUrlInputToArray } from '../lib/local-storage.js'
+import { defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, getConfig, localStorageToIdb, resetConfig } from '../lib/config-db.js'
+import { convertDnsResolverInputToObject, convertDnsResolverObjectToInput, convertUrlArrayToInput, convertUrlInputToArray } from '../lib/input-helpers.js'
+import { LOCAL_STORAGE_KEYS } from '../lib/local-storage.js'
 import { getUiComponentLogger, uiLogger } from '../lib/logger.js'
 import './default-page-styles.css'
 
@@ -76,13 +77,9 @@ const dnsJsonValidationFn = (value: string): Error | null => {
   }
 }
 
-const stringValidationFn = (value: string): Error | null => {
-  // we accept any string
-  return null
-}
-
 function ConfigPage (): React.JSX.Element | null {
-  const { gotoPage } = React.useContext(RouteContext)
+  const { gotoPage } = useContext(RouteContext)
+  const { setConfig, gateways, routers, dnsJsonResolvers, debug } = useContext(ConfigContext)
   const [error, setError] = useState<Error | null>(null)
   const [resetKey, setResetKey] = useState(0)
 
@@ -114,7 +111,7 @@ function ConfigPage (): React.JSX.Element | null {
 
   const saveConfig = useCallback(async () => {
     try {
-      await localStorageToIdb()
+      await localStorageToIdb({ gateways, routers, dnsJsonResolvers, debug })
       log.trace('config-page: sending RELOAD_CONFIG to service worker')
       // update the BASE_URL service worker
       await channel.messageAndWaitForResponse('SW', { target: 'SW', action: 'RELOAD_CONFIG' })
@@ -129,7 +126,7 @@ function ConfigPage (): React.JSX.Element | null {
       log.error('Error saving config', err)
       setError(err as Error)
     }
-  }, [])
+  }, [gateways, routers, dnsJsonResolvers, debug])
 
   const doResetConfig = useCallback(async () => {
     // we need to clear out the localStorage items and make sure default values are set, and that all of our inputs are updated
@@ -138,9 +135,6 @@ function ConfigPage (): React.JSX.Element | null {
     setResetKey((prev) => prev + 1)
   }, [])
 
-  const newlineToJsonArray = (value: string): string => JSON.stringify(convertUrlInputToArray(value))
-  const jsonToNewlineString = (value: string): string => convertUrlArrayToInput(JSON.parse(value))
-
   return (
     <>
     {!isLoadedInIframe && <Header /> }
@@ -171,15 +165,14 @@ function ConfigPage (): React.JSX.Element | null {
             localStorageKey={LOCAL_STORAGE_KEYS.config.enableWebTransport}
             resetKey={resetKey}
           />
-          <LocalStorageInput
+          <Input
             className="e2e-config-page-input e2e-config-page-input-routers"
             description="A newline delimited list of delegated IPFS router URLs."
-            localStorageKey={LOCAL_STORAGE_KEYS.config.routers}
             label='Routers'
             validationFn={urlValidationFn}
-            defaultValue={convertUrlArrayToInput(defaultRouters)}
-            preSaveFormat={newlineToJsonArray}
-            postLoadFormat={jsonToNewlineString}
+            onChange={(value) => { setConfig('routers', value) }}
+            value={convertUrlArrayToInput(routers)}
+            preSaveFormat={(value: string) => value.split('\n')}
             resetKey={resetKey}
           />
         </InputSection>
@@ -192,37 +185,34 @@ function ConfigPage (): React.JSX.Element | null {
             localStorageKey={LOCAL_STORAGE_KEYS.config.enableRecursiveGateways}
             resetKey={resetKey}
           />
-          <LocalStorageInput
+          <Input
             className="e2e-config-page-input e2e-config-page-input-gateways"
             description="A newline delimited list of recursive trustless gateway URLs."
-            localStorageKey={LOCAL_STORAGE_KEYS.config.gateways}
             label='Recursive Gateways'
             validationFn={urlValidationFn}
-            defaultValue={convertUrlArrayToInput(defaultGateways)}
-            preSaveFormat={newlineToJsonArray}
-            postLoadFormat={jsonToNewlineString}
+            value={convertUrlArrayToInput(gateways)}
+            onChange={(value) => { setConfig('gateways', value) }}
+            preSaveFormat={(value: string) => value.split('\n')}
             resetKey={resetKey}
           />
         </InputSection>
         <InputSection label='Other'>
-          <LocalStorageInput
+          <Input
             className="e2e-config-page-input e2e-config-page-input-dnsJsonResolvers"
             description="A newline delimited list of space delimited key+value pairs for DNS (application/dns-json) resolvers. The key is the domain suffix, and the value is the URL of the DNS resolver."
-            localStorageKey={LOCAL_STORAGE_KEYS.config.dnsJsonResolvers}
             label='DNS'
             validationFn={dnsJsonValidationFn}
-            defaultValue={convertDnsResolverObjectToInput(defaultDnsJsonResolvers)}
-            preSaveFormat={(value) => JSON.stringify(convertDnsResolverInputToObject(value))}
-            postLoadFormat={(value) => convertDnsResolverObjectToInput(JSON.parse(value))}
+            value={convertDnsResolverObjectToInput(dnsJsonResolvers)}
+            onChange={(value) => { setConfig('dnsJsonResolvers', value) }}
+            preSaveFormat={(value) => convertDnsResolverInputToObject(value)}
             resetKey={resetKey}
           />
-          <LocalStorageInput
+          <Input
             className="e2e-config-page-input"
             description="A string that enables debug logging. Use '*,*:trace' to enable all debug logging."
-            localStorageKey={LOCAL_STORAGE_KEYS.config.debug}
             label='Debug'
-            validationFn={stringValidationFn}
-            defaultValue=''
+            value={debug}
+            onChange={(value) => { setConfig('debug', value) }}
             resetKey={resetKey}
           />
         </InputSection>