diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx
index 2650d67e20..d675fb38ed 100644
--- a/src/screens/Settings/AppearanceSettings.tsx
+++ b/src/screens/Settings/AppearanceSettings.tsx
@@ -16,6 +16,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a, native, useAlf, useTheme} from '#/alf'
 import * as ToggleButton from '#/components/forms/ToggleButton'
+import {Props as SVGIconProps} from '#/components/icons/common'
 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
 import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize'
@@ -32,9 +33,6 @@ export function AppearanceSettingsScreen({}: Props) {
   const {colorMode, darkTheme} = useThemePrefs()
   const {setColorMode, setDarkTheme} = useSetThemePrefs()
 
-  const [fontFamily, setFontFamily] = React.useState(fonts.family)
-  const [fontScale, setFontScale] = React.useState(() => fonts.scale)
-
   const onChangeAppearance = useCallback(
     (keys: string[]) => {
       const appearance = keys.find(key => key !== colorMode) as
@@ -63,19 +61,17 @@ export function AppearanceSettingsScreen({}: Props) {
   const onChangeFontFamily = useCallback(
     (values: string[]) => {
       const next = values[0] === 'system' ? 'system' : 'theme'
-      setFontFamily(next)
       fonts.setFontFamily(next)
     },
-    [setFontFamily, fonts],
+    [fonts],
   )
 
   const onChangeFontScale = useCallback(
     (values: string[]) => {
       const next = values[0] || ('0' as any)
-      setFontScale(next)
       fonts.setFontScale(next)
     },
-    [setFontScale, fonts],
+    [fonts],
   )
 
   return (
@@ -97,133 +93,90 @@ export function AppearanceSettingsScreen({}: Props) {
 
           <View style={[a.gap_3xl, a.pt_xl, a.px_xl]}>
             <View style={[a.gap_lg]}>
-              <View style={[a.gap_md]}>
-                <View style={[a.flex_row, a.align_center, a.gap_md]}>
-                  <PhoneIcon style={t.atoms.text} />
-                  <Text style={[a.text_md, a.font_bold]}>
-                    <Trans>Mode</Trans>
-                  </Text>
-                </View>
-                <ToggleButton.Group
-                  label={_(msg`Dark mode`)}
-                  values={[colorMode]}
-                  onChange={onChangeAppearance}>
-                  <ToggleButton.Button label={_(msg`System`)} name="system">
-                    <ToggleButton.ButtonText>
-                      <Trans>System</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                  <ToggleButton.Button label={_(msg`Light`)} name="light">
-                    <ToggleButton.ButtonText>
-                      <Trans>Light</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                  <ToggleButton.Button label={_(msg`Dark`)} name="dark">
-                    <ToggleButton.ButtonText>
-                      <Trans>Dark</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                </ToggleButton.Group>
-              </View>
+              <AppearanceToggleButtonGroup
+                title={_(msg`Color mode`)}
+                icon={PhoneIcon}
+                items={[
+                  {
+                    label: _(msg`System`),
+                    name: 'system',
+                  },
+                  {
+                    label: _(msg`Light`),
+                    name: 'light',
+                  },
+                  {
+                    label: _(msg`Dark`),
+                    name: 'dark',
+                  },
+                ]}
+                values={[colorMode]}
+                onChange={onChangeAppearance}
+              />
 
               {colorMode !== 'light' && (
                 <Animated.View
                   entering={native(FadeInDown)}
-                  exiting={native(FadeOutDown)}
-                  style={[a.gap_md]}>
-                  <View style={[a.flex_row, a.align_center, a.gap_md]}>
-                    <MoonIcon style={t.atoms.text} />
-                    <Text style={[a.text_md, a.font_bold]}>
-                      <Trans>Dark theme</Trans>
-                    </Text>
-                  </View>
-
-                  <ToggleButton.Group
-                    label={_(msg`Dark theme`)}
+                  exiting={native(FadeOutDown)}>
+                  <AppearanceToggleButtonGroup
+                    title={_(msg`Dark theme`)}
+                    icon={MoonIcon}
+                    items={[
+                      {
+                        label: _(msg`Dim`),
+                        name: 'dim',
+                      },
+                      {
+                        label: _(msg`Dark`),
+                        name: 'dark',
+                      },
+                    ]}
                     values={[darkTheme ?? 'dim']}
-                    onChange={onChangeDarkTheme}>
-                    <ToggleButton.Button label={_(msg`Dim`)} name="dim">
-                      <ToggleButton.ButtonText>
-                        <Trans>Dim</Trans>
-                      </ToggleButton.ButtonText>
-                    </ToggleButton.Button>
-                    <ToggleButton.Button label={_(msg`Dark`)} name="dark">
-                      <ToggleButton.ButtonText>
-                        <Trans>Dark</Trans>
-                      </ToggleButton.ButtonText>
-                    </ToggleButton.Button>
-                  </ToggleButton.Group>
+                    onChange={onChangeDarkTheme}
+                  />
                 </Animated.View>
               )}
 
-              <View style={[a.gap_md]}>
-                <View style={[a.gap_xs]}>
-                  <View style={[a.flex_row, a.align_center, a.gap_md]}>
-                    <Aa style={t.atoms.text} />
-                    <Text style={[a.text_md, a.font_bold]}>
-                      <Trans>Font</Trans>
-                    </Text>
-                  </View>
-                  <Text
-                    style={[
-                      a.text_sm,
-                      a.leading_snug,
-                      t.atoms.text_contrast_medium,
-                    ]}>
-                    <Trans>
-                      For the best experience, we recommend using the theme
-                      font.
-                    </Trans>
-                  </Text>
-                </View>
-                <ToggleButton.Group
-                  label={_(msg`Font`)}
-                  values={[fontFamily]}
-                  onChange={onChangeFontFamily}>
-                  <ToggleButton.Button label={_(msg`System`)} name="system">
-                    <ToggleButton.ButtonText>
-                      <Trans>System</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                  <ToggleButton.Button label={_(msg`Theme`)} name="theme">
-                    <ToggleButton.ButtonText>
-                      <Trans>Theme</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                </ToggleButton.Group>
-              </View>
+              <AppearanceToggleButtonGroup
+                title={_(msg`Font`)}
+                description={_(
+                  msg`For the best experience, we recommend using the theme font.`,
+                )}
+                icon={Aa}
+                items={[
+                  {
+                    label: _(msg`System`),
+                    name: 'system',
+                  },
+                  {
+                    label: _(msg`Theme`),
+                    name: 'theme',
+                  },
+                ]}
+                values={[fonts.family]}
+                onChange={onChangeFontFamily}
+              />
 
-              <View style={[a.gap_md]}>
-                <View style={[a.gap_xs]}>
-                  <View style={[a.flex_row, a.align_center, a.gap_md]}>
-                    <TextSize style={t.atoms.text} />
-                    <Text style={[a.text_md, a.font_bold]}>
-                      <Trans>Font size</Trans>
-                    </Text>
-                  </View>
-                </View>
-
-                <ToggleButton.Group
-                  label={_(msg`Font`)}
-                  values={[fontScale]}
-                  onChange={onChangeFontScale}>
-                  <ToggleButton.Button label={_(msg`Small`)} name="-1">
-                    <ToggleButton.ButtonText>
-                      <Trans>Smaller</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                  <ToggleButton.Button label={_(msg`Default`)} name="0">
-                    <ToggleButton.ButtonText>
-                      <Trans>Default</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                  <ToggleButton.Button label={_(msg`Large`)} name="1">
-                    <ToggleButton.ButtonText>
-                      <Trans>Larger</Trans>
-                    </ToggleButton.ButtonText>
-                  </ToggleButton.Button>
-                </ToggleButton.Group>
-              </View>
+              <AppearanceToggleButtonGroup
+                title={_(msg`Font size`)}
+                icon={TextSize}
+                items={[
+                  {
+                    label: _(msg`Smaller`),
+                    name: '-1',
+                  },
+                  {
+                    label: _(msg`Default`),
+                    name: '0',
+                  },
+                  {
+                    label: _(msg`Larger`),
+                    name: '1',
+                  },
+                ]}
+                values={[fonts.scale]}
+                onChange={onChangeFontScale}
+              />
             </View>
           </View>
         </ScrollView>
@@ -231,3 +184,50 @@ export function AppearanceSettingsScreen({}: Props) {
     </LayoutAnimationConfig>
   )
 }
+
+export function AppearanceToggleButtonGroup({
+  title,
+  description,
+  icon: Icon,
+  items,
+  values,
+  onChange,
+}: {
+  title: string
+  description?: string
+  icon: React.ComponentType<SVGIconProps>
+  items: {
+    label: string
+    name: string
+  }[]
+  values: string[]
+  onChange: (values: string[]) => void
+}) {
+  const t = useTheme()
+  return (
+    <View style={[a.gap_md]}>
+      <View style={[a.gap_xs]}>
+        <View style={[a.flex_row, a.align_center, a.gap_md]}>
+          <Icon style={t.atoms.text} />
+          <Text style={[a.text_md, a.font_bold]}>{title}</Text>
+        </View>
+        {description && (
+          <Text
+            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
+            {description}
+          </Text>
+        )}
+      </View>
+      <ToggleButton.Group label={title} values={values} onChange={onChange}>
+        {items.map(item => (
+          <ToggleButton.Button
+            key={item.name}
+            label={item.label}
+            name={item.name}>
+            <ToggleButton.ButtonText>{item.label}</ToggleButton.ButtonText>
+          </ToggleButton.Button>
+        ))}
+      </ToggleButton.Group>
+    </View>
+  )
+}