diff --git a/src/App.tsx b/src/App.tsx
index f2013a34..1c8db332 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -110,7 +110,8 @@ function App() {
 
   const clientInitialized = useRef(false);
   const hapticsRuntimeRef = useRef<HapticsRuntime | null>(null);
-  const preferences = usePreferences();
+  const midiEnabled = usePreferences((state) => state.midi.enabled);
+  const hapticsEnabled = usePreferences((state) => state.haptics.enabled);
   const connected = useConnectionStore((state) => state.connected);
   const sessionReady = useConnectionStore((state) => state.sessionReady);
   useFileTransferNotifications(client);
@@ -334,7 +335,7 @@ function App() {
   }, [handleAppKeyDown]);
 
   useEffect(() => {
-    if (!preferences.midi.enabled) return;
+    if (!midiEnabled) return;
 
     let cancelled = false;
     import("./VirtualMidiService")
@@ -355,7 +356,7 @@ function App() {
     return () => {
       cancelled = true;
     };
-  }, [preferences.midi.enabled]);
+  }, [midiEnabled]);
 
   // Window subtitle tracks the current room from the room store. On disconnect
   // the client resets the store, which clears roomInfo and so clears the subtitle.
@@ -372,8 +373,8 @@ function App() {
   }, [client, roomInfo]);
 
   useEffect(() => {
-    hapticsRuntimeRef.current?.setEnabled(preferences.haptics.enabled);
-  }, [preferences.haptics.enabled]);
+    hapticsRuntimeRef.current?.setEnabled(hapticsEnabled);
+  }, [hapticsEnabled]);
 
   const handleCommand = useCallback(
     (text: string) => {
diff --git a/src/audio/MediaService.ts b/src/audio/MediaService.ts
index c062b492..dbef624e 100644
--- a/src/audio/MediaService.ts
+++ b/src/audio/MediaService.ts
@@ -175,9 +175,12 @@ export class MediaService {
       window.addEventListener('blur', this.handleWindowBlur);
     }
 
-    this.unsubscribePreferences = usePreferences.subscribe(() => {
-      this.updateBackgroundMuteState();
-    });
+    this.unsubscribePreferences = usePreferences.subscribe(
+      (state) => state.sound.muteInBackground,
+      () => {
+        this.updateBackgroundMuteState();
+      },
+    );
   }
 
   get muted(): boolean {
diff --git a/src/components/HapticsStatus.tsx b/src/components/HapticsStatus.tsx
index a2445cf5..b86eece6 100644
--- a/src/components/HapticsStatus.tsx
+++ b/src/components/HapticsStatus.tsx
@@ -10,7 +10,7 @@ interface HapticsStatusProps {
 }
 
 const HapticsStatus: React.FC<HapticsStatusProps> = () => {
-  const preferences = usePreferences();
+  const hapticsPreferences = usePreferences((state) => state.haptics);
   const [capabilities, setCapabilities] = useState<HapticsCapabilities>(
     hapticsService.getCapabilities()
   );
@@ -61,7 +61,7 @@ const HapticsStatus: React.FC<HapticsStatusProps> = () => {
     }
   };
 
-  if (!preferences.haptics.enabled) {
+  if (!hapticsPreferences.enabled) {
     return (
       <div style={{ padding: "10px" }}>
         <p>Haptics is disabled. Enable it in preferences to use haptics features.</p>
@@ -252,7 +252,7 @@ const HapticsStatus: React.FC<HapticsStatusProps> = () => {
           <p>Bluetooth devices are discovered via in-browser WebBluetooth (Chromium browsers only).</p>
           <p>The server can send haptic commands when the Client.Haptics GMCP package is active.</p>
           <p>Press Escape or use the Emergency Stop button to immediately halt all haptic output.</p>
-          <p>Intensity cap: {(preferences.haptics.intensityCap * 100).toFixed(0)}% | Auto-stop: {preferences.haptics.autoStopTimeout}s</p>
+          <p>Intensity cap: {(hapticsPreferences.intensityCap * 100).toFixed(0)}% | Auto-stop: {hapticsPreferences.autoStopTimeout}s</p>
         </div>
       </details>
     </div>
diff --git a/src/components/MidiStatus.tsx b/src/components/MidiStatus.tsx
index fac1876e..f2947d72 100644
--- a/src/components/MidiStatus.tsx
+++ b/src/components/MidiStatus.tsx
@@ -19,7 +19,7 @@ interface DeviceChangeEvent {
 }
 
 const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
-  const preferences = usePreferences();
+  const midiPreferences = usePreferences((state) => state.midi);
   const [midiPackage, setMidiPackage] = useState<GMCPClientMidi | null>(null);
   const [inputDevices, setInputDevices] = useState<MidiDevice[]>([]);
   const [outputDevices, setOutputDevices] = useState<MidiDevice[]>([]);
@@ -58,7 +58,7 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
 
   // Load devices when MIDI is enabled
   const loadDevices = async () => {
-    if (!preferences.midi.enabled) return;
+    if (!midiPreferences.enabled) return;
     
     // Ensure virtual synthesizer is initialized
     if (!virtualMidiService.initialized) {
@@ -146,7 +146,7 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
   };
 
   useEffect(() => {
-    if (preferences.midi.enabled) {
+    if (midiPreferences.enabled) {
       // Initialize MIDI if not already done
       if (!midiService.isInitialized && midiPackage) {
         midiPackage.ensureInitialized().then(() => {
@@ -227,7 +227,7 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
       });
       setReconnectableDevices({});
     }
-  }, [preferences.midi.enabled, midiService.isInitialized]);
+  }, [midiPreferences.enabled, midiService.isInitialized]);
 
   // Update reconnectable devices when connection state or device lists change
   useEffect(() => {
@@ -363,7 +363,7 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
     return `${noteName}${octave}`;
   };
 
-  if (!preferences.midi.enabled) {
+  if (!midiPreferences.enabled) {
     return (
       <div style={{ padding: "10px" }}>
         <p>MIDI is disabled. Enable it in preferences to use MIDI features.</p>
diff --git a/src/components/editor/editorWindow.test.tsx b/src/components/editor/editorWindow.test.tsx
index dc386715..a3cb4c77 100644
--- a/src/components/editor/editorWindow.test.tsx
+++ b/src/components/editor/editorWindow.test.tsx
@@ -96,12 +96,20 @@ vi.mock('@react-aria/live-announcer', () => ({
 }));
 
 vi.mock('../../stores/preferencesStore', () => ({
-  usePreferences: () => ({
-    editor: {
-      accessibilityMode: false,
-      autocompleteEnabled: true,
-    },
-  }),
+  usePreferences: (
+    selector: (state: {
+      editor: {
+        accessibilityMode: boolean;
+        autocompleteEnabled: boolean;
+      };
+    }) => unknown,
+  ) =>
+    selector({
+      editor: {
+        accessibilityMode: false,
+        autocompleteEnabled: true,
+      },
+    }),
 }));
 
 vi.mock('../../editor/monacoLoader', () => ({
diff --git a/src/components/editor/editorWindow.tsx b/src/components/editor/editorWindow.tsx
index 3294a550..74309380 100644
--- a/src/components/editor/editorWindow.tsx
+++ b/src/components/editor/editorWindow.tsx
@@ -110,9 +110,9 @@ function EditorWindow() {
   const handleEditorBeforeMount = (monaco: Monaco) => {
     registerMooLanguage(monaco);
   };
-  const prefState = usePreferences();
-  const accessibilityMode = prefState.editor.accessibilityMode;
-  const autocompleteEnabled = prefState.editor.autocompleteEnabled;
+  const editorPreferences = usePreferences((state) => state.editor);
+  const accessibilityMode = editorPreferences.accessibilityMode;
+  const autocompleteEnabled = editorPreferences.autocompleteEnabled;
   const editorLanguage = getEditorLanguageForSessionType(session.type);
   const updateMooDiagnostics = React.useCallback((markers: MonacoEditor.IMarkerData[]) => {
     setMooDiagnosticMarkers(markers);
diff --git a/src/components/output.tsx b/src/components/output.tsx
index 2a41c0eb..eed676c8 100644
--- a/src/components/output.tsx
+++ b/src/components/output.tsx
@@ -114,10 +114,8 @@ class Output extends React.Component<Props, State> {
     };
   }
 
-  handlePreferencesChange = () => {
-    this.setState({
-      localEchoActive: usePreferences.getState().general.localEcho,
-    });
+  handlePreferencesChange = (localEchoActive: boolean) => {
+    this.setState({ localEchoActive });
   };
 
   saveOutput = () => {
@@ -481,7 +479,10 @@ componentDidUpdate(
   };
 
   componentDidMount() {
-    this.unsubscribePrefs = usePreferences.subscribe(this.handlePreferencesChange);
+    this.unsubscribePrefs = usePreferences.subscribe(
+      (state) => state.general.localEcho,
+      this.handlePreferencesChange,
+    );
     this.unsubscribeUserlist = useUserlistStore.subscribe(this.handleUserlistVisibility);
     this.unsubscribeConnection = useConnectionStore.subscribe(this.handleConnectionStateChange);
     this.unsubscribeOutputStore = useOutputStore.subscribe(this.handleOutputStoreEntries);
diff --git a/src/components/preferences.tsx b/src/components/preferences.tsx
index b456790f..b06bd646 100644
--- a/src/components/preferences.tsx
+++ b/src/components/preferences.tsx
@@ -7,16 +7,17 @@ import Tabs, { type TabProps } from "./tabs";
 import AutoLogDialog, { type AutoLogDialogRef } from "./AutoLogDialog";
 
 const GeneralTab: React.FC = () => {
-  const state = usePreferences();
+  const general = usePreferences((state) => state.general);
+  const setGeneral = usePreferences((state) => state.setGeneral);
 
   return (
     <div>
       <label>
         <input
           type="checkbox"
-          checked={state.general.localEcho}
+          checked={general.localEcho}
           onChange={(e) =>
-            state.setGeneral({ ...state.general, localEcho: e.target.checked })
+            setGeneral({ ...general, localEcho: e.target.checked })
           }
         />
         Local Echo
@@ -25,10 +26,10 @@ const GeneralTab: React.FC = () => {
       <label>
         <input
           type="checkbox"
-          checked={state.general.syncTimezoneToServer}
+          checked={general.syncTimezoneToServer}
           onChange={(e) =>
-            state.setGeneral({
-              ...state.general,
+            setGeneral({
+              ...general,
               syncTimezoneToServer: e.target.checked,
             })
           }
@@ -39,10 +40,10 @@ const GeneralTab: React.FC = () => {
       <label>
         <input
           type="checkbox"
-          checked={state.general.syncLocationToServer}
+          checked={general.syncLocationToServer}
           onChange={(e) =>
-            state.setGeneral({
-              ...state.general,
+            setGeneral({
+              ...general,
               syncLocationToServer: e.target.checked,
             })
           }
@@ -54,16 +55,17 @@ const GeneralTab: React.FC = () => {
 };
 
 const AutoRead: React.FC = () => {
-  const state = usePreferences();
+  const speech = usePreferences((state) => state.speech);
+  const setSpeech = usePreferences((state) => state.setSpeech);
 
   return (
     <label>
       Auto Read:
       <select
-        value={state.speech.autoreadMode}
+        value={speech.autoreadMode}
         onChange={(e) =>
-          state.setSpeech({
-            ...state.speech,
+          setSpeech({
+            ...speech,
             autoreadMode: e.target.value as AutoreadMode,
           })
         }
@@ -77,16 +79,17 @@ const AutoRead: React.FC = () => {
 };
 
 const VoiceSelection: React.FC = () => {
-  const state = usePreferences();
+  const speech = usePreferences((state) => state.speech);
+  const setSpeech = usePreferences((state) => state.setSpeech);
   const voices = useVoices();
 
   return (
     <label>
       Voice:
       <select
-        value={state.speech.voice}
+        value={speech.voice}
         onChange={(e) =>
-          state.setSpeech({ ...state.speech, voice: e.target.value })
+          setSpeech({ ...speech, voice: e.target.value })
         }
       >
         {voices.map((voice) => (
@@ -100,19 +103,20 @@ const VoiceSelection: React.FC = () => {
 };
 
 const RateSelection: React.FC = () => {
-  const state = usePreferences();
+  const speech = usePreferences((state) => state.speech);
+  const setSpeech = usePreferences((state) => state.setSpeech);
 
   return (
     <label>
-      Rate ({state.speech.rate.toFixed(1)}, range 0.1 - 10.0):
+      Rate ({speech.rate.toFixed(1)}, range 0.1 - 10.0):
       <input
         type="range"
         min="0.1"
         max="10.0"
         step="0.1"
-        value={state.speech.rate}
+        value={speech.rate}
         onChange={(e) =>
-          state.setSpeech({ ...state.speech, rate: parseFloat(e.target.value) })
+          setSpeech({ ...speech, rate: parseFloat(e.target.value) })
         }
       />
     </label>
@@ -120,19 +124,20 @@ const RateSelection: React.FC = () => {
 };
 
 const PitchSelection: React.FC = () => {
-  const state = usePreferences();
+  const speech = usePreferences((state) => state.speech);
+  const setSpeech = usePreferences((state) => state.setSpeech);
 
   return (
     <label>
-      Pitch ({state.speech.pitch.toFixed(1)}, range 0 - 2):
+      Pitch ({speech.pitch.toFixed(1)}, range 0 - 2):
       <input
         type="range"
         min="0"
         max="2"
         step="0.1"
-        value={state.speech.pitch}
+        value={speech.pitch}
         onChange={(e) =>
-          state.setSpeech({ ...state.speech, pitch: parseFloat(e.target.value) })
+          setSpeech({ ...speech, pitch: parseFloat(e.target.value) })
         }
       />
     </label>
@@ -140,19 +145,20 @@ const PitchSelection: React.FC = () => {
 };
 
 const VolumeSelection: React.FC = () => {
-  const state = usePreferences();
+  const speech = usePreferences((state) => state.speech);
+  const setSpeech = usePreferences((state) => state.setSpeech);
 
   return (
     <label>
-      Volume ({state.speech.volume.toFixed(2)}, range 0 - 1):
+      Volume ({speech.volume.toFixed(2)}, range 0 - 1):
       <input
         type="range"
         min="0"
         max="1"
         step="0.1"
-        value={state.speech.volume}
+        value={speech.volume}
         onChange={(e) =>
-          state.setSpeech({ ...state.speech, volume: parseFloat(e.target.value) })
+          setSpeech({ ...speech, volume: parseFloat(e.target.value) })
         }
       />
     </label>
@@ -160,7 +166,7 @@ const VolumeSelection: React.FC = () => {
 };
 
 const PreviewButton: React.FC = () => {
-  const state = usePreferences();
+  const speech = usePreferences((state) => state.speech);
   const [isPlaying, setIsPlaying] = useState(false);
 
   // Add a ref to track if component is mounted
@@ -186,12 +192,12 @@ const PreviewButton: React.FC = () => {
 
       // Find the selected voice
       const voices = speechSynthesis.getVoices();
-      const selectedVoice = voices.find(voice => voice.name === state.speech.voice);
+      const selectedVoice = voices.find(voice => voice.name === speech.voice);
       utterance.voice = selectedVoice || null;
 
-      utterance.rate = state.speech.rate;
-      utterance.pitch = state.speech.pitch;
-      utterance.volume = state.speech.volume;
+      utterance.rate = speech.rate;
+      utterance.pitch = speech.pitch;
+      utterance.volume = speech.volume;
 
       utterance.onend = () => {
         if (isMounted.current) {
@@ -261,16 +267,17 @@ const SpeechTab: React.FC = () => {
 
 
 const SoundsTab: React.FC = () => {
-  const state = usePreferences();
+  const sound = usePreferences((state) => state.sound);
+  const setSound = usePreferences((state) => state.setSound);
 
   return (
     <div>
       <label>
         <input
           type="checkbox"
-          checked={state.sound.muteInBackground}
+          checked={sound.muteInBackground}
           onChange={(e) =>
-            state.setSound({ ...state.sound, muteInBackground: e.target.checked })
+            setSound({ ...sound, muteInBackground: e.target.checked })
           }
         />
         Mute sounds when in background
@@ -280,15 +287,20 @@ const SoundsTab: React.FC = () => {
 };
 
 const EditorTab: React.FC = () => {
-  const state = usePreferences();
-  const editor = state.editor;
+  const editor = usePreferences((state) => state.editor);
+  const setEditorAutocompleteEnabled = usePreferences(
+    (state) => state.setEditorAutocompleteEnabled,
+  );
+  const setEditorAccessibilityMode = usePreferences(
+    (state) => state.setEditorAccessibilityMode,
+  );
 
   const handleAutocompleteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    state.setEditorAutocompleteEnabled(e.target.checked);
+    setEditorAutocompleteEnabled(e.target.checked);
   };
 
   const handleAccessibilityModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    state.setEditorAccessibilityMode(e.target.checked);
+    setEditorAccessibilityMode(e.target.checked);
   };
 
   return (
@@ -308,10 +320,11 @@ const EditorTab: React.FC = () => {
 };
 
 const MidiTab: React.FC = () => {
-  const state = usePreferences();
+  const midi = usePreferences((state) => state.midi);
+  const setMidi = usePreferences((state) => state.setMidi);
 
   const handleMidiEnabledChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    state.setMidi({ enabled: e.target.checked });
+    setMidi({ enabled: e.target.checked });
   };
 
   return (
@@ -319,7 +332,7 @@ const MidiTab: React.FC = () => {
       <label>
         <input
           type="checkbox"
-          checked={state.midi.enabled}
+          checked={midi.enabled}
           onChange={handleMidiEnabledChange}
           aria-describedby="midi-help"
         />
@@ -328,7 +341,7 @@ const MidiTab: React.FC = () => {
       <br />
       <br />
 
-      {state.midi.enabled && (
+      {midi.enabled && (
         <p id="midi-help" style={{ color: "var(--color-text-secondary)", fontSize: "0.9em" }}>
           Device selection and management is available in the MIDI tab when connected to a server.
         </p>
@@ -338,10 +351,11 @@ const MidiTab: React.FC = () => {
 };
 
 const HapticsTab: React.FC = () => {
-  const state = usePreferences();
+  const haptics = usePreferences((state) => state.haptics);
+  const setHaptics = usePreferences((state) => state.setHaptics);
 
   const handleHapticsEnabledChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    state.setHaptics({ ...state.haptics, enabled: e.target.checked });
+    setHaptics({ ...haptics, enabled: e.target.checked });
   };
 
   return (
@@ -349,26 +363,26 @@ const HapticsTab: React.FC = () => {
       <label>
         <input
           type="checkbox"
-          checked={state.haptics.enabled}
+          checked={haptics.enabled}
           onChange={handleHapticsEnabledChange}
           aria-describedby="haptics-bluetooth-help"
         />
         Enable Haptics
       </label>
 
-      {state.haptics.enabled && (
+      {haptics.enabled && (
         <div>
           <br />
           <label>
-            Intensity Cap ({Math.round(state.haptics.intensityCap * 100)}%):
+            Intensity Cap ({Math.round(haptics.intensityCap * 100)}%):
             <input
               type="range"
               min="0"
               max="1"
               step="0.01"
-              value={state.haptics.intensityCap}
+              value={haptics.intensityCap}
               onChange={(e) =>
-                state.setHaptics({ ...state.haptics, intensityCap: parseFloat(e.target.value) })
+                setHaptics({ ...haptics, intensityCap: parseFloat(e.target.value) })
               }
             />
           </label>
@@ -379,9 +393,9 @@ const HapticsTab: React.FC = () => {
               type="number"
               min="1"
               max="60"
-              value={state.haptics.autoStopTimeout}
+              value={haptics.autoStopTimeout}
               onChange={(e) =>
-                state.setHaptics({ ...state.haptics, autoStopTimeout: parseInt(e.target.value, 10) || 1 })
+                setHaptics({ ...haptics, autoStopTimeout: parseInt(e.target.value, 10) || 1 })
               }
             />
           </label>
@@ -396,16 +410,17 @@ const HapticsTab: React.FC = () => {
 };
 
 const KeyboardTab: React.FC = () => {
-  const state = usePreferences();
+  const keyboard = usePreferences((state) => state.keyboard);
+  const setKeyboard = usePreferences((state) => state.setKeyboard);
 
   return (
     <div>
       <label>
         Buffer Navigation Keys:
         <select
-          value={state.keyboard.navigationKeyScheme}
+          value={keyboard.navigationKeyScheme}
           onChange={(e) =>
-            state.setKeyboard({ navigationKeyScheme: e.target.value as NavigationKeyScheme })
+            setKeyboard({ navigationKeyScheme: e.target.value as NavigationKeyScheme })
           }
           aria-describedby="keyboard-nav-help"
         >
@@ -423,18 +438,19 @@ const KeyboardTab: React.FC = () => {
 };
 
 const AutologgingTab: React.FC = () => {
-  const state = usePreferences();
+  const autologging = usePreferences((state) => state.autologging);
+  const setAutologging = usePreferences((state) => state.setAutologging);
   const dialogRef = React.useRef<AutoLogDialogRef | null>(null);
-  const maxMegabytes = Math.round(state.autologging.maxBytes / 1024 / 1024);
+  const maxMegabytes = Math.round(autologging.maxBytes / 1024 / 1024);
 
   return (
     <div>
       <label>
         <input
           type="checkbox"
-          checked={state.autologging.enabled}
+          checked={autologging.enabled}
           onChange={(e) =>
-            state.setAutologging({ ...state.autologging, enabled: e.target.checked })
+            setAutologging({ ...autologging, enabled: e.target.checked })
           }
         />
         Enable Autologging
@@ -448,8 +464,8 @@ const AutologgingTab: React.FC = () => {
           max="2048"
           value={maxMegabytes}
           onChange={(e) =>
-            state.setAutologging({
-              ...state.autologging,
+            setAutologging({
+              ...autologging,
               maxBytes: Math.max(1, parseInt(e.target.value, 10) || 1) * 1024 * 1024,
             })
           }
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index e6433b69..8f597899 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -34,7 +34,8 @@ interface SidebarProps {
 const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
   ({ client, collapsed, onToggleCollapse }, ref) => {
     const users = useUserlistStore((state) => state.players);
-    const preferences = usePreferences(); // Add preferences hook
+    const midiPreferences = usePreferences((state) => state.midi);
+    const hapticsPreferences = usePreferences((state) => state.haptics);
     const [fileTransferExpanded, setFileTransferExpanded] = useState(true); // Example state
 
     // State to track if data has been received for optional tabs
@@ -52,32 +53,32 @@ const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
 
       // Only handle runtime preference changes - initial advertisement handled by Core.Supports
       if (client.connected) {
-        if (preferences.midi.enabled) {
+        if (midiPreferences.enabled) {
           midiPackage.advertiseMidiSupport();
         } else {
           midiPackage.unadvertiseMidiSupport();
         }
       }
-    }, [preferences.midi.enabled, client]);
+    }, [midiPreferences.enabled, client]);
 
     // Handle Haptics support advertisement based on preferences
     useEffect(() => {
       const hapticsPackage = client.gmcp.handlers['Client.Haptics'];
       if (!hapticsPackage) return;
       if (client.connected) {
-        if (preferences.haptics.enabled) {
+        if (hapticsPreferences.enabled) {
           hapticsPackage.advertiseHapticsSupport();
         } else {
           hapticsPackage.unadvertiseHapticsSupport();
         }
       }
-    }, [preferences.haptics.enabled, client]);
+    }, [hapticsPreferences.enabled, client]);
 
     // Wire haptics preferences to the service
     useEffect(() => {
-      hapticsService.intensityCap = preferences.haptics.intensityCap;
-      hapticsService.autoStopTimeoutSecs = preferences.haptics.autoStopTimeout;
-    }, [preferences.haptics.intensityCap, preferences.haptics.autoStopTimeout]);
+      hapticsService.intensityCap = hapticsPreferences.intensityCap;
+      hapticsService.autoStopTimeoutSecs = hapticsPreferences.autoStopTimeout;
+    }, [hapticsPreferences.intensityCap, hapticsPreferences.autoStopTimeout]);
 
     // Define all possible tabs
     const allTabs: TabProps[] = [
@@ -113,13 +114,13 @@ const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
             <MidiStatus client={client} />
           </Suspense>
         ),
-        condition: preferences.midi.enabled,
+        condition: midiPreferences.enabled,
       },
       {
         id: 'haptics-tab',
         label: 'Haptics',
         content: <HapticsStatus client={client} />,
-        condition: preferences.haptics.enabled,
+        condition: hapticsPreferences.enabled,
       },
 
       // { // Removed Skills Tab
diff --git a/src/createConfiguredClient.ts b/src/createConfiguredClient.ts
index 700aed0a..b6bcdb7e 100644
--- a/src/createConfiguredClient.ts
+++ b/src/createConfiguredClient.ts
@@ -246,27 +246,27 @@ export function createConfiguredClient(): MudClient {
     }
   }
 
-  let lastGeneralPreferences = usePreferences.getState().general;
-  const unsubscribeGeneralPreferences = usePreferences.subscribe((state) => {
-    const nextGeneralPreferences = state.general;
-    if (
-      nextGeneralPreferences.syncTimezoneToServer !==
-        lastGeneralPreferences.syncTimezoneToServer &&
-      nextGeneralPreferences.syncTimezoneToServer &&
-      client.connected
-    ) {
-      syncTimezoneToServer(timezonePackage);
-    }
-    if (
-      nextGeneralPreferences.syncLocationToServer !==
-        lastGeneralPreferences.syncLocationToServer &&
-      nextGeneralPreferences.syncLocationToServer &&
-      client.connected
-    ) {
-      syncLocationToServer(client, locationPackage);
-    }
-    lastGeneralPreferences = nextGeneralPreferences;
-  });
+  const unsubscribeGeneralPreferences = usePreferences.subscribe(
+    (state) => state.general,
+    (nextGeneralPreferences, previousGeneralPreferences) => {
+      if (
+        nextGeneralPreferences.syncTimezoneToServer !==
+          previousGeneralPreferences.syncTimezoneToServer &&
+        nextGeneralPreferences.syncTimezoneToServer &&
+        client.connected
+      ) {
+        syncTimezoneToServer(timezonePackage);
+      }
+      if (
+        nextGeneralPreferences.syncLocationToServer !==
+          previousGeneralPreferences.syncLocationToServer &&
+        nextGeneralPreferences.syncLocationToServer &&
+        client.connected
+      ) {
+        syncLocationToServer(client, locationPackage);
+      }
+    },
+  );
   client.registerCleanup(unsubscribeGeneralPreferences);
 
   negotiatePackage?.on("end", () => {
diff --git a/src/logging/AutoLogService.test.ts b/src/logging/AutoLogService.test.ts
index 0a9b6756..14b0b3cf 100644
--- a/src/logging/AutoLogService.test.ts
+++ b/src/logging/AutoLogService.test.ts
@@ -107,4 +107,20 @@ describe("AutoLogService", () => {
 
     service.dispose();
   });
+
+  it("does not prune sessions when an unrelated preference domain changes", async () => {
+    usePreferences.getState().setAutologging({ enabled: true, maxBytes: 1000 });
+    const store = new FakeAutoLogStore();
+    const service = new AutoLogService(store as unknown as AutoLogStore);
+
+    usePreferences.getState().setGeneral({
+      localEcho: true,
+      syncTimezoneToServer: true,
+      syncLocationToServer: false,
+    });
+    await Promise.resolve();
+
+    expect(store.prunedTo).toEqual([]);
+    service.dispose();
+  });
 });
diff --git a/src/logging/AutoLogService.ts b/src/logging/AutoLogService.ts
index 5c8a7ddf..648a25af 100644
--- a/src/logging/AutoLogService.ts
+++ b/src/logging/AutoLogService.ts
@@ -64,21 +64,24 @@ export class AutoLogService {
   private sequence = 0;
   private flushTimer: number | null = null;
   private flushPromise: Promise<void> = Promise.resolve();
+  private unsubscribePreferences: (() => void) | null = null;
 
   constructor(store: AutoLogStore = autoLogStore) {
     this.store = store;
-    usePreferences.subscribe(() => {
-      const preferences = usePreferences.getState().autologging;
-      if (!preferences.enabled) {
-        this.endSession().catch((error) => {
-          console.error("Failed to end autolog session after disabling autologging:", error);
-        });
-      } else {
-        this.store.pruneToMaxBytes(preferences.maxBytes).catch((error) => {
-          console.error("Failed to prune autolog sessions:", error);
-        });
-      }
-    });
+    this.unsubscribePreferences = usePreferences.subscribe(
+      (state) => state.autologging,
+      (preferences) => {
+        if (!preferences.enabled) {
+          this.endSession().catch((error) => {
+            console.error("Failed to end autolog session after disabling autologging:", error);
+          });
+        } else {
+          this.store.pruneToMaxBytes(preferences.maxBytes).catch((error) => {
+            console.error("Failed to prune autolog sessions:", error);
+          });
+        }
+      },
+    );
   }
 
   configureSession(draft: AutoLogSessionDraft | null): void {
@@ -163,6 +166,8 @@ export class AutoLogService {
       window.clearTimeout(this.flushTimer);
       this.flushTimer = null;
     }
+    this.unsubscribePreferences?.();
+    this.unsubscribePreferences = null;
   }
 
   private async ensureSession(): Promise<void> {
diff --git a/src/stores/preferencesStore.test.ts b/src/stores/preferencesStore.test.ts
index 75504b22..14dad416 100644
--- a/src/stores/preferencesStore.test.ts
+++ b/src/stores/preferencesStore.test.ts
@@ -1,8 +1,9 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { AutoreadMode, usePreferences } from "./preferencesStore";
 
 describe("preferencesStore", () => {
   beforeEach(() => {
+    vi.useFakeTimers();
     // Reset to known defaults between tests.
     usePreferences.getState().setGeneral({
       localEcho: false,
@@ -11,9 +12,18 @@ describe("preferencesStore", () => {
     });
     usePreferences.getState().setSound({ muteInBackground: false, volume: 1.0 });
     usePreferences.getState().setMidi({ enabled: false });
+    usePreferences.getState().setAutologging({
+      enabled: false,
+      maxBytes: 100 * 1024 * 1024,
+    });
     localStorage.removeItem("preferences");
   });
 
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+  });
+
   it("exposes default preferences", () => {
     expect(usePreferences.getState().general.localEcho).toBe(false);
     expect(usePreferences.getState().general.syncTimezoneToServer).toBe(true);
@@ -46,6 +56,8 @@ describe("preferencesStore", () => {
       syncTimezoneToServer: false,
       syncLocationToServer: true,
     });
+    expect(setItem).not.toHaveBeenCalled();
+    vi.runAllTimers();
     expect(setItem).toHaveBeenCalledWith("preferences", expect.any(String));
     const lastCall = setItem.mock.calls.at(-1);
     const stored = JSON.parse(lastCall?.[1] as string);
@@ -65,4 +77,74 @@ describe("preferencesStore", () => {
     unsub();
     expect(calls).toBe(1);
   });
+
+  it("notifies selector subscribers only when their preference domain changes", () => {
+    const listener = vi.fn();
+    const unsub = usePreferences.subscribe(
+      (state) => state.autologging,
+      listener,
+    );
+
+    usePreferences.getState().setGeneral({
+      localEcho: true,
+      syncTimezoneToServer: true,
+      syncLocationToServer: false,
+    });
+    expect(listener).not.toHaveBeenCalled();
+
+    const autologging = { enabled: true, maxBytes: 2048 };
+    usePreferences.getState().setAutologging(autologging);
+    expect(listener).toHaveBeenCalledOnce();
+    expect(listener).toHaveBeenCalledWith(
+      autologging,
+      expect.objectContaining({ enabled: false }),
+    );
+
+    unsub();
+  });
+
+  it("debounces a burst of preference persistence writes", () => {
+    const setItem = vi.mocked(localStorage.setItem);
+    setItem.mockClear();
+
+    usePreferences.getState().setSpeech({
+      ...usePreferences.getState().speech,
+      rate: 1.1,
+    });
+    usePreferences.getState().setSpeech({
+      ...usePreferences.getState().speech,
+      rate: 1.2,
+    });
+    usePreferences.getState().setSpeech({
+      ...usePreferences.getState().speech,
+      rate: 1.3,
+    });
+
+    expect(setItem).not.toHaveBeenCalled();
+    vi.runAllTimers();
+    expect(setItem).toHaveBeenCalledOnce();
+
+    const stored = JSON.parse(setItem.mock.calls[0][1]);
+    expect(stored.speech.rate).toBe(1.3);
+  });
+
+  it("flushes pending preference persistence before the page is discarded", () => {
+    const setItem = vi.mocked(localStorage.setItem);
+    setItem.mockClear();
+
+    usePreferences.getState().setSound({
+      muteInBackground: true,
+      volume: 0.5,
+    });
+    expect(setItem).not.toHaveBeenCalled();
+
+    window.dispatchEvent(new Event("pagehide"));
+    expect(setItem).toHaveBeenCalledOnce();
+
+    const stored = JSON.parse(setItem.mock.calls[0][1]);
+    expect(stored.sound).toEqual({
+      muteInBackground: true,
+      volume: 0.5,
+    });
+  });
 });
diff --git a/src/stores/preferencesStore.ts b/src/stores/preferencesStore.ts
index 6e891eb2..1f548686 100644
--- a/src/stores/preferencesStore.ts
+++ b/src/stores/preferencesStore.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 
 export enum AutoreadMode {
   Off = "off",
@@ -84,6 +85,7 @@ type PrefActions = {
 };
 
 const STORAGE_KEY = "preferences";
+const PERSIST_DEBOUNCE_MS = 250;
 
 function getInitialPreferences(): PrefState {
   return {
@@ -162,24 +164,50 @@ function loadPreferences(): PrefState {
  * (`usePreferences.getState()`). Persisted to localStorage in the same raw
  * shape used before the Zustand migration, so existing saved preferences load.
  */
-export const usePreferences = create<PrefState & PrefActions>((set) => ({
-  ...loadPreferences(),
-  setGeneral: (data) => set({ general: data }),
-  setSpeech: (data) => set({ speech: data }),
-  setSound: (data) => set({ sound: data }),
-  setChannels: (data) => set({ channels: data }),
-  setEditorAutocompleteEnabled: (value) =>
-    set((s) => ({ editor: { ...s.editor, autocompleteEnabled: value } })),
-  setEditorAccessibilityMode: (value) =>
-    set((s) => ({ editor: { ...s.editor, accessibilityMode: value } })),
-  setKeyboard: (data) => set({ keyboard: data }),
-  setMidi: (data) => set({ midi: data }),
-  setHaptics: (data) => set({ haptics: data }),
-  setAutologging: (data) => set({ autologging: data }),
-}));
-
-// Persist on every change. JSON.stringify drops the action functions, leaving
-// exactly the PrefState shape the previous store wrote.
+export const usePreferences = create<PrefState & PrefActions>()(
+  subscribeWithSelector((set) => ({
+    ...loadPreferences(),
+    setGeneral: (data) => set({ general: data }),
+    setSpeech: (data) => set({ speech: data }),
+    setSound: (data) => set({ sound: data }),
+    setChannels: (data) => set({ channels: data }),
+    setEditorAutocompleteEnabled: (value) =>
+      set((s) => ({ editor: { ...s.editor, autocompleteEnabled: value } })),
+    setEditorAccessibilityMode: (value) =>
+      set((s) => ({ editor: { ...s.editor, accessibilityMode: value } })),
+    setKeyboard: (data) => set({ keyboard: data }),
+    setMidi: (data) => set({ midi: data }),
+    setHaptics: (data) => set({ haptics: data }),
+    setAutologging: (data) => set({ autologging: data }),
+  })),
+);
+
+let pendingPersistState: PrefState & PrefActions | undefined;
+let persistTimer: number | undefined;
+
+function flushPendingPreferences(): void {
+  if (!pendingPersistState) return;
+
+  if (persistTimer !== undefined) {
+    window.clearTimeout(persistTimer);
+    persistTimer = undefined;
+  }
+
+  // JSON.stringify drops the action functions, leaving exactly the PrefState
+  // shape the previous store wrote.
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(pendingPersistState));
+  pendingPersistState = undefined;
+}
+
 usePreferences.subscribe((state) => {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  pendingPersistState = state;
+  if (persistTimer !== undefined) {
+    window.clearTimeout(persistTimer);
+  }
+  persistTimer = window.setTimeout(
+    flushPendingPreferences,
+    PERSIST_DEBOUNCE_MS,
+  );
 });
+
+window.addEventListener("pagehide", flushPendingPreferences);