diff --git a/desktop/src/features/agents/ui/AgentDefaultsEditor.tsx b/desktop/src/features/agents/ui/AgentDefaultsEditor.tsx
index 69e8b3a5b4..b99b7b43d0 100644
--- a/desktop/src/features/agents/ui/AgentDefaultsEditor.tsx
+++ b/desktop/src/features/agents/ui/AgentDefaultsEditor.tsx
@@ -39,6 +39,7 @@ import {
 } from "@/features/agents/ui/AgentConfigFields";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
+import { SettingsActionButton } from "@/features/settings/ui/SettingsActionButton";
 
 type SaveState = "idle" | "saving" | "saved" | "error";
 
@@ -259,6 +260,7 @@ export function AgentDefaultsEditor({
   const progressiveFieldsTransition = shouldReduceMotion
     ? { duration: 0 }
     : PROGRESSIVE_FIELDS_TRANSITION;
+  const SaveButton = flatLayout ? SettingsActionButton : Button;
 
   return (
     <div className={cn("min-w-0", flatLayout ? "space-y-7" : "space-y-4")}>
@@ -337,7 +339,7 @@ export function AgentDefaultsEditor({
           )}
           <div className="ml-auto flex items-center gap-3">
             {secondaryAction}
-            <Button
+            <SaveButton
               disabled={
                 !dirty ||
                 !configIsValid ||
@@ -351,7 +353,7 @@ export function AgentDefaultsEditor({
                 <Loader className="mr-1.5 size-3.5 animate-spin" />
               ) : null}
               Save defaults
-            </Button>
+            </SaveButton>
           </div>
         </div>
       )}
diff --git a/desktop/src/features/community-members/ui/CommunityMembersSettingsCard.tsx b/desktop/src/features/community-members/ui/CommunityMembersSettingsCard.tsx
index 06b19d6167..9a0f2d1197 100644
--- a/desktop/src/features/community-members/ui/CommunityMembersSettingsCard.tsx
+++ b/desktop/src/features/community-members/ui/CommunityMembersSettingsCard.tsx
@@ -20,7 +20,7 @@ import type {
   UserProfileSummary,
 } from "@/shared/api/types";
 import { normalizePubkey, truncatePubkey } from "@/shared/lib/pubkey";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "@/features/settings/ui/SettingsActionButton";
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/desktop/src/features/custom-emoji/ui/CustomEmojiSettingsCard.tsx b/desktop/src/features/custom-emoji/ui/CustomEmojiSettingsCard.tsx
index 37199297f2..bfda700813 100644
--- a/desktop/src/features/custom-emoji/ui/CustomEmojiSettingsCard.tsx
+++ b/desktop/src/features/custom-emoji/ui/CustomEmojiSettingsCard.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/shared/api/customEmoji";
 import { pickAndUploadMedia } from "@/shared/api/tauri";
 import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "@/features/settings/ui/SettingsActionButton";
 import { Input } from "@/shared/ui/input";
 import { SettingsOptionGroup } from "@/features/settings/ui/SettingsOptionGroup";
 import { SettingsSectionHeader } from "@/features/settings/ui/SettingsSectionHeader";
diff --git a/desktop/src/features/local-archive/ui/LocalArchiveSettingsCard.tsx b/desktop/src/features/local-archive/ui/LocalArchiveSettingsCard.tsx
index c03faa0948..65379cadd7 100644
--- a/desktop/src/features/local-archive/ui/LocalArchiveSettingsCard.tsx
+++ b/desktop/src/features/local-archive/ui/LocalArchiveSettingsCard.tsx
@@ -17,7 +17,7 @@ import {
 } from "@/shared/constants/kinds";
 import { useChannelsQuery } from "@/features/channels/hooks";
 import { useIdentityQuery } from "@/shared/api/hooks";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "@/features/settings/ui/SettingsActionButton";
 import { Checkbox } from "@/shared/ui/checkbox";
 import { Switch } from "@/shared/ui/switch";
 import {
diff --git a/desktop/src/features/notifications/lib/sound.ts b/desktop/src/features/notifications/lib/sound.ts
index 1e9ccb3839..b522ed82a3 100644
--- a/desktop/src/features/notifications/lib/sound.ts
+++ b/desktop/src/features/notifications/lib/sound.ts
@@ -137,10 +137,14 @@ export function shouldPlayNotificationSound(
 
 const cache = new Map<SoundName, HTMLAudioElement>();
 
+export function createNotificationSound(name: SoundName): HTMLAudioElement {
+  return new Audio(`/sounds/${name}.mp3`);
+}
+
 function getAudio(name: SoundName): HTMLAudioElement {
   let audio = cache.get(name);
   if (!audio) {
-    audio = new Audio(`/sounds/${name}.mp3`);
+    audio = createNotificationSound(name);
     cache.set(name, audio);
   }
   return audio;
diff --git a/desktop/src/features/settings/UpdateChecker.tsx b/desktop/src/features/settings/UpdateChecker.tsx
index cb1180994f..563085fc15 100644
--- a/desktop/src/features/settings/UpdateChecker.tsx
+++ b/desktop/src/features/settings/UpdateChecker.tsx
@@ -1,6 +1,6 @@
 import { openUrl } from "@tauri-apps/plugin-opener";
 import { useUpdaterContext } from "./hooks/UpdaterProvider";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./ui/SettingsActionButton";
 import {
   SettingsOptionGroup,
   SettingsOptionRow,
diff --git a/desktop/src/features/settings/ui/AppearanceSettingsControls.tsx b/desktop/src/features/settings/ui/AppearanceSettingsControls.tsx
index 003e2894ea..718db6274c 100644
--- a/desktop/src/features/settings/ui/AppearanceSettingsControls.tsx
+++ b/desktop/src/features/settings/ui/AppearanceSettingsControls.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ReactNode } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { Eye } from "lucide-react";
+import { Hash, Inbox, MessageSquare, Search, X } from "lucide-react";
 import {
   setThreadViewMode,
   useThreadViewMode,
@@ -9,7 +9,7 @@ import {
 } from "@/features/channels/lib/threadViewModePreference";
 import { useCommunities } from "@/features/communities/useCommunities";
 import { AvatarFramingSlider } from "@/features/profile/ui/AnimatedAvatarControls";
-import { contrastColorForBackground } from "@/features/profile/ui/ProfileAvatarEditor.utils";
+import { cn } from "@/shared/lib/cn";
 import {
   setLinkPreviewStyle,
   useLinkPreviewStyle,
@@ -160,45 +160,6 @@ function ConversationDensityPreviewMessage({
   );
 }
 
-function ConversationPreview() {
-  return (
-    <div className="px-4 py-3" data-testid="conversation-preview">
-      <div
-        aria-hidden="true"
-        className="relative overflow-hidden rounded-xl border border-border/65 bg-transparent"
-        data-testid="conversation-preview-surface"
-      >
-        <span className="absolute right-3.5 top-3 inline-flex items-center gap-1 text-2xs font-medium text-muted-foreground/55">
-          <Eye aria-hidden="true" className="size-3" />
-          Preview
-        </span>
-        <div className="p-4" data-testid="conversation-preview-content">
-          <ConversationDensityPreviewMessage
-            avatar="M"
-            author="Maya"
-            timestamp="9:41"
-          >
-            The revised conversation layout is ready to review.
-          </ConversationDensityPreviewMessage>
-          <ConversationDensityPreviewMessage
-            avatar="T"
-            author="Theo"
-            timestamp="9:43"
-          >
-            <p>
-              I added a longer message so you can compare line height and text
-              spacing.
-            </p>
-            <p className="mt-conversation-paragraph">
-              The same rhythm carries through channels, threads, DMs, and Inbox.
-            </p>
-          </ConversationDensityPreviewMessage>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 /** App-wide type sizing and conversation-specific spacing controls. */
 export function ConversationDisplaySettings() {
   const density = useConversationDensity();
@@ -209,12 +170,6 @@ export function ConversationDisplaySettings() {
       <SettingsOptionRow data-testid="font-size-row">
         <div className="min-w-0">
           <p className="text-sm font-medium">Font size</p>
-          <p
-            className="text-sm font-normal text-muted-foreground/70"
-            data-settings-subcopy
-          >
-            Applies across conversations and interface text
-          </p>
         </div>
         <SegmentedControl
           size="wide"
@@ -227,15 +182,12 @@ export function ConversationDisplaySettings() {
           value={fontSize}
         />
       </SettingsOptionRow>
-      <SettingsOptionRow data-testid="conversation-density-row">
+      <SettingsOptionRow
+        className="border-t border-border/55"
+        data-testid="conversation-density-row"
+      >
         <div className="min-w-0">
           <p className="text-sm font-medium">Conversation density</p>
-          <p
-            className="text-sm font-normal text-muted-foreground/70"
-            data-settings-subcopy
-          >
-            Spacing in conversations and Markdown content across Buzz
-          </p>
         </div>
         <SegmentedControl
           size="wide"
@@ -248,7 +200,6 @@ export function ConversationDisplaySettings() {
           value={density}
         />
       </SettingsOptionRow>
-      <ConversationPreview />
     </div>
   );
 }
@@ -303,8 +254,140 @@ function SampleImageLightbox({
   return <div className={className}>{children}</div>;
 }
 
-function LinkPreviewSample({ style }: { style: LinkPreviewStyle }) {
-  const { isDark } = useTheme();
+const APPEARANCE_PREVIEW_EASE_OUT = [0.23, 1, 0.32, 1] as const;
+const APPEARANCE_PREVIEW_EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
+const APPEARANCE_PREVIEW_MORPH_TRANSITION = {
+  duration: 0.24,
+  ease: APPEARANCE_PREVIEW_EASE_IN_OUT,
+} as const;
+const APPEARANCE_PREVIEW_CROSSFADE_TRANSITION = {
+  duration: 0.18,
+  ease: APPEARANCE_PREVIEW_EASE_OUT,
+} as const;
+const APPEARANCE_PREVIEW_REDUCED_TRANSITION = {
+  duration: 0.12,
+  ease: "linear",
+} as const;
+const APPEARANCE_PREVIEW_INSTANT_TRANSITION = { duration: 0 } as const;
+const APPEARANCE_PREVIEW_BUTTON_MOTION =
+  "transition-[color,background-color,transform] duration-[var(--motion-duration-instant)] ease-[var(--motion-ease-out)] active:scale-[0.97] motion-reduce:transform-none motion-reduce:transition-colors";
+
+type AppearancePreviewMotionContext = {
+  direct: boolean;
+  modeChanged: boolean;
+  reduced: boolean;
+};
+
+function appearancePreviewTransition({
+  direct,
+  reduced,
+}: AppearancePreviewMotionContext) {
+  if (direct) return APPEARANCE_PREVIEW_INSTANT_TRANSITION;
+  if (reduced) return APPEARANCE_PREVIEW_REDUCED_TRANSITION;
+  return APPEARANCE_PREVIEW_MORPH_TRANSITION;
+}
+
+const APPEARANCE_PREVIEW_PANEL_VARIANTS = {
+  animate: (context: AppearancePreviewMotionContext) => ({
+    filter: "blur(0px)",
+    opacity: 1,
+    transform: "translateX(0)",
+    transition: appearancePreviewTransition(context),
+  }),
+  exit: (context: AppearancePreviewMotionContext) => ({
+    filter:
+      !context.direct && !context.reduced && context.modeChanged
+        ? "blur(2px)"
+        : "blur(0px)",
+    opacity: context.direct ? 1 : 0,
+    transform:
+      context.direct || context.reduced || context.modeChanged
+        ? "translateX(0)"
+        : "translateX(100%)",
+    transition: appearancePreviewTransition(context),
+  }),
+  initial: (context: AppearancePreviewMotionContext) => ({
+    filter:
+      !context.direct && !context.reduced && context.modeChanged
+        ? "blur(2px)"
+        : "blur(0px)",
+    opacity: context.direct ? 1 : 0,
+    transform:
+      context.direct || context.reduced || context.modeChanged
+        ? "translateX(0)"
+        : "translateX(100%)",
+    transition: appearancePreviewTransition(context),
+  }),
+} as const;
+
+const APPEARANCE_PREVIEW_CONTENT_VARIANTS = {
+  animate: (context: AppearancePreviewMotionContext) => ({
+    filter: "blur(0px)",
+    opacity: 1,
+    transition: context.direct
+      ? APPEARANCE_PREVIEW_INSTANT_TRANSITION
+      : context.reduced
+        ? APPEARANCE_PREVIEW_REDUCED_TRANSITION
+        : APPEARANCE_PREVIEW_CROSSFADE_TRANSITION,
+  }),
+  exit: (context: AppearancePreviewMotionContext) => ({
+    filter: context.direct || context.reduced ? "blur(0px)" : "blur(2px)",
+    opacity: context.direct ? 1 : 0,
+    transition: context.direct
+      ? APPEARANCE_PREVIEW_INSTANT_TRANSITION
+      : context.reduced
+        ? APPEARANCE_PREVIEW_REDUCED_TRANSITION
+        : APPEARANCE_PREVIEW_CROSSFADE_TRANSITION,
+  }),
+  initial: (context: AppearancePreviewMotionContext) => ({
+    filter: context.direct || context.reduced ? "blur(0px)" : "blur(2px)",
+    opacity: context.direct ? 1 : 0,
+    transition: context.direct
+      ? APPEARANCE_PREVIEW_INSTANT_TRANSITION
+      : context.reduced
+        ? APPEARANCE_PREVIEW_REDUCED_TRANSITION
+        : APPEARANCE_PREVIEW_CROSSFADE_TRANSITION,
+  }),
+} as const;
+
+export function AppearanceWorkspacePreview({
+  previewLinkStyle,
+  previewThreadMode,
+}: {
+  previewLinkStyle?: LinkPreviewStyle | null;
+  previewThreadMode?: ThreadViewMode | null;
+}) {
+  const savedLinkStyle = useLinkPreviewStyle();
+  const savedThreadMode = useThreadViewMode();
+  const { glassBackground, isDark, prominentActiveTab } = useTheme();
+  const shouldReduceMotion = useReducedMotion();
+  const [activeChannel, setActiveChannel] = React.useState<
+    "design" | "general"
+  >("design");
+  const [threadOpen, setThreadOpen] = React.useState(true);
+  const linkStyle = previewLinkStyle ?? savedLinkStyle;
+  const threadMode = previewThreadMode ?? savedThreadMode;
+  React.useEffect(() => {
+    if (previewThreadMode !== null && previewThreadMode !== undefined) {
+      setThreadOpen(true);
+    } else if (previewLinkStyle !== null && previewLinkStyle !== undefined) {
+      setThreadOpen(false);
+    }
+  }, [previewLinkStyle, previewThreadMode]);
+  const previousThreadOpenRef = React.useRef(threadOpen);
+  const threadVisibilityChanged = previousThreadOpenRef.current !== threadOpen;
+  React.useEffect(() => {
+    previousThreadOpenRef.current = threadOpen;
+  }, [threadOpen]);
+  const directManipulationActive =
+    !threadVisibilityChanged &&
+    ((previewLinkStyle !== null && previewLinkStyle !== undefined) ||
+      (previewThreadMode !== null && previewThreadMode !== undefined));
+  const previousThreadModeRef = React.useRef(threadMode);
+  const threadModeChanged = previousThreadModeRef.current !== threadMode;
+  React.useEffect(() => {
+    previousThreadModeRef.current = threadMode;
+  }, [threadMode]);
   const preview = React.useMemo<ResolvedLinkPreview>(
     () => ({
       ...LINK_PREVIEW_SAMPLE_BASE,
@@ -312,57 +395,276 @@ function LinkPreviewSample({ style }: { style: LinkPreviewStyle }) {
     }),
     [isDark],
   );
-  return (
-    <div className="px-4 py-3" data-testid="link-preview-sample">
+
+  const navItemClass = (active: boolean) =>
+    cn(
+      "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs",
+      APPEARANCE_PREVIEW_BUTTON_MOTION,
+      active
+        ? prominentActiveTab
+          ? "bg-primary text-primary-foreground"
+          : "bg-accent text-accent-foreground"
+        : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
+    );
+
+  const motionMode = directManipulationActive
+    ? "direct"
+    : shouldReduceMotion
+      ? "reduced"
+      : "animated";
+  const motionContext: AppearancePreviewMotionContext = {
+    direct: directManipulationActive,
+    modeChanged: threadModeChanged,
+    reduced: Boolean(shouldReduceMotion),
+  };
+
+  const threadPanel = (
+    <motion.aside
+      animate="animate"
+      className={cn(
+        "absolute inset-y-0 right-0 z-10 flex min-w-0 flex-col overflow-hidden border-l border-border/60 bg-background will-change-[opacity,transform]",
+        threadMode === "split" ? "w-[42%]" : "w-[72%]",
+      )}
+      custom={motionContext}
+      data-motion-mode={motionMode}
+      data-testid="appearance-workspace-preview-thread"
+      exit="exit"
+      initial="initial"
+      key={threadMode}
+      variants={APPEARANCE_PREVIEW_PANEL_VARIANTS}
+    >
+      <div className="flex h-11 shrink-0 items-center justify-between border-b border-border/60 px-3">
+        <div className="min-w-0">
+          <p className="truncate text-xs font-semibold">Layout feedback</p>
+          <p className="text-2xs text-muted-foreground">3 replies</p>
+        </div>
+        <button
+          aria-label="Close preview thread"
+          className={cn(
+            "rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+            APPEARANCE_PREVIEW_BUTTON_MOTION,
+          )}
+          data-testid="appearance-preview-close-thread"
+          onClick={() => setThreadOpen(false)}
+          type="button"
+        >
+          <X className="size-3.5" />
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden px-3 py-1">
+        <ConversationDensityPreviewMessage
+          avatar="M"
+          author="Maya"
+          timestamp="9:41"
+        >
+          The revised conversation layout is ready to review.
+        </ConversationDensityPreviewMessage>
+        <ConversationDensityPreviewMessage
+          avatar="A"
+          author="Arjun"
+          timestamp="9:44"
+        >
+          This hierarchy feels much clearer.
+        </ConversationDensityPreviewMessage>
+      </div>
+      <div className="m-3 rounded-lg border border-border/70 bg-muted/35 px-3 py-2 text-2xs text-muted-foreground">
+        Reply to thread…
+      </div>
+    </motion.aside>
+  );
+
+  const channelLayout = threadOpen && threadMode === "split" ? "split" : "full";
+  const channelContentKey = `${activeChannel}:${linkStyle}:${channelLayout}`;
+  const firstMessage =
+    activeChannel === "design"
+      ? "The revised conversation layout is ready to review."
+      : "The weekly project notes are ready for everyone.";
+  const secondMessage =
+    activeChannel === "design"
+      ? "I also updated how shared links appear in the conversation."
+      : "I linked the release notes so the team can catch up quickly.";
+
+  const channelPane = (
+    <motion.main
+      animate="animate"
+      className={cn(
+        "absolute inset-y-0 left-0 flex min-w-0 flex-col overflow-hidden will-change-[opacity]",
+        channelLayout === "split" ? "right-[42%]" : "right-0",
+      )}
+      custom={motionContext}
+      data-motion-mode={motionMode}
+      data-testid="appearance-workspace-preview-channel"
+      exit="exit"
+      initial="initial"
+      key={channelContentKey}
+      variants={APPEARANCE_PREVIEW_CONTENT_VARIANTS}
+    >
+      <header className="flex h-11 shrink-0 items-center justify-between border-b border-border/60 px-3">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <Hash className="size-3.5 text-muted-foreground" />
+          <span className="truncate text-xs font-semibold">
+            {activeChannel}
+          </span>
+        </div>
+        {!threadOpen ? (
+          <button
+            className={cn(
+              "flex items-center gap-1 rounded-md px-1.5 py-1 text-2xs text-muted-foreground hover:bg-muted hover:text-foreground",
+              APPEARANCE_PREVIEW_BUTTON_MOTION,
+            )}
+            data-testid="appearance-preview-open-thread"
+            onClick={() => setThreadOpen(true)}
+            type="button"
+          >
+            <MessageSquare className="size-3" /> Open thread
+          </button>
+        ) : null}
+      </header>
       <div
-        aria-hidden="true"
-        className="relative overflow-hidden rounded-xl border border-border/65 bg-transparent"
-        data-testid="link-preview-sample-surface"
-        inert
+        className="min-h-0 flex-1 overflow-hidden px-3 py-1"
+        data-testid="appearance-workspace-preview-messages"
       >
-        <span className="absolute right-3.5 top-3 inline-flex items-center gap-1 text-2xs font-medium text-muted-foreground/55">
-          <Eye aria-hidden="true" className="size-3" />
+        <button
+          className={cn(
+            "block w-full rounded-lg text-left hover:bg-muted/35",
+            APPEARANCE_PREVIEW_BUTTON_MOTION,
+          )}
+          data-testid="appearance-preview-thread-message"
+          onClick={() => setThreadOpen(true)}
+          type="button"
+        >
+          <ConversationDensityPreviewMessage
+            avatar="M"
+            author="Maya"
+            timestamp="9:41"
+          >
+            {firstMessage}
+          </ConversationDensityPreviewMessage>
+        </button>
+        <ConversationDensityPreviewMessage
+          avatar="T"
+          author="Theo"
+          timestamp="9:43"
+        >
+          {secondMessage}
+          <div
+            className="mt-2 max-w-[300px] origin-top-left scale-[0.78]"
+            data-testid="appearance-workspace-link-preview"
+            inert
+          >
+            <LinkPreviewAttachmentPresentation
+              ImageLightbox={SampleImageLightbox}
+              preview={preview}
+              showExpandControl={false}
+              style={linkStyle}
+            />
+          </div>
+        </ConversationDensityPreviewMessage>
+      </div>
+      <div className="m-3 rounded-lg border border-border/70 bg-muted/35 px-3 py-2 text-2xs text-muted-foreground">
+        Message #{activeChannel}
+      </div>
+    </motion.main>
+  );
+
+  return (
+    <div className="mb-10" data-testid="appearance-workspace-preview">
+      <div className="mb-2 flex items-baseline px-4">
+        <p className="text-sm font-semibold text-muted-foreground/70">
           Preview
-        </span>
-        <div className="p-4 pr-24">
-          <LinkPreviewAttachmentPresentation
-            ImageLightbox={SampleImageLightbox}
-            preview={preview}
-            showExpandControl={false}
-            style={style}
-          />
+        </p>
+      </div>
+      <div
+        className={cn(
+          "relative flex h-[360px] overflow-hidden rounded-xl border border-border/70 bg-background/70",
+          glassBackground && "bg-background/80 backdrop-blur-xl",
+        )}
+        data-link-style={linkStyle}
+        data-thread-mode={threadMode}
+        data-testid="appearance-workspace-preview-surface"
+      >
+        <nav
+          className={cn(
+            "w-[132px] shrink-0 border-r border-border/55 bg-muted/30 p-2",
+            glassBackground && "bg-muted/20",
+          )}
+        >
+          <div className="mb-3 flex items-center gap-2 px-1.5 py-1">
+            <div className="flex size-6 items-center justify-center rounded-lg bg-primary text-2xs font-bold text-primary-foreground">
+              B
+            </div>
+            <span className="text-xs font-semibold">Buzz</span>
+          </div>
+          <div className="mb-3 flex items-center gap-1.5 rounded-lg border border-border/60 bg-background/70 px-2 py-1.5 text-2xs text-muted-foreground">
+            <Search className="size-3" />
+            Search
+          </div>
+          <button className={navItemClass(false)} type="button">
+            <Inbox className="size-3.5" /> Inbox
+          </button>
+          <p className="mb-1 mt-4 px-2 text-3xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+            Channels
+          </p>
+          <button
+            className={navItemClass(activeChannel === "design")}
+            onClick={() => setActiveChannel("design")}
+            type="button"
+          >
+            <Hash className="size-3.5" /> design
+          </button>
+          <button
+            className={navItemClass(activeChannel === "general")}
+            onClick={() => setActiveChannel("general")}
+            type="button"
+          >
+            <Hash className="size-3.5" /> general
+          </button>
+        </nav>
+
+        <div className="relative min-w-0 flex-1">
+          <AnimatePresence custom={motionContext} initial={false} mode="sync">
+            {channelPane}
+          </AnimatePresence>
+          <AnimatePresence custom={motionContext} initial={false} mode="sync">
+            {threadOpen ? threadPanel : null}
+          </AnimatePresence>
         </div>
       </div>
     </div>
   );
 }
 
-export function LinkPreviewStyleSetting() {
+export function LinkPreviewStyleSetting({
+  onPreviewChange,
+}: {
+  onPreviewChange?: (style: LinkPreviewStyle | null) => void;
+}) {
   const style = useLinkPreviewStyle();
-  const [previewStyle, setPreviewStyle] =
-    React.useState<LinkPreviewStyle | null>(null);
-  const displayedStyle = previewStyle ?? style;
-  const activeOption =
-    LINK_PREVIEW_STYLE_OPTIONS.find(
-      (option) => option.value === displayedStyle,
-    ) ?? LINK_PREVIEW_STYLE_OPTIONS[0];
-
+  const handlePreviewChange = React.useCallback(
+    (nextStyle: LinkPreviewStyle | null) => {
+      onPreviewChange?.(nextStyle);
+    },
+    [onPreviewChange],
+  );
   return (
-    <div data-testid="link-preview-style-group">
+    <div
+      data-testid="link-preview-style-group"
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          handlePreviewChange(null);
+        }
+      }}
+      onFocusCapture={() => handlePreviewChange(style)}
+      onPointerDownCapture={() => handlePreviewChange(style)}
+    >
       <SettingsOptionRow>
         <div className="min-w-0">
           <p className="text-sm font-medium">Link previews</p>
-          <p
-            className="text-sm font-normal text-muted-foreground/70"
-            data-settings-subcopy
-          >
-            {activeOption.description}
-          </p>
         </div>
         <SegmentedControl
           size="compact"
           legend="Link previews"
-          onPreviewChange={setPreviewStyle}
+          onPreviewChange={handlePreviewChange}
           onValueChange={setLinkPreviewStyle}
           optionTestIdPrefix="link-preview-style"
           options={LINK_PREVIEW_STYLE_OPTIONS}
@@ -370,7 +672,6 @@ export function LinkPreviewStyleSetting() {
           value={style}
         />
       </SettingsOptionRow>
-      <LinkPreviewSample style={displayedStyle} />
     </div>
   );
 }
@@ -494,119 +795,22 @@ export function GlassBackgroundSetting() {
 }
 
 /** Compact thread preference row in the Appearance preferences card. */
-/**
- * Abstract diagram for the thread layout preview, in the same soft-block
- * style as the links sample: a rounded frame holding a channel surface and a
- * thread surface, with light skeleton bars. Inline SVG (not a data-URL image)
- * so fills reference theme tokens directly and follow light/dark and accent
- * changes automatically. Only the panel proportions change between modes.
- */
-function ThreadLayoutDiagram({ mode }: { mode: ThreadViewMode }) {
-  const { isDark } = useTheme();
-  const gradientId = React.useId();
-  // Inline SVG resolves CSS variables, so the frame gradient references the
-  // Buzz gradient tokens directly and follows theme.css automatically.
-  const gradientTop = isDark
-    ? "var(--buzz-gradient-dark-top, #4a4616)"
-    : "var(--buzz-gradient-light-top, #e6e6b6)";
-  const gradientBottom = isDark
-    ? "var(--buzz-gradient-dark-bottom, #0a1423)"
-    : "var(--buzz-gradient-light-bottom, #c4d0da)";
-  const channelSurface = "hsl(var(--muted))";
-  const threadSurface = "hsl(var(--background))";
-  const channelOpacity = isDark ? 0.88 : 0.78;
-  const threadOpacity = isDark ? 0.98 : 0.96;
-  const bar = "hsl(var(--foreground) / 0.24)";
-  const barSoft = "hsl(var(--foreground) / 0.14)";
-
-  const isFocus = mode === "focus";
-  // Inner content area: 10..230 x 10..122 (inside the frame padding).
-  // Split: channel and thread share the area side by side with a gap.
-  // Focus: the channel continues beneath the overlaid thread, leaving only
-  // a narrow orientation sliver visible at the left edge.
-  const gap = 6;
-  const threadX = isFocus ? 42 : 124;
-  const channelWidth = isFocus ? 64 : threadX - 10 - gap;
-  const threadWidth = 230 - threadX;
-
-  /** Two skeleton text bars, clipped to the panel they sit in. */
-  const skeleton = (x: number, y: number, width: number) => (
-    <>
-      <rect fill={bar} height={7} rx={3.5} width={width * 0.62} x={x} y={y} />
-      <rect
-        fill={barSoft}
-        height={7}
-        rx={3.5}
-        width={width * 0.86}
-        x={x}
-        y={y + 13}
-      />
-    </>
-  );
-
-  return (
-    <svg
-      aria-hidden="true"
-      className="block w-full max-w-60"
-      data-testid={`thread-layout-diagram-${mode}`}
-      role="img"
-      viewBox="0 0 240 132"
-    >
-      <defs>
-        <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
-          <stop offset="0" stopColor={gradientTop} />
-          <stop offset="1" stopColor={gradientBottom} />
-        </linearGradient>
-      </defs>
-      {/* Frame */}
-      <rect fill={`url(#${gradientId})`} height={132} rx={18} width={240} />
-      {/* Channel surface */}
-      <rect
-        fill={channelSurface}
-        height={112}
-        opacity={channelOpacity}
-        rx={10}
-        width={channelWidth}
-        x={10}
-        y={10}
-      />
-      {channelWidth > 60 ? skeleton(22, 24, channelWidth - 24) : null}
-      {/* Thread surface */}
-      <path
-        d={`M ${threadX + 10} 10 H 220 Q 230 10 230 20 V 112 Q 230 122 220 122 H ${threadX + 10} Q ${threadX} 122 ${threadX} 112 V 20 Q ${threadX} 10 ${threadX + 10} 10 Z`}
-        fill={threadSurface}
-        opacity={threadOpacity}
-      />
-      {skeleton(threadX + 12, 24, threadWidth - 24)}
-    </svg>
-  );
-}
-
-function ThreadLayoutPreview({ mode }: { mode: ThreadViewMode }) {
-  return (
-    <div className="px-4 py-3" data-testid="thread-layout-preview">
-      <div
-        aria-hidden="true"
-        className="relative overflow-hidden rounded-xl border border-border/65 bg-transparent"
-        data-testid="thread-layout-preview-surface"
-      >
-        <span className="absolute right-3.5 top-3 inline-flex items-center gap-1 text-2xs font-medium text-muted-foreground/55">
-          <Eye aria-hidden="true" className="size-3" />
-          Preview
-        </span>
-        <div className="p-4 pr-24">
-          <ThreadLayoutDiagram mode={mode} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function ThreadLayoutSetting() {
+export function ThreadLayoutSetting({
+  onPreviewChange,
+}: {
+  onPreviewChange?: (mode: ThreadViewMode | null) => void;
+}) {
   const threadViewMode = useThreadViewMode();
   const [previewMode, setPreviewMode] = React.useState<ThreadViewMode | null>(
     null,
   );
+  const handlePreviewChange = React.useCallback(
+    (nextMode: ThreadViewMode | null) => {
+      setPreviewMode(nextMode);
+      onPreviewChange?.(nextMode);
+    },
+    [onPreviewChange],
+  );
   const { communities } = useCommunities();
   const showCommunityScope = communities.length > 1;
   const displayedMode = previewMode ?? threadViewMode;
@@ -615,7 +819,16 @@ export function ThreadLayoutSetting() {
     THREAD_VIEW_MODE_OPTIONS[0];
 
   return (
-    <div data-testid="thread-layout-group">
+    <div
+      data-testid="thread-layout-group"
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          handlePreviewChange(null);
+        }
+      }}
+      onFocusCapture={() => handlePreviewChange(threadViewMode)}
+      onPointerDownCapture={() => handlePreviewChange(threadViewMode)}
+    >
       <SettingsOptionRow>
         <div className="min-w-0">
           <p className="text-sm font-medium">
@@ -637,7 +850,7 @@ export function ThreadLayoutSetting() {
         <SegmentedControl
           size="compact"
           legend="Thread layout"
-          onPreviewChange={setPreviewMode}
+          onPreviewChange={handlePreviewChange}
           onValueChange={setThreadViewMode}
           optionTestIdPrefix="thread-layout"
           options={THREAD_VIEW_MODE_OPTIONS}
@@ -645,7 +858,6 @@ export function ThreadLayoutSetting() {
           value={threadViewMode}
         />
       </SettingsOptionRow>
-      <ThreadLayoutPreview mode={displayedMode} />
     </div>
   );
 }
@@ -653,26 +865,18 @@ export function ThreadLayoutSetting() {
 /** Accent swatches — shared by the animated and reduced-motion reveal paths. */
 export function AccentPickerContent({
   accentColor,
-  isDark,
   setAccentColor,
 }: {
   accentColor: string;
-  isDark: boolean;
   setAccentColor: (value: string) => void;
 }) {
   return (
-    <SettingsOptionRow className="items-start">
+    <SettingsOptionRow data-testid="accent-color-row">
       <div className="min-w-0">
         <p className="text-sm font-medium">Accent color</p>
-        <p
-          className="text-sm font-normal text-muted-foreground/70"
-          data-settings-subcopy
-        >
-          Choose the highlight color used throughout Buzz.
-        </p>
       </div>
       <div
-        className="min-w-0 max-w-[34rem] shrink-0 overflow-x-auto rounded-xl bg-muted p-2"
+        className="min-w-0 max-w-[34rem] shrink-0 overflow-x-auto"
         data-testid="accent-color-options"
       >
         <div className="flex w-max min-w-full flex-nowrap justify-end gap-2">
@@ -682,17 +886,11 @@ export function AccentPickerContent({
             const swatchColor = isNeutral
               ? "hsl(var(--foreground))"
               : color.value;
-            const selectionColor = isNeutral
-              ? isDark
-                ? "#000000"
-                : "#FFFFFF"
-              : contrastColorForBackground(color.value);
-
             return (
               <button
                 aria-label={`Use ${color.name} accent`}
                 aria-pressed={isSelected}
-                className="relative h-9 w-9 shrink-0 rounded-full border border-border transition-transform duration-200 ease-out hover:scale-[1.15] focus-visible:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transform-none motion-reduce:transition-none"
+                className="relative size-8 shrink-0 rounded-full border-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                 data-testid={`accent-color-${color.name.toLowerCase()}`}
                 key={color.value}
                 onClick={() => setAccentColor(color.value)}
@@ -700,13 +898,13 @@ export function AccentPickerContent({
                 title={color.name}
                 type="button"
               >
-                {isSelected ? (
-                  <span
-                    className="absolute inset-1 rounded-full border-[3px]"
-                    data-testid="accent-color-selection"
-                    style={{ borderColor: selectionColor }}
-                  />
-                ) : null}
+                <span
+                  className="accent-color-selection-dot absolute left-1/2 top-1/2 size-2 rounded-full bg-white"
+                  data-selected={isSelected}
+                  data-testid={
+                    isSelected ? "accent-color-selection" : undefined
+                  }
+                />
               </button>
             );
           })}
diff --git a/desktop/src/features/settings/ui/BackupTestFlow.tsx b/desktop/src/features/settings/ui/BackupTestFlow.tsx
index 65ef40a98a..b1b8ea2416 100644
--- a/desktop/src/features/settings/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/settings/ui/BackupTestFlow.tsx
@@ -6,7 +6,7 @@ import {
   verifyNcryptsecBackup,
   type BackupVerification,
 } from "@/shared/api/tauriIdentity";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { Input } from "@/shared/ui/input";
 import { PubKey } from "@/shared/ui/PubKey";
 import { Spinner } from "@/shared/ui/spinner";
diff --git a/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx b/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx
index 645a0356c2..036b229c79 100644
--- a/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/ChannelTemplatesSettingsCard.tsx
@@ -47,7 +47,7 @@ import {
   AlertDialogTitle,
 } from "@/shared/ui/alert-dialog";
 import { Badge } from "@/shared/ui/badge";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { ChooserDialogContent } from "@/shared/ui/chooser-dialog-content";
 import { Dialog } from "@/shared/ui/dialog";
 import {
diff --git a/desktop/src/features/settings/ui/CustomHarnessForm.tsx b/desktop/src/features/settings/ui/CustomHarnessForm.tsx
index 52e7906265..13e762d5f8 100644
--- a/desktop/src/features/settings/ui/CustomHarnessForm.tsx
+++ b/desktop/src/features/settings/ui/CustomHarnessForm.tsx
@@ -11,7 +11,7 @@ import {
   PERSONA_LABEL_OPTIONAL_CLASS,
 } from "@/features/agents/ui/agentConfigOptions";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { Input } from "@/shared/ui/input";
 import { Spinner } from "@/shared/ui/spinner";
 
diff --git a/desktop/src/features/settings/ui/EncryptedBackupCreator.tsx b/desktop/src/features/settings/ui/EncryptedBackupCreator.tsx
index fb20eb9c65..75c83b57b7 100644
--- a/desktop/src/features/settings/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/settings/ui/EncryptedBackupCreator.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 
 import { generateBackupPassphrase } from "@/shared/api/tauriIdentity";
 import { useEncryptedBackup } from "@/features/settings/EncryptedBackupProvider";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import {
   Dialog,
   DialogContent,
diff --git a/desktop/src/features/settings/ui/HarnessCatalogDialog.tsx b/desktop/src/features/settings/ui/HarnessCatalogDialog.tsx
index 229941ec50..f8cdd990ed 100644
--- a/desktop/src/features/settings/ui/HarnessCatalogDialog.tsx
+++ b/desktop/src/features/settings/ui/HarnessCatalogDialog.tsx
@@ -24,7 +24,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/shared/ui/alert-dialog";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { ChooserDialogContent } from "@/shared/ui/chooser-dialog-content";
 import { Dialog } from "@/shared/ui/dialog";
 import { Input } from "@/shared/ui/input";
diff --git a/desktop/src/features/settings/ui/HarnessRow.tsx b/desktop/src/features/settings/ui/HarnessRow.tsx
index 4e471967d4..cfc2d0a505 100644
--- a/desktop/src/features/settings/ui/HarnessRow.tsx
+++ b/desktop/src/features/settings/ui/HarnessRow.tsx
@@ -15,7 +15,7 @@ import { RuntimeIcon } from "@/features/onboarding/ui/RuntimeIcon";
 import type { AcpAuthMethod, AcpRuntimeCatalogEntry } from "@/shared/api/types";
 import { getInstallErrorMessage } from "@/shared/lib/installError";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import {
   AlertDialog,
   AlertDialogAction,
diff --git a/desktop/src/features/settings/ui/HarnessesSettingsPanel.tsx b/desktop/src/features/settings/ui/HarnessesSettingsPanel.tsx
index 2ce769e646..92ffad7bbd 100644
--- a/desktop/src/features/settings/ui/HarnessesSettingsPanel.tsx
+++ b/desktop/src/features/settings/ui/HarnessesSettingsPanel.tsx
@@ -8,7 +8,7 @@ import {
 } from "@/features/agents/hooks";
 import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 
 import { HarnessCatalogDialog } from "./HarnessCatalogDialog";
 import { HarnessRow } from "./HarnessRow";
diff --git a/desktop/src/features/settings/ui/HostedCommunitiesSettingsCard.tsx b/desktop/src/features/settings/ui/HostedCommunitiesSettingsCard.tsx
index 74c9dcc9ec..4d4d9f9ff8 100644
--- a/desktop/src/features/settings/ui/HostedCommunitiesSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/HostedCommunitiesSettingsCard.tsx
@@ -42,7 +42,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/shared/ui/alert-dialog";
-import { Button, buttonVariants } from "@/shared/ui/button";
+import { buttonVariants } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import {
   Dialog,
   DialogContent,
diff --git a/desktop/src/features/settings/ui/MobilePairingCard.tsx b/desktop/src/features/settings/ui/MobilePairingCard.tsx
index 3a25f2edfa..dbce0314c2 100644
--- a/desktop/src/features/settings/ui/MobilePairingCard.tsx
+++ b/desktop/src/features/settings/ui/MobilePairingCard.tsx
@@ -16,7 +16,7 @@ import {
   startPairing,
 } from "@/shared/api/tauri";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { StyledQrCode } from "@/shared/ui/styled-qr-code";
 import { SettingsOptionGroup, SettingsOptionRow } from "./SettingsOptionGroup";
 import { SettingsSectionHeader } from "./SettingsSectionHeader";
diff --git a/desktop/src/features/settings/ui/ModerationQueueCard.tsx b/desktop/src/features/settings/ui/ModerationQueueCard.tsx
index de414bbf0d..434a201cab 100644
--- a/desktop/src/features/settings/ui/ModerationQueueCard.tsx
+++ b/desktop/src/features/settings/ui/ModerationQueueCard.tsx
@@ -32,7 +32,7 @@ import {
 } from "@/features/settings/lib/moderationQueue";
 import { cn } from "@/shared/lib/cn";
 import { truncatePubkey } from "@/shared/lib/pubkey";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/desktop/src/features/settings/ui/NotificationSettingsCard.tsx b/desktop/src/features/settings/ui/NotificationSettingsCard.tsx
index dcab32f044..1018bc4fc9 100644
--- a/desktop/src/features/settings/ui/NotificationSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/NotificationSettingsCard.tsx
@@ -15,7 +15,7 @@ import {
   type SoundSlot,
 } from "@/features/notifications/lib/sound";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { Switch } from "@/shared/ui/switch";
 import {
   SettingsOptionGroup,
@@ -92,14 +92,6 @@ export function NotificationSettingsCard({
                   ? "Requesting..."
                   : "Desktop alerts"}
               </label>
-              <p
-                className="text-sm font-normal text-muted-foreground/70"
-                data-settings-subcopy
-              >
-                {notificationSettings.desktopEnabled
-                  ? "Native desktop alerts are enabled for the categories you have armed below."
-                  : "Request OS permission and surface new mentions or needs-action items outside the app."}
-              </p>
             </div>
             <Switch
               checked={notificationSettings.desktopEnabled}
@@ -152,14 +144,8 @@ export function NotificationSettingsCard({
                     className="text-sm font-medium"
                     htmlFor="notification-sound-switch"
                   >
-                    Sound
+                    Play sound for notifications
                   </label>
-                  <p
-                    className="text-sm font-normal text-muted-foreground/70"
-                    data-settings-subcopy
-                  >
-                    Alert with a sound for the events below.
-                  </p>
                 </div>
                 <Switch
                   checked={anyAlertsOn}
@@ -265,15 +251,8 @@ export function NotificationSettingsCard({
                 className="text-sm font-medium"
                 htmlFor="home-badge-switch"
               >
-                Home badge
+                Badge application icon
               </label>
-              <p
-                className="text-sm font-normal text-muted-foreground/70"
-                data-settings-subcopy
-              >
-                Show a Home badge for mentions and needs-action items in the
-                sidebar.
-              </p>
             </div>
             <Switch
               checked={notificationSettings.homeBadgeEnabled}
diff --git a/desktop/src/features/settings/ui/PrivateKeyBackupRow.tsx b/desktop/src/features/settings/ui/PrivateKeyBackupRow.tsx
index 8eb0256a55..85a02c5011 100644
--- a/desktop/src/features/settings/ui/PrivateKeyBackupRow.tsx
+++ b/desktop/src/features/settings/ui/PrivateKeyBackupRow.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/features/settings/ui/BackupTestFlow";
 import { EncryptedBackupCreator } from "@/features/settings/ui/EncryptedBackupCreator";
 import { getNsec } from "@/shared/api/tauriIdentity";
-import { Button } from "@/shared/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -20,6 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
+import { SettingsActionButton } from "./SettingsActionButton";
 
 function BackupAvailabilityFill({
   availableUntil,
@@ -127,22 +127,22 @@ export function PrivateKeyBackupRow() {
           <p className="text-sm font-medium">Private key</p>
           <div className="flex shrink-0 items-center gap-2">
             {backupAvailable ? (
-              <Button
-                className="relative overflow-hidden rounded-full"
+              <SettingsActionButton
+                className="relative overflow-hidden"
                 data-testid="encrypted-backup-download"
                 disabled={isSaving}
                 onClick={() => void downloadBackup()}
                 type="button"
+                variant="secondary"
               >
                 {availableUntil !== null ? (
                   <BackupAvailabilityFill availableUntil={availableUntil} />
                 ) : null}
                 <span className="relative z-10">Download backup</span>
-              </Button>
+              </SettingsActionButton>
             ) : null}
-            <Button
+            <SettingsActionButton
               aria-label={isOpen ? "Hide private key" : "Reveal private key"}
-              className="rounded-full"
               data-testid="profile-private-key-toggle"
               onClick={() => void handleReveal()}
               type="button"
@@ -159,7 +159,7 @@ export function PrivateKeyBackupRow() {
                   Reveal
                 </>
               )}
-            </Button>
+            </SettingsActionButton>
           </div>
         </div>
         {isOpen ? (
diff --git a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
index 64af0f3410..d257c54bcc 100644
--- a/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/ProfileSettingsCard.tsx
@@ -23,6 +23,7 @@ import { Input } from "@/shared/ui/input";
 import { Spinner } from "@/shared/ui/spinner";
 import { Textarea } from "@/shared/ui/textarea";
 import { PrivateKeyBackupRow } from "./PrivateKeyBackupRow";
+import { SettingsActionButton } from "./SettingsActionButton";
 import {
   SettingsOptionGroup,
   SettingsOptionGroupList,
@@ -74,9 +75,8 @@ function IdentityRow({
         </p>
       </div>
       {copyValue ? (
-        <button
+        <SettingsActionButton
           aria-label={`Copy ${label}`}
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           data-testid={`copy-${testId}`}
           onClick={async () => {
             await writeTextToClipboard(copyValue);
@@ -84,10 +84,11 @@ function IdentityRow({
           }}
           title={`Copy ${label}`}
           type="button"
+          variant="secondary"
         >
           <Copy className="h-4 w-4 shrink-0" />
           Copy
-        </button>
+        </SettingsActionButton>
       ) : null}
     </div>
   );
@@ -111,23 +112,18 @@ function EditProfileMetadataButton({
   const accessibleLabel = isEditing ? `Done editing ${label}` : `Edit ${label}`;
 
   return (
-    <button
+    <SettingsActionButton
       aria-label={accessibleLabel}
-      className={cn(
-        "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
-        isEditing
-          ? "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90"
-          : "border-transparent bg-muted text-foreground hover:bg-muted/80",
-      )}
       data-testid={testId}
       disabled={disabled}
       onClick={onClick}
       title={accessibleLabel}
       type="button"
+      variant="secondary"
     >
       <Icon className="h-4 w-4 shrink-0" />
       {actionLabel}
-    </button>
+    </SettingsActionButton>
   );
 }
 
@@ -484,10 +480,7 @@ export function ProfileSettingsCard({
       ref={sectionRef}
     >
       <div>
-        <SettingsSectionHeader
-          title="Profile"
-          description="Update how your name, avatar, and bio appear across Buzz."
-        />
+        <SettingsSectionHeader title="Profile" />
 
         <div className="space-y-3">
           {profileQuery.error instanceof Error ? (
@@ -760,7 +753,7 @@ export function ProfileSettingsCard({
 
                         <SettingsOptionGroup title="Identity">
                           <details
-                            className="group divide-y divide-border/55"
+                            className="group"
                             data-testid="profile-identity-card"
                           >
                             <summary
@@ -782,7 +775,7 @@ export function ProfileSettingsCard({
                               <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] duration-150 ease-out group-open:rotate-180 group-hover/identity:text-foreground group-focus-visible/identity:text-foreground" />
                             </summary>
                             <div
-                              className="divide-y divide-border/55"
+                              className="divide-y divide-border/55 border-t border-border/55"
                               data-testid="profile-identity-details"
                             >
                               <IdentityRow
diff --git a/desktop/src/features/settings/ui/SendFeedbackDialog.tsx b/desktop/src/features/settings/ui/SendFeedbackDialog.tsx
index fa81c34f3a..5b34bd6176 100644
--- a/desktop/src/features/settings/ui/SendFeedbackDialog.tsx
+++ b/desktop/src/features/settings/ui/SendFeedbackDialog.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/shared/lib/cn";
 import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
 import { useMediaProxyPort } from "@/shared/lib/useMediaProxyPort";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { Checkbox } from "@/shared/ui/checkbox";
 import {
   Dialog,
diff --git a/desktop/src/features/settings/ui/SettingsActionButton.tsx b/desktop/src/features/settings/ui/SettingsActionButton.tsx
new file mode 100644
index 0000000000..4bb59c8f60
--- /dev/null
+++ b/desktop/src/features/settings/ui/SettingsActionButton.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { Button, type ButtonProps } from "@/shared/ui/button";
+
+/**
+ * Canonical text action used throughout Settings: a compact, pill-shaped
+ * button. Callers may still choose a semantic variant (primary, destructive,
+ * outline), while shape and size stay consistent.
+ */
+export const SettingsActionButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({ className, size = "sm", ...props }, ref) => (
+  <Button
+    className={cn("rounded-full !shadow-none", className)}
+    ref={ref}
+    size={size}
+    {...props}
+  />
+));
+
+SettingsActionButton.displayName = "SettingsActionButton";
diff --git a/desktop/src/features/settings/ui/SettingsPanels.tsx b/desktop/src/features/settings/ui/SettingsPanels.tsx
index 6b00fc8f74..070c0b7a38 100644
--- a/desktop/src/features/settings/ui/SettingsPanels.tsx
+++ b/desktop/src/features/settings/ui/SettingsPanels.tsx
@@ -33,7 +33,9 @@ import { CustomEmojiSettingsCard } from "@/features/custom-emoji/ui/CustomEmojiS
 import { LocalArchiveSettingsCard } from "@/features/local-archive/ui/LocalArchiveSettingsCard";
 import { cn } from "@/shared/lib/cn";
 import { useCommunities } from "@/features/communities/useCommunities";
+import type { ThreadViewMode } from "@/features/channels/lib/threadViewModePreference";
 import { Badge } from "@/shared/ui/badge";
+import type { LinkPreviewStyle } from "@/shared/lib/linkPreviewStylePreference";
 import { isBuzzTheme, useTheme } from "@/shared/theme/ThemeProvider";
 import {
   LIGHT_THEMES,
@@ -55,6 +57,7 @@ import {
 import { appearanceCommunityLabel } from "../lib/appearanceScopeCopy";
 import {
   AccentPickerContent,
+  AppearanceWorkspacePreview,
   ConversationDisplaySettings,
   GlassBackgroundSetting,
   LinkPreviewStyleSetting,
@@ -406,18 +409,6 @@ const APPEARANCE_MODE_OPTIONS = [
   { mode: "dark" as const, label: "Dark", Icon: Moon },
 ] as const;
 
-// Reveal/hide motion for the accent picker: a small translate + opacity fade.
-// The picker sits below the theme grid and reads as tucking up behind it, so
-// it enters from above (slides *down* into place when a non-Buzz theme reveals
-// it) and exits upward (slides up behind the grid when Buzz hides it). No
-// height/scale — height collapse clipped the swatches behind the grid's bottom
-// fade (the "white bar"). Snappier than the modal 0.2s since this is a small
-// settings control, sharing the modal/ProfileSettingsCard easing curve.
-const ACCENT_PICKER_TRANSITION = {
-  duration: 0.16,
-  ease: [0.23, 1, 0.32, 1] as const,
-};
-
 function ThemeSettingsCard() {
   const {
     setTheme,
@@ -437,11 +428,7 @@ function ThemeSettingsCard() {
   const showCommunityScope = communities.length > 1;
   const communityLabel = appearanceCommunityLabel(activeCommunity?.name);
 
-  // Buzz themes pin a neutral accent (GitHub black in light, white in dark),
-  // so the accent picker is hidden while a Buzz theme is active. `themeName` is
-  // the effective theme, so this also covers System mode resolving to Buzz.
   const buzzThemeSelected = isBuzzTheme(themeName);
-  const accentPickerHidden = buzzThemeSelected;
   const shouldReduceMotion = useReducedMotion();
 
   const previewVarsByTheme = useThemePreviewVars();
@@ -456,6 +443,10 @@ function ThemeSettingsCard() {
 
   const [selectedMode, setSelectedMode] = useState<AppearanceMode>(activeMode);
   const [themeStyleExpanded, setThemeStyleExpanded] = useState(false);
+  const [previewLinkStyle, setPreviewLinkStyle] =
+    useState<LinkPreviewStyle | null>(null);
+  const [previewThreadMode, setPreviewThreadMode] =
+    useState<ThreadViewMode | null>(null);
 
   const getVars = (name: SyntaxThemeName) =>
     withAccentPreviewVars(
@@ -575,19 +566,6 @@ function ThemeSettingsCard() {
               "linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0))",
           }}
         />
-        {/* Bottom fade — hidden while the accent picker is visible so its
-            near-white gradient (Buzz light) can't mask the swatches below it
-            (the "white bar"). Kept only when the picker is hidden. */}
-        {accentPickerHidden ? (
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3"
-            style={{
-              background:
-                "linear-gradient(to top, hsl(var(--background)), hsl(var(--background) / 0))",
-            }}
-          />
-        ) : null}
         <div className="max-h-[430px] overflow-y-auto rounded-lg pt-2">
           <div className="flex flex-wrap gap-4 p-1">
             {selectedMode === "system" &&
@@ -636,9 +614,10 @@ function ThemeSettingsCard() {
       className="flex min-h-0 flex-1 flex-col overflow-y-auto"
       data-testid="settings-theme"
     >
-      <SettingsSectionHeader
-        title="Appearance"
-        description="Choose how Buzz looks and feels."
+      <SettingsSectionHeader className="mb-6" title="Appearance" />
+      <AppearanceWorkspacePreview
+        previewLinkStyle={previewLinkStyle}
+        previewThreadMode={previewThreadMode}
       />
 
       <SettingsOptionGroupList>
@@ -669,12 +648,6 @@ function ThemeSettingsCard() {
           <SettingsOptionRow data-testid="appearance-color-mode-row">
             <div className="min-w-0">
               <p className="text-sm font-medium">Color mode</p>
-              <p
-                className="text-sm font-normal text-muted-foreground/70"
-                data-settings-subcopy
-              >
-                Follow your system or choose a light or dark appearance.
-              </p>
             </div>
             <SegmentedControl
               indicatorTestId="appearance-color-mode-indicator"
@@ -694,12 +667,6 @@ function ThemeSettingsCard() {
           <SettingsOptionRow data-testid="theme-style-row">
             <div className="min-w-0">
               <p className="text-sm font-medium">Theme style</p>
-              <p
-                className="text-sm font-normal text-muted-foreground/70"
-                data-settings-subcopy
-              >
-                Choose the colors used throughout Buzz.
-              </p>
             </div>
             <button
               aria-label={`Theme style, ${selectedThemeLabel}`}
@@ -749,38 +716,10 @@ function ThemeSettingsCard() {
             </AnimatePresence>
           )}
 
-          {/* Accent color picker — hidden for Buzz themes (pinned neutral accent).
-              Reveal/hide with the translate-up + opacity fade defined by
-              ACCENT_PICKER_TRANSITION above. Reduced motion skips the transition
-              and just renders/unrenders. */}
-          {shouldReduceMotion ? (
-            accentPickerHidden ? null : (
-              <AccentPickerContent
-                accentColor={accentColor}
-                isDark={isDark}
-                setAccentColor={setAccentColor}
-              />
-            )
-          ) : (
-            <AnimatePresence initial={false}>
-              {accentPickerHidden ? null : (
-                <motion.div
-                  animate={{ opacity: 1, y: 0 }}
-                  className="will-change-[opacity,transform]"
-                  exit={{ opacity: 0, y: -10 }}
-                  initial={{ opacity: 0, y: -10 }}
-                  key="accent-picker"
-                  transition={ACCENT_PICKER_TRANSITION}
-                >
-                  <AccentPickerContent
-                    accentColor={accentColor}
-                    isDark={isDark}
-                    setAccentColor={setAccentColor}
-                  />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
+          <AccentPickerContent
+            accentColor={accentColor}
+            setAccentColor={setAccentColor}
+          />
 
           <GlassBackgroundSetting />
           {buzzThemeSelected ? <ProminentActiveTabSetting /> : null}
@@ -791,8 +730,8 @@ function ThemeSettingsCard() {
           title="Preferences"
         >
           <ConversationDisplaySettings />
-          <LinkPreviewStyleSetting />
-          <ThreadLayoutSetting />
+          <LinkPreviewStyleSetting onPreviewChange={setPreviewLinkStyle} />
+          <ThreadLayoutSetting onPreviewChange={setPreviewThreadMode} />
         </SettingsOptionGroup>
       </SettingsOptionGroupList>
     </section>
diff --git a/desktop/src/features/settings/ui/SettingsSectionHeader.tsx b/desktop/src/features/settings/ui/SettingsSectionHeader.tsx
index f856a78dbd..00f010f509 100644
--- a/desktop/src/features/settings/ui/SettingsSectionHeader.tsx
+++ b/desktop/src/features/settings/ui/SettingsSectionHeader.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { PageHeader } from "@/shared/ui/PageHeader";
+import { cn } from "@/shared/lib/cn";
 
 /**
  * Page title for a Settings card. Thin wrapper over the shared {@link PageHeader}
@@ -8,21 +9,25 @@ import { PageHeader } from "@/shared/ui/PageHeader";
  */
 export function SettingsSectionHeader({
   action,
+  className,
   description,
   title,
 }: {
   action?: ReactNode;
-  description: ReactNode;
+  className?: string;
+  description?: ReactNode;
   title: ReactNode;
 }) {
   return (
     <PageHeader
       action={action}
-      className="mb-12"
+      className={cn("mb-12", className)}
       description={
-        <span data-settings-subcopy className="text-muted-foreground/70">
-          {description}
-        </span>
+        description ? (
+          <span data-settings-subcopy className="text-muted-foreground/70">
+            {description}
+          </span>
+        ) : undefined
       }
       title={title}
     />
diff --git a/desktop/src/features/settings/ui/SettingsView.tsx b/desktop/src/features/settings/ui/SettingsView.tsx
index 2f9b2c36a1..5fe6593b71 100644
--- a/desktop/src/features/settings/ui/SettingsView.tsx
+++ b/desktop/src/features/settings/ui/SettingsView.tsx
@@ -339,7 +339,7 @@ export function SettingsView({
             data-testid="settings-content-scroll"
           >
             <div
-              className="mx-auto flex min-h-full w-full max-w-4xl flex-col gap-4"
+              className="mx-auto flex min-h-full w-full max-w-[640px] flex-col gap-4"
               data-testid={`settings-panel-${section}`}
             >
               {renderSettingsSection(section, {
diff --git a/desktop/src/features/settings/ui/SignOutSection.tsx b/desktop/src/features/settings/ui/SignOutSection.tsx
index 82df014f70..94cd88e0dc 100644
--- a/desktop/src/features/settings/ui/SignOutSection.tsx
+++ b/desktop/src/features/settings/ui/SignOutSection.tsx
@@ -12,7 +12,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/shared/ui/alert-dialog";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import { Checkbox } from "@/shared/ui/checkbox";
 import { Input } from "@/shared/ui/input";
 import { Spinner } from "@/shared/ui/spinner";
diff --git a/desktop/src/features/settings/ui/SoundPicker.tsx b/desktop/src/features/settings/ui/SoundPicker.tsx
index 7f7694cfb7..942576016b 100644
--- a/desktop/src/features/settings/ui/SoundPicker.tsx
+++ b/desktop/src/features/settings/ui/SoundPicker.tsx
@@ -1,13 +1,13 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ChevronDown, Pause, Play } from "lucide-react";
 
 import {
-  playNotificationSound,
+  createNotificationSound,
   SOUND_NAMES,
   type SoundName,
 } from "@/features/notifications/lib/sound";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -28,26 +28,54 @@ function sortedSounds(recommended: SoundName): SoundName[] {
 function Waveform({
   name,
   className,
+  progress,
 }: {
   name: SoundName;
   className?: string;
+  progress?: number;
 }) {
   const maskImage = `url(/sounds/${name}.svg)`;
+  const maskStyle = {
+    maskImage,
+    maskPosition: "center",
+    maskRepeat: "no-repeat",
+    maskSize: "contain",
+    WebkitMaskImage: maskImage,
+    WebkitMaskPosition: "center",
+    WebkitMaskRepeat: "no-repeat",
+    WebkitMaskSize: "contain",
+  } as const;
+
+  if (progress === undefined) {
+    return (
+      <span
+        aria-hidden="true"
+        className={cn("inline-block shrink-0 bg-current", className)}
+        style={maskStyle}
+      />
+    );
+  }
+
+  const clampedProgress = Math.max(0, Math.min(1, progress));
   return (
     <span
       aria-hidden="true"
-      className={cn("inline-block shrink-0 bg-current", className)}
-      style={{
-        maskImage,
-        maskPosition: "center",
-        maskRepeat: "no-repeat",
-        maskSize: "contain",
-        WebkitMaskImage: maskImage,
-        WebkitMaskPosition: "center",
-        WebkitMaskRepeat: "no-repeat",
-        WebkitMaskSize: "contain",
-      }}
-    />
+      className={cn("relative inline-block shrink-0", className)}
+      data-playback-progress={clampedProgress.toFixed(3)}
+      data-testid="sound-picker-waveform"
+    >
+      <span
+        className="absolute inset-0 bg-current opacity-25"
+        style={maskStyle}
+      />
+      <span
+        className="absolute inset-0 bg-current transition-[clip-path] duration-75 ease-linear motion-reduce:transition-none"
+        style={{
+          ...maskStyle,
+          clipPath: `inset(0 ${(1 - clampedProgress) * 100}% 0 0)`,
+        }}
+      />
+    </span>
   );
 }
 
@@ -64,25 +92,91 @@ export function SoundPicker({
 }) {
   const items = sortedSounds(recommended);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [playbackProgress, setPlaybackProgress] = useState(0);
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const animationFrameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+      audioRef.current?.pause();
+      audioRef.current = null;
+    };
+  }, []);
+
+  function stopPreview() {
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    const audio = audioRef.current;
+    audioRef.current = null;
+    audio?.pause();
+    if (audio) audio.currentTime = 0;
+    setIsPlaying(false);
+    setPlaybackProgress(0);
+  }
+
+  function handleChange(next: SoundName) {
+    stopPreview();
+    onChange(next);
+  }
 
   function togglePreview() {
     if (isPlaying) {
-      audioRef.current?.pause();
-      setIsPlaying(false);
+      stopPreview();
       return;
     }
-    const audio = playNotificationSound(value);
-    if (!audio) return;
+
+    const audio = createNotificationSound(value);
+    audio.preload = "auto";
     audioRef.current = audio;
+    setPlaybackProgress(0);
     setIsPlaying(true);
-    const stop = () => setIsPlaying(false);
-    audio.addEventListener("ended", stop, { once: true });
-    audio.addEventListener("pause", stop, { once: true });
+
+    const updateProgress = () => {
+      if (audioRef.current !== audio) return;
+      const duration = audio.duration;
+      if (Number.isFinite(duration) && duration > 0) {
+        setPlaybackProgress(Math.min(1, audio.currentTime / duration));
+      }
+      if (audioRef.current === audio && !audio.ended) {
+        animationFrameRef.current = requestAnimationFrame(updateProgress);
+      }
+    };
+    const finish = () => {
+      if (audioRef.current !== audio) return;
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      audioRef.current = null;
+      setPlaybackProgress(1);
+      setIsPlaying(false);
+    };
+    const fail = () => {
+      if (audioRef.current !== audio) return;
+      audioRef.current = null;
+      setIsPlaying(false);
+      setPlaybackProgress(0);
+    };
+
+    audio.addEventListener("ended", finish, { once: true });
+    audio.addEventListener("error", fail, { once: true });
+    void audio.play().then(() => {
+      if (audioRef.current === audio) {
+        animationFrameRef.current = requestAnimationFrame(updateProgress);
+      }
+    }, fail);
   }
 
   return (
-    <span className="inline-flex items-center gap-1.5">
+    <span
+      className="inline-flex items-center gap-1.5"
+      data-testid="sound-picker"
+    >
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button
@@ -94,7 +188,15 @@ export function SoundPicker({
           >
             <span className="truncate">{value}</span>
             <span className="flex items-center gap-1.5">
-              <Waveform className="h-6 w-15 opacity-70" name={value} />
+              <Waveform
+                className="h-6 w-15 opacity-70"
+                name={value}
+                progress={
+                  isPlaying || playbackProgress > 0
+                    ? playbackProgress
+                    : undefined
+                }
+              />
               <ChevronDown className="h-4 w-4 text-muted-foreground" />
             </span>
           </Button>
@@ -104,7 +206,7 @@ export function SoundPicker({
           className="max-h-80 min-w-72 overflow-y-auto"
         >
           <DropdownMenuRadioGroup
-            onValueChange={(next) => onChange(next as SoundName)}
+            onValueChange={(next) => handleChange(next as SoundName)}
             value={value}
           >
             {items.map((name) => (
diff --git a/desktop/src/features/settings/ui/VoiceSettingsCard.tsx b/desktop/src/features/settings/ui/VoiceSettingsCard.tsx
index 9eced5bd42..a0d29bc065 100644
--- a/desktop/src/features/settings/ui/VoiceSettingsCard.tsx
+++ b/desktop/src/features/settings/ui/VoiceSettingsCard.tsx
@@ -3,7 +3,7 @@ import { ChevronDown, Play, Trash2, Upload, Volume2 } from "lucide-react";
 
 import { invokeTauri } from "@/shared/api/tauri";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
+import { SettingsActionButton as Button } from "./SettingsActionButton";
 import {
   AlertDialog,
   AlertDialogAction,
diff --git a/desktop/src/shared/styles/globals/motion.css b/desktop/src/shared/styles/globals/motion.css
index 25288fb1a6..0d152f8fb4 100644
--- a/desktop/src/shared/styles/globals/motion.css
+++ b/desktop/src/shared/styles/globals/motion.css
@@ -15,12 +15,77 @@
   /* Easing: direct for feedback, confident deceleration for entrances. */
   --motion-ease-standard: cubic-bezier(0.25, 1, 0.5, 1);
   --motion-ease-arrival: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
 
   /* Distances stay restrained so motion supports hierarchy without spectacle. */
   --motion-distance-arrival: 0.75rem;
   --motion-blur-arrival: 2px;
 }
 
+/* Settings switches keep their track fixed while the thumb stretches inward.
+   Anchoring to the resting edge prevents the hover morph from kicking sideways. */
+.settings-switch-thumb {
+  clip-path: inset(0 0.5rem 0 0 round 999px);
+  transform: translateX(0);
+  transition:
+    clip-path var(--motion-duration-instant) var(--motion-ease-in-out),
+    transform var(--motion-duration-instant) var(--motion-ease-in-out);
+}
+
+.settings-switch-thumb[data-state="checked"] {
+  clip-path: inset(0 0 0 0.5rem round 999px);
+  transform: translateX(0.5rem);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .settings-switch:not([data-hover-stretch-suppressed]):hover
+    .settings-switch-thumb[data-state="unchecked"] {
+    clip-path: inset(0 round 999px);
+  }
+
+  .settings-switch:not([data-hover-stretch-suppressed]):hover
+    .settings-switch-thumb[data-state="checked"] {
+    clip-path: inset(0 round 999px);
+  }
+}
+
+/* Accent selection is a compact state cue, not an extra ring around the chip. */
+.accent-color-selection-dot {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.5);
+  transition:
+    opacity var(--motion-duration-instant) var(--motion-ease-out),
+    transform var(--motion-duration-instant) var(--motion-ease-out);
+}
+
+.accent-color-selection-dot[data-selected="true"] {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-switch-thumb {
+    transition: none;
+  }
+
+  .settings-switch:not([data-hover-stretch-suppressed]):hover
+    .settings-switch-thumb[data-state="unchecked"] {
+    clip-path: inset(0 0.5rem 0 0 round 999px);
+  }
+
+  .settings-switch:not([data-hover-stretch-suppressed]):hover
+    .settings-switch-thumb[data-state="checked"] {
+    clip-path: inset(0 0 0 0.5rem round 999px);
+  }
+
+  .accent-color-selection-dot,
+  .accent-color-selection-dot[data-selected="true"] {
+    transform: translate(-50%, -50%) scale(1);
+    transition: opacity var(--motion-duration-instant) linear;
+  }
+}
+
 /* A newly-created conversational object settling into the timeline. */
 .motion-enter-conversation {
   animation: motion-enter-conversation var(--motion-duration-arrival)
diff --git a/desktop/src/shared/theme/ThemeProvider.tsx b/desktop/src/shared/theme/ThemeProvider.tsx
index 63fd3adb4d..5f0388d69e 100644
--- a/desktop/src/shared/theme/ThemeProvider.tsx
+++ b/desktop/src/shared/theme/ThemeProvider.tsx
@@ -236,26 +236,17 @@ function applyAccentColor(value: string) {
   root.style.setProperty("--sidebar-active-foreground", fgHsl);
 }
 
-/**
- * The Buzz themes ship with a fixed neutral accent (the GitHub black/white
- * foreground) rather than a user-selectable accent color. When a Buzz theme is
- * active we force `NEUTRAL_ACCENT` regardless of the stored preference, and the
- * appearance panel hides the accent picker. The user's chosen accent is left
- * untouched in storage so it returns when they switch back to another theme.
- */
+/** Whether the active syntax theme uses Buzz's first-party visual treatment. */
 export function isBuzzTheme(themeName: string): boolean {
   return themeName === "buzz" || themeName === "buzz-dark";
 }
 
-/**
- * Resolve the accent to actually apply for a theme: Buzz themes are pinned to
- * the neutral accent; every other theme uses the stored/selected accent.
- */
+/** Resolve the user-selected accent applied across every theme. */
 function resolveEffectiveAccent(
-  themeName: string,
+  _themeName: string,
   accentColor: string,
 ): string {
-  return isBuzzTheme(themeName) ? NEUTRAL_ACCENT : accentColor;
+  return accentColor;
 }
 
 /** Toggle the Buzz-specific gradient marker independently from glass. */
diff --git a/desktop/src/shared/ui/switch.tsx b/desktop/src/shared/ui/switch.tsx
index c22ae90316..385059e085 100644
--- a/desktop/src/shared/ui/switch.tsx
+++ b/desktop/src/shared/ui/switch.tsx
@@ -6,22 +6,44 @@ import { cn } from "@/shared/lib/cn";
 const Switch = React.forwardRef<
   React.ComponentRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-none transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-none ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
+>(
+  (
+    { className, onPointerDown, onPointerEnter, onPointerLeave, ...props },
+    ref,
+  ) => {
+    const [suppressHoverStretch, setSuppressHoverStretch] =
+      React.useState(false);
+
+    return (
+      <SwitchPrimitives.Root
+        className={cn(
+          "settings-switch peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-none transition-colors duration-[var(--motion-duration-instant)] ease-[var(--motion-ease-standard)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input motion-reduce:transition-none",
+          className,
+        )}
+        data-hover-stretch-suppressed={suppressHoverStretch || undefined}
+        onPointerDown={(event) => {
+          setSuppressHoverStretch(true);
+          onPointerDown?.(event);
+        }}
+        onPointerEnter={(event) => {
+          setSuppressHoverStretch(false);
+          onPointerEnter?.(event);
+        }}
+        onPointerLeave={(event) => {
+          setSuppressHoverStretch(false);
+          onPointerLeave?.(event);
+        }}
+        {...props}
+        ref={ref}
+      >
+        <SwitchPrimitives.Thumb
+          className="settings-switch-thumb pointer-events-none block h-4 w-6 rounded-full bg-white shadow-none ring-0"
+          data-slot="switch-thumb"
+        />
+      </SwitchPrimitives.Root>
+    );
+  },
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };
diff --git a/desktop/tests/e2e/appearance-previews.spec.ts b/desktop/tests/e2e/appearance-previews.spec.ts
index a03a51bd82..e24b8c2ee7 100644
--- a/desktop/tests/e2e/appearance-previews.spec.ts
+++ b/desktop/tests/e2e/appearance-previews.spec.ts
@@ -73,28 +73,42 @@ async function scrubTo(control: Locator, option: Locator) {
     );
 }
 
-test("appearance samples preview locally and commit only on selection", async ({
+test("workspace preview updates locally and commits only on selection", async ({
   page,
 }) => {
   await openAppearance(page);
 
+  const workspace = page.getByTestId("appearance-workspace-preview-surface");
+  const linkSample = page.getByTestId("appearance-workspace-link-preview");
+  const preview = page.getByTestId("appearance-workspace-preview");
+  await expect(preview.getByText("Preview", { exact: true })).toBeVisible();
+  await expect(preview.getByText("Try the channel and thread")).toHaveCount(0);
+  await expect(preview.getByText("Settings", { exact: true })).toHaveCount(0);
+  await expect(workspace).toHaveCSS("border-radius", "12px");
+  await expect(workspace).toHaveCSS("box-shadow", "none");
+  await expect(workspace).toHaveAttribute("data-link-style", "compact");
+  await expect(workspace).toHaveAttribute("data-thread-mode", "split");
+  await expect(linkSample).toHaveAttribute("inert", "");
+  await expect(linkSample.locator("[data-link-preview-inline]")).toHaveCount(0);
+
   const linkControl = page.getByTestId("link-preview-style-control");
   const richOption = page.getByTestId("link-preview-style-rich");
-  const linkSample = page.getByTestId("link-preview-sample");
-  await expect(linkSample.locator("[data-link-preview-inline]")).toHaveCount(0);
-  await expect(page.getByTestId("link-preview-sample-surface")).toHaveAttribute(
-    "inert",
-    "",
-  );
-  const sampleLink = linkSample.locator("a").first();
-  await sampleLink.evaluate((element) => element.focus());
-  await expect(sampleLink).not.toBeFocused();
   await scrubTo(linkControl, richOption);
+  await expect(
+    page.getByTestId("appearance-workspace-preview-thread"),
+  ).toHaveCount(0);
+  await expect(
+    page.getByTestId("appearance-preview-open-thread"),
+  ).toBeVisible();
+  await expect(workspace).toHaveAttribute("data-link-style", "rich");
+  await expect(
+    page.getByTestId("appearance-workspace-preview-channel").last(),
+  ).toHaveAttribute("data-motion-mode", "direct");
   await expect(linkSample.locator("[data-link-preview-inline]")).toBeVisible();
   await expect(linkSample.getByText("Show less")).toHaveCount(0);
   await expect(
     page.getByText("Large previews with images and descriptions"),
-  ).toBeVisible();
+  ).toHaveCount(0);
   await expect
     .poll(() =>
       page.evaluate(
@@ -104,6 +118,7 @@ test("appearance samples preview locally and commit only on selection", async ({
     )
     .toBe("compact");
   await page.evaluate(() => window.dispatchEvent(new Event("blur")));
+  await expect(workspace).toHaveAttribute("data-link-style", "compact");
   await expect(linkSample.locator("[data-link-preview-inline]")).toHaveCount(0);
   await expect(page.getByTestId("link-preview-style-compact")).toHaveAttribute(
     "aria-pressed",
@@ -111,6 +126,7 @@ test("appearance samples preview locally and commit only on selection", async ({
   );
 
   await richOption.click();
+  await expect(workspace).toHaveAttribute("data-link-style", "rich");
   await expect(linkSample.locator("[data-link-preview-inline]")).toBeVisible();
   await expect
     .poll(() =>
@@ -123,9 +139,18 @@ test("appearance samples preview locally and commit only on selection", async ({
 
   const threadControl = page.getByTestId("thread-layout-control");
   const focusOption = page.getByTestId("thread-layout-focus");
-  await expect(page.getByTestId("thread-layout-diagram-split")).toBeVisible();
   await scrubTo(threadControl, focusOption);
-  await expect(page.getByTestId("thread-layout-diagram-focus")).toBeVisible();
+  await expect(
+    page.getByTestId("appearance-workspace-preview-thread").last(),
+  ).toBeVisible();
+  await expect(workspace).toHaveAttribute("data-thread-mode", "focus");
+  const directThread = page
+    .getByTestId("appearance-workspace-preview-thread")
+    .last();
+  await expect(directThread).toHaveAttribute("data-motion-mode", "direct");
+  expect(await directThread.evaluate((element) => element.style.width)).toBe(
+    "",
+  );
   await expect(page.getByText("Threads open over the channel")).toBeVisible();
   await expect
     .poll(() =>
@@ -136,10 +161,10 @@ test("appearance samples preview locally and commit only on selection", async ({
     )
     .toBe("split");
   await page.evaluate(() => window.dispatchEvent(new Event("blur")));
-  await expect(page.getByTestId("thread-layout-diagram-split")).toBeVisible();
+  await expect(workspace).toHaveAttribute("data-thread-mode", "split");
 
   await focusOption.click();
-  await expect(page.getByTestId("thread-layout-diagram-focus")).toBeVisible();
+  await expect(workspace).toHaveAttribute("data-thread-mode", "focus");
   await expect
     .poll(() =>
       page.evaluate(
@@ -148,9 +173,64 @@ test("appearance samples preview locally and commit only on selection", async ({
       ),
     )
     .toBe("focus");
+
+  await page.getByTestId("appearance-preview-close-thread").last().click();
+  await expect(
+    page.getByTestId("appearance-workspace-preview-thread"),
+  ).toHaveCount(0);
+  await page.getByTestId("appearance-preview-open-thread").click();
+  await expect(
+    page.getByTestId("appearance-workspace-preview-thread"),
+  ).toBeVisible();
+});
+
+test("appearance controls keep polish aligned with reduced motion", async ({
+  page,
+}) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await openAppearance(page);
+
+  const thread = page.getByTestId("appearance-workspace-preview-thread");
+  await expect(thread).toHaveAttribute("data-motion-mode", "reduced");
+  await expect(thread).toHaveCSS("filter", "blur(0px)");
+
+  const accent = page.getByTestId("accent-color-blue");
+  await accent.hover();
+  await expect(accent).toHaveCSS("transform", "none");
+  await expect(accent).toHaveCSS("border-top-width", "0px");
+
+  const selectedAccentDot = page.getByTestId("accent-color-selection");
+  await expect(selectedAccentDot).toHaveCSS("width", "8px");
+  await expect(selectedAccentDot).toHaveCSS("height", "8px");
+  await expect(selectedAccentDot).toHaveCSS(
+    "background-color",
+    "rgb(255, 255, 255)",
+  );
+  await expect(selectedAccentDot).toHaveCSS("opacity", "1");
+
+  const accentRow = page.getByTestId("accent-color-row");
+  const accentLabel = accentRow.getByText("Accent color", { exact: true });
+  const accentOptions = page.getByTestId("accent-color-options");
+  const [labelBox, optionsBox] = await Promise.all([
+    accentLabel.boundingBox(),
+    accentOptions.boundingBox(),
+  ]);
+  if (!labelBox || !optionsBox) throw new Error("Accent geometry is missing");
+  expect(
+    Math.abs(
+      labelBox.y + labelBox.height / 2 - (optionsBox.y + optionsBox.height / 2),
+    ),
+  ).toBeLessThanOrEqual(1);
+
+  await expect(page.getByTestId("conversation-density-row")).toHaveCSS(
+    "border-top-width",
+    "1px",
+  );
 });
 
-test("appearance previews stay grouped and responsive", async ({ page }) => {
+test("workspace preview stays responsive with stacked controls", async ({
+  page,
+}) => {
   await page.setViewportSize({ width: 840, height: 900 });
   await openAppearance(page, {
     linkStyle: "rich",
@@ -159,43 +239,44 @@ test("appearance previews stay grouped and responsive", async ({ page }) => {
   });
 
   const preferencesCard = page.getByTestId("appearance-preferences-card");
-  const linkGroup = page.getByTestId("link-preview-style-group");
-  const threadGroup = page.getByTestId("thread-layout-group");
+  const workspace = page.getByTestId("appearance-workspace-preview-surface");
   const linkControl = page.getByTestId("link-preview-style-control");
   const threadControl = page.getByTestId("thread-layout-control");
 
-  await expect(linkGroup.getByText("Preview", { exact: true })).toBeVisible();
-  await expect(threadGroup.getByText("Preview", { exact: true })).toBeVisible();
+  await expect(workspace).toBeVisible();
+  await expect(workspace).toHaveAttribute("data-link-style", "rich");
+  await expect(workspace).toHaveAttribute("data-thread-mode", "focus");
 
-  const [cardBox, linkControlBox, threadControlBox] = await Promise.all([
-    preferencesCard.boundingBox(),
-    linkControl.boundingBox(),
-    threadControl.boundingBox(),
-  ]);
-  if (!cardBox || !linkControlBox || !threadControlBox) {
+  const [cardBox, workspaceBox, linkControlBox, threadControlBox] =
+    await Promise.all([
+      preferencesCard.boundingBox(),
+      workspace.boundingBox(),
+      linkControl.boundingBox(),
+      threadControl.boundingBox(),
+    ]);
+  if (!cardBox || !workspaceBox || !linkControlBox || !threadControlBox) {
     throw new Error("Responsive Appearance geometry is missing");
   }
-  expect(linkControlBox.width).toBeGreaterThan(cardBox.width - 40);
-  expect(threadControlBox.width).toBeGreaterThan(cardBox.width - 40);
+  expect(workspaceBox.width).toBeLessThanOrEqual(640);
+  expect(linkControlBox.x + linkControlBox.width).toBeLessThanOrEqual(
+    cardBox.x + cardBox.width,
+  );
+  expect(threadControlBox.x + threadControlBox.width).toBeLessThanOrEqual(
+    cardBox.x + cardBox.width,
+  );
 
   await waitForAnimations(page);
-  await linkGroup.screenshot({
-    path: `${SHOTS}/01-link-preview-rich-dark-narrow.png`,
-  });
-  await threadGroup.screenshot({
-    path: `${SHOTS}/02-thread-focus-dark-narrow.png`,
+  await page.getByTestId("appearance-workspace-preview").screenshot({
+    path: `${SHOTS}/01-workspace-rich-focus-dark-narrow.png`,
   });
 });
 
-test("appearance previews render compact and split samples at wide width", async ({
+test("workspace preview renders compact and split at wide width", async ({
   page,
 }) => {
   await openAppearance(page);
   await waitForAnimations(page);
-  await page.getByTestId("link-preview-style-group").screenshot({
-    path: `${SHOTS}/03-link-preview-compact-light-wide.png`,
-  });
-  await page.getByTestId("thread-layout-group").screenshot({
-    path: `${SHOTS}/04-thread-split-light-wide.png`,
+  await page.getByTestId("appearance-workspace-preview").screenshot({
+    path: `${SHOTS}/02-workspace-compact-split-light-wide.png`,
   });
 });
diff --git a/desktop/tests/e2e/buzz-theme-screenshots.spec.ts b/desktop/tests/e2e/buzz-theme-screenshots.spec.ts
index 408fa851d9..f0d5d3cbf7 100644
--- a/desktop/tests/e2e/buzz-theme-screenshots.spec.ts
+++ b/desktop/tests/e2e/buzz-theme-screenshots.spec.ts
@@ -661,21 +661,18 @@ test("app font size and conversation density apply independently", async ({
   const defaultSize = page.getByTestId("font-size-default");
   const larger = page.getByTestId("font-size-larger");
   const fontSizeIndicator = page.getByTestId("font-size-control-indicator");
-  const preview = page.getByTestId("conversation-preview");
-  const previewSurface = page.getByTestId("conversation-preview-surface");
-  const previewContent = page.getByTestId("conversation-preview-content");
-  const previewChip = preview.getByText("Preview");
+  const preview = page.getByTestId("appearance-workspace-preview");
+  const previewSurface = page.getByTestId(
+    "appearance-workspace-preview-surface",
+  );
+  const previewContent = page.getByTestId(
+    "appearance-workspace-preview-messages",
+  );
   const firstPreviewMessage = previewSurface.locator("article").first();
-  const previewMessage = preview.getByText(
+  const previewMessage = previewContent.getByText(
     "The revised conversation layout is ready to review.",
   );
-  const previewTimestamp = preview.getByText("9:41");
-  const densityDescription = page
-    .getByTestId("conversation-density-row")
-    .locator("[data-settings-subcopy]");
-  const fontSizeDescription = page
-    .getByTestId("font-size-row")
-    .locator("[data-settings-subcopy]");
+  const previewTimestamp = previewContent.getByText("9:41");
   const readScale = () =>
     root.evaluate((element) => {
       const style = window.getComputedStyle(element);
@@ -743,16 +740,18 @@ test("app font size and conversation density apply independently", async ({
   await expect(fontSizeControl).toHaveAccessibleName("Font size");
   await expect(comfortable).toHaveText("Comfy");
   await expect(defaultSize).toHaveText("Default");
-  await expect(preview).toContainText("Preview");
-  await expect(preview).not.toContainText("Message #design");
+  await expect(preview.getByText("Preview", { exact: true })).toBeVisible();
+  await expect(preview).toContainText("Message #design");
   await expect(comfortable).toHaveAttribute("aria-pressed", "true");
   await expect(defaultSize).toHaveAttribute("aria-pressed", "true");
-  await expect(densityDescription).toHaveText(
-    "Spacing in conversations and Markdown content across Buzz",
-  );
-  await expect(fontSizeDescription).toHaveText(
-    "Applies across conversations and interface text",
-  );
+  await expect(
+    page
+      .getByTestId("conversation-density-row")
+      .locator("[data-settings-subcopy]"),
+  ).toHaveCount(0);
+  await expect(
+    page.getByTestId("font-size-row").locator("[data-settings-subcopy]"),
+  ).toHaveCount(0);
   await expect.poll(readScale).toEqual({
     authorLineHeight: 16,
     bodyGap: 0.125,
@@ -798,62 +797,20 @@ test("app font size and conversation density apply independently", async ({
   await expect(densityIndicator).toHaveCSS("transition-property", /transform/);
   await expect(fontSizeIndicator).toHaveCSS("transition-duration", "0.2s");
   await expect(fontSizeIndicator).toHaveCSS("transition-property", /transform/);
-  await expect
-    .poll(async () => {
-      const [previewBackground, labelBackground, controlBackground] =
-        await Promise.all([
-          previewSurface.evaluate(
-            (element) => window.getComputedStyle(element).backgroundColor,
-          ),
-          previewChip.evaluate(
-            (element) => window.getComputedStyle(element).backgroundColor,
-          ),
-          densityControl.evaluate(
-            (element) => window.getComputedStyle(element).backgroundColor,
-          ),
-        ]);
-      return {
-        labelIsAnnotation: labelBackground !== controlBackground,
-        previewBackground,
-      };
-    })
-    .toEqual({
-      labelIsAnnotation: true,
-      previewBackground: "rgba(0, 0, 0, 0)",
-    });
   const previewSurfaceBox = await previewSurface.boundingBox();
-  const previewChipBox = await previewChip.boundingBox();
+  const previewContentBox = await previewContent.boundingBox();
   const firstPreviewMessageBox = await firstPreviewMessage.boundingBox();
   expect(previewSurfaceBox).not.toBeNull();
-  expect(previewChipBox).not.toBeNull();
+  expect(previewContentBox).not.toBeNull();
   expect(firstPreviewMessageBox).not.toBeNull();
-  if (!previewSurfaceBox || !previewChipBox || !firstPreviewMessageBox) {
+  if (!previewSurfaceBox || !previewContentBox || !firstPreviewMessageBox) {
     throw new Error("Conversation preview geometry is missing");
   }
-  const previewChipRightInset =
-    previewSurfaceBox.x +
-    previewSurfaceBox.width -
-    (previewChipBox.x + previewChipBox.width);
-  expect(previewChipRightInset).toBeGreaterThanOrEqual(13);
-  expect(previewChipRightInset).toBeLessThanOrEqual(15);
-  const previewChipTopInset = previewChipBox.y - previewSurfaceBox.y;
-  expect(previewChipTopInset).toBeGreaterThanOrEqual(13);
-  expect(previewChipTopInset).toBeLessThanOrEqual(15);
-  await expect(previewContent).toHaveCSS("padding-top", "16px");
-  await expect(previewContent).toHaveCSS("padding-right", "16px");
-  await expect(previewContent).toHaveCSS("padding-bottom", "16px");
-  await expect(previewContent).toHaveCSS("padding-left", "16px");
-  expect(firstPreviewMessageBox.x - previewSurfaceBox.x).toBeGreaterThanOrEqual(
-    15,
-  );
-  expect(firstPreviewMessageBox.x - previewSurfaceBox.x).toBeLessThanOrEqual(
-    17,
-  );
-  expect(firstPreviewMessageBox.y - previewSurfaceBox.y).toBeGreaterThanOrEqual(
-    15,
-  );
-  expect(firstPreviewMessageBox.y - previewSurfaceBox.y).toBeLessThanOrEqual(
-    17,
+  expect(previewSurfaceBox.height).toBe(360);
+  await expect(previewContent).toHaveCSS("padding-top", "4px");
+  await expect(previewContent).toHaveCSS("padding-left", "12px");
+  expect(firstPreviewMessageBox.x - previewContentBox.x).toBeGreaterThanOrEqual(
+    0,
   );
   await densityIndicator.evaluate((element) => {
     element.addEventListener(
@@ -1508,14 +1465,36 @@ test("settings content uses the same inset surface as the main app", async ({
   });
 });
 
-test("appearance hides accent picker under Buzz", async ({ page }) => {
+test("appearance applies accent colors under Buzz", async ({ page }) => {
   await seedTheme(page, "buzz");
   await installMockBridge(page);
   const panel = await openAppearance(page, "light");
-  // The accent picker is hidden while a Buzz theme is active. Its neutral
-  // swatch testid must not be present.
-  await expect(page.getByTestId("accent-color-neutral")).toHaveCount(0);
-  await panel.screenshot({ path: `${SHOTS}/10-appearance-no-accent.png` });
+  await expect(page.getByTestId("accent-color-neutral")).toBeVisible();
+  const initialPrimary = await page
+    .locator("html")
+    .evaluate((element) =>
+      getComputedStyle(element).getPropertyValue("--primary").trim(),
+    );
+  await page.getByTestId("accent-color-pink").click();
+  await expect(page.getByTestId("accent-color-pink")).toHaveAttribute(
+    "aria-pressed",
+    "true",
+  );
+  await expect
+    .poll(() =>
+      page
+        .locator("html")
+        .evaluate((element) =>
+          getComputedStyle(element).getPropertyValue("--primary").trim(),
+        ),
+    )
+    .not.toBe(initialPrimary);
+  await expect
+    .poll(() =>
+      page.evaluate(() => window.localStorage.getItem("buzz-accent-color")),
+    )
+    .toBe("#ec4899");
+  await panel.screenshot({ path: `${SHOTS}/10-appearance-buzz-accent.png` });
 });
 
 test("glass background keeps the content panel solid", async ({ page }) => {
@@ -1740,11 +1719,7 @@ test("non-Buzz glass preserves the selected theme sidebar tint", async ({
   expect(tint.actual).toBe(tint.expected);
 });
 
-test("accent picker reveals/hides when toggling Buzz", async ({ page }) => {
-  // Start on a non-Buzz theme so the accent picker is present, then select the
-  // Buzz tile — the picker should animate out and unmount. Reselecting a
-  // non-Buzz tile brings it back. Asserts the presence toggle (the motion
-  // wrapper) works end to end.
+test("accent picker stays available when toggling Buzz", async ({ page }) => {
   await seedTheme(page, "github-light");
   await page.addInitScript(() => {
     Object.defineProperty(navigator, "platform", {
@@ -1768,16 +1743,16 @@ test("accent picker reveals/hides when toggling Buzz", async ({ page }) => {
     "glass-background-row",
   ]);
 
-  // Switch to Buzz — picker should leave (allow the exit animation to settle).
+  // Accent selection remains available on first-party Buzz themes.
   await page.getByTestId("theme-style-trigger").click();
   await page.getByTestId("theme-option-buzz").click();
   await expect(page.getByTestId("theme-style-trigger")).toHaveAttribute(
     "aria-expanded",
     "true",
   );
-  await expect(page.getByTestId("accent-color-neutral")).toHaveCount(0);
+  await expect(page.getByTestId("accent-color-neutral")).toBeVisible();
 
-  // Back to a non-Buzz theme — picker returns.
+  // It also remains available after returning to a syntax theme.
   await page.getByTestId("theme-option-github-light").click();
   await expect(page.getByTestId("accent-color-neutral")).toBeVisible();
   await expect(page.getByTestId("theme-style-trigger")).toHaveAttribute(
diff --git a/desktop/tests/e2e/global-agent-config-screenshots.spec.ts b/desktop/tests/e2e/global-agent-config-screenshots.spec.ts
index fef87bb8b2..83dfbac182 100644
--- a/desktop/tests/e2e/global-agent-config-screenshots.spec.ts
+++ b/desktop/tests/e2e/global-agent-config-screenshots.spec.ts
@@ -192,6 +192,10 @@ test.describe("global agent config screenshots", () => {
     await card.scrollIntoViewIfNeeded();
     await waitForAnimations(page);
 
+    const saveButton = card.getByRole("button", { name: "Save defaults" });
+    await expect(saveButton).toHaveClass(/rounded-full/);
+    await expect(saveButton).toHaveClass(/!shadow-none/);
+
     await card.screenshot({
       path: `${SHOTS}/01-global-agent-config-card-populated.png`,
     });
diff --git a/desktop/tests/e2e/observer-archive-policy.spec.ts b/desktop/tests/e2e/observer-archive-policy.spec.ts
index ff4bbaa150..e5dda426ad 100644
--- a/desktop/tests/e2e/observer-archive-policy.spec.ts
+++ b/desktop/tests/e2e/observer-archive-policy.spec.ts
@@ -50,13 +50,54 @@ test.describe("observer archive policy — Settings toggle", () => {
 
     const card = await openLocalArchiveSettings(page);
     const toggle = card.getByTestId("local-archive-observer-toggle");
+    const thumb = toggle.locator('[data-slot="switch-thumb"]');
     await expect(toggle).toBeVisible({ timeout: 5_000 });
     await expect(toggle).toBeChecked();
+    await expect(thumb).toHaveCSS(
+      "clip-path",
+      "inset(0px 0px 0px 8px round 999px)",
+    );
+
+    const restingCheckedBox = await thumb.boundingBox();
+    await toggle.hover();
+    await expect(thumb).toHaveCSS("clip-path", "inset(0px round 999px)");
+    const stretchedCheckedBox = await thumb.boundingBox();
+    if (!restingCheckedBox || !stretchedCheckedBox) {
+      throw new Error("Observer switch thumb geometry is missing");
+    }
+    expect(
+      Math.abs(
+        restingCheckedBox.x +
+          restingCheckedBox.width -
+          (stretchedCheckedBox.x + stretchedCheckedBox.width),
+      ),
+    ).toBeLessThanOrEqual(0.5);
 
     // OFF: removes kind 24200.
     await toggle.click();
     await expect(toggle).not.toBeChecked();
 
+    await page.mouse.move(0, 0);
+    await thumb.evaluate(async (element) => {
+      await Promise.all(
+        element.getAnimations().map((animation) => animation.finished),
+      );
+    });
+    await expect(thumb).toHaveCSS(
+      "clip-path",
+      "inset(0px 8px 0px 0px round 999px)",
+    );
+    const restingUncheckedBox = await thumb.boundingBox();
+    await toggle.hover();
+    await expect(thumb).toHaveCSS("clip-path", "inset(0px round 999px)");
+    const stretchedUncheckedBox = await thumb.boundingBox();
+    if (!restingUncheckedBox || !stretchedUncheckedBox) {
+      throw new Error("Observer switch thumb geometry is missing");
+    }
+    expect(
+      Math.abs(restingUncheckedBox.x - stretchedUncheckedBox.x),
+    ).toBeLessThanOrEqual(0.5);
+
     // ON again: re-creates the row from empty.
     await toggle.click();
     await expect(toggle).toBeChecked();
diff --git a/desktop/tests/e2e/profile.spec.ts b/desktop/tests/e2e/profile.spec.ts
index 04411720ac..832d66472b 100644
--- a/desktop/tests/e2e/profile.spec.ts
+++ b/desktop/tests/e2e/profile.spec.ts
@@ -2319,6 +2319,94 @@ test("notification settings drive the Inbox badge and desktop alerts", async ({
   await expect.poll(getAppBadgeCount).toBe(baseline);
 });
 
+test("notification settings simplify copy and show sound progress", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await openSettings(page, "notifications");
+
+  const settings = page.getByTestId("settings-notifications");
+  await expect(
+    settings.getByText("Play sound for notifications", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    settings.getByText("Badge application icon", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    settings.getByText("Native desktop alerts are enabled", { exact: false }),
+  ).toHaveCount(0);
+  await expect(
+    settings.getByText("Alert with a sound for the events below."),
+  ).toHaveCount(0);
+  await expect(
+    settings.getByText("Show a Home badge", { exact: false }),
+  ).toHaveCount(0);
+
+  const viewAll = settings.getByTestId("notifications-toggle-coming-soon");
+  await expect(viewAll).toHaveClass(/!shadow-none/);
+
+  const badgeToggle = settings.getByTestId("notifications-home-badge-toggle");
+  const badgeThumb = badgeToggle.locator('[data-slot="switch-thumb"]');
+  const restingCapsuleWidth = await badgeToggle.evaluate(
+    (element) => element.getBoundingClientRect().width,
+  );
+  const restingThumbWidth = await badgeThumb.evaluate(
+    (element) => element.getBoundingClientRect().width,
+  );
+  const badgeStartsChecked = await badgeToggle.isChecked();
+  await expect(badgeThumb).toHaveCSS(
+    "clip-path",
+    badgeStartsChecked
+      ? "inset(0px 0px 0px 8px round 999px)"
+      : "inset(0px 8px 0px 0px round 999px)",
+  );
+  const restingThumbBox = await badgeThumb.boundingBox();
+  await badgeToggle.hover();
+  await expect
+    .poll(() =>
+      badgeToggle.evaluate((element) => element.getBoundingClientRect().width),
+    )
+    .toBe(restingCapsuleWidth);
+  await expect
+    .poll(() =>
+      badgeThumb.evaluate((element) => element.getBoundingClientRect().width),
+    )
+    .toBe(restingThumbWidth);
+  await expect(badgeThumb).toHaveCSS("clip-path", "inset(0px round 999px)");
+  const stretchedThumbBox = await badgeThumb.boundingBox();
+  if (!restingThumbBox || !stretchedThumbBox) {
+    throw new Error("Switch thumb geometry is missing");
+  }
+  const restingEdge = badgeStartsChecked
+    ? restingThumbBox.x + restingThumbBox.width
+    : restingThumbBox.x;
+  const stretchedEdge = badgeStartsChecked
+    ? stretchedThumbBox.x + stretchedThumbBox.width
+    : stretchedThumbBox.x;
+  expect(Math.abs(restingEdge - stretchedEdge)).toBeLessThanOrEqual(0.5);
+  await badgeToggle.click();
+  await expect
+    .poll(() =>
+      badgeThumb.evaluate((element) => element.getBoundingClientRect().width),
+    )
+    .toBe(restingThumbWidth);
+
+  const soundPicker = settings.getByTestId("sound-picker").first();
+  await soundPicker.getByRole("button", { name: /^Preview / }).click();
+  const waveform = soundPicker.getByTestId("sound-picker-waveform");
+  await expect(waveform).toBeVisible();
+  await expect
+    .poll(async () =>
+      Number.parseFloat(
+        (await waveform.getAttribute("data-playback-progress")) ?? "0",
+      ),
+    )
+    .toBeGreaterThan(0.9);
+  await expect(
+    soundPicker.getByRole("button", { name: /^Preview / }),
+  ).toBeVisible({ timeout: 3_000 });
+});
+
 test("desktop notification clicks open the matching forum thread", async ({
   page,
 }) => {
diff --git a/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/agent-defaults-after.png b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/agent-defaults-after.png
new file mode 100644
index 0000000000..d44b7176c9
Binary files /dev/null and b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/agent-defaults-after.png differ
diff --git a/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/agent-defaults-before.png b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/agent-defaults-before.png
new file mode 100644
index 0000000000..9e8d8b17f0
Binary files /dev/null and b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/agent-defaults-before.png differ
diff --git a/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/appearance-after.png b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/appearance-after.png
new file mode 100644
index 0000000000..cdd0cf8f0b
Binary files /dev/null and b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/appearance-after.png differ
diff --git a/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/appearance-before.png b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/appearance-before.png
new file mode 100644
index 0000000000..159e331a9a
Binary files /dev/null and b/docs/assets/screenshots/desktop-settings-copy-layout-cleanup/appearance-before.png differ