diff --git a/e2e/a11y.spec.ts-snapshots/settings-nav.aria.yml b/e2e/a11y.spec.ts-snapshots/settings-nav.aria.yml
index e5085f090..7be39b2db 100644
--- a/e2e/a11y.spec.ts-snapshots/settings-nav.aria.yml
+++ b/e2e/a11y.spec.ts-snapshots/settings-nav.aria.yml
@@ -1,22 +1,31 @@
 - navigation "Settings sections":
-    - button "General" [pressed]:
-        - img
-        - paragraph: General
-    - button "Account":
+    - button "Account" [pressed]:
         - img
         - paragraph: Account
+    - button "Appearance":
+        - img
+        - paragraph: Appearance
+    - button "Messages":
+        - img
+        - paragraph: Messages
     - button "Notifications":
         - img
         - paragraph: Notifications
-    - button "Devices":
+    - button "Calls & audio":
         - img
-        - paragraph: Devices
-    - button "Emojis & Stickers":
+        - paragraph: Calls & audio
+    - button "Privacy & security":
         - img
-        - paragraph: Emojis & Stickers
-    - button "Developer Tools":
+        - paragraph: Privacy & security
+    - button "Data & storage":
         - img
-        - paragraph: Developer Tools
+        - paragraph: Data & storage
+    - button "Emojis & stickers":
+        - img
+        - paragraph: Emojis & stickers
+    - button "Advanced":
+        - img
+        - paragraph: Advanced
     - button "About":
         - img
         - paragraph: About
