diff --git a/components/shared/status-bar-debug-toggle.tsx b/components/shared/status-bar-debug-toggle.tsx
index e1af527..f2be375 100644
--- a/components/shared/status-bar-debug-toggle.tsx
+++ b/components/shared/status-bar-debug-toggle.tsx
@@ -1,25 +1,24 @@
 'use client'
 
 import { useEffect } from 'react'
-import { useDebugStore } from '@/stores/debug-store'
+import { useUserSettingsStore } from '@/stores/user-settings/store'
 
 export function DebugToggle() {
-  const { debugMode, _hydrated, hydrate, toggleDebugMode } = useDebugStore()
+  const debugMode = useUserSettingsStore(
+    (s) => s.entities.settings.devTools?.debugMode ?? false,
+  )
+  const hydrated = useUserSettingsStore((s) => s.context.hydrated)
+  const setPref = useUserSettingsStore((s) => s.setPref)
 
   useEffect(() => {
-    hydrate(localStorage.getItem('scrum4me:debug-mode') === 'true')
-  }, [hydrate])
-
-  useEffect(() => {
-    if (!_hydrated) return
-    localStorage.setItem('scrum4me:debug-mode', String(debugMode))
+    if (!hydrated) return
     document.body.classList.toggle('debug-mode', debugMode)
-  }, [debugMode, _hydrated])
+  }, [debugMode, hydrated])
 
   return (
     <button
       type="button"
-      onClick={toggleDebugMode}
+      onClick={() => void setPref(['devTools', 'debugMode'], !debugMode)}
       aria-label="Debug-modus togglen"
       aria-pressed={debugMode}
       data-active={debugMode}
diff --git a/stores/debug-store.ts b/stores/debug-store.ts
deleted file mode 100644
index 59d888b..0000000
--- a/stores/debug-store.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { create } from 'zustand'
-
-type DebugStore = {
-  debugMode: boolean
-  _hydrated: boolean
-  hydrate: (value: boolean) => void
-  toggleDebugMode: () => void
-}
-
-export const useDebugStore = create<DebugStore>((set, get) => ({
-  debugMode: false,
-  _hydrated: false,
-  hydrate: (v) => set({ debugMode: v, _hydrated: true }),
-  toggleDebugMode: () => set({ debugMode: !get().debugMode }),
-}))