diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
index 104b3fa1..268aafe7 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
@@ -22,7 +22,7 @@ const GeneralAdvanced: React.FC<{
   const c = useClaudeTokens();
   const dispatch = useAppDispatch();
   const appVersion = useAppSelector((s) => s.update.appVersion);
-  const { sectionSx, rowSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
+  const { sectionSx, rowSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, switchSx } = styles;
 
   // Provenance: the exact commit this build was cut from. Surfaced so a support screenshot of Settings is enough to identify the shipped code. Empty in dev / web (no Electron bridge or unknown sha), in which case we hide the row.
   const [buildLabel, setBuildLabel] = React.useState<string | null>(null);
@@ -44,10 +44,7 @@ const GeneralAdvanced: React.FC<{
         <Switch
           checked={form.dev_mode}
           onChange={(e) => setForm({ ...form, dev_mode: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
@@ -59,10 +56,7 @@ const GeneralAdvanced: React.FC<{
         <Switch
           checked={form.allow_experimental_updates}
           onChange={(e) => setForm({ ...form, allow_experimental_updates: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index 564984a0..47757b29 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -24,7 +24,7 @@ const GeneralInterface: React.FC<{
   const c = useClaudeTokens();
   const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
   const [recordingShortcut, setRecordingShortcut] = useState(false);
-  const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
+  const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx } = styles;
 
   return (
     <>
@@ -39,23 +39,7 @@ const GeneralInterface: React.FC<{
           exclusive
           onChange={(_, v) => { if (v) setForm({ ...form, theme: v }); }}
           size="small"
-          sx={{
-            '& .MuiToggleButton-root': {
-              color: c.text.muted,
-              borderColor: c.border.medium,
-              textTransform: 'none',
-              px: 2,
-              py: 0.5,
-              gap: 0.5,
-              fontSize: '0.8125rem',
-              '&.Mui-selected': {
-                bgcolor: `${c.accent.primary}15`,
-                color: c.accent.primary,
-                borderColor: c.accent.primary,
-                '&:hover': { bgcolor: `${c.accent.primary}20` },
-              },
-            },
-          }}
+          sx={toggleGroupSx}
         >
           <ToggleButton value="light">
             <LightModeIcon sx={{ fontSize: 16 }} /> Light
@@ -76,22 +60,7 @@ const GeneralInterface: React.FC<{
           exclusive
           onChange={(_, v) => { if (v) setForm({ ...form, ui_font_scale: v }); }}
           size="small"
-          sx={{
-            '& .MuiToggleButton-root': {
-              color: c.text.muted,
-              borderColor: c.border.medium,
-              textTransform: 'none',
-              px: 1.75,
-              py: 0.5,
-              fontSize: '0.8125rem',
-              '&.Mui-selected': {
-                bgcolor: `${c.accent.primary}15`,
-                color: c.accent.primary,
-                borderColor: c.accent.primary,
-                '&:hover': { bgcolor: `${c.accent.primary}20` },
-              },
-            },
-          }}
+          sx={toggleGroupSx}
         >
           <ToggleButton value={0.9}>Small</ToggleButton>
           <ToggleButton value={1}>Default</ToggleButton>
@@ -116,22 +85,7 @@ const GeneralInterface: React.FC<{
             if (v) void window.openswarm?.voiceRequestHoldPermission?.();
           }}
           size="small"
-          sx={{
-            '& .MuiToggleButton-root': {
-              color: c.text.muted,
-              borderColor: c.border.medium,
-              textTransform: 'none',
-              px: 1.75,
-              py: 0.5,
-              fontSize: '0.8125rem',
-              '&.Mui-selected': {
-                bgcolor: `${c.accent.primary}15`,
-                color: c.accent.primary,
-                borderColor: c.accent.primary,
-                '&:hover': { bgcolor: `${c.accent.primary}20` },
-              },
-            },
-          }}
+          sx={toggleGroupSx}
         >
           <ToggleButton value={true}>Hold to talk</ToggleButton>
           <ToggleButton value={false}>Tap to toggle</ToggleButton>
@@ -245,10 +199,7 @@ const GeneralInterface: React.FC<{
         <Switch
           checked={form.auto_select_mode_on_new_agent}
           onChange={(e) => setForm({ ...form, auto_select_mode_on_new_agent: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
@@ -260,10 +211,7 @@ const GeneralInterface: React.FC<{
         <Switch
           checked={form.expand_new_chats_in_dashboard}
           onChange={(e) => setForm({ ...form, expand_new_chats_in_dashboard: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
@@ -275,10 +223,7 @@ const GeneralInterface: React.FC<{
         <Switch
           checked={form.auto_reveal_sub_agents}
           onChange={(e) => setForm({ ...form, auto_reveal_sub_agents: e.target.checked })}
-          sx={{
-            '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
-            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
-          }}
+          sx={switchSx}
         />
       </Box>
 
diff --git a/frontend/src/app/pages/Settings/sections/settingsStyles.ts b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
index b57775ab..4eb6c5fd 100644
--- a/frontend/src/app/pages/Settings/sections/settingsStyles.ts
+++ b/frontend/src/app/pages/Settings/sections/settingsStyles.ts
@@ -1,5 +1,7 @@
+import { ClaudeTokens } from '@/shared/styles/claudeTokens';
+
 // Theme-dependent style objects shared across Settings tabs; built from the resolved Claude tokens.
-export function makeSettingsStyles(c: any) {
+export function makeSettingsStyles(c: ClaudeTokens) {
   const fieldSx = {
     '& .MuiOutlinedInput-root': {
       fontSize: '0.875rem',
@@ -59,7 +61,30 @@ export function makeSettingsStyles(c: any) {
     lineHeight: 1.4,
   };
 
-  return { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx };
+  const toggleGroupSx = {
+    '& .MuiToggleButton-root': {
+      color: c.text.muted,
+      borderColor: c.border.medium,
+      textTransform: 'none' as const,
+      px: 1.75,
+      py: 0.5,
+      gap: 0.5,
+      fontSize: '0.8125rem',
+      '&.Mui-selected': {
+        bgcolor: `${c.accent.primary}15`,
+        color: c.accent.primary,
+        borderColor: c.accent.primary,
+        '&:hover': { bgcolor: `${c.accent.primary}20` },
+      },
+    },
+  };
+
+  const switchSx = {
+    '& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
+    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
+  };
+
+  return { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx };
 }
 
 export type SettingsStyles = ReturnType<typeof makeSettingsStyles>;