diff --git a/client/pages/SettingsPage.tsx b/client/pages/SettingsPage.tsx
index b389692..7c28c78 100644
--- a/client/pages/SettingsPage.tsx
+++ b/client/pages/SettingsPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, type ComponentType, type ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { AlertCircle, Moon, RefreshCw, Sun, Users } from 'lucide-react';
 import { api } from '@/api';
@@ -318,6 +319,8 @@ export default function SettingsPage() {
 
   useEffect(() => { loadSettings(); }, [loadSettings]);
 
+  const queryClient = useQueryClient();
+
   const buildPayload = (s: SettingsState) => ({
     currency: s.currency,
     date_format: s.date_format,
@@ -334,12 +337,16 @@ export default function SettingsPage() {
 
   // Auto-save: every change persists on its own — no Save button. Toggles and
   // selects feel instant (short debounce); typed inputs get a longer one so we
-  // don't save half-typed numbers.
+  // don't save half-typed numbers. After a save, invalidate the ['settings']
+  // query so the tracker (which reads its display toggles from that cache) picks
+  // up the change instead of showing a stale value for up to its staleTime.
   const { status: saveStatus, schedule } = useAutoSave(
-    (payload) => api.saveSettings(payload).catch((err) => {
-      toast.error(errMessage(err, 'Failed to save settings.'));
-      throw err;
-    }),
+    (payload) => api.saveSettings(payload)
+      .then((res) => { queryClient.invalidateQueries({ queryKey: ['settings'] }); return res; })
+      .catch((err) => {
+        toast.error(errMessage(err, 'Failed to save settings.'));
+        throw err;
+      }),
   );
 
   const set = (k: string, v: unknown, delay?: number) => setSettings((p) => {