From c28634e721674fac2ad279814bfc8020981d81e8 Mon Sep 17 00:00:00 2001
From: Laurin-Notemann <47634664+Laurin-Notemann@users.noreply.github.com>
Date: Fri, 16 Oct 2026 18:31:06 +0000
Subject: [PATCH] fix(otterware): module settings use one frame,
 Mail/Calendar/Drive pages match Otter Mail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Module settings pages were wrapped twice (a titled card from the host,
then the module's own section), sidebars repeated the module name
(Mail › Reading under the Mail header), Mail rows carried "Account" on
every row, and Calendar and Drive pages mixed raw headings, checkboxes and
loose rows. Standalone apps showed Code-only rows on General.

- Host no longer wraps module pages (own route and merged placements);
  each page draws its own sections. Sidebar shows the page name; the
  breadcrumb keeps "Mail › …". The Code scope sentence hides on module
  pages unless a scope is picked.
- Mail: General (Startup & Dock, Mail, Translation, System, Getting
  started, Support), Appearance (layout and list-style tiles, seconds
  slider) and Mailboxes (list and per-mailbox details). OpenRouter row
  dropped (Agents owns it). Dropdowns show labels, not raw values. Only
  non-account scopes are labelled.
- Calendar: General in Week / Working hours / Events / Reminders cards with
  switches, day toggles and a time-zone select; Calendars with switches,
  colour swatches and a Sync card.
- Drive: Drives and Sharing pages with an intro line and a folder picker
  card; merged rows get their own sections.
- Standalone profiles hide Code-only General rows and their search results
  (projects, worktrees, diffs, pull requests, commit text, legacy).
- New Otter-owned SettingsTilePicker and SettingsSlider in the host style.
  SettingsPanels.tsx and ProjectDefaultsSettings.tsx become upstream seams
  for the `hidden` attributes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../settings/ProjectDefaultsSettings.tsx      |   3 +
 .../components/settings/SettingsPanels.tsx    |  31 +-
 .../settings/SettingsSidebarNav.tsx           |   3 +-
 .../components/settings/settingsLayout.tsx    |   8 +-
 .../src/components/settings/settingsSearch.ts |   2 +
 .../src/otterware/ModuleSettingsMerges.tsx    |  16 +-
 .../otterware/calendar/CalendarWebModule.tsx  |  22 +-
 .../calendar/ui/CalendarSettings.tsx          | 559 ++++++++++--------
 .../src/otterware/drive/DriveWebModule.tsx    |   4 +-
 .../src/otterware/drive/ui/DriveSettings.tsx  |  73 +--
 .../drive/ui/main/settings/folder-pane.tsx    |   7 +-
 .../drive/ui/main/settings/folder-picker.tsx  |  43 ++
 .../drive/ui/main/settings/members-pane.tsx   |   3 +-
 .../drive/ui/main/settings/settings-ui.tsx    |  15 +-
 apps/web/src/otterware/mail/MailSettings.tsx  |  20 +-
 apps/web/src/otterware/mail/MailWebModule.ts  |  53 +-
 .../otterware/mail/content/main/home-view.tsx |   3 +-
 .../mail/content/main/reading-preferences.ts  |   6 +-
 .../content/main/settings/accounts-pane.tsx   |  32 +-
 .../content/main/settings/appearance-rows.tsx | 280 +++++++++
 .../content/main/settings/general-rows.tsx    | 256 ++++----
 .../content/main/settings/reading-rows.tsx    | 123 ----
 .../content/main/settings/settings-ui.tsx     |  19 +-
 .../main/settings/translation-section.tsx     |   9 -
 apps/web/src/otterware/mail/rpc/host.ts       |  12 +-
 apps/web/src/otterware/mail/settingsPaths.ts  |  22 +
 apps/web/src/otterware/mail/settingsRows.ts   |  31 +-
 .../src/otterware/settings/SettingsSlider.tsx |  59 ++
 .../otterware/settings/SettingsTilePicker.tsx |  91 +++
 apps/web/src/otterware/settingsRegistry.ts    |  77 ++-
 .../src/routes/settings.$moduleId.$pageId.tsx |  12 +-
 scripts/otterware/upstream-seams.txt          |   3 +
 32 files changed, 1202 insertions(+), 695 deletions(-)
 create mode 100644 apps/web/src/otterware/drive/ui/main/settings/folder-picker.tsx
 create mode 100644 apps/web/src/otterware/mail/content/main/settings/appearance-rows.tsx
 delete mode 100644 apps/web/src/otterware/mail/content/main/settings/reading-rows.tsx
 create mode 100644 apps/web/src/otterware/mail/settingsPaths.ts
 create mode 100644 apps/web/src/otterware/settings/SettingsSlider.tsx
 create mode 100644 apps/web/src/otterware/settings/SettingsTilePicker.tsx

diff --git a/apps/web/src/components/settings/ProjectDefaultsSettings.tsx b/apps/web/src/components/settings/ProjectDefaultsSettings.tsx
index 58f4d10b3f..18fbf41c34 100644
--- a/apps/web/src/components/settings/ProjectDefaultsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectDefaultsSettings.tsx
@@ -9,6 +9,7 @@ import { resolveProjectSettings } from "@t3tools/shared/projectSettings";
 import { useNavigate } from "@tanstack/react-router";
 
 import { mergeEnvironmentSettings } from "../../hooks/useSettings";
+import { isProfileSettingVisible } from "../../otterware/settingsRegistry";
 import { getCustomModelOptionsByInstance } from "../../modelSelection";
 import {
   applyProviderInstanceSettings,
@@ -213,6 +214,7 @@ export function ProjectDefaultsSettings({ category }: { category: ProjectSetting
       settingKeys={["defaultThreadEnvMode"]}
       mixed={mixedWorkspace}
       id={searchableSetting("new-threads").id}
+      hidden={!isProfileSettingVisible("new-threads")}
       title="Workspace"
       description={
         isProjectScope
@@ -347,6 +349,7 @@ export function ProjectDefaultsSettings({ category }: { category: ProjectSetting
             settingKeys={["worktreeSubmodules"]}
             mixed={mixedSubmodules}
             {...searchableSetting("worktree-submodules")}
+            hidden={!isProfileSettingVisible("worktree-submodules")}
             description={
               isProjectScope
                 ? "How new worktrees in this project populate git submodules."
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 89d372ca92..78928b2b67 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1,4 +1,5 @@
 import { ProfileWordmark } from "../../otterware/ProfileLogo";
+import { isProfileSettingVisible } from "../../otterware/settingsRegistry";
 import { SettingsGroup } from "./SettingsGroup";
 import { useScopedSettingsWriteAllowed } from "./useScopedSettings";
 import { Spinner } from "~/components/ui/spinner";
@@ -2124,7 +2125,13 @@ function LegacyFeaturesSection() {
   }, [searchTargetId]);
 
   return (
-    <section id="legacy-features" ref={targetRef} tabIndex={-1} className="space-y-2.5">
+    <section
+      id="legacy-features"
+      ref={targetRef}
+      tabIndex={-1}
+      hidden={!isProfileSettingVisible("legacy-features")}
+      className="space-y-2.5"
+    >
       <Collapsible open={open} onOpenChange={setOpen}>
         <CollapsibleTrigger className="group flex min-h-8 w-full items-center gap-2 px-3 sm:px-4">
           <h2 className="text-sm font-normal text-foreground/70 transition-colors group-hover:text-foreground">
@@ -2277,7 +2284,11 @@ export function GeneralSettingsPanel() {
   return (
     <SettingsPageContainer>
       <ProjectDefaultsSettings category="general" />
-      <SettingsSection id="organization" title="Organization">
+      <SettingsSection
+        id="organization"
+        title="Organization"
+        hidden={!isProfileSettingVisible("organization")}
+      >
         <SettingsRow
           {...searchableSetting("project-grouping")}
           description="Combine matching repositories across environments."
@@ -2618,6 +2629,7 @@ export function GeneralSettingsPanel() {
         />
         <SettingsRow
           {...searchableSetting("hide-whitespace-changes")}
+          hidden={!isProfileSettingVisible("hide-whitespace-changes")}
           description="Set whether the diff panel ignores whitespace-only edits by default."
           resetAction={
             settings.diffIgnoreWhitespace !== DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace ? (
@@ -2643,6 +2655,7 @@ export function GeneralSettingsPanel() {
         />
         <SettingsRow
           {...searchableSetting("default-diff-file-state")}
+          hidden={!isProfileSettingVisible("default-diff-file-state")}
           description="Start with files expanded or collapsed when opening diffs or a pull request's Code tab."
           resetAction={
             settings.diffFilesCollapsed !== DEFAULT_UNIFIED_SETTINGS.diffFilesCollapsed ? (
@@ -2685,6 +2698,7 @@ export function GeneralSettingsPanel() {
         />
         <SettingsRow
           {...searchableSetting("diff-layout")}
+          hidden={!isProfileSettingVisible("diff-layout")}
           description="Show diffs stacked or side by side. The toggle in the diff toolbar changes this too."
           resetAction={
             settings.diffLayout !== DEFAULT_UNIFIED_SETTINGS.diffLayout ? (
@@ -2720,6 +2734,7 @@ export function GeneralSettingsPanel() {
 
         <SettingsRow
           {...searchableSetting("proactive-panels")}
+          hidden={!isProfileSettingVisible("proactive-panels")}
           description="Open linked pull requests first. Otherwise, open Changes for edits to at least 3 files or 50 lines."
           resetAction={
             settings.proactivePanelsEnabled !== DEFAULT_UNIFIED_SETTINGS.proactivePanelsEnabled ? (
@@ -3075,7 +3090,11 @@ export function GeneralSettingsPanel() {
         />
       </SettingsSection>
 
-      <SettingsSection id="projects-and-threads" title="Projects & threads">
+      <SettingsSection
+        id="projects-and-threads"
+        title="Projects & threads"
+        hidden={!isProfileSettingVisible("projects-and-threads")}
+      >
         <SettingsRow
           serverScoped
           settingKeys={["newWorktreesStartFromOrigin"]}
@@ -3260,7 +3279,11 @@ export function GeneralSettingsPanel() {
         ) : null}
       </SettingsSection>
 
-      <SettingsSection id="text-generation" title="Text generation">
+      <SettingsSection
+        id="text-generation"
+        title="Text generation"
+        hidden={!isProfileSettingVisible("text-generation")}
+      >
         <SettingsRow
           serverScoped
           settingKeys={["textGenerationModelSelection"]}
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index fa57ce9029..9eed822129 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -80,6 +80,7 @@ const T3ConnectSidebarAvatar = lazy(() =>
 // Otterware seam: module pages, their icons, grouping and profile visibility
 // follow the registry (docs/internals/modules.md).
 import {
+  OTTERWARE_SETTINGS_NAV_LABELS,
   OTTERWARE_SETTINGS_SECTION_ICONS,
   isProfileSettingsPathVisible,
   settingsNavLayout,
@@ -123,7 +124,7 @@ const UPSTREAM_SETTINGS_ORDER = (Object.keys(SETTINGS_SECTION_LABELS) as Setting
 
 const navItem = (to: SettingsPath): SettingsNavItem => ({
   to,
-  label: SETTINGS_SECTION_LABELS[to],
+  label: OTTERWARE_SETTINGS_NAV_LABELS[to] ?? SETTINGS_SECTION_LABELS[to],
   icon: SETTINGS_SECTION_ICONS[to],
 });
 
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index f8debd9144..4600fc400a 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -41,6 +41,7 @@ import {
   type SettingOverridingProject,
 } from "./SettingInheritance";
 import { ModuleSettingsMerges } from "../../otterware/ModuleSettingsMerges";
+import { showsSettingsScopeSentence } from "../../otterware/settingsRegistry";
 
 const EMPTY_SETTING_KEYS: readonly (keyof ServerSettings)[] = [];
 
@@ -551,6 +552,8 @@ export function SettingsPageContainer({
 }) {
   const navigate = useNavigate();
   const hash = useLocation({ select: (location) => location.hash });
+  const pathname = useLocation({ select: (location) => location.pathname });
+  const scopeSearch = useOptionalSettingsScope()?.search;
   const highlightTarget = useLocation({
     select: (location) => location.state.settingsTargetHighlight !== false,
   });
@@ -576,7 +579,10 @@ export function SettingsPageContainer({
         data-settings-page-scroll
       >
         <WorkspacePageContainer width={width} className={cn("gap-8", className)}>
-          <SettingsScopeSentence />
+          {/* Otterware seam: module pages name their own scope. */}
+          {showsSettingsScopeSentence(pathname, scopeSearch ?? {}) ? (
+            <SettingsScopeSentence />
+          ) : null}
           {children}
           {/* Otterware seam: module settings pages merged into this host page. */}
           <ModuleSettingsMerges />
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index ddce3294f3..39634a5a54 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -19,6 +19,7 @@ import {
   OTTERWARE_SETTINGS_LABEL_OVERRIDES,
   OTTERWARE_SETTINGS_CATEGORY_SCOPES,
   OTTERWARE_SETTINGS_SEARCH_ITEMS,
+  isProfileSettingVisible,
   isProfileSettingsPathVisible,
   type OtterwareSettingsPath,
 } from "../../otterware/settingsRegistry";
@@ -1218,6 +1219,7 @@ export function filterAvailableSettingsSearchItems(
   return items.filter(
     (item) =>
       isProfileSettingsPathVisible(item.to) &&
+      isProfileSettingVisible(item.targetId ?? item.id) &&
       (!item.cloudOnly || availability.hasCloudPublicConfig) &&
       (!item.environmentOnly || availability.hasEnvironment) &&
       (!item.providerSettingsOnly || availability.hasProviderSettingsEnvironment) &&
diff --git a/apps/web/src/otterware/ModuleSettingsMerges.tsx b/apps/web/src/otterware/ModuleSettingsMerges.tsx
index ad71c3ec3e..2fb932c909 100644
--- a/apps/web/src/otterware/ModuleSettingsMerges.tsx
+++ b/apps/web/src/otterware/ModuleSettingsMerges.tsx
@@ -1,14 +1,14 @@
 import { ProviderConnections } from "./account/ProviderConnections";
 /**
  * Module settings pages whose placement merges them into the host page being
- * shown (ADR 0011): each renders as one section, titled with the page's label,
- * below the host page's own rows. `SettingsPageContainer` renders this once
- * per page through its seam; module pages themselves add nothing here.
+ * shown (ADR 0011), below the host page's own sections. A module page draws
+ * its own titled sections, as on its own page, so nothing wraps it here.
+ * `SettingsPageContainer` renders this once per page through its seam.
  */
 import { useLocation } from "@tanstack/react-router";
 import { Suspense } from "react";
 
-import { SettingsSection } from "../components/settings/settingsLayout";
+import { SettingsSearchTarget, SettingsSection } from "../components/settings/settingsLayout";
 import { mergedModuleSettingsPages } from "./settingsRegistry";
 
 export function ModuleSettingsMerges() {
@@ -23,11 +23,15 @@ export function ModuleSettingsMerges() {
       {mergedModuleSettingsPages(pathname).map((entry) => {
         const Page = entry.page.component;
         return (
-          <SettingsSection key={entry.sectionId} id={entry.sectionId} title={entry.page.label}>
+          <SettingsSearchTarget
+            key={entry.sectionId}
+            id={entry.sectionId}
+            className="flex flex-col gap-8 outline-none"
+          >
             <Suspense fallback={null}>
               <Page />
             </Suspense>
-          </SettingsSection>
+          </SettingsSearchTarget>
         );
       })}
     </>
diff --git a/apps/web/src/otterware/calendar/CalendarWebModule.tsx b/apps/web/src/otterware/calendar/CalendarWebModule.tsx
index 514229ebd5..95632715f9 100644
--- a/apps/web/src/otterware/calendar/CalendarWebModule.tsx
+++ b/apps/web/src/otterware/calendar/CalendarWebModule.tsx
@@ -25,18 +25,18 @@ import { toastManager } from "../../components/ui/toast";
 
 const settingsPages = [
   {
-    id: "calendar",
-    label: "Calendar",
+    id: "general",
+    label: "General",
     placement: "page",
     rows: [
-      "Week start",
-      "Time zone",
+      "Week starts on",
+      "Show weekends",
+      "Custom view",
       "Working hours",
       "Default length",
-      "Custom-view days",
-      "Weekends",
-      "Declined",
       "New events go to",
+      "Show declined events",
+      "Time zone",
       "Reminders",
     ],
   },
@@ -52,7 +52,7 @@ const settingsPages = [
     placement: "connections",
     rows: ["Google sign-in", "OAuth client", "Demo accounts"],
   },
-  { id: "general", label: "Time", placement: "general", rows: ["Time format"] },
+  { id: "time", label: "Time", placement: "general", rows: ["Time format"] },
 ] as const;
 
 const commands: WebModuleCommand[] = [
@@ -246,8 +246,12 @@ export const CalendarWebModule = createCalendarWebModule({
       id:
         (
           {
-            "Custom-view days": "calendar-custom-days",
+            "Week starts on": "calendar-week-start",
+            "Show weekends": "calendar-weekends",
+            "Custom view": "calendar-custom-days",
+            "Default length": "calendar-default-length",
             "New events go to": "calendar-default-calendar",
+            "Show declined events": "calendar-declined",
             "Time format": "calendar-hour-format",
           } as Record<string, string>
         )[title] ?? `calendar-${title.toLowerCase().replaceAll(" ", "-")}`,
diff --git a/apps/web/src/otterware/calendar/ui/CalendarSettings.tsx b/apps/web/src/otterware/calendar/ui/CalendarSettings.tsx
index d86d122950..fa8a2463a2 100644
--- a/apps/web/src/otterware/calendar/ui/CalendarSettings.tsx
+++ b/apps/web/src/otterware/calendar/ui/CalendarSettings.tsx
@@ -1,11 +1,13 @@
-import type { ComponentProps } from "react";
+import { Fragment, type ComponentProps } from "react";
+import { PlusIcon, RefreshCwIcon, XIcon } from "lucide-react";
 import {
   SettingsRow,
   SettingsSection as HostSettingsSection,
 } from "~/components/settings/settingsLayout";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
-import { Checkbox } from "~/components/ui/checkbox";
+import { Switch } from "~/components/ui/switch";
+import { Toggle, ToggleGroup } from "~/components/ui/toggle-group";
 import { CalendarSelect } from "./CalendarSelect";
 import { useEffect, useRef, useState } from "react";
 import { type CalendarId, type GoogleConnectState } from "@otterware/calendar-contracts";
@@ -17,10 +19,39 @@ import {
 
 const OAUTH_CLIENT_FORM = "calendar-oauth-client";
 
+const WEEKDAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const EVENT_LENGTH_CHOICES = [15, 30, 45, 60, 90, 120];
+const CUSTOM_DAY_CHOICES = [2, 3, 4, 5, 6, 7, 10, 14];
+const DEVICE_TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+/** The choices, plus a saved value that isn't one of them. */
+const withCurrent = (choices: ReadonlyArray<number>, current: number) =>
+  choices.includes(current) ? choices : [...choices, current].toSorted((a, b) => a - b);
+
+/** The week's days in the order the week starts on. */
+const workingDayOrder = (weekStartsOn: number) =>
+  Array.from({ length: 7 }, (_, index) => (weekStartsOn + index) % 7);
+
+const minutesToTime = (minutes: number) =>
+  `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+
+function formatMinutes(minutes: number): string {
+  if (minutes < 60 || minutes % 60 !== 0) return `${minutes} min`;
+  const hours = minutes / 60;
+  return hours === 1 ? "1 hour" : `${hours} hours`;
+}
+
+let timeZones: ReadonlyArray<string> | null = null;
+/** Every IANA zone this runtime knows, plus a saved one it doesn't. */
+function timeZoneChoices(saved: string | null): ReadonlyArray<string> {
+  timeZones ??= Intl.supportedValuesOf("timeZone");
+  return saved && !timeZones.includes(saved) ? [saved, ...timeZones] : timeZones;
+}
+
 export default function CalendarSettings({
-  page = "calendar",
+  page = "general",
 }: {
-  page?: "calendar" | "calendars" | "connections" | "general";
+  page?: "general" | "calendars" | "connections" | "time";
 }) {
   const client = useCalendarClient();
   const { directory, error: directoryError, canWrite } = useCalendarDirectory();
@@ -103,10 +134,9 @@ export default function CalendarSettings({
       {error ?? directoryError}
     </p>
   );
-  // Connections merges into the host page's card, so its rows are the card's own children.
   if (page === "connections")
     return (
-      <>
+      <HostSettingsSection title="Calendar connections">
         {alert}
         {flow?._tag === "waiting" && (
           <SettingsRow
@@ -252,13 +282,13 @@ export default function CalendarSettings({
             </Button>
           }
         />
-      </>
+      </HostSettingsSection>
     );
   return (
-    <div className="space-y-6">
+    <>
       {alert}
-      {page === "general" && preferences && (
-        <SettingsSection title="Time" description="Account">
+      {page === "time" && preferences && (
+        <HostSettingsSection title="Time">
           <SettingsRow
             id="calendar-hour-format"
             title="Time format"
@@ -277,11 +307,11 @@ export default function CalendarSettings({
               </CalendarSelect>
             }
           />
-        </SettingsSection>
+        </HostSettingsSection>
       )}
-      {page === "calendar" && preferences && (
+      {page === "general" && preferences && (
         <>
-          <SettingsSection title="Calendar" description="Account · Synced across your devices">
+          <HostSettingsSection title="Week">
             <SettingsRow
               id="calendar-week-start"
               title="Week starts on"
@@ -299,119 +329,113 @@ export default function CalendarSettings({
               }
             />
             <SettingsRow
-              id="calendar-time-zone"
-              title="Time zone"
-              description="Leave empty to follow this device."
+              id="calendar-weekends"
+              title="Show weekends"
+              description="Include Saturday and Sunday in the week view."
               control={
-                <Input
-                  aria-label="Time zone"
-                  key={preferences.timeZone}
-                  defaultValue={preferences.timeZone ?? ""}
+                <Switch
+                  aria-label="Show weekends"
                   disabled={disabled}
-                  onBlur={(event) => save({ timeZone: event.target.value.trim() || null })}
+                  checked={preferences.showWeekends}
+                  onCheckedChange={(checked) => save({ showWeekends: checked })}
                 />
               }
             />
             <SettingsRow
-              id="calendar-working-hours"
-              title="Working hours"
-              control={
-                <div className="flex gap-2">
-                  {(["start", "end"] as const).map((part) => (
-                    <Input
-                      key={`${part}/${preferences.workingHours[part]}`}
-                      aria-label={`Working hours ${part}`}
-                      type="time"
-                      disabled={disabled}
-                      defaultValue={`${String(Math.floor(preferences.workingHours[part] / 60)).padStart(2, "0")}:${String(preferences.workingHours[part] % 60).padStart(2, "0")}`}
-                      onBlur={(event) => {
-                        const [h, m] = event.target.value.split(":").map(Number);
-                        if (h !== undefined && m !== undefined)
-                          save({
-                            workingHours: { ...preferences.workingHours, [part]: h * 60 + m },
-                          });
-                      }}
-                    />
-                  ))}
-                </div>
-              }
-            >
-              <div className="flex flex-wrap gap-3">
-                {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
-                  <label key={day} className="flex items-center gap-2">
-                    <Checkbox
-                      disabled={disabled}
-                      checked={preferences.workingHours.days.includes(index)}
-                      onCheckedChange={(checked) =>
-                        save({
-                          workingHours: {
-                            ...preferences.workingHours,
-                            days: checked
-                              ? [...preferences.workingHours.days, index]
-                              : preferences.workingHours.days.filter((value) => value !== index),
-                          },
-                        })
-                      }
-                    />
-                    {day}
-                  </label>
-                ))}
-              </div>
-            </SettingsRow>
-            <SettingsRow
-              id="calendar-default-length"
-              title="Default event length (minutes)"
+              id="calendar-custom-days"
+              title="Custom view"
+              description="How many days the custom view shows."
               control={
-                <Input
-                  aria-label="Default event length"
-                  key={preferences.defaultEventMinutes}
-                  type="number"
-                  min={5}
-                  max={1440}
-                  defaultValue={preferences.defaultEventMinutes}
+                <CalendarSelect
+                  aria-label="Custom view"
+                  value={preferences.customDays}
                   disabled={disabled}
-                  onBlur={(event) => save({ defaultEventMinutes: Number(event.target.value) })}
-                />
+                  onChange={(event) => save({ customDays: Number(event.target.value) })}
+                >
+                  {withCurrent(CUSTOM_DAY_CHOICES, preferences.customDays).map((days) => (
+                    <option key={days} value={days}>
+                      {`${days} days`}
+                    </option>
+                  ))}
+                </CalendarSelect>
               }
             />
+          </HostSettingsSection>
+          <HostSettingsSection id="calendar-working-hours" title="Working hours">
             <SettingsRow
-              id="calendar-custom-days"
-              title="Custom-view days"
+              title="Days"
               control={
-                <Input
-                  aria-label="Custom-view days"
-                  key={preferences.customDays}
-                  type="number"
-                  min={2}
-                  max={14}
-                  defaultValue={preferences.customDays}
+                <ToggleGroup
+                  aria-label="Working days"
+                  multiple
                   disabled={disabled}
-                  onBlur={(event) => save({ customDays: Number(event.target.value) })}
-                />
+                  value={preferences.workingHours.days.map(String)}
+                  onValueChange={(next) =>
+                    save({
+                      workingHours: {
+                        ...preferences.workingHours,
+                        days: next.map(Number).toSorted((a, b) => a - b),
+                      },
+                    })
+                  }
+                >
+                  {workingDayOrder(preferences.weekStartsOn).map((day) => (
+                    <Toggle key={day} value={String(day)} aria-label={WEEKDAYS[day]}>
+                      {WEEKDAYS[day]?.slice(0, 2)}
+                    </Toggle>
+                  ))}
+                </ToggleGroup>
               }
             />
             <SettingsRow
-              id="calendar-weekends"
-              title="Show weekends"
+              title="Hours"
               control={
-                <Checkbox
-                  aria-label="Show weekends"
-                  disabled={disabled}
-                  checked={preferences.showWeekends}
-                  onCheckedChange={(checked) => save({ showWeekends: checked })}
-                />
+                <div className="flex items-center gap-2">
+                  {(["start", "end"] as const).map((part, index) => (
+                    <Fragment key={part}>
+                      {index === 1 ? <span className="text-muted-foreground">–</span> : null}
+                      <Input
+                        key={`${part}/${preferences.workingHours[part]}`}
+                        aria-label={part === "start" ? "Working hours start" : "Working hours end"}
+                        type="time"
+                        size="sm"
+                        className="w-32"
+                        disabled={disabled}
+                        defaultValue={minutesToTime(preferences.workingHours[part])}
+                        onBlur={(event) => {
+                          const [h, m] = event.target.value.split(":").map(Number);
+                          if (h !== undefined && m !== undefined)
+                            save({
+                              workingHours: { ...preferences.workingHours, [part]: h * 60 + m },
+                            });
+                        }}
+                      />
+                    </Fragment>
+                  ))}
+                </div>
               }
             />
+          </HostSettingsSection>
+          <HostSettingsSection title="Events">
             <SettingsRow
-              id="calendar-declined"
-              title="Show declined events"
+              id="calendar-default-length"
+              title="Default length"
+              description="How long a new event lasts."
               control={
-                <Checkbox
-                  aria-label="Show declined events"
+                <CalendarSelect
+                  aria-label="Default event length"
+                  value={preferences.defaultEventMinutes}
                   disabled={disabled}
-                  checked={preferences.showDeclined}
-                  onCheckedChange={(checked) => save({ showDeclined: checked })}
-                />
+                  onChange={(event) => save({ defaultEventMinutes: Number(event.target.value) })}
+                >
+                  {withCurrent(EVENT_LENGTH_CHOICES, preferences.defaultEventMinutes).map(
+                    (minutes) => (
+                      <option key={minutes} value={minutes}>
+                        {formatMinutes(minutes)}
+                      </option>
+                    ),
+                  )}
+                </CalendarSelect>
               }
             />
             <SettingsRow
@@ -444,107 +468,155 @@ export default function CalendarSettings({
                 </CalendarSelect>
               }
             />
-          </SettingsSection>
-          <section className="space-y-3">
-            <h2>Event reminders · Account</h2>
-            <p>
-              Default popup reminders for new events and local reminders for upcoming events.
-              Per-event overrides take priority.
-            </p>
+            <SettingsRow
+              id="calendar-declined"
+              title="Show declined events"
+              control={
+                <Switch
+                  aria-label="Show declined events"
+                  disabled={disabled}
+                  checked={preferences.showDeclined}
+                  onCheckedChange={(checked) => save({ showDeclined: checked })}
+                />
+              }
+            />
+            <SettingsRow
+              id="calendar-time-zone"
+              title="Time zone"
+              description="Times in Calendar show in this zone."
+              control={
+                <CalendarSelect
+                  aria-label="Time zone"
+                  value={preferences.timeZone ?? ""}
+                  disabled={disabled}
+                  onChange={(event) => save({ timeZone: event.target.value || null })}
+                >
+                  <option value="">{`This device (${DEVICE_TIME_ZONE})`}</option>
+                  {timeZoneChoices(preferences.timeZone).map((zone) => (
+                    <option key={zone} value={zone}>
+                      {zone.replaceAll("_", " ")}
+                    </option>
+                  ))}
+                </CalendarSelect>
+              }
+            />
+          </HostSettingsSection>
+          <HostSettingsSection id="calendar-reminders" title="Reminders">
             {directory.preferences.notificationRules.map((rule, index) => (
-              <div className="my-2 flex items-center gap-2" key={`${index}/${rule.minutesBefore}`}>
-                <label className="grid gap-1 text-sm has-[[role=checkbox]]:flex has-[[role=checkbox]]:items-center">
-                  <Checkbox
-                    disabled={!canWrite || busy}
-                    checked={rule.enabled}
-                    onCheckedChange={(checked) =>
-                      void run(() =>
-                        client.preferences({
-                          notificationRules: directory.preferences.notificationRules.map(
-                            (item, i) => (i === index ? { ...item, enabled: checked } : item),
-                          ),
-                        }),
-                      )
-                    }
-                  />
-                  Enabled
-                </label>
-                <label className="grid gap-1 text-sm has-[[role=checkbox]]:flex has-[[role=checkbox]]:items-center">
-                  Minutes before
-                  <Input
-                    type="number"
-                    min={0}
-                    max={40320}
-                    defaultValue={rule.minutesBefore}
-                    disabled={!canWrite || busy}
-                    onBlur={(event) => {
-                      const minutesBefore = Number(event.target.value);
-                      if (minutesBefore !== rule.minutesBefore)
+              <SettingsRow
+                key={`${index}/${rule.minutesBefore}`}
+                title={`${formatMinutes(rule.minutesBefore)} before`}
+                description="A popup on new events."
+                control={
+                  <div className="flex items-center gap-2">
+                    <Input
+                      aria-label="Minutes before"
+                      type="number"
+                      size="sm"
+                      className="w-20"
+                      min={0}
+                      max={40320}
+                      defaultValue={rule.minutesBefore}
+                      disabled={disabled}
+                      onBlur={(event) => {
+                        const minutesBefore = Number(event.target.value);
+                        if (minutesBefore !== rule.minutesBefore)
+                          void run(() =>
+                            client.preferences({
+                              notificationRules: directory.preferences.notificationRules.map(
+                                (item, i) => (i === index ? { ...item, minutesBefore } : item),
+                              ),
+                            }),
+                          );
+                      }}
+                    />
+                    <span className="text-xs text-muted-foreground">min</span>
+                    <Switch
+                      aria-label="Reminder on"
+                      disabled={disabled}
+                      checked={rule.enabled}
+                      onCheckedChange={(checked) =>
                         void run(() =>
                           client.preferences({
                             notificationRules: directory.preferences.notificationRules.map(
-                              (item, i) => (i === index ? { ...item, minutesBefore } : item),
+                              (item, i) => (i === index ? { ...item, enabled: checked } : item),
                             ),
                           }),
-                        );
-                    }}
-                  />
-                </label>
+                        )
+                      }
+                    />
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="Remove reminder"
+                      disabled={disabled}
+                      onClick={() =>
+                        void run(() =>
+                          client.preferences({
+                            notificationRules: directory.preferences.notificationRules.filter(
+                              (_, i) => i !== index,
+                            ),
+                          }),
+                        )
+                      }
+                    >
+                      <XIcon />
+                    </Button>
+                  </div>
+                }
+              />
+            ))}
+            <SettingsRow
+              title="Add a reminder"
+              description="Default popup reminders for new events, and local reminders for upcoming ones. A reminder set on an event wins."
+              control={
                 <Button
-                  type="button"
-                  disabled={!canWrite || busy}
+                  size="sm"
+                  variant="outline"
+                  disabled={disabled || directory.preferences.notificationRules.length >= 5}
                   onClick={() =>
                     void run(() =>
                       client.preferences({
-                        notificationRules: directory.preferences.notificationRules.filter(
-                          (_, i) => i !== index,
-                        ),
+                        notificationRules: [
+                          ...directory.preferences.notificationRules,
+                          { minutesBefore: 10, enabled: true },
+                        ],
                       }),
                     )
                   }
                 >
-                  Remove
+                  <PlusIcon />
+                  Add reminder
                 </Button>
-              </div>
-            ))}
-            <Button
-              type="button"
-              disabled={!canWrite || busy || directory.preferences.notificationRules.length >= 5}
-              onClick={() =>
-                void run(() =>
-                  client.preferences({
-                    notificationRules: [
-                      ...directory.preferences.notificationRules,
-                      { minutesBefore: 10, enabled: true },
-                    ],
-                  }),
-                )
               }
-            >
-              Add reminder
-            </Button>
-            <label className="grid gap-1 text-sm has-[[role=checkbox]]:flex has-[[role=checkbox]]:items-center">
-              <Checkbox
-                checked={deviceNotifications}
-                onCheckedChange={(checked) => {
-                  const enabled = checked;
-                  void run(async () => {
-                    if (enabled && !calendarDesktopBridge()) {
-                      if (typeof Notification === "undefined")
-                        throw new Error("This browser does not support notifications.");
-                      if ((await Notification.requestPermission()) !== "granted")
-                        throw new Error(
-                          "Allow notifications in this browser's settings to receive reminders.",
-                        );
-                    }
-                    localStorage.setItem(CALENDAR_NOTIFICATION_DEVICE_KEY, String(enabled));
-                    setDeviceNotifications(enabled);
-                  });
-                }}
-              />
-              System notifications on this device
-            </label>
-          </section>
+            />
+            <SettingsRow
+              title="System notifications"
+              description="Show upcoming reminders as notifications."
+              status="This device"
+              control={
+                <Switch
+                  aria-label="System notifications on this device"
+                  checked={deviceNotifications}
+                  onCheckedChange={(checked) => {
+                    const enabled = checked;
+                    void run(async () => {
+                      if (enabled && !calendarDesktopBridge()) {
+                        if (typeof Notification === "undefined")
+                          throw new Error("This browser does not support notifications.");
+                        if ((await Notification.requestPermission()) !== "granted")
+                          throw new Error(
+                            "Allow notifications in this browser's settings to receive reminders.",
+                          );
+                      }
+                      localStorage.setItem(CALENDAR_NOTIFICATION_DEVICE_KEY, String(enabled));
+                      setDeviceNotifications(enabled);
+                    });
+                  }}
+                />
+              }
+            />
+          </HostSettingsSection>
         </>
       )}
       {page === "calendars" && directory && (
@@ -553,7 +625,12 @@ export default function CalendarSettings({
             <SettingsSection
               key={account.accountId}
               title={account.email}
-              description={`Account · ${account.status}${account.error ? ` · ${account.error}` : ""}`}
+              // A healthy account needs no label; a problem names itself.
+              description={
+                account.status === "ok" && !account.error
+                  ? undefined
+                  : `${account.status}${account.error ? ` · ${account.error}` : ""}`
+              }
             >
               {directory.calendars
                 .filter((calendar) => calendar.accountId === account.accountId)
@@ -564,16 +641,17 @@ export default function CalendarSettings({
                     description={
                       calendar.watchOnly
                         ? "Watch only · Excluded from attention and free-time search"
-                        : "Account"
+                        : undefined
                     }
                     control={
-                      <div className="flex items-center gap-3">
-                        <Input
+                      <div className="flex items-center gap-4">
+                        <input
                           type="color"
                           aria-label={`Color for ${calendar.name}`}
                           key={calendar.color}
                           defaultValue={calendar.color}
                           disabled={disabled}
+                          className="size-6 cursor-pointer rounded-full border border-border bg-transparent p-0 disabled:cursor-default [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-0 [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-0 [&::-webkit-color-swatch-wrapper]:p-0"
                           onBlur={(event) =>
                             void run(() =>
                               client.calendar({
@@ -583,36 +661,39 @@ export default function CalendarSettings({
                             )
                           }
                         />
-                        <label className="flex items-center gap-2">
-                          <Checkbox
+                        <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                          Watch only
+                          <Switch
+                            size="sm"
                             disabled={disabled}
-                            checked={calendar.visible}
-                            onCheckedChange={(visible) =>
+                            checked={calendar.watchOnly === true}
+                            onCheckedChange={(watchOnly) =>
                               void run(() =>
-                                client.calendar({ calendarId: calendar.calendarId, visible }),
+                                client.calendar({ calendarId: calendar.calendarId, watchOnly }),
                               )
                             }
                           />
-                          Visible
                         </label>
-                        <label className="flex items-center gap-2">
-                          <Checkbox
+                        <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                          Show
+                          <Switch
+                            size="sm"
                             disabled={disabled}
-                            checked={calendar.watchOnly === true}
-                            onCheckedChange={(watchOnly) =>
+                            checked={calendar.visible}
+                            onCheckedChange={(visible) =>
                               void run(() =>
-                                client.calendar({ calendarId: calendar.calendarId, watchOnly }),
+                                client.calendar({ calendarId: calendar.calendarId, visible }),
                               )
                             }
                           />
-                          Watch only
                         </label>
                       </div>
                     }
                   />
                 ))}
               <SettingsRow
-                title="Remove account from Calendar"
+                title="Remove from Calendar"
+                description="Its events disappear from Calendar on this environment."
                 control={
                   <Button
                     variant="outline"
@@ -629,55 +710,69 @@ export default function CalendarSettings({
               />
             </SettingsSection>
           ))}
-          <SettingsSection
-            title="Sync window"
-            description="Environment · Weeks outside this cache load as needed."
-          >
+          <SettingsSection title="Sync" description="Environment">
             {(["pastWeeks", "futureWeeks"] as const).map((part) => (
               <SettingsRow
                 key={part}
                 title={part === "pastWeeks" ? "Past weeks" : "Future weeks"}
+                description={
+                  part === "pastWeeks"
+                    ? "How far back events are kept ready. Older weeks load when you open them."
+                    : "How far ahead events are kept ready. Later weeks load when you open them."
+                }
                 control={
-                  <Input
-                    aria-label={part}
-                    type="number"
-                    min={1}
-                    max={part === "pastWeeks" ? 104 : 156}
-                    defaultValue={directory.environmentPreferences.syncWindow[part]}
-                    disabled={disabled}
-                    onBlur={(event) =>
-                      void run(() =>
-                        client.environmentPreferences({
-                          syncWindow: {
-                            ...directory.environmentPreferences.syncWindow,
-                            [part]: Number(event.target.value),
-                          },
-                        }),
-                      )
-                    }
-                  />
+                  <div className="flex items-center gap-2">
+                    <Input
+                      aria-label={part === "pastWeeks" ? "Past weeks" : "Future weeks"}
+                      type="number"
+                      size="sm"
+                      className="w-20"
+                      min={1}
+                      max={part === "pastWeeks" ? 104 : 156}
+                      defaultValue={directory.environmentPreferences.syncWindow[part]}
+                      disabled={disabled}
+                      onBlur={(event) =>
+                        void run(() =>
+                          client.environmentPreferences({
+                            syncWindow: {
+                              ...directory.environmentPreferences.syncWindow,
+                              [part]: Number(event.target.value),
+                            },
+                          }),
+                        )
+                      }
+                    />
+                    <span className="text-xs text-muted-foreground">weeks</span>
+                  </div>
                 }
               />
             ))}
             <SettingsRow
               title="Sync now"
+              description="Fetch changes from every calendar now."
               control={
-                <Button disabled={disabled} size="sm" onClick={() => void run(client.sync)}>
-                  Sync
+                <Button
+                  disabled={disabled}
+                  size="sm"
+                  variant="outline"
+                  onClick={() => void run(client.sync)}
+                >
+                  <RefreshCwIcon />
+                  Sync now
                 </Button>
               }
             />
           </SettingsSection>
         </>
       )}
-    </div>
+    </>
   );
 }
 
 function SettingsSection({
   description,
   ...props
-}: ComponentProps<typeof HostSettingsSection> & { description?: string }) {
+}: ComponentProps<typeof HostSettingsSection> & { description?: string | undefined }) {
   return (
     <HostSettingsSection
       {...props}
diff --git a/apps/web/src/otterware/drive/DriveWebModule.tsx b/apps/web/src/otterware/drive/DriveWebModule.tsx
index 8a98665735..d8b55537a4 100644
--- a/apps/web/src/otterware/drive/DriveWebModule.tsx
+++ b/apps/web/src/otterware/drive/DriveWebModule.tsx
@@ -129,13 +129,13 @@ export const DriveWebModule = createDriveWebModule({
     [
       {
         id: "drives",
-        label: "Drives and folders",
+        label: "Drives",
         placement: "page",
         rows: ["Shared drives", "New drive", "Move folder", "Delete empty folder", "Drive link"],
       },
       {
         id: "access",
-        label: "Shared drive access",
+        label: "Sharing",
         placement: "page",
         rows: ["People with access", "Invite"],
       },
diff --git a/apps/web/src/otterware/drive/ui/DriveSettings.tsx b/apps/web/src/otterware/drive/ui/DriveSettings.tsx
index 044273a040..12f84ceba0 100644
--- a/apps/web/src/otterware/drive/ui/DriveSettings.tsx
+++ b/apps/web/src/otterware/drive/ui/DriveSettings.tsx
@@ -1,10 +1,3 @@
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectPopup,
-  SelectItem,
-} from "~/components/ui/select";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { DriveHostProvider, type DriveHost } from "./host";
 import { useDriveStore } from "./driveStore";
@@ -15,60 +8,38 @@ import { FolderDialogsHost } from "./main/drive/folder-dialogs";
 import { NewFolderDialogHost } from "./main/drive/new-folder-dialog";
 import { ShareDialogHost } from "./main/drive/share-dialog";
 
-import { SettingsRow } from "~/components/settings/settingsLayout";
-import { folderLabel, useFolders } from "./main/folders";
+import { SettingsRow, SettingsSection } from "~/components/settings/settingsLayout";
 
 function Content({ page }: { page: string }) {
-  const { folders, activeFolder, selectFolder } = useFolders();
   if (page === "command-line")
     return (
-      <SettingsRow
-        id="drive-command-line"
-        title="Command line"
-        description={
-          <>
-            Run <code>otterdrive auth login</code> and approve this device in your browser with your
-            Otter Account. API keys are optional. Browser approval is currently unavailable in this
-            app.
-          </>
-        }
-      />
+      <SettingsSection title="Drive command line">
+        <SettingsRow
+          id="drive-command-line"
+          title="Command line"
+          description={
+            <>
+              Run <code>otterdrive auth login</code> and approve this device in your browser with
+              your Otter Account. API keys are optional. Browser approval is currently unavailable
+              in this app.
+            </>
+          }
+        />
+      </SettingsSection>
+    );
+  if (page === "appearance")
+    return (
+      <SettingsSection title="Drive">
+        <ListDensityRow />
+      </SettingsSection>
     );
-  if (page === "appearance") return <ListDensityRow />;
   return (
-    <div className="space-y-6">
-      <SettingsRow
-        title="Folder"
-        description="Account · Stored in Otter Cloud"
-        control={
-          <Select
-            value={activeFolder?.id ?? null}
-            items={folders.map((folder) => ({ value: folder.id, label: folderLabel(folder) }))}
-            disabled={undefined}
-            onValueChange={(value) => {
-              if (typeof value === "string") void selectFolder(value);
-            }}
-          >
-            <SelectTrigger size="sm" aria-label={"Folder"}>
-              <SelectValue placeholder={"Select…"} />
-            </SelectTrigger>
-            <SelectPopup>
-              {folders
-                .map((folder) => ({ value: folder.id, label: folderLabel(folder) }))
-                .map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-            </SelectPopup>
-          </Select>
-        }
-      />
+    <>
       {page === "access" ? <MembersPane /> : <FolderPane />}
       <FolderDialogsHost />
       <NewFolderDialogHost />
       <ShareDialogHost />
-    </div>
+    </>
   );
 }
 export function DriveSettings({ host, page = "drives" }: { host: DriveHost; page?: string }) {
diff --git a/apps/web/src/otterware/drive/ui/main/settings/folder-pane.tsx b/apps/web/src/otterware/drive/ui/main/settings/folder-pane.tsx
index d5660eaac2..b97af7e8fd 100644
--- a/apps/web/src/otterware/drive/ui/main/settings/folder-pane.tsx
+++ b/apps/web/src/otterware/drive/ui/main/settings/folder-pane.tsx
@@ -14,6 +14,7 @@ import { api } from "../../lib/api";
 
 import { NewFolderDialog } from "../drive/new-folder-dialog";
 import { announceFoldersChanged, driveForFolder, folderLabel, useFolders } from "../folders";
+import { FolderPickerSection } from "./folder-picker";
 import { SettingsPageContainer, SettingsRow, SettingsSection } from "./settings-ui";
 export function FolderPane() {
   const { activeFolder: folder, folders, selectFolder } = useFolders(),
@@ -34,10 +35,8 @@ export function FolderPane() {
     }
   }
   return (
-    <SettingsPageContainer
-      title="Drives and folders"
-      description="My Drive is yours alone; share its folders and documents from their menus. Shared drive members can open every folder inside it."
-    >
+    <SettingsPageContainer description="My Drive is yours alone; share its folders and documents from their menus. Shared drive members can open every folder inside it.">
+      <FolderPickerSection />
       <SettingsSection title={folder ? folderLabel(folder) : "Folder"}>
         <SettingsRow
           title="Name"
diff --git a/apps/web/src/otterware/drive/ui/main/settings/folder-picker.tsx b/apps/web/src/otterware/drive/ui/main/settings/folder-picker.tsx
new file mode 100644
index 0000000000..fcc4b6c783
--- /dev/null
+++ b/apps/web/src/otterware/drive/ui/main/settings/folder-picker.tsx
@@ -0,0 +1,43 @@
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectPopup,
+  SelectItem,
+} from "~/components/ui/select";
+import { folderLabel, useFolders } from "../folders";
+import { SettingsRow, SettingsSection } from "./settings-ui";
+
+/** Which drive or folder the page's sections below apply to. */
+export function FolderPickerSection() {
+  const { folders, activeFolder, selectFolder } = useFolders();
+  const options = folders.map((folder) => ({ value: folder.id, label: folderLabel(folder) }));
+  return (
+    <SettingsSection title="Drive">
+      <SettingsRow
+        title="Folder"
+        description="The drive or folder the settings below apply to."
+        control={
+          <Select
+            value={activeFolder?.id ?? null}
+            items={options}
+            onValueChange={(value) => {
+              if (typeof value === "string") void selectFolder(value);
+            }}
+          >
+            <SelectTrigger size="sm" aria-label="Folder">
+              <SelectValue placeholder="Select…" />
+            </SelectTrigger>
+            <SelectPopup>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectPopup>
+          </Select>
+        }
+      />
+    </SettingsSection>
+  );
+}
diff --git a/apps/web/src/otterware/drive/ui/main/settings/members-pane.tsx b/apps/web/src/otterware/drive/ui/main/settings/members-pane.tsx
index 5d3365b917..6259f0b466 100644
--- a/apps/web/src/otterware/drive/ui/main/settings/members-pane.tsx
+++ b/apps/web/src/otterware/drive/ui/main/settings/members-pane.tsx
@@ -14,6 +14,7 @@ import { api } from "../../lib/api";
 
 import { announceFoldersChanged, driveForFolder, useFolders } from "../folders";
 import { folderUrl } from "../../lib/links";
+import { FolderPickerSection } from "./folder-picker";
 import { SettingsPageContainer, SettingsRow, SettingsSection } from "./settings-ui";
 interface Member {
   id: string;
@@ -66,13 +67,13 @@ export function MembersPane() {
   }
   return (
     <SettingsPageContainer
-      title="Shared drive access"
       description={
         drive?.kind === "shared"
           ? `Access to ${drive.name} includes all its folders and documents.`
           : "My Drive is yours alone. Share its folders and documents from their menus, or create a shared drive for a team."
       }
     >
+      <FolderPickerSection />
       {enabled ? (
         <>
           <SettingsSection id="drive-invite" title="Invite people">
diff --git a/apps/web/src/otterware/drive/ui/main/settings/settings-ui.tsx b/apps/web/src/otterware/drive/ui/main/settings/settings-ui.tsx
index e3e523b955..6de2679362 100644
--- a/apps/web/src/otterware/drive/ui/main/settings/settings-ui.tsx
+++ b/apps/web/src/otterware/drive/ui/main/settings/settings-ui.tsx
@@ -1,21 +1,20 @@
 import type { ReactNode } from "react";
 export { SettingsRow, SettingsSection } from "~/components/settings/settingsLayout";
+
+/** A Drive settings page: a line about what it covers, then its sections. The breadcrumb names it. */
 export function SettingsPageContainer({
-  title,
   description,
   children,
 }: {
-  title: ReactNode;
   description?: ReactNode;
   children: ReactNode;
 }) {
   return (
-    <section className="space-y-6">
-      <div>
-        <h2 className="text-base font-medium">{title}</h2>
-        <p className="text-sm text-muted-foreground">{description}</p>
-      </div>
+    <>
+      {description ? (
+        <p className="px-3 text-sm text-muted-foreground sm:px-4">{description}</p>
+      ) : null}
       {children}
-    </section>
+    </>
   );
 }
diff --git a/apps/web/src/otterware/mail/MailSettings.tsx b/apps/web/src/otterware/mail/MailSettings.tsx
index 3ea7388173..676706fcd2 100644
--- a/apps/web/src/otterware/mail/MailSettings.tsx
+++ b/apps/web/src/otterware/mail/MailSettings.tsx
@@ -3,9 +3,8 @@ import type { ReactNode } from "react";
 import { useMailStore } from "./mailStore";
 import { MailContentProvider } from "./content/host/surface";
 import { GeneralRows } from "./content/main/settings/general-rows";
-import { ReadingRows } from "./content/main/settings/reading-rows";
+import { AppearanceRows } from "./content/main/settings/appearance-rows";
 import { AccountsPane } from "./content/main/settings/accounts-pane";
-import { TranslationSection } from "./content/main/settings/translation-section";
 import { TodoistSettingsPane } from "./content/main/integrations/todoist";
 import { MailSettingScope } from "./content/main/settings/settings-ui";
 
@@ -37,7 +36,10 @@ function MailSettingsRows({
   return (
     <MailContentProvider session={current.session}>
       <MailSettingScope.Provider value={scope}>
-        <fieldset disabled={current.host.canWrite?.() === false} className="min-w-0 space-y-6">
+        <fieldset
+          disabled={current.host.canWrite?.() === false}
+          className="flex min-w-0 flex-col gap-8"
+        >
           {children}
         </fieldset>
       </MailSettingScope.Provider>
@@ -48,21 +50,13 @@ export function MailboxesSettings() {
   return (
     <MailSettingsRows>
       <AccountsPane />
-      <GeneralRows behavior />
     </MailSettingsRows>
   );
 }
-export function ReadingSettings() {
+export function AppearanceSettings() {
   return (
     <MailSettingsRows>
-      <ReadingRows />
-    </MailSettingsRows>
-  );
-}
-export function TranslationSettings() {
-  return (
-    <MailSettingsRows>
-      <TranslationSection />
+      <AppearanceRows />
     </MailSettingsRows>
   );
 }
diff --git a/apps/web/src/otterware/mail/MailWebModule.ts b/apps/web/src/otterware/mail/MailWebModule.ts
index 47c46f0606..d563dfb2e5 100644
--- a/apps/web/src/otterware/mail/MailWebModule.ts
+++ b/apps/web/src/otterware/mail/MailWebModule.ts
@@ -1,6 +1,6 @@
 import { createMailWebModule } from "@otterware/mail-web/module";
 import { lazy } from "react";
-import { MailIcon, BookOpenIcon, LanguagesIcon, SettingsIcon, PlugIcon } from "lucide-react";
+import { MailIcon, PaletteIcon, SettingsIcon, PlugIcon } from "lucide-react";
 import {
   mailPaletteCommands,
   useMailSpaces,
@@ -21,6 +21,26 @@ export const MailWebModule = createMailWebModule({
   runCommand: runDynamicMailCommand,
   keybindingAliases: mailKeybindingAliases,
   settings: [
+    {
+      id: "general",
+      label: "General",
+      icon: SettingsIcon,
+      component: lazy(() => import("./MailSettings").then((m) => ({ default: m.GeneralSettings }))),
+      placement: { grouped: "page", standalone: "general" },
+      searchTerms: ["notifications", "sync", "translate", "language", "tour", "setup", "feedback"],
+      rows: MAIL_SETTING_ROWS.general,
+    },
+    {
+      id: "appearance",
+      label: "Appearance",
+      icon: PaletteIcon,
+      component: lazy(() =>
+        import("./MailSettings").then((m) => ({ default: m.AppearanceSettings })),
+      ),
+      placement: { grouped: "page", standalone: "appearance" },
+      searchTerms: ["layout", "reading", "width", "messages", "read"],
+      rows: MAIL_SETTING_ROWS.appearance,
+    },
     {
       id: "mailboxes",
       label: "Mailboxes",
@@ -29,38 +49,9 @@ export const MailWebModule = createMailWebModule({
         import("./MailSettings").then((m) => ({ default: m.MailboxesSettings })),
       ),
       placement: { grouped: "page", standalone: "page" },
-      searchTerms: ["signature", "sync", "mailbox", "behavior"],
+      searchTerms: ["signature", "mailbox", "account"],
       rows: MAIL_SETTING_ROWS.mailboxes,
     },
-    {
-      id: "reading",
-      label: "Reading",
-      icon: BookOpenIcon,
-      component: lazy(() => import("./MailSettings").then((m) => ({ default: m.ReadingSettings }))),
-      placement: { grouped: "page", standalone: "appearance" },
-      searchTerms: ["layout", "width", "messages", "read"],
-      rows: MAIL_SETTING_ROWS.reading,
-    },
-    {
-      id: "translation",
-      label: "Translation",
-      icon: LanguagesIcon,
-      component: lazy(() =>
-        import("./MailSettings").then((m) => ({ default: m.TranslationSettings })),
-      ),
-      placement: { grouped: "page", standalone: "general" },
-      searchTerms: ["language", "translate", "OpenRouter"],
-      rows: MAIL_SETTING_ROWS.translation,
-    },
-    {
-      id: "general",
-      label: "Mail",
-      icon: SettingsIcon,
-      component: lazy(() => import("./MailSettings").then((m) => ({ default: m.GeneralSettings }))),
-      placement: { grouped: "general", standalone: "general" },
-      searchTerms: ["notifications", "tour", "setup", "feedback"],
-      rows: MAIL_SETTING_ROWS.general,
-    },
     {
       id: "integrations",
       label: "Todoist",
diff --git a/apps/web/src/otterware/mail/content/main/home-view.tsx b/apps/web/src/otterware/mail/content/main/home-view.tsx
index c2067c16f2..89789a5a7d 100644
--- a/apps/web/src/otterware/mail/content/main/home-view.tsx
+++ b/apps/web/src/otterware/mail/content/main/home-view.tsx
@@ -104,6 +104,7 @@ import { ProjectView } from "./gmail/project-view";
 import { NewProjectDialog } from "./gmail/project-menus";
 
 import { Tour } from "./onboarding/tour";
+import { mailSettingsPath } from "../../settingsPaths";
 import {
   endTour,
   getSetupStage,
@@ -374,7 +375,7 @@ function MailHome() {
   const openSettings = useCallback((route: SettingsRoute) => {
     if (route.pane === "keybindings") setKeybindingsChip("mail");
     mailHost().navigate(
-      `${route.pane === "accounts" ? "/settings/mail/mailboxes" : route.pane === "agents" ? "/settings/providers" : route.pane === "browser" ? "/settings/extensions" : route.pane === "otter" ? "/settings/account" : `/settings/${route.pane}`}${route.target ? `?target=${encodeURIComponent(route.target)}` : ""}`,
+      `${mailSettingsPath(route.pane)}${route.target ? `?target=${encodeURIComponent(route.target)}` : ""}`,
     );
   }, []);
   const openSettingsRef = useLatest(openSettings);
diff --git a/apps/web/src/otterware/mail/content/main/reading-preferences.ts b/apps/web/src/otterware/mail/content/main/reading-preferences.ts
index 919a7d5ce7..f57bc0cc57 100644
--- a/apps/web/src/otterware/mail/content/main/reading-preferences.ts
+++ b/apps/web/src/otterware/mail/content/main/reading-preferences.ts
@@ -60,7 +60,7 @@ export const READING_WIDTHS = {
   full: { label: "Full width", maxWidth: "none" },
 } as const;
 export type ReadingWidth = keyof typeof READING_WIDTHS;
-const DEFAULT_READING_WIDTH: ReadingWidth = "full";
+export const DEFAULT_READING_WIDTH: ReadingWidth = "full";
 const READING_WIDTH_KEY = "otter:reading-width";
 
 export const MESSAGE_LIST_STYLES = {
@@ -68,7 +68,7 @@ export const MESSAGE_LIST_STYLES = {
   dividers: { label: "With dividers", description: "A compact list with full-width separators." },
 } as const;
 export type MessageListStyle = keyof typeof MESSAGE_LIST_STYLES;
-const DEFAULT_MESSAGE_LIST_STYLE: MessageListStyle = "classic";
+export const DEFAULT_MESSAGE_LIST_STYLE: MessageListStyle = "classic";
 const MESSAGE_LIST_STYLE_KEY = "otter:message-list-style";
 
 export const MAIL_LAYOUTS = {
@@ -80,7 +80,7 @@ export const MAIL_LAYOUTS = {
   },
 } as const;
 export type MailLayout = keyof typeof MAIL_LAYOUTS;
-const DEFAULT_MAIL_LAYOUT: MailLayout = "split";
+export const DEFAULT_MAIL_LAYOUT: MailLayout = "split";
 const MAIL_LAYOUT_KEY = "otter:mail-layout";
 
 function getMailLayout(): MailLayout {
diff --git a/apps/web/src/otterware/mail/content/main/settings/accounts-pane.tsx b/apps/web/src/otterware/mail/content/main/settings/accounts-pane.tsx
index ed7bd961bc..f5917bfc55 100644
--- a/apps/web/src/otterware/mail/content/main/settings/accounts-pane.tsx
+++ b/apps/web/src/otterware/mail/content/main/settings/accounts-pane.tsx
@@ -32,8 +32,6 @@ import { Btn, HintTooltip, cn, restoreFocusForKeyboardOnly } from "../gmail/ui";
 import {
   DraftInput,
   SettingResetButton,
-  SettingsGroup,
-  SettingsPageContainer,
   SettingsRow,
   SettingsSearchTarget,
   SettingsSection,
@@ -613,15 +611,13 @@ export function AccountsPane() {
   useEffect(() => void gmailApi.refreshSignatures().catch(() => {}), []);
 
   return (
-    <SettingsPageContainer
-      searchId={searchableSetting("mailboxes").id}
-      title="Mailboxes"
-      description="Turn mailboxes on or off and drag them into order, on every device."
-      action={<SignInButton label="Add mailbox" />}
-    >
-      {current ? (
-        <>
-          <SettingsGroup>
+    <>
+      <SettingsSection
+        {...searchableSetting("mailboxes")}
+        headerAction={<SignInButton label="Add mailbox" />}
+      >
+        {current ? (
+          <>
             {accounts.length > 1 ? (
               <AllMailboxesRow
                 on={arrangement.combined}
@@ -662,17 +658,15 @@ export function AccountsPane() {
                 />
               );
             })}
-          </SettingsGroup>
-          <AccountEditor key={current.id} account={current} />
-        </>
-      ) : (
-        <SettingsGroup>
+          </>
+        ) : (
           <SettingsRow
             title={accountsQuery.isLoading ? "Loading mailboxes…" : "No mailboxes yet"}
             description="Add a Gmail account, or any mailbox that works with IMAP, to start syncing mail."
           />
-        </SettingsGroup>
-      )}
-    </SettingsPageContainer>
+        )}
+      </SettingsSection>
+      {current ? <AccountEditor key={current.id} account={current} /> : null}
+    </>
   );
 }
diff --git a/apps/web/src/otterware/mail/content/main/settings/appearance-rows.tsx b/apps/web/src/otterware/mail/content/main/settings/appearance-rows.tsx
new file mode 100644
index 0000000000..32f74f68f1
--- /dev/null
+++ b/apps/web/src/otterware/mail/content/main/settings/appearance-rows.tsx
@@ -0,0 +1,280 @@
+import { Switch } from "~/components/ui/switch";
+import { cn } from "~/lib/utils";
+import { SettingsSlider } from "~/otterware/settings/SettingsSlider";
+import { SettingsTilePicker } from "~/otterware/settings/SettingsTilePicker";
+import { RowSelect, SettingResetButton, SettingsRow, SettingsSection } from "./settings-ui";
+import { searchableSetting } from "./settings-search";
+import {
+  DEFAULT_MAIL_LAYOUT,
+  DEFAULT_MESSAGE_LIST_STYLE,
+  DEFAULT_READING_WIDTH,
+  MAIL_LAYOUTS,
+  MESSAGE_LIST_STYLES,
+  READING_WIDTHS,
+  GROUP_MESSAGES_BY_DAY,
+  DIM_READ_MESSAGES,
+  OPEN_MESSAGES_WITH_ARROWS,
+  MARK_READ_DELAY,
+  useMailLayout,
+  useMessageListStyle,
+  useReadingWidth,
+  useInterfaceToggle,
+  useInterfaceSetting,
+  setMailLayout,
+  setMessageListStyle,
+  setReadingWidth,
+  setInterfaceToggle,
+  setInterfaceSetting,
+  type InterfaceToggle,
+  type MailLayout,
+  type MessageListStyle,
+  type ReadingWidth,
+} from "../reading-preferences";
+
+const bar = "block h-1 rounded-full";
+
+/** A miniature of the mail window in one layout: rail, list, and where a message opens. */
+function MailLayoutPreview({ layout }: { layout: MailLayout }) {
+  const split = layout === "split";
+  return (
+    <span className="absolute inset-0 flex">
+      <span className="flex w-1/5 shrink-0 flex-col gap-2 border-r border-border/70 bg-sidebar p-2 pt-4">
+        <span className="h-2 rounded-sm bg-sidebar-row-active" />
+        <span className={cn(bar, "w-4/5 bg-muted-foreground/25")} />
+        <span className={cn(bar, "w-3/5 bg-muted-foreground/25")} />
+        <span className={cn(bar, "w-4/5 bg-muted-foreground/25")} />
+      </span>
+      <span className={cn("flex flex-col", split ? "w-1/3 border-r border-border/70" : "flex-1")}>
+        <span className="flex h-5 shrink-0 items-center border-b border-border/60 px-2">
+          <span className={cn(bar, "w-8 bg-muted-foreground/40")} />
+        </span>
+        {[0, 1, 2, 3].map((row) => (
+          <span
+            key={row}
+            className={cn(
+              "flex gap-1.5 border-b border-border/40 px-2 py-1.5",
+              split ? "flex-col" : "items-center",
+              row === 0 && split && "bg-sidebar-row-active",
+            )}
+          >
+            <span className={cn(bar, "bg-foreground/40", split ? "w-3/5" : "w-1/5")} />
+            <span className={cn(bar, "bg-muted-foreground/25", split ? "w-4/5" : "flex-1")} />
+          </span>
+        ))}
+      </span>
+      {split ? (
+        <span className="flex min-w-0 flex-1 flex-col gap-2 p-2 pt-4">
+          <span className="block h-1.5 w-4/5 rounded-full bg-foreground/50" />
+          <span className={cn(bar, "mt-1 w-3/5 bg-muted-foreground/30")} />
+          <span className={cn(bar, "w-full bg-muted-foreground/20")} />
+          <span className={cn(bar, "w-4/5 bg-muted-foreground/20")} />
+        </span>
+      ) : null}
+      {layout === "floating" ? (
+        <span className="absolute inset-0 flex items-end justify-end p-1.5">
+          <span className="flex h-16 w-3/5 flex-col overflow-hidden rounded-md border border-border bg-background shadow-lg">
+            <span className="flex h-5 shrink-0 items-center justify-between border-b border-border/60 px-2">
+              <span className={cn(bar, "w-2/5 bg-foreground/50")} />
+              <span className="text-3xs leading-none text-muted-foreground">×</span>
+            </span>
+            <span className="flex flex-col gap-1.5 p-2">
+              <span className={cn(bar, "w-full bg-muted-foreground/25")} />
+              <span className={cn(bar, "w-4/5 bg-muted-foreground/25")} />
+            </span>
+          </span>
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+const SAMPLE_MESSAGES = [
+  { sender: "Alex Morgan", subject: "Weekend plans", snippet: "How about Saturday?" },
+  { sender: "Jamie Lee", subject: "A little update", snippet: "Here's what I've been working on." },
+];
+
+/** Two sample rows, separated the way the style separates the message list. */
+function MessageListStylePreview({ style }: { style: MessageListStyle }) {
+  return (
+    <span className="absolute inset-0 flex flex-col bg-sidebar">
+      {SAMPLE_MESSAGES.map(({ sender, subject, snippet }) => (
+        <span
+          key={sender}
+          className={cn(
+            "flex min-w-0 flex-col px-3 text-2xs leading-tight",
+            style === "dividers" ? "border-b border-border/70 py-1.5" : "py-1",
+          )}
+        >
+          <span className="truncate font-medium text-foreground">{sender}</span>
+          <span className="truncate text-foreground/90">{subject}</span>
+          <span className="truncate text-muted-foreground/75">{snippet}</span>
+        </span>
+      ))}
+    </span>
+  );
+}
+
+function ToggleRow({
+  id,
+  toggle,
+  resetLabel,
+  description,
+}: {
+  id: string;
+  toggle: InterfaceToggle;
+  resetLabel: string;
+  description: string;
+}) {
+  const value = useInterfaceToggle(toggle);
+  const setting = searchableSetting(id);
+  return (
+    <SettingsRow
+      {...setting}
+      description={description}
+      resetAction={
+        value !== toggle.defaultValue ? (
+          <SettingResetButton
+            label={resetLabel}
+            onClick={() => setInterfaceToggle(toggle, toggle.defaultValue)}
+          />
+        ) : null
+      }
+      control={
+        <Switch
+          aria-label={setting.title}
+          checked={value}
+          onCheckedChange={(next) => setInterfaceToggle(toggle, next)}
+        />
+      }
+    />
+  );
+}
+
+/** Mail › Appearance: how mail is laid out and read (Otter Mail's Appearance). */
+export function AppearanceRows() {
+  const layout = useMailLayout();
+  const style = useMessageListStyle();
+  const width = useReadingWidth();
+  const delay = useInterfaceSetting(MARK_READ_DELAY);
+  return (
+    <>
+      <SettingsSection
+        {...searchableSetting("mail-layout")}
+        variant="plain"
+        headerAction={
+          layout !== DEFAULT_MAIL_LAYOUT ? (
+            <SettingResetButton
+              label="mail layout"
+              onClick={() => setMailLayout(DEFAULT_MAIL_LAYOUT)}
+            />
+          ) : null
+        }
+      >
+        <SettingsTilePicker
+          ariaLabel="Mail layout"
+          value={layout}
+          onValueChange={setMailLayout}
+          options={(Object.keys(MAIL_LAYOUTS) as MailLayout[]).map((value) => ({
+            value,
+            label: MAIL_LAYOUTS[value].label,
+            description: MAIL_LAYOUTS[value].description,
+            preview: <MailLayoutPreview layout={value} />,
+          }))}
+        />
+      </SettingsSection>
+      <SettingsSection
+        {...searchableSetting("message-list-style")}
+        variant="plain"
+        headerAction={
+          style !== DEFAULT_MESSAGE_LIST_STYLE ? (
+            <SettingResetButton
+              label="message list style"
+              onClick={() => setMessageListStyle(DEFAULT_MESSAGE_LIST_STYLE)}
+            />
+          ) : null
+        }
+      >
+        <SettingsTilePicker
+          ariaLabel="Message list style"
+          value={style}
+          onValueChange={setMessageListStyle}
+          options={(Object.keys(MESSAGE_LIST_STYLES) as MessageListStyle[]).map((value) => ({
+            value,
+            label: MESSAGE_LIST_STYLES[value].label,
+            description: MESSAGE_LIST_STYLES[value].description,
+            preview: <MessageListStylePreview style={value} />,
+          }))}
+        />
+      </SettingsSection>
+      <SettingsSection title="Message list">
+        <ToggleRow
+          id="group-messages-by-day"
+          toggle={GROUP_MESSAGES_BY_DAY}
+          resetLabel="group messages by day"
+          description="Separate messages by day. Click a day heading to collapse or expand it."
+        />
+        <ToggleRow
+          id="dim-read-messages"
+          toggle={DIM_READ_MESSAGES}
+          resetLabel="dim read messages"
+          description="Give read messages a muted background so unread mail stands out."
+        />
+      </SettingsSection>
+      <SettingsSection title="Reading">
+        <ToggleRow
+          id="open-messages-with-arrows"
+          toggle={OPEN_MESSAGES_WITH_ARROWS}
+          resetLabel="open messages with arrow keys"
+          description="When no email is open, arrows and J/K open messages as you browse. Turn off to highlight rows, then press Enter or click to open."
+        />
+        <SettingsRow
+          {...searchableSetting("mark-read-delay")}
+          description="How long to wait before marking an email read when browsing with the keyboard. Clicking or pressing Enter marks it read immediately."
+          resetAction={
+            delay !== MARK_READ_DELAY.defaultValue ? (
+              <SettingResetButton
+                label="mark as read delay"
+                onClick={() => setInterfaceSetting(MARK_READ_DELAY, MARK_READ_DELAY.defaultValue)}
+              />
+            ) : null
+          }
+          control={
+            <SettingsSlider
+              id="mark-read-delay-slider"
+              ariaLabel="Mark as read delay"
+              value={delay}
+              valueLabel={`${delay / 1000} s`}
+              min={MARK_READ_DELAY.min}
+              max={MARK_READ_DELAY.max}
+              step={MARK_READ_DELAY.step}
+              onValueChange={(value) => setInterfaceSetting(MARK_READ_DELAY, value)}
+            />
+          }
+        />
+        <SettingsRow
+          {...searchableSetting("reading-width")}
+          description="How wide emails and threads can grow on large screens."
+          resetAction={
+            width !== DEFAULT_READING_WIDTH ? (
+              <SettingResetButton
+                label="reading width"
+                onClick={() => setReadingWidth(DEFAULT_READING_WIDTH)}
+              />
+            ) : null
+          }
+          control={
+            <RowSelect
+              ariaLabel="Reading width"
+              value={width}
+              options={(Object.keys(READING_WIDTHS) as ReadingWidth[]).map((value) => ({
+                value,
+                label: READING_WIDTHS[value].label,
+              }))}
+              onValueChange={(value) => setReadingWidth(value as ReadingWidth)}
+            />
+          }
+        />
+      </SettingsSection>
+    </>
+  );
+}
diff --git a/apps/web/src/otterware/mail/content/main/settings/general-rows.tsx b/apps/web/src/otterware/mail/content/main/settings/general-rows.tsx
index 468f9acfcd..8cbdfaa52b 100644
--- a/apps/web/src/otterware/mail/content/main/settings/general-rows.tsx
+++ b/apps/web/src/otterware/mail/content/main/settings/general-rows.tsx
@@ -20,6 +20,7 @@ import { Btn } from "../gmail/ui";
 import { requestTour, startSetup } from "../onboarding/onboarding";
 import { requestProblemReport } from "../support/report-problem";
 import { useRailUnreadDots } from "../gmail/rail-preferences";
+import { TranslationSection } from "./translation-section";
 
 /** Where the settings page is. */
 export type { SettingsRoute } from "../../host/public";
@@ -50,7 +51,8 @@ const ADVANCE_DIRECTION_OPTIONS: { value: AdvanceDirection; label: string }[] =
 // General
 // ---------------------------------------------------------------------------
 
-export function GeneralRows({ behavior = false }: { behavior?: boolean | undefined }) {
+/** Mail › General: Otter Mail's General sections, in its order. */
+export function GeneralRows() {
   const [syncInterval, setSyncInterval] = useState<number | null>(null);
   const [notificationsMode, setNotificationsMode] = useState<NotificationsMode | null>(null);
   const [advanceDirection, setAdvanceDirectionState] = useState<AdvanceDirection>(() =>
@@ -170,26 +172,12 @@ export function GeneralRows({ behavior = false }: { behavior?: boolean | undefin
     void loadMailApps();
   };
 
-  // The rail's unread dots, next to the Dock badge in the Mac app; in Mail elsewhere.
-  const railDotsRow = (
-    <SettingsRow
-      {...searchableSetting("rail-unread-dots")}
-      resetAction={
-        railDots ? (
-          <SettingResetButton label="mailbox unread dots" onClick={() => setRailDots(false)} />
-        ) : null
-      }
-      description="A dot on each mailbox in the rail whose Inbox has unread mail, and each view with unread mail."
-      control={<Switch id="railUnreadDots" checked={railDots} onCheckedChange={setRailDots} />}
-    />
-  );
-
   return (
-    <SettingsSection title={behavior ? "Behavior" : "Mail"}>
+    <>
       {/* What only the desktop app has isn't shown elsewhere. */}
       {features.launchAtLogin || features.dockBadge ? (
-        <>
-          {!behavior && features.launchAtLogin ? (
+        <SettingsSection title={features.dockBadge ? "Startup & Dock" : "Startup"}>
+          {features.launchAtLogin ? (
             <SettingsRow
               {...searchableSetting("launch-at-login")}
               resetAction={
@@ -210,7 +198,7 @@ export function GeneralRows({ behavior = false }: { behavior?: boolean | undefin
               }
             />
           ) : null}
-          {behavior && features.dockBadge ? (
+          {features.dockBadge ? (
             <SettingsRow
               {...searchableSetting("dock-badge")}
               resetAction={
@@ -231,90 +219,94 @@ export function GeneralRows({ behavior = false }: { behavior?: boolean | undefin
               }
             />
           ) : null}
-          {behavior && features.dockBadge ? railDotsRow : null}
-        </>
+        </SettingsSection>
       ) : null}
 
-      <>
-        {behavior && !features.dockBadge ? railDotsRow : null}
-        {behavior ? (
-          <SettingsRow
-            {...searchableSetting("sync-interval")}
-            resetAction={
-              syncInterval != null && syncInterval !== DEFAULT_SETTINGS.syncIntervalSeconds ? (
-                <SettingResetButton
-                  label="check for new mail"
-                  onClick={() =>
-                    void handleSyncIntervalChange(String(DEFAULT_SETTINGS.syncIntervalSeconds))
-                  }
-                />
-              ) : null
-            }
-            description="Sync runs in the background at this cadence."
-            control={
-              <RowSelect
-                value={syncInterval != null ? String(syncInterval) : undefined}
-                onValueChange={(v) => void handleSyncIntervalChange(v)}
-                options={SYNC_INTERVAL_OPTIONS.map((o) => ({
-                  value: String(o.value),
-                  label: o.label,
-                }))}
-                ariaLabel="Check for new mail"
+      <SettingsSection title="Mail">
+        <SettingsRow
+          {...searchableSetting("sync-interval")}
+          resetAction={
+            syncInterval != null && syncInterval !== DEFAULT_SETTINGS.syncIntervalSeconds ? (
+              <SettingResetButton
+                label="check for new mail"
+                onClick={() =>
+                  void handleSyncIntervalChange(String(DEFAULT_SETTINGS.syncIntervalSeconds))
+                }
               />
-            }
-          />
-        ) : null}
-        {!behavior ? (
-          <SettingsRow
-            {...searchableSetting("notifications")}
-            resetAction={
-              notificationsMode != null &&
-              notificationsMode !== DEFAULT_SETTINGS.notificationsMode ? (
-                <SettingResetButton
-                  label="notifications"
-                  onClick={() =>
-                    void handleNotificationsModeChange(DEFAULT_SETTINGS.notificationsMode)
-                  }
-                />
-              ) : null
-            }
-            description="Notify about new mail found by background sync."
-            control={
-              <RowSelect
-                value={notificationsMode ?? undefined}
-                onValueChange={(v) => void handleNotificationsModeChange(v)}
-                options={NOTIFICATIONS_OPTIONS}
-                ariaLabel="Notifications"
+            ) : null
+          }
+          description="Sync runs in the background at this cadence."
+          control={
+            <RowSelect
+              value={syncInterval != null ? String(syncInterval) : undefined}
+              onValueChange={(v) => void handleSyncIntervalChange(v)}
+              options={SYNC_INTERVAL_OPTIONS.map((o) => ({
+                value: String(o.value),
+                label: o.label,
+              }))}
+              ariaLabel="Check for new mail"
+            />
+          }
+        />
+        <SettingsRow
+          {...searchableSetting("notifications")}
+          resetAction={
+            notificationsMode != null &&
+            notificationsMode !== DEFAULT_SETTINGS.notificationsMode ? (
+              <SettingResetButton
+                label="notifications"
+                onClick={() =>
+                  void handleNotificationsModeChange(DEFAULT_SETTINGS.notificationsMode)
+                }
               />
-            }
-          />
-        ) : null}
-        {behavior ? (
-          <SettingsRow
-            {...searchableSetting("advance-direction")}
-            resetAction={
-              advanceDirection !== "next" ? (
-                <SettingResetButton
-                  label="after archive, delete, or move"
-                  onClick={() => handleAdvanceDirectionChange("next")}
-                />
-              ) : null
-            }
-            description="Which message to select next in the list."
-            control={
-              <RowSelect
-                value={advanceDirection}
-                onValueChange={handleAdvanceDirectionChange}
-                options={ADVANCE_DIRECTION_OPTIONS}
-                ariaLabel="After archive, delete, or move"
+            ) : null
+          }
+          description="Notify about new mail found by background sync."
+          control={
+            <RowSelect
+              value={notificationsMode ?? undefined}
+              onValueChange={(v) => void handleNotificationsModeChange(v)}
+              options={NOTIFICATIONS_OPTIONS}
+              ariaLabel="Notifications"
+            />
+          }
+        />
+        <SettingsRow
+          {...searchableSetting("advance-direction")}
+          resetAction={
+            advanceDirection !== "next" ? (
+              <SettingResetButton
+                label="after archive, delete, or move"
+                onClick={() => handleAdvanceDirectionChange("next")}
               />
-            }
-          />
-        ) : null}
-      </>
+            ) : null
+          }
+          description="Which message to select next in the list."
+          control={
+            <RowSelect
+              value={advanceDirection}
+              onValueChange={handleAdvanceDirectionChange}
+              options={ADVANCE_DIRECTION_OPTIONS}
+              ariaLabel="After archive, delete, or move"
+            />
+          }
+        />
+        <SettingsRow
+          {...searchableSetting("rail-unread-dots")}
+          resetAction={
+            railDots ? (
+              <SettingResetButton label="mailbox unread dots" onClick={() => setRailDots(false)} />
+            ) : null
+          }
+          description="A dot on each mailbox in the rail whose Inbox has unread mail, and each view with unread mail."
+          control={<Switch id="railUnreadDots" checked={railDots} onCheckedChange={setRailDots} />}
+        />
+      </SettingsSection>
+
+      <TranslationSection />
 
-      {behavior && features.defaultMailApp ? (
-        <>
+      {features.defaultMailApp ? (
+        <SettingsSection title="System">
           <SettingsRow
             {...searchableSetting("default-mail-app")}
             description={`Which app opens mailto: links across ${osNames.system}.`}
@@ -329,45 +321,41 @@ export function GeneralRows({ behavior = false }: { behavior?: boolean | undefin
               />
             }
           />
-        </>
+        </SettingsSection>
       ) : null}
 
-      {!behavior ? (
-        <>
-          <>
-            <SettingsRow
-              {...searchableSetting("tour")}
-              description="A minute's walk through the app, on your own mail."
-              control={
-                <Btn size="sm" onClick={requestTour}>
-                  Take the tour
-                </Btn>
-              }
-            />
-            <SettingsRow
-              {...searchableSetting("setup")}
-              description="Mailboxes, look, notifications, your agent and the keys, one step at a time."
-              control={
-                <Btn size="sm" onClick={() => startSetup()}>
-                  Run setup again
-                </Btn>
-              }
-            />
-          </>
+      <SettingsSection title="Getting started">
+        <SettingsRow
+          {...searchableSetting("tour")}
+          description="A minute's walk through the app, on your own mail."
+          control={
+            <Btn size="sm" onClick={requestTour}>
+              Take the tour
+            </Btn>
+          }
+        />
+        <SettingsRow
+          {...searchableSetting("setup")}
+          description="Mailboxes, look, notifications, your agent and the keys, one step at a time."
+          control={
+            <Btn size="sm" onClick={() => startSetup()}>
+              Run setup again
+            </Btn>
+          }
+        />
+      </SettingsSection>
 
-          <>
-            <SettingsRow
-              {...searchableSetting("send-feedback")}
-              description="Report a Mail bug or suggest a feature on GitHub."
-              control={
-                <Btn size="sm" onClick={requestProblemReport}>
-                  Send feedback
-                </Btn>
-              }
-            />
-          </>
-        </>
-      ) : null}
-    </SettingsSection>
+      <SettingsSection title="Support">
+        <SettingsRow
+          {...searchableSetting("send-feedback")}
+          description="Report a Mail bug or suggest a feature on GitHub."
+          control={
+            <Btn size="sm" onClick={requestProblemReport}>
+              Send feedback
+            </Btn>
+          }
+        />
+      </SettingsSection>
+    </>
   );
 }
diff --git a/apps/web/src/otterware/mail/content/main/settings/reading-rows.tsx b/apps/web/src/otterware/mail/content/main/settings/reading-rows.tsx
deleted file mode 100644
index 6c256ee97d..0000000000
--- a/apps/web/src/otterware/mail/content/main/settings/reading-rows.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Switch } from "~/components/ui/switch";
-import { Input } from "~/components/ui/input";
-import { RowSelect, SettingsRow, SettingsSection } from "./settings-ui";
-import { searchableSetting } from "./settings-search";
-import {
-  MAIL_LAYOUTS,
-  MESSAGE_LIST_STYLES,
-  READING_WIDTHS,
-  GROUP_MESSAGES_BY_DAY,
-  DIM_READ_MESSAGES,
-  OPEN_MESSAGES_WITH_ARROWS,
-  MARK_READ_DELAY,
-  useMailLayout,
-  useMessageListStyle,
-  useReadingWidth,
-  useInterfaceToggle,
-  useInterfaceSetting,
-  setMailLayout,
-  setMessageListStyle,
-  setReadingWidth,
-  setInterfaceToggle,
-  setInterfaceSetting,
-  type MailLayout,
-  type MessageListStyle,
-  type ReadingWidth,
-} from "../reading-preferences";
-export function ReadingRows() {
-  const layout = useMailLayout();
-  const style = useMessageListStyle();
-  const width = useReadingWidth();
-  const group = useInterfaceToggle(GROUP_MESSAGES_BY_DAY);
-  const dim = useInterfaceToggle(DIM_READ_MESSAGES);
-  const arrows = useInterfaceToggle(OPEN_MESSAGES_WITH_ARROWS);
-  const delay = useInterfaceSetting(MARK_READ_DELAY);
-  return (
-    <SettingsSection title="Reading">
-      <SettingsRow
-        {...searchableSetting("mail-layout")}
-        control={
-          <RowSelect
-            ariaLabel="Mail layout"
-            value={layout}
-            options={Object.entries(MAIL_LAYOUTS).map(([value, item]) => ({
-              value,
-              label: item.label,
-            }))}
-            onValueChange={(value) => setMailLayout(value as MailLayout)}
-          />
-        }
-      />
-      <SettingsRow
-        {...searchableSetting("message-list-style")}
-        control={
-          <RowSelect
-            ariaLabel="Message list style"
-            value={style}
-            options={Object.entries(MESSAGE_LIST_STYLES).map(([value, item]) => ({
-              value,
-              label: item.label,
-            }))}
-            onValueChange={(value) => setMessageListStyle(value as MessageListStyle)}
-          />
-        }
-      />
-      <SettingsRow
-        {...searchableSetting("reading-width")}
-        control={
-          <RowSelect
-            ariaLabel="Reading width"
-            value={width}
-            options={Object.entries(READING_WIDTHS).map(([value, item]) => ({
-              value,
-              label: item.label,
-            }))}
-            onValueChange={(value) => setReadingWidth(value as ReadingWidth)}
-          />
-        }
-      />
-      <SettingsRow
-        {...searchableSetting("group-messages-by-day")}
-        control={
-          <Switch
-            checked={group}
-            onCheckedChange={(value) => setInterfaceToggle(GROUP_MESSAGES_BY_DAY, value)}
-          />
-        }
-      />
-      <SettingsRow
-        {...searchableSetting("dim-read-messages")}
-        control={
-          <Switch
-            checked={dim}
-            onCheckedChange={(value) => setInterfaceToggle(DIM_READ_MESSAGES, value)}
-          />
-        }
-      />
-      <SettingsRow
-        {...searchableSetting("open-messages-with-arrows")}
-        control={
-          <Switch
-            checked={arrows}
-            onCheckedChange={(value) => setInterfaceToggle(OPEN_MESSAGES_WITH_ARROWS, value)}
-          />
-        }
-      />
-      <SettingsRow
-        {...searchableSetting("mark-read-delay")}
-        description="Milliseconds before keyboard navigation marks mail as read."
-        control={
-          <Input
-            type="number"
-            size="sm"
-            min={0}
-            max={5000}
-            step={250}
-            value={delay}
-            onChange={(event) => setInterfaceSetting(MARK_READ_DELAY, Number(event.target.value))}
-          />
-        }
-      />
-    </SettingsSection>
-  );
-}
diff --git a/apps/web/src/otterware/mail/content/main/settings/settings-ui.tsx b/apps/web/src/otterware/mail/content/main/settings/settings-ui.tsx
index b888341b0c..7c72f93450 100644
--- a/apps/web/src/otterware/mail/content/main/settings/settings-ui.tsx
+++ b/apps/web/src/otterware/mail/content/main/settings/settings-ui.tsx
@@ -23,16 +23,21 @@ export function SettingsRow(props: ComponentProps<typeof HostRow>) {
     : props.id === "mailbox-status"
       ? "environment"
       : inheritedScope;
+  // Account is Mail's default scope (ADR 0011), so only the exceptions are named.
   return (
     <HostRow
       {...props}
       status={
-        <>
-          {props.status}
-          <span aria-label={`Scope: ${scope}`}>
-            {scope === "client" ? "This device" : scope === "account" ? "Account" : "Environment"}
-          </span>
-        </>
+        scope === "account" ? (
+          props.status
+        ) : (
+          <>
+            {props.status}
+            <span aria-label={`Scope: ${scope}`}>
+              {scope === "client" ? "This device" : "Environment"}
+            </span>
+          </>
+        )
       }
     />
   );
@@ -87,6 +92,8 @@ export function RowSelect({
   return (
     <Select
       value={value ?? ""}
+      // The trigger shows an option's label, not its stored value ("Every 30 seconds", not "30").
+      items={options}
       onValueChange={(next) => {
         if (next !== null) onValueChange(next);
       }}
diff --git a/apps/web/src/otterware/mail/content/main/settings/translation-section.tsx b/apps/web/src/otterware/mail/content/main/settings/translation-section.tsx
index e7446c3160..a2787a61b0 100644
--- a/apps/web/src/otterware/mail/content/main/settings/translation-section.tsx
+++ b/apps/web/src/otterware/mail/content/main/settings/translation-section.tsx
@@ -1,4 +1,3 @@
-import { mailHost } from "../../host/bridge";
 import { DEFAULT_SETTINGS } from "@otterware/mail-contracts";
 import { Switch } from "../../components/ui/switch";
 import { toast } from "../gmail/toast";
@@ -140,14 +139,6 @@ export function TranslationSection() {
           />
         }
       />
-      <SettingsRow
-        id="openrouter"
-        title="OpenRouter"
-        description="Manage the shared OpenRouter connection in Agents."
-        control={
-          <Btn onClick={() => mailHost().navigate("/settings/providers")}>Configure OpenRouter</Btn>
-        }
-      />
     </SettingsSection>
   );
 }
diff --git a/apps/web/src/otterware/mail/rpc/host.ts b/apps/web/src/otterware/mail/rpc/host.ts
index da4facb1ac..b1b81b7a79 100644
--- a/apps/web/src/otterware/mail/rpc/host.ts
+++ b/apps/web/src/otterware/mail/rpc/host.ts
@@ -17,6 +17,7 @@ import { ensureLocalApi } from "../../../localApi";
 import { appAtomRegistry } from "../../../rpc/atomRegistry";
 import { mailOperations, mailWriteCommand } from "./operations";
 import { subscribeMailEvents } from "./events";
+import { mailSettingsPath } from "../settingsPaths";
 
 const unavailable = async (): Promise<never> => {
   throw new Error("This capability is provided by Otterware Settings.");
@@ -173,16 +174,7 @@ export function createMailHost(
       case "app:takePendingMailto":
         return null;
       case "window:openSettings":
-        callbacks.navigate(
-          (
-            {
-              accounts: "/settings/mail/mailboxes",
-              agents: "/settings/providers",
-              browser: "/settings/extensions",
-              otter: "/settings/account",
-            } as Record<string, string>
-          )[text(params.pane)] ?? `/settings/${encodeURIComponent(text(params.pane) || "general")}`,
-        );
+        callbacks.navigate(mailSettingsPath(text(params.pane)));
         return;
       case "gmail:pickAttachments":
         return pickAttachments(typeof params.existingBytes === "number" ? params.existingBytes : 0);
diff --git a/apps/web/src/otterware/mail/settingsPaths.ts b/apps/web/src/otterware/mail/settingsPaths.ts
new file mode 100644
index 0000000000..05e9e04e32
--- /dev/null
+++ b/apps/web/src/otterware/mail/settingsPaths.ts
@@ -0,0 +1,22 @@
+import { moduleSettingsHref } from "../settingsRegistry";
+
+/** Otter Mail's settings panes that became Mail's own pages, by their page id. */
+const MAIL_PAGES: Readonly<Record<string, string>> = {
+  general: "general",
+  appearance: "appearance",
+  accounts: "mailboxes",
+};
+
+/** Panes that became shared App pages. */
+const APP_PAGES: Readonly<Record<string, string>> = {
+  agents: "/settings/providers",
+  browser: "/settings/extensions",
+  otter: "/settings/account",
+};
+
+/** Where one of Otter Mail's settings panes lives in the shell's Settings. */
+export function mailSettingsPath(pane: string): string {
+  const page = MAIL_PAGES[pane];
+  const own = page === undefined ? null : moduleSettingsHref("mail", page);
+  return own ?? APP_PAGES[pane] ?? `/settings/${encodeURIComponent(pane || "general")}`;
+}
diff --git a/apps/web/src/otterware/mail/settingsRows.ts b/apps/web/src/otterware/mail/settingsRows.ts
index 0a3fc84f78..96d336c923 100644
--- a/apps/web/src/otterware/mail/settingsRows.ts
+++ b/apps/web/src/otterware/mail/settingsRows.ts
@@ -2,36 +2,33 @@ const rows = (entries: Record<string, string>) =>
   Object.entries(entries).map(([id, title]) => ({ id, title }));
 export const MAIL_SETTING_ROWS = {
   mailboxes: rows({
+    mailboxes: "Mailboxes",
+    "all-mailboxes": "All mailboxes",
     "mailbox-status": "Mailbox status",
     "mailbox-display-name": "Display name",
     "mailbox-color": "Mailbox color",
     signature: "Signature",
     "remove-mailbox": "Remove mailbox",
-    "all-mailboxes": "All mailboxes",
-    mailboxes: "Mailboxes",
-    "sync-interval": "Check for new mail",
-    "advance-direction": "After archive, delete, or move",
-    "rail-unread-dots": "Unread dots in rail",
-    "dock-badge": "Dock unread count",
-    "default-mail-app": "Default email app",
   }),
-  reading: rows({
+  appearance: rows({
     "mail-layout": "Mail layout",
     "message-list-style": "Message list style",
-    "reading-width": "Reading width",
-    "group-messages-by-day": "Group by day",
+    "group-messages-by-day": "Group messages by day",
     "dim-read-messages": "Dim read messages",
-    "open-messages-with-arrows": "Arrow keys open messages",
+    "open-messages-with-arrows": "Open messages with arrow keys",
     "mark-read-delay": "Mark as read delay",
-  }),
-  translation: rows({
-    "read-languages": "Languages I read",
-    "auto-translate": "Translate automatically",
-    openrouter: "OpenRouter",
+    "reading-width": "Reading width",
   }),
   general: rows({
     "launch-at-login": "Launch at login",
-    notifications: "Mail notifications",
+    "dock-badge": "Dock unread count",
+    "sync-interval": "Check for new mail",
+    notifications: "Notifications",
+    "advance-direction": "After archive, delete, or move",
+    "rail-unread-dots": "Unread dots in rail",
+    "read-languages": "Languages I read",
+    "auto-translate": "Translate automatically",
+    "default-mail-app": "Default email app",
     tour: "Tour",
     setup: "Setup",
     "send-feedback": "Send feedback",
diff --git a/apps/web/src/otterware/settings/SettingsSlider.tsx b/apps/web/src/otterware/settings/SettingsSlider.tsx
new file mode 100644
index 0000000000..6da41d959a
--- /dev/null
+++ b/apps/web/src/otterware/settings/SettingsSlider.tsx
@@ -0,0 +1,59 @@
+import type { CSSProperties } from "react";
+
+/**
+ * A range with its value in a pill beside it, as Appearance's Motion slider
+ * draws it (the `settings-slider` styles). Give it a row's `control`.
+ */
+export function SettingsSlider({
+  id,
+  ariaLabel,
+  value,
+  valueLabel,
+  min,
+  max,
+  step,
+  onValueChange,
+  disabled,
+}: {
+  readonly id: string;
+  readonly ariaLabel: string;
+  readonly value: number;
+  readonly valueLabel: string;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly onValueChange: (value: number) => void;
+  readonly disabled?: boolean | undefined;
+}) {
+  const ratio = max === min ? 0 : (value - min) / (max - min);
+  const style = {
+    "--settings-slider-progress": `${ratio * 100}%`,
+    "--settings-slider-fill-offset": `${0.5 - ratio}rem`,
+  } as CSSProperties;
+  return (
+    <div className="flex w-full items-center gap-3 sm:w-52">
+      <output
+        className="min-w-16 rounded-md bg-muted px-2 py-1 text-center font-mono text-xs font-medium tabular-nums text-foreground"
+        htmlFor={id}
+      >
+        {valueLabel}
+      </output>
+      <input
+        aria-label={ariaLabel}
+        className="settings-slider min-w-0 flex-1"
+        id={id}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        style={style}
+        type="range"
+        onChange={(event) => {
+          const next = Number(event.currentTarget.value);
+          if (Number.isFinite(next)) onValueChange(next);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/otterware/settings/SettingsTilePicker.tsx b/apps/web/src/otterware/settings/SettingsTilePicker.tsx
new file mode 100644
index 0000000000..8c0ab10640
--- /dev/null
+++ b/apps/web/src/otterware/settings/SettingsTilePicker.tsx
@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SettingsTileOption<Value extends string> {
+  readonly value: Value;
+  readonly label: string;
+  readonly description?: string;
+  /** A miniature of the choice, drawn above its label. */
+  readonly preview: ReactNode;
+}
+
+/**
+ * Pick one of a few choices by its picture, with the look of Appearance's
+ * light/dark/system tiles. Place it in a plain `SettingsSection` whose title
+ * names the setting.
+ */
+export function SettingsTilePicker<Value extends string>({
+  ariaLabel,
+  options,
+  value,
+  onValueChange,
+  disabled,
+}: {
+  readonly ariaLabel: string;
+  readonly options: ReadonlyArray<SettingsTileOption<Value>>;
+  readonly value: Value;
+  readonly onValueChange: (value: Value) => void;
+  readonly disabled?: boolean | undefined;
+}) {
+  return (
+    <div className="@container">
+      <div
+        aria-label={ariaLabel}
+        role="group"
+        className={cn(
+          "grid grid-cols-1 gap-3",
+          options.length === 2 ? "@min-[24rem]:grid-cols-2" : "@min-[30rem]:grid-cols-3",
+        )}
+      >
+        {options.map((option) => {
+          const isActive = option.value === value;
+          const descriptionId = `${ariaLabel}-${option.value}-description`
+            .toLowerCase()
+            .replaceAll(" ", "-");
+          return (
+            <button
+              key={option.value}
+              type="button"
+              aria-label={option.label}
+              aria-pressed={isActive}
+              aria-describedby={option.description ? descriptionId : undefined}
+              disabled={disabled}
+              onClick={() => onValueChange(option.value)}
+              className={cn(
+                "flex cursor-pointer flex-col items-stretch gap-1 rounded-xl border p-2 text-left outline-none transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-64",
+                isActive
+                  ? "border-transparent bg-accent/30"
+                  : "border-border/70 bg-card/60 hover:bg-accent/10",
+              )}
+              style={isActive ? { boxShadow: "inset 0 0 0 1px var(--ring)" } : undefined}
+            >
+              <span
+                aria-hidden="true"
+                className="relative block h-28 w-full overflow-hidden rounded-lg border border-border/60 bg-background"
+              >
+                {option.preview}
+              </span>
+              <span
+                className={cn(
+                  "mt-1 px-1 text-sm font-medium",
+                  isActive ? "text-foreground" : "text-foreground/80",
+                )}
+              >
+                {option.label}
+              </span>
+              {option.description ? (
+                <span
+                  id={descriptionId}
+                  className="mb-0.5 px-1 text-xs leading-relaxed text-muted-foreground"
+                >
+                  {option.description}
+                </span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/otterware/settingsRegistry.ts b/apps/web/src/otterware/settingsRegistry.ts
index 01ca32557c..d560c5f6d8 100644
--- a/apps/web/src/otterware/settingsRegistry.ts
+++ b/apps/web/src/otterware/settingsRegistry.ts
@@ -32,14 +32,11 @@ const ACCOUNT_SETTINGS_PATH = "/settings/account";
  * host's tables are keyed by. A new module page adds its id here.
  */
 export type ModuleSettingsPageId =
-  | "mail"
   | "general"
+  | "appearance"
   | "integrations"
-  | "calendar"
-  | "drive"
-  | "reading"
+  | "time"
   | "mailboxes"
-  | "translation"
   | "calendars"
   | "drives"
   | "access";
@@ -111,10 +108,40 @@ export function moduleSettingsPage(
   return ownPages.find((entry) => entry.module.id === moduleId && entry.page.id === pageId) ?? null;
 }
 
-/** Breadcrumb and search subtitles: `Mail › Reading` while several modules group, else the page. */
+/** Where a module page is shown: its own page, or the host page it merges into. */
+export function moduleSettingsHref(moduleId: string, pageId: string): string | null {
+  const entry = MODULE_SETTINGS_PAGES.find(
+    (candidate) => candidate.module.id === moduleId && candidate.page.id === pageId,
+  );
+  if (entry === undefined) return null;
+  return entry.placement === "page" ? entry.path : HOST_SETTINGS_PAGE_PATHS[entry.placement];
+}
+
+/** Breadcrumb and search subtitles: `Mail › Appearance` while several modules group, else the page. */
 const ownPageLabel = (entry: PlacedModuleSettingsPage) =>
   shellKind === "combined" ? `${entry.module.label} › ${entry.page.label}` : entry.page.label;
 
+/** Sidebar labels: the module's group header already names it, so only the page. */
+export const OTTERWARE_SETTINGS_NAV_LABELS: Readonly<Partial<Record<string, string>>> =
+  Object.fromEntries(ownPages.map((entry) => [entry.path, entry.page.label]));
+
+/**
+ * The scope sentence ("Applying settings for … across …") picks where Code
+ * settings are written; a module page's rows name their own scope, so it hides
+ * there unless a project or environment is already picked and must stay changeable.
+ */
+export function showsSettingsScopeSentence(
+  pathname: string,
+  search: {
+    readonly project?: string | undefined;
+    readonly machine?: string | undefined;
+    readonly checkout?: string | undefined;
+  },
+): boolean {
+  if (!ownPages.some((entry) => entry.path === pathname)) return true;
+  return Boolean(search.project || search.machine || search.checkout);
+}
+
 export const OTTERWARE_SETTINGS_SECTION_LABELS = {
   [MODULES_SETTINGS_PATH]: "Modules",
   [ACCOUNT_SETTINGS_PATH]: "Account",
@@ -199,6 +226,44 @@ export const OTTERWARE_SETTINGS_SEARCH_ITEMS: ReadonlyArray<OtterwareSettingsSea
   ...MODULE_SETTINGS_PAGES.flatMap(pageSearchItems),
 ];
 
+/**
+ * Rows and sections of the shared General page that only mean something with
+ * Code: projects, worktrees, diffs, pull requests and commit text. A
+ * standalone app hides them (and their search results); the model,
+ * permissions and composer stay, because the app's assistant chat uses them.
+ */
+const CODE_ONLY_GENERAL_SETTINGS: ReadonlySet<string> = new Set([
+  "new-threads",
+  "worktree-submodules",
+  "proactive-panels",
+  "organization",
+  "project-grouping",
+  "project-order",
+  "snooze-limited-threads",
+  "auto-resume-limited-threads",
+  "working-shelf",
+  "auto-settle-inactive-threads",
+  "auto-settle-merged-threads",
+  "days-before-auto-settle",
+  "hide-whitespace-changes",
+  "default-diff-file-state",
+  "diff-layout",
+  "projects-and-threads",
+  "start-from-origin",
+  "add-project-starts-in",
+  "text-generation",
+  "text-generation-model",
+  "legacy-features",
+  "legacy-plan-mode",
+  "legacy-context-window-indicator",
+  "legacy-sidebar",
+]);
+
+/** Whether a host settings row or section shows in this profile. */
+export function isProfileSettingVisible(id: string): boolean {
+  return activeProfile.codeVisible || !CODE_ONLY_GENERAL_SETTINGS.has(id);
+}
+
 const CODE_SETTINGS_PATHS = [
   "/settings/projects",
   "/settings/project-groups",
diff --git a/apps/web/src/routes/settings.$moduleId.$pageId.tsx b/apps/web/src/routes/settings.$moduleId.$pageId.tsx
index 74416e8cbb..2c83a7c7a7 100644
--- a/apps/web/src/routes/settings.$moduleId.$pageId.tsx
+++ b/apps/web/src/routes/settings.$moduleId.$pageId.tsx
@@ -1,10 +1,14 @@
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { Suspense } from "react";
 
-import { SettingsPageContainer, SettingsSection } from "../components/settings/settingsLayout";
+import { SettingsPageContainer, SettingsSearchTarget } from "../components/settings/settingsLayout";
 import { moduleSettingsPage } from "../otterware/settingsRegistry";
 
-/** A module's own settings page (`WebModuleSettingsPage` placed as a page), at `/settings/<module>/<page>`. */
+/**
+ * A module's own settings page (`WebModuleSettingsPage` placed as a page), at
+ * `/settings/<module>/<page>`. The page renders its own sections; the header's
+ * breadcrumb names it, so no title is drawn here.
+ */
 function ModuleSettingsRoutePage() {
   const { moduleId, pageId } = Route.useParams();
   const entry = moduleSettingsPage(moduleId, pageId);
@@ -12,11 +16,11 @@ function ModuleSettingsRoutePage() {
   const Page = entry.page.component;
   return (
     <SettingsPageContainer>
-      <SettingsSection id={entry.sectionId} title={entry.page.label}>
+      <SettingsSearchTarget id={entry.sectionId} className="flex flex-col gap-8 outline-none">
         <Suspense fallback={null}>
           <Page />
         </Suspense>
-      </SettingsSection>
+      </SettingsSearchTarget>
     </SettingsPageContainer>
   );
 }
diff --git a/scripts/otterware/upstream-seams.txt b/scripts/otterware/upstream-seams.txt
index bd707ed927..85613aa424 100644
--- a/scripts/otterware/upstream-seams.txt
+++ b/scripts/otterware/upstream-seams.txt
@@ -25,6 +25,9 @@ apps/web/src/components/CommandPalette.tsx
 apps/web/src/components/settings/settingsSearch.ts
 apps/web/src/components/settings/settingsLayout.tsx
 apps/web/src/components/settings/SettingsSidebarNav.tsx
+# General page: `hidden` on the Code-only sections and rows a standalone app has no use for
+apps/web/src/components/settings/SettingsPanels.tsx
+apps/web/src/components/settings/ProjectDefaultsSettings.tsx
 apps/web/src/components/settings/KeybindingsSettings.tsx
 apps/web/src/components/settings/KeybindingsSettings.logic.ts
 apps/web/src/branding*.ts