diff --git a/e2e/key-upload-recovery.spec.ts b/e2e/key-upload-recovery.spec.ts
index e2a646eaa..bea1c6d62 100644
--- a/e2e/key-upload-recovery.spec.ts
+++ b/e2e/key-upload-recovery.spec.ts
@@ -31,7 +31,7 @@ test.describe('key upload recovery (#201)', () => {
     expect(rejected).toBeGreaterThanOrEqual(3);
 
     await banner.getByRole('button', { name: 'Details' }).click();
-    await expect(banner).toContainText('Settings → Devices');
+    await expect(banner).toContainText('Settings → Privacy & security');
     await expect(banner).toContainText('already exists');
 
     await banner.getByRole('button', { name: /Fix: sign out/ }).click();
diff --git a/e2e/security-nudge.spec.ts b/e2e/security-nudge.spec.ts
index d90d05d3c..a19c1df9b 100644
--- a/e2e/security-nudge.spec.ts
+++ b/e2e/security-nudge.spec.ts
@@ -75,7 +75,9 @@ test.describe('security nudge (#110, #123)', () => {
     await expect(strip(page)).toHaveCount(0);
   });
 
-  test('no key backup: "Set up key backup" opens Settings → Devices', async ({ page }) => {
+  test('no key backup: "Set up key backup" opens Settings → Privacy & security', async ({
+    page,
+  }) => {
     test.setTimeout(150_000);
     await loginUI(page, user);
     await pastGrace(page);
diff --git a/e2e/your-data.spec.ts b/e2e/your-data.spec.ts
index 379ae5e37..76f12c18b 100644
--- a/e2e/your-data.spec.ts
+++ b/e2e/your-data.spec.ts
@@ -39,7 +39,7 @@ test.describe('your data (#114)', () => {
       .catch(() => undefined);
     const openGeneral = async () => {
       await page.getByRole('button', { name: 'User Settings' }).click();
-      await page.getByRole('dialog').getByText('General', { exact: true }).first().click();
+      await page.getByRole('dialog').getByText('Data & storage', { exact: true }).first().click();
       await page
         .getByRole('dialog')
         .getByText('Your data', { exact: true })
diff --git a/src/app/components/CloseBehaviorPrompt.tsx b/src/app/components/CloseBehaviorPrompt.tsx
index 6983b2e06..977ce1600 100644
--- a/src/app/components/CloseBehaviorPrompt.tsx
+++ b/src/app/components/CloseBehaviorPrompt.tsx
@@ -19,7 +19,7 @@ import { useModalStyle } from '../hooks/useModalStyle';
  * cinny-desktop #5: the first time the window is closed, ask whether Lotus Chat
  * should keep running in the tray (calls, messages, notifications) or quit —
  * and, in the same moment, whether it should start when you sign in. Asked
- * once; changeable in Settings → General. The native side sends
+ * once; changeable in Settings → Desktop. The native side sends
  * `lotus-close-requested` only while the choice is still "ask", and never
  * during a call (a call always goes to the tray).
  */
@@ -149,7 +149,7 @@ export function CloseBehaviorPrompt() {
                 )}
               </Box>
               <Text size="T200" priority="300">
-                You can change this in Settings → General.
+                You can change this in Settings → Desktop.
               </Text>
             </Box>
           </Dialog>
diff --git a/src/app/features/common-settings/general/RoomRetention.tsx b/src/app/features/common-settings/general/RoomRetention.tsx
index ee8ee5870..cf573ca8a 100644
--- a/src/app/features/common-settings/general/RoomRetention.tsx
+++ b/src/app/features/common-settings/general/RoomRetention.tsx
@@ -48,7 +48,7 @@ export function RoomRetention({ permissions }: RoomRetentionProps) {
     >
       <SettingTile
         title="Message Retention"
-        description="Messages older than this window disappear from the timeline. Each member can opt in to permanently delete their own expired messages in Settings → General; full server-side deletion also requires homeserver retention to be configured."
+        description="Messages older than this window disappear from the timeline. Each member can opt in to permanently delete their own expired messages in Settings → Messages; full server-side deletion also requires homeserver retention to be configured."
       >
         <Box gap="200" alignItems="Center" style={{ flexWrap: 'wrap' }}>
           {RETENTION_PRESETS.map((preset) => {
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index 751e54e0e..07b90d317 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -15,7 +15,16 @@ import {
   Text,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { General } from './general';
+import {
+  AdvancedDisplayOptions,
+  AppearancePage,
+  CallsPage,
+  DataStoragePage,
+  DesktopPage,
+  MessagesPage,
+  Privacy,
+} from './general';
+import { isTauri as isTauriEnv } from '../../hooks/useTauri';
 import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { Account } from './account';
@@ -45,43 +54,23 @@ type SettingsMenuItem = {
 
 const useSettingsMenuItems = (): SettingsMenuItem[] =>
   useMemo(
-    () => [
-      {
-        page: SettingsPages.GeneralPage,
-        name: 'General',
-        icon: Icons.Setting,
-      },
-      {
-        page: SettingsPages.AccountPage,
-        name: 'Account',
-        icon: Icons.User,
-      },
-      {
-        page: SettingsPages.NotificationPage,
-        name: 'Notifications',
-        icon: Icons.Bell,
-      },
-      {
-        page: SettingsPages.DevicesPage,
-        name: 'Devices',
-        icon: Icons.Monitor,
-      },
-      {
-        page: SettingsPages.EmojisStickersPage,
-        name: 'Emojis & Stickers',
-        icon: Icons.Smile,
-      },
-      {
-        page: SettingsPages.DeveloperToolsPage,
-        name: 'Developer Tools',
-        icon: Icons.Terminal,
-      },
-      {
-        page: SettingsPages.AboutPage,
-        name: 'About',
-        icon: Icons.Info,
-      },
-    ],
+    () =>
+      [
+        { page: SettingsPages.AccountPage, name: 'Account', icon: Icons.User },
+        { page: SettingsPages.AppearancePage, name: 'Appearance', icon: Icons.Sun },
+        { page: SettingsPages.MessagesPage, name: 'Messages', icon: Icons.Message },
+        { page: SettingsPages.NotificationPage, name: 'Notifications', icon: Icons.Bell },
+        { page: SettingsPages.CallsPage, name: 'Calls & audio', icon: Icons.Phone },
+        { page: SettingsPages.DevicesPage, name: 'Privacy & security', icon: Icons.ShieldUser },
+        { page: SettingsPages.DataStoragePage, name: 'Data & storage', icon: Icons.Download },
+        // [Gitea #459] Desktop-only options: nothing to show in a browser.
+        ...(isTauriEnv()
+          ? [{ page: SettingsPages.DesktopPage, name: 'Desktop', icon: Icons.Monitor }]
+          : []),
+        { page: SettingsPages.EmojisStickersPage, name: 'Emojis & stickers', icon: Icons.Smile },
+        { page: SettingsPages.DeveloperToolsPage, name: 'Advanced', icon: Icons.Terminal },
+        { page: SettingsPages.AboutPage, name: 'About', icon: Icons.Info },
+      ] as SettingsMenuItem[],
     [],
   );
 
@@ -102,7 +91,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
   const screenSize = useScreenSizeContext();
   const [activePage, setActivePage] = useState<SettingsPages | undefined>(() => {
     if (initialPage) return initialPage;
-    return screenSize === ScreenSize.Mobile ? undefined : SettingsPages.GeneralPage;
+    return screenSize === ScreenSize.Mobile ? undefined : SettingsPages.AccountPage;
   });
   const menuItems = useSettingsMenuItems();
 
@@ -207,8 +196,20 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
         )
       }
     >
-      {activePage === SettingsPages.GeneralPage && (
-        <General requestClose={handlePageRequestClose} />
+      {activePage === SettingsPages.AppearancePage && (
+        <AppearancePage requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SettingsPages.MessagesPage && (
+        <MessagesPage requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SettingsPages.CallsPage && (
+        <CallsPage requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SettingsPages.DataStoragePage && (
+        <DataStoragePage requestClose={handlePageRequestClose} />
+      )}
+      {activePage === SettingsPages.DesktopPage && (
+        <DesktopPage requestClose={handlePageRequestClose} />
       )}
       {activePage === SettingsPages.AccountPage && (
         <Account requestClose={handlePageRequestClose} />
@@ -217,13 +218,21 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
         <Notifications requestClose={handlePageRequestClose} />
       )}
       {activePage === SettingsPages.DevicesPage && (
-        <Devices requestClose={handlePageRequestClose} />
+        <Devices
+          title="Privacy & security"
+          before={<Privacy />}
+          requestClose={handlePageRequestClose}
+        />
       )}
       {activePage === SettingsPages.EmojisStickersPage && (
         <EmojisStickers requestClose={handlePageRequestClose} />
       )}
       {activePage === SettingsPages.DeveloperToolsPage && (
-        <DeveloperTools requestClose={handlePageRequestClose} />
+        <DeveloperTools
+          title="Advanced"
+          before={<AdvancedDisplayOptions />}
+          requestClose={handlePageRequestClose}
+        />
       )}
       {activePage === SettingsPages.AboutPage && <About requestClose={handlePageRequestClose} />}
     </PageRoot>
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index 44f1036f6..50270db27 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -313,7 +313,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
     <SettingTile
       title={
         <Text as="span" size="L400">
-          Display Name
+          Display name
         </Text>
       }
     >
@@ -576,7 +576,7 @@ function ProfileStatus() {
     <SettingTile
       title={
         <Text as="span" size="L400">
-          Status Message
+          Status message
         </Text>
       }
       description={
diff --git a/src/app/features/settings/account/ProfileDecoration.tsx b/src/app/features/settings/account/ProfileDecoration.tsx
index 85095ec59..fde1f8497 100644
--- a/src/app/features/settings/account/ProfileDecoration.tsx
+++ b/src/app/features/settings/account/ProfileDecoration.tsx
@@ -102,6 +102,8 @@ export function ProfileDecoration() {
 
   const [current, setCurrent] = useState<string | null>(null);
   const [selected, setSelected] = useState<string | null>(null);
+  // [Gitea #460] The catalog stays closed until "Change"; it was always open.
+  const [browsing, setBrowsing] = useState(false);
   // Distinguish "confirmed no decoration" from "failed to load": a fetch
   // failure must not be shown as (and saved over) "None".
   const [loadError, setLoadError] = useState(false);
@@ -199,7 +201,7 @@ export function ProfileDecoration() {
     <SettingTile
       title={
         <Text as="span" size="L400">
-          Avatar Decoration
+          Avatar decoration
         </Text>
       }
       description={
@@ -282,6 +284,20 @@ export function ProfileDecoration() {
               </Button>
             )}
           </Box>
+          {!loadError && (
+            <Button
+              type="button"
+              size="300"
+              radii="300"
+              variant="Secondary"
+              fill="Soft"
+              outlined
+              aria-expanded={browsing}
+              onClick={() => setBrowsing((b) => !b)}
+            >
+              <Text size="B300">{browsing ? 'Done' : 'Change'}</Text>
+            </Button>
+          )}
           {hasChanges && !loadError && (
             <Button
               type="button"
@@ -324,73 +340,77 @@ export function ProfileDecoration() {
           </Text>
         )}
 
-        {/* Search + category tabs. Only one category (or the search results)
+        {browsing && (
+          <>
+            {/* Search + category tabs. Only one category (or the search results)
             is mounted at a time so the picker never loads the whole catalog. */}
-        <Input
-          aria-label="Search decorations"
-          placeholder="Search decorations"
-          value={search}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
-          variant="Secondary"
-          size="400"
-          radii="300"
-          before={<Icon size="100" src={Icons.Search} />}
-        />
-        {!query && (
-          <Box gap="100" wrap="Wrap" role="tablist" aria-label="Decoration categories">
-            {DECORATION_CATEGORIES.map((category) => (
-              <Chip
-                key={category.id}
-                type="button"
-                role="tab"
-                aria-selected={category.id === activeCategory}
-                variant={category.id === activeCategory ? 'Primary' : 'Secondary'}
-                fill="Soft"
-                outlined={category.id === activeCategory}
-                radii="Pill"
-                onClick={() => setActiveCategory(category.id)}
-              >
-                <Text as="span" size="B300">
-                  {category.label}
-                </Text>
-              </Chip>
-            ))}
-          </Box>
-        )}
-        <div
-          role={query ? undefined : 'tabpanel'}
-          style={{
-            maxHeight: 360,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            paddingRight: 4,
-          }}
-        >
-          {visible.length === 0 ? (
-            <Text size="T300" priority="300">
-              No decorations match “{search.trim()}”.
-            </Text>
-          ) : (
+            <Input
+              aria-label="Search decorations"
+              placeholder="Search decorations"
+              value={search}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+              variant="Secondary"
+              size="400"
+              radii="300"
+              before={<Icon size="100" src={Icons.Search} />}
+            />
+            {!query && (
+              <Box gap="100" wrap="Wrap" role="tablist" aria-label="Decoration categories">
+                {DECORATION_CATEGORIES.map((category) => (
+                  <Chip
+                    key={category.id}
+                    type="button"
+                    role="tab"
+                    aria-selected={category.id === activeCategory}
+                    variant={category.id === activeCategory ? 'Primary' : 'Secondary'}
+                    fill="Soft"
+                    outlined={category.id === activeCategory}
+                    radii="Pill"
+                    onClick={() => setActiveCategory(category.id)}
+                  >
+                    <Text as="span" size="B300">
+                      {category.label}
+                    </Text>
+                  </Chip>
+                ))}
+              </Box>
+            )}
             <div
+              role={query ? undefined : 'tabpanel'}
               style={{
-                display: 'grid',
-                gridTemplateColumns: `repeat(auto-fill, ${CELL_SIZE}px)`,
-                gap: 20,
-                padding: 2,
+                maxHeight: 360,
+                overflowY: 'auto',
+                overflowX: 'hidden',
+                paddingRight: 4,
               }}
             >
-              {visible.map((d) => (
-                <DecorationPreviewCell
-                  key={d.slug}
-                  slug={d.slug}
-                  name={d.name}
-                  selected={selected === d.slug}
-                  onSelect={handleSelect}
-                />
-              ))}
+              {visible.length === 0 ? (
+                <Text size="T300" priority="300">
+                  No decorations match “{search.trim()}”.
+                </Text>
+              ) : (
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(auto-fill, ${CELL_SIZE}px)`,
+                    gap: 20,
+                    padding: 2,
+                  }}
+                >
+                  {visible.map((d) => (
+                    <DecorationPreviewCell
+                      key={d.slug}
+                      slug={d.slug}
+                      name={d.name}
+                      selected={selected === d.slug}
+                      onSelect={handleSelect}
+                    />
+                  ))}
+                </div>
+              )}
             </div>
-          )}
-        </div>
+          </>
+        )}
       </Box>
     </SettingTile>
   );
diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx
index 66f02d1f0..3c8c3b5bc 100644
--- a/src/app/features/settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/settings/developer-tools/DevelopTools.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, ReactNode } from 'react';
 import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -18,8 +18,12 @@ import { CryptoDiagnostics } from '../developer/CryptoDiagnostics';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
+  /** [Gitea #459] Shown as the page title (the menu entry's name). */
+  title?: string;
+  /** [Gitea #459] Sections shown above this page's own. */
+  before?: ReactNode;
 };
-export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
+export function DeveloperTools({ requestClose, title, before }: DeveloperToolsProps) {
   const mx = useMatrixClient();
   const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
   const [expand, setExpend] = useState(false);
@@ -49,7 +53,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
-              Developer Tools
+              {title ?? 'Developer Tools'}
             </Text>
           </Box>
           <Box shrink="No">
@@ -63,6 +67,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
+              {before}
               <Box direction="Column" gap="100">
                 <Text size="L400">Options</Text>
                 <SequenceCard
diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx
index 915808a47..d6b8f57ed 100644
--- a/src/app/features/settings/devices/DeviceTile.tsx
+++ b/src/app/features/settings/devices/DeviceTile.tsx
@@ -137,7 +137,7 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
 
   return (
     <Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
-      <Text size="L400">Device Name</Text>
+      <Text size="L400">Device name</Text>
       <Box gap="200">
         <Box grow="Yes" direction="Column">
           <Input
diff --git a/src/app/features/settings/devices/Devices.tsx b/src/app/features/settings/devices/Devices.tsx
index 1fd525fc8..9f1cb2ec3 100644
--- a/src/app/features/settings/devices/Devices.tsx
+++ b/src/app/features/settings/devices/Devices.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -38,8 +38,12 @@ function DevicesPlaceholder() {
 
 type DevicesProps = {
   requestClose: () => void;
+  /** [Gitea #459] Shown as the page title (the menu entry's name). */
+  title?: string;
+  /** [Gitea #459] Sections shown above this page's own. */
+  before?: ReactNode;
 };
-export function Devices({ requestClose }: DevicesProps) {
+export function Devices({ requestClose, title, before }: DevicesProps) {
   const mx = useMatrixClient();
   const crypto = mx.getCrypto();
   const crossSigningActive = useCrossSigningActive();
@@ -70,7 +74,7 @@ export function Devices({ requestClose }: DevicesProps) {
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
-              Devices
+              {title ?? 'Devices'}
             </Text>
           </Box>
           <Box shrink="No">
@@ -84,6 +88,7 @@ export function Devices({ requestClose }: DevicesProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
+              {before}
               <Box direction="Column" gap="100">
                 <Text size="L400">Security</Text>
                 <SequenceCard
diff --git a/src/app/features/settings/devices/LocalBackup.tsx b/src/app/features/settings/devices/LocalBackup.tsx
index 14bd48930..ab03598c5 100644
--- a/src/app/features/settings/devices/LocalBackup.tsx
+++ b/src/app/features/settings/devices/LocalBackup.tsx
@@ -67,7 +67,7 @@ function ExportKeys() {
             {(match, doMatch, passRef, confPassRef) => (
               <>
                 <Box grow="Yes" direction="Column" gap="100">
-                  <Text size="L400">New Password</Text>
+                  <Text size="L400">New password</Text>
                   <PasswordInput
                     ref={passRef}
                     name="passwordInput"
@@ -82,7 +82,7 @@ function ExportKeys() {
                   />
                 </Box>
                 <Box grow="Yes" direction="Column" gap="100">
-                  <Text size="L400">Confirm Password</Text>
+                  <Text size="L400">Confirm password</Text>
                   <PasswordInput
                     ref={confPassRef}
                     style={{ color: match ? undefined : color.Critical.Main }}
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index d96e18e64..7b4d33c69 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -4,6 +4,7 @@ import React, {
   FormEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
+  ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -32,6 +33,7 @@ import {
   Switch,
   Text,
   toRem,
+  RadioButton,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
 import { HexColorPicker } from 'react-colorful';
@@ -543,7 +545,7 @@ function PageZoomInput() {
   );
 }
 
-function Appearance() {
+export function Appearance() {
   const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
   const allThemes = useThemes();
   const [themeId, setThemeId] = useSetting(settingsAtom, 'themeId');
@@ -595,7 +597,7 @@ function Appearance() {
     settingsAtom,
     'seasonalThemeOverride',
   );
-  const [, setChatBackground] = useSetting(settingsAtom, 'chatBackground');
+  const [chatBackground, setChatBackground] = useSetting(settingsAtom, 'chatBackground');
 
   return (
     <Box direction="Column" gap="100">
@@ -672,13 +674,13 @@ function Appearance() {
         direction="Column"
         gap="200"
       >
-        <SettingTile
+        <CollapsiblePicker
           title="Chat background"
           description="Pattern applied behind the message timeline."
-        />
-        <Box style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}>
+          current={BG_OPTIONS.find((o) => o.value === chatBackground)?.label ?? 'None'}
+        >
           <ChatBgGrid />
-        </Box>
+        </CollapsiblePicker>
       </SequenceCard>
 
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
@@ -695,11 +697,14 @@ function Appearance() {
         direction="Column"
         gap="200"
       >
-        <SettingTile
+        <CollapsiblePicker
           title="Seasonal theme"
-          description="Decorative overlays for holidays and events. “Auto” follows the calendar — each theme below shows the dates it turns on. Click to select."
-        />
-        <Box style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}>
+          description="Decorative overlays for holidays and events. Auto follows the calendar."
+          current={
+            SEASONAL_OPTIONS.find((o) => o.value === (seasonalThemeOverride ?? 'auto'))?.label ??
+            'Auto'
+          }
+        >
           <SeasonalBgGrid
             value={seasonalThemeOverride ?? 'auto'}
             onChange={(v) => {
@@ -711,7 +716,7 @@ function Appearance() {
               if (v !== 'off') setChatBackground('none');
             }}
           />
-        </Box>
+        </CollapsiblePicker>
       </SequenceCard>
 
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
@@ -1308,7 +1313,7 @@ function SelectDateFormat() {
   );
 }
 
-function DateAndTime() {
+export function DateAndTime() {
   const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock');
 
   return (
@@ -1487,7 +1492,7 @@ function ComposerToolbarReorder({
   );
 }
 
-function Editor() {
+export function Editor() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
   const [offerCodePaste, setOfferCodePaste] = useSetting(settingsAtom, 'offerCodePaste');
@@ -1578,7 +1583,7 @@ function Editor() {
   );
 }
 
-function Privacy() {
+export function Privacy() {
   const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [hidePresence, setHidePresence] = useSetting(settingsAtom, 'hidePresence');
   const [privateReadReceipts, setPrivateReadReceipts] = useSetting(
@@ -1589,7 +1594,19 @@ function Privacy() {
     settingsAtom,
     'warnOnUnverifiedDevices',
   );
+  const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [stripTracking, setStripTracking] = useSetting(settingsAtom, 'stripTrackingParams');
+  // [Gitea #461] One choice instead of two overlapping switches. Maps onto the
+  // existing settings, so every old combination keeps its behaviour:
+  // hideActivity also hides typing and other people's receipts from you.
+  let activity: 'everyone' | 'private' | 'hidden' = 'everyone';
+  if (hideActivity) activity = 'hidden';
+  else if (privateReadReceipts) activity = 'private';
+  const chooseActivity = (next: typeof activity) => {
+    setHideActivity(next === 'hidden');
+    setPrivateReadReceipts(next !== 'everyone');
+  };
   const [stripImageMeta, setStripImageMeta] = useSetting(settingsAtom, 'stripImageMetadata');
 
   return (
@@ -1611,24 +1628,88 @@ function Privacy() {
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
-          title="Hide typing and read receipts"
-          description="Turn off both typing status and read receipts to keep your activity private."
-          after={<Switch variant="Primary" value={hideActivity} onChange={setHideActivity} />}
+          title="Link previews"
+          description="Your homeserver fetches and caches link previews. It will see the URLs of all links you preview."
+          after={<Switch variant="Primary" value={urlPreview} onChange={setUrlPreview} />}
         />
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
-          title="Private read receipts"
-          description="Send read receipts only to you and the server — other users won't see when you've read messages."
-          after={
-            <Switch
-              variant="Primary"
-              value={privateReadReceipts}
-              onChange={setPrivateReadReceipts}
-            />
+          title="Link previews in encrypted rooms"
+          description={
+            <Box direction="Column" gap="100">
+              <Text size="T200" priority="300">
+                Your homeserver fetches link previews on your behalf. It cannot decrypt your
+                messages, but will see every URL you preview in encrypted rooms, potentially
+                revealing conversation topics.
+              </Text>
+              <Chip
+                variant="Warning"
+                fill="Soft"
+                radii="300"
+                size="400"
+                style={{ alignSelf: 'flex-start' }}
+              >
+                <Text size="T200">Privacy risk — enabled by default</Text>
+              </Chip>
+            </Box>
           }
+          after={<Switch variant="Primary" value={encUrlPreview} onChange={setEncUrlPreview} />}
         />
       </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="300"
+      >
+        <SettingTile
+          title="Read receipts and typing"
+          description="Who can see that you've read a message or are typing."
+        />
+        <Box
+          direction="Column"
+          gap="200"
+          role="radiogroup"
+          aria-label="Read receipts and typing"
+          style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
+        >
+          {(
+            [
+              ['everyone', 'Everyone', "Others see what you've read and when you're typing."],
+              [
+                'private',
+                'Private read receipts',
+                "Others don't see what you've read (only you and your server do). Typing still shows.",
+              ],
+              [
+                'hidden',
+                'Hide my activity',
+                "No typing indicator and private read receipts. You also won't see other people's read receipts.",
+              ],
+            ] as const
+          ).map(([value, label, help]) => (
+            <label
+              key={value}
+              style={{ display: 'flex', gap: config.space.S200, cursor: 'pointer' }}
+            >
+              <RadioButton
+                name="activity-privacy"
+                variant="Primary"
+                size="300"
+                checked={activity === value}
+                onClick={() => chooseActivity(value)}
+              />
+              <Box direction="Column">
+                <Text size="T300">{label}</Text>
+                <Text size="T200" priority="300">
+                  {help}
+                </Text>
+              </Box>
+            </label>
+          ))}
+        </Box>
+      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Hide online status"
@@ -1655,7 +1736,7 @@ function Privacy() {
 
 // [Gitea #104] Sync toggle + the two manual actions. The toggle is itself
 // device-local (never synced) so switching it off here sticks.
-function SettingsSyncSection() {
+export function SettingsSyncSection() {
   const isMobile = useScreenSize() === ScreenSize.Mobile;
   const [settingsSync, setSettingsSync] = useSetting(settingsAtom, 'settingsSync');
   const { pushNow, clearRemote } = useSettingsSyncActions();
@@ -1788,7 +1869,7 @@ function useKeyBind(setter: (code: string) => void, otherKey?: string) {
 const keyLabel = (code: string) =>
   code === 'Space' ? 'Space' : code.replace('Key', '').replace('Digit', '');
 
-function Calls() {
+export function Calls() {
   const [cameraOnJoin, setCameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');
   const [callNoiseSuppression, setCallNoiseSuppression] = useSetting(
     settingsAtom,
@@ -1852,534 +1933,571 @@ function Calls() {
   const selectedDenoiseModel = DENOISE_MODELS.find((m) => m.id === callDenoiseModel);
 
   return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Calls</Text>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Join with camera on"
-          description="Enable camera automatically when joining a voice or video call. Camera is off by default."
-          after={<Switch variant="Primary" value={cameraOnJoin} onChange={setCameraOnJoin} />}
-        />
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Noise suppression"
-          description={
-            <Box direction="Column" gap="200">
-              {/* [Gitea #271] T200 like every other setting description. */}
-              <Text size="T200">
-                Filter background noise from your mic during calls. Browser-native uses the built-in
-                WebRTC suppressor (Google NSNet2). ML runs a dedicated model for stronger removal.
-              </Text>
-
-              {!mlSupported && (
-                <Box direction="Column" gap="100">
-                  <Text size="T200" priority="400">
-                    ML options are not supported in this browser.
-                  </Text>
-                  <Box as="ul" style={{ paddingLeft: '20px', margin: 0 }}>
-                    {ML_DENOISE_REQUIREMENTS.map((req) => (
-                      <Text as="li" key={req} size="T200">
-                        {req}
-                      </Text>
-                    ))}
-                  </Box>
-                </Box>
-              )}
-            </Box>
-          }
-          after={
-            <SettingsSelect<NoiseSuppressionMode>
-              value={callNoiseSuppression}
-              onChange={setCallNoiseSuppression}
-              options={[
-                { value: 'off', label: 'Off' },
-                { value: 'browser', label: 'Browser-native' },
-                {
-                  value: 'ml',
-                  label: 'ML (Advanced)',
-                  disabled: !mlSupported,
-                },
-              ]}
-            />
-          }
-        />
-
-        {callNoiseSuppression === 'ml' && (
-          <Box
-            direction="Column"
-            gap="400"
-            style={{
-              padding: '16px',
-              marginTop: '8px',
-              borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-              background: color.Surface.Container,
-            }}
-          >
-            {/* ── Model selection ───────────────────────────────────────── */}
-            <Box direction="Column" gap="200">
-              <Text size="L400">Model</Text>
-              <SettingTile
-                title="ML model"
-                description="Choose the machine learning model used for noise removal. Heavier models clean more aggressively at a higher CPU cost."
-                after={
-                  <SettingsSelect<DenoiseModelId>
-                    value={callDenoiseModel}
-                    onChange={setCallDenoiseModel}
-                    options={DENOISE_MODELS.map((m) => ({ value: m.id, label: m.name }))}
-                  />
-                }
-              />
-              {selectedDenoiseModel && (
-                <Box
-                  direction="Column"
-                  gap="200"
-                  style={{
-                    padding: '12px',
-                    borderRadius: '8px',
-                    border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-                    background: color.SurfaceVariant.Container,
-                  }}
-                >
-                  <Text size="T300">{selectedDenoiseModel.name}</Text>
-                  <Text size="T200" priority="300">
-                    {selectedDenoiseModel.description}
-                  </Text>
-                  <Box direction="Row" gap="400" wrap="Wrap">
-                    {(
-                      [
-                        { label: 'CPU', value: selectedDenoiseModel.cpuUsage },
-                        { label: 'Voice quality', value: selectedDenoiseModel.voiceQuality },
-                        { label: 'Transients', value: selectedDenoiseModel.transients },
-                        { label: 'Download', value: selectedDenoiseModel.binarySize },
-                      ] as const
-                    ).map((stat) => (
-                      <Box key={stat.label} direction="Column" gap="100">
-                        <Text size="T200" priority="300">
-                          {stat.label}
-                        </Text>
-                        <Text size="T300">{stat.value}</Text>
-                      </Box>
-                    ))}
-                  </Box>
-                </Box>
-              )}
-
-              <details>
-                <summary style={{ cursor: 'pointer' }}>
-                  <Text as="span" size="T200" priority="300">
-                    Compare all models
-                  </Text>
-                </summary>
-                <Box direction="Column" gap="100" style={{ overflowX: 'auto', marginTop: '8px' }}>
-                  <Box
-                    direction="Row"
-                    gap="100"
-                    style={{
-                      borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-                      paddingBottom: '4px',
-                    }}
-                  >
-                    <Box style={{ width: '160px' }}>
-                      <Text size="T200" priority="300">
-                        Model
-                      </Text>
-                    </Box>
-                    <Box style={{ width: '80px' }}>
-                      <Text size="T200" priority="300">
-                        CPU
-                      </Text>
-                    </Box>
-                    <Box style={{ width: '90px' }}>
-                      <Text size="T200" priority="300">
-                        Quality
-                      </Text>
-                    </Box>
-                    <Box grow="Yes">
-                      <Text size="T200" priority="300">
-                        Transients
-                      </Text>
-                    </Box>
-                  </Box>
-                  {DENOISE_MODELS.map((model) => (
-                    <Box key={model.id} direction="Row" gap="100">
-                      <Box style={{ width: '160px' }}>
-                        <Text size="T200">{model.name}</Text>
-                      </Box>
-                      <Box style={{ width: '80px' }}>
-                        <Text size="T200">{model.cpuUsage}</Text>
-                      </Box>
-                      <Box style={{ width: '90px' }}>
-                        <Text size="T200">{model.voiceQuality}</Text>
-                      </Box>
-                      <Box grow="Yes">
-                        <Text size="T200">{model.transients}</Text>
-                      </Box>
-                    </Box>
-                  ))}
-                </Box>
-              </details>
-
-              <Text size="T200" priority="400">
-                Note: Applying changes requires rejoining the call.
-              </Text>
-            </Box>
-
-            {/* ── Enhancement toggles ───────────────────────────────────── */}
-            <Box
-              direction="Column"
-              gap="300"
-              style={{
-                paddingTop: '12px',
-                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-              }}
-            >
-              <Text size="L400">Enhancements</Text>
-              <SettingTile
-                title="Also use the browser's noise suppression"
-                description="Run the browser's native stationary noise filter before the ML model. Recommended for eliminating fan hum."
-                after={
-                  <Switch
-                    variant="Primary"
-                    value={callDenoiseNativeNS}
-                    onChange={setCallDenoiseNativeNS}
-                  />
-                }
-              />
-
-              <SettingTile
-                title="Noise gate"
-                description="Hard-cut audio when you aren't speaking to ensure absolute silence between sentences."
-                after={
-                  <Switch variant="Primary" value={callDenoiseGate} onChange={setCallDenoiseGate} />
-                }
-              />
-
-              {callDenoiseGate && (
-                <Box direction="Column" gap="100">
-                  <Box direction="Row" justifyContent="SpaceBetween">
-                    <Text size="T200">Gate Threshold</Text>
-                    <Text size="T200">{callDenoiseGateThreshold} dB</Text>
-                  </Box>
-                  <input
-                    aria-label="Noise gate threshold"
-                    type="range"
-                    min="-100"
-                    max="0"
-                    step="1"
-                    value={callDenoiseGateThreshold}
-                    onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
-                    style={{ width: '100%', accentColor: color.Primary.Main }}
-                  />
-                </Box>
-              )}
-            </Box>
-
-            {/* ── Test & calibrate ──────────────────────────────────────── */}
-            <Box
-              direction="Column"
-              gap="200"
-              style={{
-                paddingTop: '12px',
-                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-              }}
-            >
-              <Text size="L400">Test and calibrate</Text>
-              <Text size="T200" priority="300">
-                Audition the selected model and tune the gate without joining a call. Changes to the
-                settings above apply the next time you start a monitor or play a clip.
-              </Text>
-              <DenoiseTester
-                model={callDenoiseModel}
-                useGate={callDenoiseGate}
-                gateThreshold={callDenoiseGateThreshold}
-                nativeNS={callDenoiseNativeNS}
-              />
-            </Box>
-          </Box>
-        )}
-      </SequenceCard>
-      <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="400"
-      >
-        <SettingTile
-          title="Rejoin calls after a restart"
-          description="If Lotus crashes, reloads or restarts for an update while you are in a voice room, put you back in."
-          after={
-            <SettingsSelect<'ask' | 'auto' | 'off'>
-              value={callRejoin}
-              onChange={setCallRejoin}
-              options={[
-                { value: 'ask', label: 'Ask' },
-                { value: 'auto', label: 'Rejoin automatically' },
-                { value: 'off', label: 'Do nothing' },
-              ]}
-            />
-          }
-        />
-        <SettingTile
-          title="Summary after calls"
-          description="When a call ends, show how long it was and how the connection held up, with a Details button for who was there, network numbers and your own talk/mute time."
-          after={
-            <Switch variant="Primary" value={callSummaryToast} onChange={setCallSummaryToast} />
-          }
-        />
-        {hapticsSupported() && (
+    // [Gitea #462] Fixed groups in every mode (it was one flat list).
+    <Box direction="Column" gap="700">
+      <Box direction="Column" gap="100">
+        <Text size="L400">Joining</Text>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
           <SettingTile
-            title="Haptic feedback"
-            description="A short vibration when push-to-talk engages or releases and when you send a reaction. Off automatically when your system prefers reduced motion."
-            after={<Switch variant="Primary" value={haptics} onChange={setHaptics} />}
+            title="Join with camera on"
+            description="Enable camera automatically when joining a voice or video call. Camera is off by default."
+            after={<Switch variant="Primary" value={cameraOnJoin} onChange={setCameraOnJoin} />}
           />
-        )}
-        <SettingTile
-          title="Push to talk"
-          description="Mute your microphone by default. Hold the PTT key to speak."
-          after={<Switch variant="Primary" value={pttMode} onChange={setPttMode} />}
-        />
-        {pttMode && (
+        </SequenceCard>
+        <SequenceCard
+          className={`${SequenceCardStyle} ${SettingTileGroup}`}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
           <SettingTile
-            title="Push-to-talk key"
-            description={pttBind.error ?? 'Press a key to bind it as your push-to-talk key.'}
+            title="Rejoin calls after a restart"
+            description="If Lotus crashes, reloads or restarts for an update while you are in a voice room, put you back in."
             after={
-              <Button
-                size="300"
-                variant={pttBind.listening ? 'Warning' : 'Secondary'}
-                fill={pttBind.listening ? 'Solid' : 'Soft'}
-                radii="300"
-                outlined
-                onClick={pttBind.startListening}
-                style={{ minWidth: '90px' }}
-              >
-                <Text size="B300">{pttBind.listening ? 'Press a key…' : keyLabel(pttKey)}</Text>
-              </Button>
-            }
-          />
-        )}
-        <SettingTile
-          title="Push to deafen"
-          description={
-            deafenBind.error ??
-            (deafenHotkey
-              ? `${
-                  // [Gitea #279] The Escape hint only applies while rebinding.
-                  deafenBind.listening
-                    ? 'Press a key to bind it, or Escape to cancel.'
-                    : `Press ${keyLabel(deafenKey)} during a call to mute your speakers.`
-                }${
-                  !isSafeGlobalToggleKey(deafenKey)
-                    ? ` A letter, digit or Space only works in the call view — on a chat screen typing takes priority${
-                        isTauriEnv() && globalCallHotkeys ? ' and other apps are never watched' : ''
-                      }. Bind an F-key or Numpad key to make it work everywhere.`
-                    : ''
-                }`
-              : 'Off — no key toggles deafen. Use the headphone button in the call bar.')
-          }
-          after={
-            <Box alignItems="Center" gap="200">
-              <Switch variant="Primary" value={deafenHotkey} onChange={setDeafenHotkey} />
-              {deafenHotkey && (
-                <Button
-                  size="300"
-                  variant={deafenBind.listening ? 'Warning' : 'Secondary'}
-                  fill={deafenBind.listening ? 'Solid' : 'Soft'}
-                  radii="300"
-                  outlined
-                  onClick={deafenBind.startListening}
-                  style={{ minWidth: '90px' }}
-                >
-                  <Text size="B300">
-                    {deafenBind.listening ? 'Press a key…' : keyLabel(deafenKey)}
-                  </Text>
-                </Button>
-              )}
-            </Box>
-          }
-        />
-        {isTauriEnv() && (
-          <SettingTile
-            title="Hotkeys work outside the window"
-            description="Keep Push to Talk and Push to Deafen working while a game or another app has focus. The keys are only watched during a call and are never blocked from other apps. Windows only; some anti-cheat systems may prevent it."
-            after={
-              <Switch variant="Primary" value={globalCallHotkeys} onChange={setGlobalCallHotkeys} />
-            }
-          />
-        )}
-      </SequenceCard>
-      <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="400"
-      >
-        <SettingTile
-          title="Warn me when I talk while muted"
-          description="Shows a one-time 'You're muted' nudge with an Unmute button when the mic hears you but is muted. Never while Push to Talk is on."
-          after={
-            <Switch variant="Primary" value={mutedTalkWarning} onChange={setMutedTalkWarning} />
-          }
-        />
-        <SettingTile
-          title="AFK auto-mute"
-          description="Automatically mute your microphone when you have been silent in a call."
-          after={<Switch variant="Primary" value={afkAutoMute} onChange={setAfkAutoMute} />}
-        />
-        {afkAutoMute && (
-          <SettingTile
-            title="Idle timeout"
-            description="How long to wait before auto-muting."
-            after={
-              <SettingsSelect
-                value={String(afkTimeoutMinutes ?? 10)}
-                onChange={(v) => setAfkTimeoutMinutes(Number(v))}
+              <SettingsSelect<'ask' | 'auto' | 'off'>
+                value={callRejoin}
+                onChange={setCallRejoin}
                 options={[
-                  { value: '1', label: '1 minute' },
-                  { value: '5', label: '5 minutes' },
-                  { value: '10', label: '10 minutes' },
-                  { value: '20', label: '20 minutes' },
-                  { value: '30', label: '30 minutes' },
+                  { value: 'ask', label: 'Ask' },
+                  { value: 'auto', label: 'Rejoin automatically' },
+                  { value: 'off', label: 'Do nothing' },
                 ]}
               />
             }
           />
-        )}
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Ringtone"
-          description="Sound played for incoming calls. Selecting an option plays a preview."
-          after={
-            <SettingsSelect
-              value={ringtoneId}
-              onChange={(v) => handleRingtoneChange(v as RingtoneId)}
-              options={RINGTONE_OPTIONS}
-            />
-          }
-        />
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile title="Ringtone volume" description="Volume of the incoming call ringtone." />
-        <Box
-          direction="Row"
-          alignItems="Center"
-          gap="200"
-          style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
-        >
-          <input
-            type="range"
-            min="0"
-            max="100"
-            step="5"
-            value={ringtoneVolume}
-            onChange={(e) => setRingtoneVolume(parseInt(e.target.value, 10))}
-            aria-label="Ringtone volume"
-            style={{ flex: 1, accentColor: color.Primary.Main }}
+          <SettingTile
+            title="Summary after calls"
+            description="When a call ends, show how long it was and how the connection held up, with a Details button for who was there, network numbers and your own talk/mute time."
+            after={
+              <Switch variant="Primary" value={callSummaryToast} onChange={setCallSummaryToast} />
+            }
           />
-          <Text size="T200" style={{ minWidth: '32px', textAlign: 'right' }}>
-            {ringtoneVolume}%
-          </Text>
-        </Box>
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Join and leave sounds"
-          description="Play a sound when someone joins or leaves a call you are in. Selecting an option plays a preview."
-          after={
-            <SettingsSelect
-              value={callJoinLeaveSound}
-              onChange={(v) => handleJoinLeaveSoundChange(v as 'off' | 'chime' | 'soft' | 'retro')}
-              options={[
-                { value: 'off', label: 'Off' },
-                { value: 'chime', label: 'Chime' },
-                { value: 'soft', label: 'Soft' },
-                { value: 'retro', label: 'Retro' },
-              ]}
-            />
-          }
-        />
-      </SequenceCard>
+        </SequenceCard>
+      </Box>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Microphone and noise</Text>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Noise suppression"
+            description={
+              <Box direction="Column" gap="200">
+                {/* [Gitea #271] T200 like every other setting description. */}
+                <Text size="T200">
+                  Filter background noise from your mic during calls. Browser-native uses the
+                  built-in WebRTC suppressor (Google NSNet2). ML runs a dedicated model for stronger
+                  removal.
+                </Text>
 
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Microphone bitrate"
-          description="Cap the audio bitrate your mic sends in calls. Lower saves bandwidth; higher is clearer. Auto lets Element Call decide."
-          after={
-            <SettingsSelect<CallAudioBitrate>
-              value={callAudioBitrate}
-              onChange={setCallAudioBitrate}
-              options={AUDIO_BITRATE_OPTIONS}
-            />
-          }
-        />
-      </SequenceCard>
-
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Screen share bitrate"
-          description="Cap the bitrate used when you share your screen. Lower is smoother on poor connections; higher is sharper."
-          after={
-            <SettingsSelect<ScreenshareBitrate>
-              value={screenshareBitrate}
-              onChange={setScreenshareBitrate}
-              options={SCREENSHARE_BITRATE_OPTIONS}
-            />
-          }
-        />
-      </SequenceCard>
-
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Screen share frame rate"
-          description="Cap the frames-per-second of your screenshare. 60 fps suits motion/gaming; 15 fps suits slides and saves bandwidth."
-          after={
-            <SettingsSelect<ScreenshareFramerate>
-              value={screenshareFramerate}
-              onChange={setScreenshareFramerate}
-              options={SCREENSHARE_FRAMERATE_OPTIONS}
-            />
-          }
-        />
-      </SequenceCard>
-
-      <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
-        variant="SurfaceVariant"
-        direction="Column"
-      >
-        <SettingTile
-          title="Soundboard"
-          description="Show a soundboard button in the call bar. Upload short audio clips (like custom emojis) to play them into the call. Clips sync across your devices."
-          after={
-            <Switch variant="Primary" value={soundboardEnabled} onChange={setSoundboardEnabled} />
-          }
-        />
-        {soundboardEnabled && (
-          <>
-            <SettingTile title="Soundboard volume" />
-            <Box
-              alignItems="Center"
-              gap="200"
-              style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
-            >
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={5}
-                value={soundboardVolume}
-                onChange={(e) => setSoundboardVolume(parseInt(e.target.value, 10))}
-                style={{ flexGrow: 1 }}
-                aria-label="Soundboard volume"
+                {!mlSupported && (
+                  <Box direction="Column" gap="100">
+                    <Text size="T200" priority="400">
+                      ML options are not supported in this browser.
+                    </Text>
+                    <Box as="ul" style={{ paddingLeft: '20px', margin: 0 }}>
+                      {ML_DENOISE_REQUIREMENTS.map((req) => (
+                        <Text as="li" key={req} size="T200">
+                          {req}
+                        </Text>
+                      ))}
+                    </Box>
+                  </Box>
+                )}
+              </Box>
+            }
+            after={
+              <SettingsSelect<NoiseSuppressionMode>
+                value={callNoiseSuppression}
+                onChange={setCallNoiseSuppression}
+                options={[
+                  { value: 'off', label: 'Off' },
+                  { value: 'browser', label: 'Browser-native' },
+                  {
+                    value: 'ml',
+                    label: 'ML (Advanced)',
+                    disabled: !mlSupported,
+                  },
+                ]}
               />
-              <Text size="T200" style={{ minWidth: toRem(36), textAlign: 'right' }}>
-                {soundboardVolume}%
-              </Text>
+            }
+          />
+
+          {callNoiseSuppression === 'ml' && (
+            <Box
+              direction="Column"
+              gap="400"
+              style={{
+                padding: '16px',
+                marginTop: '8px',
+                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                background: color.Surface.Container,
+              }}
+            >
+              {/* ── Model selection ───────────────────────────────────────── */}
+              <Box direction="Column" gap="200">
+                <Text size="L400">Model</Text>
+                <SettingTile
+                  title="ML model"
+                  description="Choose the machine learning model used for noise removal. Heavier models clean more aggressively at a higher CPU cost."
+                  after={
+                    <SettingsSelect<DenoiseModelId>
+                      value={callDenoiseModel}
+                      onChange={setCallDenoiseModel}
+                      options={DENOISE_MODELS.map((m) => ({ value: m.id, label: m.name }))}
+                    />
+                  }
+                />
+                {selectedDenoiseModel && (
+                  <Box
+                    direction="Column"
+                    gap="200"
+                    style={{
+                      padding: '12px',
+                      borderRadius: '8px',
+                      border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                      background: color.SurfaceVariant.Container,
+                    }}
+                  >
+                    <Text size="T300">{selectedDenoiseModel.name}</Text>
+                    <Text size="T200" priority="300">
+                      {selectedDenoiseModel.description}
+                    </Text>
+                    <Box direction="Row" gap="400" wrap="Wrap">
+                      {(
+                        [
+                          { label: 'CPU', value: selectedDenoiseModel.cpuUsage },
+                          { label: 'Voice quality', value: selectedDenoiseModel.voiceQuality },
+                          { label: 'Transients', value: selectedDenoiseModel.transients },
+                          { label: 'Download', value: selectedDenoiseModel.binarySize },
+                        ] as const
+                      ).map((stat) => (
+                        <Box key={stat.label} direction="Column" gap="100">
+                          <Text size="T200" priority="300">
+                            {stat.label}
+                          </Text>
+                          <Text size="T300">{stat.value}</Text>
+                        </Box>
+                      ))}
+                    </Box>
+                  </Box>
+                )}
+
+                <details>
+                  <summary style={{ cursor: 'pointer' }}>
+                    <Text as="span" size="T200" priority="300">
+                      Compare all models
+                    </Text>
+                  </summary>
+                  <Box direction="Column" gap="100" style={{ overflowX: 'auto', marginTop: '8px' }}>
+                    <Box
+                      direction="Row"
+                      gap="100"
+                      style={{
+                        borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                        paddingBottom: '4px',
+                      }}
+                    >
+                      <Box style={{ width: '160px' }}>
+                        <Text size="T200" priority="300">
+                          Model
+                        </Text>
+                      </Box>
+                      <Box style={{ width: '80px' }}>
+                        <Text size="T200" priority="300">
+                          CPU
+                        </Text>
+                      </Box>
+                      <Box style={{ width: '90px' }}>
+                        <Text size="T200" priority="300">
+                          Quality
+                        </Text>
+                      </Box>
+                      <Box grow="Yes">
+                        <Text size="T200" priority="300">
+                          Transients
+                        </Text>
+                      </Box>
+                    </Box>
+                    {DENOISE_MODELS.map((model) => (
+                      <Box key={model.id} direction="Row" gap="100">
+                        <Box style={{ width: '160px' }}>
+                          <Text size="T200">{model.name}</Text>
+                        </Box>
+                        <Box style={{ width: '80px' }}>
+                          <Text size="T200">{model.cpuUsage}</Text>
+                        </Box>
+                        <Box style={{ width: '90px' }}>
+                          <Text size="T200">{model.voiceQuality}</Text>
+                        </Box>
+                        <Box grow="Yes">
+                          <Text size="T200">{model.transients}</Text>
+                        </Box>
+                      </Box>
+                    ))}
+                  </Box>
+                </details>
+
+                <Text size="T200" priority="400">
+                  Note: Applying changes requires rejoining the call.
+                </Text>
+              </Box>
+
+              {/* ── Enhancement toggles ───────────────────────────────────── */}
+              <Box
+                direction="Column"
+                gap="300"
+                style={{
+                  paddingTop: '12px',
+                  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                }}
+              >
+                <Text size="L400">Enhancements</Text>
+                <SettingTile
+                  title="Also use the browser's noise suppression"
+                  description="Run the browser's native stationary noise filter before the ML model. Recommended for eliminating fan hum."
+                  after={
+                    <Switch
+                      variant="Primary"
+                      value={callDenoiseNativeNS}
+                      onChange={setCallDenoiseNativeNS}
+                    />
+                  }
+                />
+
+                <SettingTile
+                  title="Noise gate"
+                  description="Hard-cut audio when you aren't speaking to ensure absolute silence between sentences."
+                  after={
+                    <Switch
+                      variant="Primary"
+                      value={callDenoiseGate}
+                      onChange={setCallDenoiseGate}
+                    />
+                  }
+                />
+
+                {callDenoiseGate && (
+                  <Box direction="Column" gap="100">
+                    <Box direction="Row" justifyContent="SpaceBetween">
+                      <Text size="T200">Gate Threshold</Text>
+                      <Text size="T200">{callDenoiseGateThreshold} dB</Text>
+                    </Box>
+                    <input
+                      aria-label="Noise gate threshold"
+                      type="range"
+                      min="-100"
+                      max="0"
+                      step="1"
+                      value={callDenoiseGateThreshold}
+                      onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
+                      style={{ width: '100%', accentColor: color.Primary.Main }}
+                    />
+                  </Box>
+                )}
+              </Box>
+
+              {/* ── Test & calibrate ──────────────────────────────────────── */}
+              <Box
+                direction="Column"
+                gap="200"
+                style={{
+                  paddingTop: '12px',
+                  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                }}
+              >
+                <Text size="L400">Test and calibrate</Text>
+                <Text size="T200" priority="300">
+                  Audition the selected model and tune the gate without joining a call. Changes to
+                  the settings above apply the next time you start a monitor or play a clip.
+                </Text>
+                <DenoiseTester
+                  model={callDenoiseModel}
+                  useGate={callDenoiseGate}
+                  gateThreshold={callDenoiseGateThreshold}
+                  nativeNS={callDenoiseNativeNS}
+                />
+              </Box>
             </Box>
-          </>
-        )}
-      </SequenceCard>
+          )}
+        </SequenceCard>
+        <SequenceCard
+          className={`${SequenceCardStyle} ${SettingTileGroup}`}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title="Warn me when I talk while muted"
+            description="Shows a one-time 'You're muted' nudge with an Unmute button when the mic hears you but is muted. Never while Push to Talk is on."
+            after={
+              <Switch variant="Primary" value={mutedTalkWarning} onChange={setMutedTalkWarning} />
+            }
+          />
+          <SettingTile
+            title="AFK auto-mute"
+            description="Automatically mute your microphone when you have been silent in a call."
+            after={<Switch variant="Primary" value={afkAutoMute} onChange={setAfkAutoMute} />}
+          />
+          {afkAutoMute && (
+            <SettingTile
+              title="Idle timeout"
+              description="How long to wait before auto-muting."
+              after={
+                <SettingsSelect
+                  value={String(afkTimeoutMinutes ?? 10)}
+                  onChange={(v) => setAfkTimeoutMinutes(Number(v))}
+                  options={[
+                    { value: '1', label: '1 minute' },
+                    { value: '5', label: '5 minutes' },
+                    { value: '10', label: '10 minutes' },
+                    { value: '20', label: '20 minutes' },
+                    { value: '30', label: '30 minutes' },
+                  ]}
+                />
+              }
+            />
+          )}
+        </SequenceCard>
+      </Box>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Push to talk and hotkeys</Text>
+        <SequenceCard
+          className={`${SequenceCardStyle} ${SettingTileGroup}`}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title="Push to talk"
+            description="Mute your microphone by default. Hold the PTT key to speak."
+            after={<Switch variant="Primary" value={pttMode} onChange={setPttMode} />}
+          />
+          {pttMode && (
+            <SettingTile
+              title="Push-to-talk key"
+              description={pttBind.error ?? 'Press a key to bind it as your push-to-talk key.'}
+              after={
+                <Button
+                  size="300"
+                  variant={pttBind.listening ? 'Warning' : 'Secondary'}
+                  fill={pttBind.listening ? 'Solid' : 'Soft'}
+                  radii="300"
+                  outlined
+                  onClick={pttBind.startListening}
+                  style={{ minWidth: '90px' }}
+                >
+                  <Text size="B300">{pttBind.listening ? 'Press a key…' : keyLabel(pttKey)}</Text>
+                </Button>
+              }
+            />
+          )}
+          <SettingTile
+            title="Push to deafen"
+            description={
+              deafenBind.error ??
+              (deafenHotkey
+                ? `${
+                    // [Gitea #279] The Escape hint only applies while rebinding.
+                    deafenBind.listening
+                      ? 'Press a key to bind it, or Escape to cancel.'
+                      : `Press ${keyLabel(deafenKey)} during a call to mute your speakers.`
+                  }${
+                    !isSafeGlobalToggleKey(deafenKey)
+                      ? ` A letter, digit or Space only works in the call view — on a chat screen typing takes priority${
+                          isTauriEnv() && globalCallHotkeys
+                            ? ' and other apps are never watched'
+                            : ''
+                        }. Bind an F-key or Numpad key to make it work everywhere.`
+                      : ''
+                  }`
+                : 'Off — no key toggles deafen. Use the headphone button in the call bar.')
+            }
+            after={
+              <Box alignItems="Center" gap="200">
+                <Switch variant="Primary" value={deafenHotkey} onChange={setDeafenHotkey} />
+                {deafenHotkey && (
+                  <Button
+                    size="300"
+                    variant={deafenBind.listening ? 'Warning' : 'Secondary'}
+                    fill={deafenBind.listening ? 'Solid' : 'Soft'}
+                    radii="300"
+                    outlined
+                    onClick={deafenBind.startListening}
+                    style={{ minWidth: '90px' }}
+                  >
+                    <Text size="B300">
+                      {deafenBind.listening ? 'Press a key…' : keyLabel(deafenKey)}
+                    </Text>
+                  </Button>
+                )}
+              </Box>
+            }
+          />
+          {isTauriEnv() && (
+            <SettingTile
+              title="Hotkeys work outside the window"
+              description="Keep Push to Talk and Push to Deafen working while a game or another app has focus. The keys are only watched during a call and are never blocked from other apps. Windows only; some anti-cheat systems may prevent it."
+              after={
+                <Switch
+                  variant="Primary"
+                  value={globalCallHotkeys}
+                  onChange={setGlobalCallHotkeys}
+                />
+              }
+            />
+          )}
+          {hapticsSupported() && (
+            <SettingTile
+              title="Haptic feedback"
+              description="A short vibration when push-to-talk engages or releases and when you send a reaction. Off automatically when your system prefers reduced motion."
+              after={<Switch variant="Primary" value={haptics} onChange={setHaptics} />}
+            />
+          )}
+        </SequenceCard>
+      </Box>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Sounds</Text>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Ringtone"
+            description="Sound played for incoming calls. Selecting an option plays a preview."
+            after={
+              <SettingsSelect
+                value={ringtoneId}
+                onChange={(v) => handleRingtoneChange(v as RingtoneId)}
+                options={RINGTONE_OPTIONS}
+              />
+            }
+          />
+        </SequenceCard>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Ringtone volume"
+            description="Volume of the incoming call ringtone."
+          />
+          <Box
+            direction="Row"
+            alignItems="Center"
+            gap="200"
+            style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
+          >
+            <input
+              type="range"
+              min="0"
+              max="100"
+              step="5"
+              value={ringtoneVolume}
+              onChange={(e) => setRingtoneVolume(parseInt(e.target.value, 10))}
+              aria-label="Ringtone volume"
+              style={{ flex: 1, accentColor: color.Primary.Main }}
+            />
+            <Text size="T200" style={{ minWidth: '32px', textAlign: 'right' }}>
+              {ringtoneVolume}%
+            </Text>
+          </Box>
+        </SequenceCard>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Join and leave sounds"
+            description="Play a sound when someone joins or leaves a call you are in. Selecting an option plays a preview."
+            after={
+              <SettingsSelect
+                value={callJoinLeaveSound}
+                onChange={(v) =>
+                  handleJoinLeaveSoundChange(v as 'off' | 'chime' | 'soft' | 'retro')
+                }
+                options={[
+                  { value: 'off', label: 'Off' },
+                  { value: 'chime', label: 'Chime' },
+                  { value: 'soft', label: 'Soft' },
+                  { value: 'retro', label: 'Retro' },
+                ]}
+              />
+            }
+          />
+        </SequenceCard>
+      </Box>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Quality</Text>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Microphone bitrate"
+            description="Cap the audio bitrate your mic sends in calls. Lower saves bandwidth; higher is clearer. Auto lets Element Call decide."
+            after={
+              <SettingsSelect<CallAudioBitrate>
+                value={callAudioBitrate}
+                onChange={setCallAudioBitrate}
+                options={AUDIO_BITRATE_OPTIONS}
+              />
+            }
+          />
+        </SequenceCard>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Screen share bitrate"
+            description="Cap the bitrate used when you share your screen. Lower is smoother on poor connections; higher is sharper."
+            after={
+              <SettingsSelect<ScreenshareBitrate>
+                value={screenshareBitrate}
+                onChange={setScreenshareBitrate}
+                options={SCREENSHARE_BITRATE_OPTIONS}
+              />
+            }
+          />
+        </SequenceCard>
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Screen share frame rate"
+            description="Cap the frames-per-second of your screenshare. 60 fps suits motion/gaming; 15 fps suits slides and saves bandwidth."
+            after={
+              <SettingsSelect<ScreenshareFramerate>
+                value={screenshareFramerate}
+                onChange={setScreenshareFramerate}
+                options={SCREENSHARE_FRAMERATE_OPTIONS}
+              />
+            }
+          />
+        </SequenceCard>
+      </Box>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Soundboard</Text>
+        <SequenceCard
+          className={`${SequenceCardStyle} ${SettingTileGroup}`}
+          variant="SurfaceVariant"
+          direction="Column"
+        >
+          <SettingTile
+            title="Soundboard"
+            description="Show a soundboard button in the call bar. Upload short audio clips (like custom emojis) to play them into the call. Clips sync across your devices."
+            after={
+              <Switch variant="Primary" value={soundboardEnabled} onChange={setSoundboardEnabled} />
+            }
+          />
+          {soundboardEnabled && (
+            <>
+              <SettingTile title="Soundboard volume" />
+              <Box
+                alignItems="Center"
+                gap="200"
+                style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
+              >
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  step={5}
+                  value={soundboardVolume}
+                  onChange={(e) => setSoundboardVolume(parseInt(e.target.value, 10))}
+                  style={{ flexGrow: 1 }}
+                  aria-label="Soundboard volume"
+                />
+                <Text size="T200" style={{ minWidth: toRem(36), textAlign: 'right' }}>
+                  {soundboardVolume}%
+                </Text>
+              </Box>
+            </>
+          )}
+        </SequenceCard>
+      </Box>
     </Box>
   );
 }
@@ -2404,6 +2522,65 @@ const SEASONAL_OPTIONS: {
   { value: 'deepspace', label: 'Deep Space', emoji: '🚀' },
 ];
 
+/**
+ * [Gitea #460] A picker grid behind one row: the current choice and a Change
+ * button. The big grids (27 backgrounds, 13 seasonal themes) used to be always
+ * open and made Appearance about 2.5 screens long. Closes after a choice.
+ */
+export function CollapsiblePicker({
+  title,
+  description,
+  current,
+  children,
+}: {
+  title: string;
+  description?: ReactNode;
+  current: string;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const [openedWith, setOpenedWith] = useState(current);
+  useEffect(() => {
+    if (open && current !== openedWith) setOpen(false);
+  }, [open, current, openedWith]);
+  const id = `picker-${title.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`;
+  return (
+    <>
+      <SettingTile
+        title={title}
+        description={description}
+        after={
+          <Box alignItems="Center" gap="200" shrink="No">
+            <Text size="T300" priority="300">
+              {current}
+            </Text>
+            <Button
+              size="300"
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              outlined
+              aria-expanded={open}
+              aria-controls={id}
+              onClick={() => {
+                setOpenedWith(current);
+                setOpen((o) => !o);
+              }}
+            >
+              <Text size="B300">{open ? 'Done' : 'Change'}</Text>
+            </Button>
+          </Box>
+        }
+      />
+      {open && (
+        <Box id={id} style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}>
+          {children}
+        </Box>
+      )}
+    </>
+  );
+}
+
 function SeasonalBgGrid({
   value,
   onChange,
@@ -2663,11 +2840,7 @@ function SelectMessageSpacing() {
   );
 }
 
-function Messages() {
-  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
-    settingsAtom,
-    'legacyUsernameColor',
-  );
+export function Messages() {
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
     settingsAtom,
     'hideMembershipEvents',
@@ -2677,10 +2850,7 @@ function Messages() {
     'hideNickAvatarEvents',
   );
   const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [inlineMediaEmbeds, setInlineMediaEmbeds] = useSetting(settingsAtom, 'inlineMediaEmbeds');
-  const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const [enforceRetentionLocally, setEnforceRetentionLocally] = useSetting(
     settingsAtom,
     'enforceRetentionLocally',
@@ -2707,18 +2877,6 @@ function Messages() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile title="Message spacing" after={<SelectMessageSpacing />} />
       </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Legacy username colour"
-          after={
-            <Switch
-              variant="Primary"
-              value={legacyUsernameColor}
-              onChange={setLegacyUsernameColor}
-            />
-          }
-        />
-      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Hide joins and leaves"
@@ -2755,37 +2913,6 @@ function Messages() {
           }
         />
       </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Link previews"
-          description="Your homeserver fetches and caches link previews. It will see the URLs of all links you preview."
-          after={<Switch variant="Primary" value={urlPreview} onChange={setUrlPreview} />}
-        />
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Link previews in encrypted rooms"
-          description={
-            <Box direction="Column" gap="100">
-              <Text size="T200" priority="300">
-                Your homeserver fetches link previews on your behalf. It cannot decrypt your
-                messages, but will see every URL you preview in encrypted rooms, potentially
-                revealing conversation topics.
-              </Text>
-              <Chip
-                variant="Warning"
-                fill="Soft"
-                radii="300"
-                size="400"
-                style={{ alignSelf: 'flex-start' }}
-              >
-                <Text size="T200">Privacy risk — enabled by default</Text>
-              </Chip>
-            </Box>
-          }
-          after={<Switch variant="Primary" value={encUrlPreview} onChange={setEncUrlPreview} />}
-        />
-      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Inline media players"
@@ -2808,14 +2935,6 @@ function Messages() {
           />
         </SequenceCard>
       )}
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Show hidden events"
-          after={
-            <Switch variant="Primary" value={showHiddenEvents} onChange={setShowHiddenEvents} />
-          }
-        />
-      </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Enforce message retention"
@@ -2940,7 +3059,7 @@ function PackageUpdate({ help }: { help: NonNullable<ReturnType<typeof packageUp
  * inside Appearance, between Monochrome Mode and Twitter Emoji). Renders
  * nothing outside the desktop app.
  */
-function DesktopSettings() {
+export function DesktopSettings() {
   if (!isTauriEnv()) return null;
   return (
     <Box direction="Column" gap="100">
@@ -2952,7 +3071,7 @@ function DesktopSettings() {
   );
 }
 
-function AppUpdates() {
+export function AppUpdates() {
   const { isTauri, status, check, install, installKind } = useTauriUpdater();
   if (!isTauri) return null;
   const packageHelp = packageUpdateHelp(installKind);
@@ -3031,14 +3150,60 @@ function AppUpdates() {
 type GeneralProps = {
   requestClose: () => void;
 };
-export function General({ requestClose }: GeneralProps) {
+
+/** [Gitea #459] Display options for people who want to see the plumbing. */
+export function AdvancedDisplayOptions() {
+  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
+    settingsAtom,
+    'legacyUsernameColor',
+  );
+  const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Display</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Legacy username colour"
+          after={
+            <Switch
+              variant="Primary"
+              value={legacyUsernameColor}
+              onChange={setLegacyUsernameColor}
+            />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Show hidden events"
+          after={
+            <Switch variant="Primary" value={showHiddenEvents} onChange={setShowHiddenEvents} />
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
+
+/**
+ * [Gitea #459] General used to hold 76 of the ~110 settings (11 screens). Its
+ * sections now live on pages named for what people come to do; Privacy goes
+ * to Privacy & security (devices/Devices.tsx) and the display plumbing to
+ * Advanced (developer-tools).
+ */
+function SectionPage({
+  title,
+  requestClose,
+  children,
+}: GeneralProps & { title: string; children: ReactNode }) {
   return (
     <Page>
       <PageHeader outlined={false}>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
-              General
+              {title}
             </Text>
           </Box>
           <Box shrink="No">
@@ -3052,17 +3217,7 @@ export function General({ requestClose }: GeneralProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
-              <Appearance />
-              <DateAndTime />
-              <Editor />
-              <Messages />
-              <Privacy />
-              <StorageUsage />
-              <SettingsSyncSection />
-              <YourDataSection />
-              <Calls />
-              <DesktopSettings />
-              <AppUpdates />
+              {children}
             </Box>
           </PageContent>
         </Scroll>
@@ -3070,3 +3225,49 @@ export function General({ requestClose }: GeneralProps) {
     </Page>
   );
 }
+
+export function AppearancePage({ requestClose }: GeneralProps) {
+  return (
+    <SectionPage title="Appearance" requestClose={requestClose}>
+      <Appearance />
+    </SectionPage>
+  );
+}
+
+export function MessagesPage({ requestClose }: GeneralProps) {
+  return (
+    <SectionPage title="Messages" requestClose={requestClose}>
+      <Messages />
+      <Editor />
+      <DateAndTime />
+    </SectionPage>
+  );
+}
+
+export function CallsPage({ requestClose }: GeneralProps) {
+  return (
+    <SectionPage title="Calls & audio" requestClose={requestClose}>
+      <Calls />
+    </SectionPage>
+  );
+}
+
+export function DataStoragePage({ requestClose }: GeneralProps) {
+  return (
+    <SectionPage title="Data & storage" requestClose={requestClose}>
+      <StorageUsage />
+      <SettingsSyncSection />
+      <YourDataSection />
+    </SectionPage>
+  );
+}
+
+/** Desktop app only (the menu hides it elsewhere). */
+export function DesktopPage({ requestClose }: GeneralProps) {
+  return (
+    <SectionPage title="Desktop" requestClose={requestClose}>
+      <DesktopSettings />
+      <AppUpdates />
+    </SectionPage>
+  );
+}
diff --git a/src/app/features/settings/general/YourData.tsx b/src/app/features/settings/general/YourData.tsx
index 1a9ea2e40..833a497e4 100644
--- a/src/app/features/settings/general/YourData.tsx
+++ b/src/app/features/settings/general/YourData.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { useAtom } from 'jotai';
 import { Method } from 'matrix-js-sdk';
-import { Box, Button, Text, color } from 'folds';
+import { Box, Button, RadioButton, Text, color } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -224,22 +224,24 @@ export function YourDataSection() {
                   here:
                 </Text>
                 <label>
-                  <input
-                    type="radio"
+                  <RadioButton
                     name="your-data-conflicts"
+                    variant="Primary"
+                    size="300"
                     checked={!preferFile}
-                    onChange={() => setPreferFile(false)}
+                    onClick={() => setPreferFile(false)}
                   />{' '}
                   <Text as="span" size="T200">
                     Keep mine
                   </Text>
                 </label>
                 <label>
-                  <input
-                    type="radio"
+                  <RadioButton
                     name="your-data-conflicts"
+                    variant="Primary"
+                    size="300"
                     checked={preferFile}
-                    onChange={() => setPreferFile(true)}
+                    onClick={() => setPreferFile(true)}
                   />{' '}
                   <Text as="span" size="T200">
                     Use the file&apos;s
diff --git a/src/app/features/settings/notifications/PushRuleEditor.tsx b/src/app/features/settings/notifications/PushRuleEditor.tsx
index 6e92096ab..628b3e56f 100644
--- a/src/app/features/settings/notifications/PushRuleEditor.tsx
+++ b/src/app/features/settings/notifications/PushRuleEditor.tsx
@@ -334,6 +334,11 @@ export function PushRuleEditor() {
   return (
     <Box direction="Column" gap="100">
       <Text size="L400">Advanced push rules</Text>
+      {/* [Gitea #459] Matrix terms kept, with one line on what they are. */}
+      <Text size="T200" priority="300">
+        The raw Matrix notification rules behind the options above, checked in this order: override,
+        room, sender, then underride. You rarely need to change these.
+      </Text>
       <RuleSection title="Override rules" kind={PushRuleKind.Override} rules={overrideRules} />
       <RuleSection
         title="Room rules"
diff --git a/src/app/features/settings/pages.ts b/src/app/features/settings/pages.ts
index 94d9db903..4907981a5 100644
--- a/src/app/features/settings/pages.ts
+++ b/src/app/features/settings/pages.ts
@@ -1,11 +1,19 @@
 /** Settings dialog pages. Kept apart from Settings.tsx so callers can name a
  * page without pulling the dialog into the entry chunk. */
 export enum SettingsPages {
-  GeneralPage,
   AccountPage,
+  // [Gitea #459] These replace the old catch-all General page.
+  AppearancePage,
+  MessagesPage,
   NotificationPage,
+  CallsPage,
+  /** "Privacy & security": privacy options plus devices and encryption. */
   DevicesPage,
+  DataStoragePage,
+  /** Desktop app only. */
+  DesktopPage,
   EmojisStickersPage,
+  /** "Advanced": developer tools and display plumbing. */
   DeveloperToolsPage,
   AboutPage,
 }
diff --git a/src/app/hooks/useSettingsSync.ts b/src/app/hooks/useSettingsSync.ts
index 8cec492fa..f5587410b 100644
--- a/src/app/hooks/useSettingsSync.ts
+++ b/src/app/hooks/useSettingsSync.ts
@@ -140,7 +140,7 @@ export function useSettingsSync(): void {
 }
 
 /**
- * Manual actions for Settings → General → Sync. `pushNow` stamps a fresh
+ * Manual actions for Settings → Data & storage → Sync. `pushNow` stamps a fresh
  * snapshot of THIS device so it wins on every other device; `clearRemote`
  * blanks the account-data event (other devices ignore the invalid content and
  * keep their local settings until someone pushes again).
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index e736f08e2..d1f152cc4 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -1015,13 +1015,13 @@ function TauriUpdateFeature() {
     dismissToast(UPDATE_PROGRESS_TOAST);
     if (!failure) return;
     // Short on purpose; the full explanation and a Download installer button
-    // are in Settings → General → App updates.
+    // are in Settings → Desktop → App updates.
     const busy = failure.phase !== 'install' && isNetworkUpdateError(failure.message);
     setToast({
       id: UPDATE_FAILED_TOAST,
       iconSrc: Icons.Warning,
       displayName: 'Update didn’t install',
-      body: `${busy ? 'The update server seems busy. ' : ''}Click to try again, or get the installer in Settings → General → App updates.`,
+      body: `${busy ? 'The update server seems busy. ' : ''}Click to try again, or get the installer in Settings → Desktop → App updates.`,
       roomName: 'System',
       roomId: '',
       sticky: true,
@@ -1062,7 +1062,7 @@ function TauriUpdateFeature() {
       roomName: 'System',
       roomId: '',
       onClick: () => {
-        if (viaPackage) requestSettings('general');
+        if (viaPackage) requestSettings('desktop');
         else installFromToast();
       },
       sticky: true,
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 1c2b7c379..fd444594a 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -61,7 +61,7 @@ import { AutoDiscovery } from './AutoDiscovery';
 
 // Capture-only E2EE diagnostics ring buffer (KE-1→4 signatures) — installed at
 // module load so it sees crypto warnings from the very first sync. Idempotent;
-// report download lives in Settings → Developer Tools → Crypto Diagnostics.
+// report download lives in Settings → Advanced → Crypto diagnostics.
 installCryptoDiagLog();
 
 function ClientRootLoading() {
diff --git a/src/app/pages/client/KeyUploadBanner.tsx b/src/app/pages/client/KeyUploadBanner.tsx
index 7fd2e5d98..7f71d4708 100644
--- a/src/app/pages/client/KeyUploadBanner.tsx
+++ b/src/app/pages/client/KeyUploadBanner.tsx
@@ -72,8 +72,8 @@ export function KeyUploadBanner() {
               rejects every new upload and other people can&apos;t start fresh encrypted sessions
               with you. This usually happens after the browser cleared this site&apos;s storage
               while you stayed signed in. Before signing out, make sure this device is verified or
-              key backup is on (Settings → Devices), so your message history comes back when you
-              sign in again.
+              key backup is on (Settings → Privacy & security), so your message history comes back
+              when you sign in again.
             </Text>
             {lastError && (
               <Text size="T200" align="Center" priority="300" style={{ wordBreak: 'break-word' }}>
diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 081d87c95..f12457db3 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -180,7 +180,10 @@ export function SettingsTab() {
   useEffect(() => {
     if (!settingsRequest) return;
     const page = {
-      general: SettingsPages.GeneralPage,
+      // [Gitea #459] General is gone; its old deep links land on Appearance.
+      general: SettingsPages.AppearancePage,
+      appearance: SettingsPages.AppearancePage,
+      desktop: SettingsPages.DesktopPage,
       account: SettingsPages.AccountPage,
       notifications: SettingsPages.NotificationPage,
       devices: SettingsPages.DevicesPage,
diff --git a/src/app/state/settingsRequest.ts b/src/app/state/settingsRequest.ts
index 5e2ce23b6..3c68adced 100644
--- a/src/app/state/settingsRequest.ts
+++ b/src/app/state/settingsRequest.ts
@@ -1,6 +1,12 @@
 import { atom } from 'jotai';
 
-export type SettingsRequestPage = 'general' | 'account' | 'notifications' | 'devices';
+export type SettingsRequestPage =
+  | 'general'
+  | 'account'
+  | 'notifications'
+  | 'devices'
+  | 'desktop'
+  | 'appearance';
 
 /**
  * Ask the sidebar to open User Settings at a page from anywhere in the app
diff --git a/src/app/utils/securityNudge.ts b/src/app/utils/securityNudge.ts
index 38b82182a..04a2c995d 100644
--- a/src/app/utils/securityNudge.ts
+++ b/src/app/utils/securityNudge.ts
@@ -10,7 +10,7 @@
  *   cross-signing: the setup flow does both).
  *
  * - stale-sessions (#113, lowest priority): sessions of this account not used
- *   for 90+ days; Review opens Settings → Devices with them ticked to sign out.
+ *   for 90+ days; Review opens Settings → Privacy & security with them ticked to sign out.
  *
  * Anything not yet known (crypto still loading) → no nudge. Timing: not in
  * the first 24 h on a device (onboarding), "Not now" snoozes 7 days, three