diff --git a/crates/agent-gateway/web/src/components/ui/switch.tsx b/crates/agent-gateway/web/src/components/ui/switch.tsx
new file mode 100644
index 000000000..ff85f65a0
--- /dev/null
+++ b/crates/agent-gateway/web/src/components/ui/switch.tsx
@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react";
+import * as React from "react";
+
+import { cn } from "../../lib/shared/utils";
+
+export const Switch = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    data-slot="switch"
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-muted-foreground/20 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 data-[checked]:bg-sky-500 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60 data-[unchecked]:hover:bg-muted-foreground/30",
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      data-slot="switch-thumb"
+      className="pointer-events-none block h-4 w-4 translate-x-0.5 rounded-full bg-white shadow-sm transition-transform data-[checked]:translate-x-[18px]"
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = "Switch";
diff --git a/crates/agent-gateway/web/src/i18n/config.ts b/crates/agent-gateway/web/src/i18n/config.ts
index 9229fda85..74775e428 100644
--- a/crates/agent-gateway/web/src/i18n/config.ts
+++ b/crates/agent-gateway/web/src/i18n/config.ts
@@ -935,6 +935,8 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.groupConnectivity": "连接",
     "settings.backToChat": "返回对话",
     "settings.title": "设置",
+    "settings.searchPlaceholder": "搜索设置…",
+    "settings.searchNoResults": "未找到匹配的设置",
 
     /* ── Settings Devices ── */
     "settings.devicesTitle": "多客户端管理",
@@ -1185,6 +1187,9 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.systemProxyInvalid":
       "代理已启用，请填写有效的代理地址和端口；配置有效前相关请求将直接报错。",
     "settings.systemProxyEnableHint": "请先填写有效的代理地址和端口后再启用代理。",
+    "settings.systemProxyDisabled": "当前未启用，仅在需要时配置并开启。",
+    "settings.systemProxySettings": "代理设置",
+    "settings.systemProxyDone": "完成",
     "settings.systemProxyType": "代理类型",
     "settings.systemProxyHost": "代理地址",
     "settings.systemProxyPort": "端口",
@@ -3126,6 +3131,8 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.groupConnectivity": "Connectivity",
     "settings.backToChat": "Back to Chat",
     "settings.title": "Settings",
+    "settings.searchPlaceholder": "Search settings…",
+    "settings.searchNoResults": "No matching settings",
 
     /* ── Settings Devices ── */
     "settings.devicesTitle": "Multi-client Management",
@@ -3391,6 +3398,9 @@ export const translations: Record<Locale, Record<string, string>> = {
       "The proxy is enabled. Enter a valid host and port; affected requests fail until the configuration is valid.",
     "settings.systemProxyEnableHint":
       "Enter a valid proxy host and port before enabling the proxy.",
+    "settings.systemProxyDisabled": "Currently off. Configure and enable it only when needed.",
+    "settings.systemProxySettings": "Proxy settings",
+    "settings.systemProxyDone": "Done",
     "settings.systemProxyType": "Proxy type",
     "settings.systemProxyHost": "Proxy host",
     "settings.systemProxyPort": "Port",
diff --git a/crates/agent-gateway/web/src/pages/SettingsPage.tsx b/crates/agent-gateway/web/src/pages/SettingsPage.tsx
index 967b540a5..f26432e7e 100644
--- a/crates/agent-gateway/web/src/pages/SettingsPage.tsx
+++ b/crates/agent-gateway/web/src/pages/SettingsPage.tsx
@@ -8,12 +8,14 @@ import {
   Cpu,
   Key,
   MonitorSmartphone,
+  Search,
   Settings2,
   Wrench,
   Zap,
 } from "../components/icons";
 
 import { useLocale } from "../i18n";
+import { cn } from "../lib/shared/utils";
 import { AgentsSection } from "./settings/AgentsSection";
 import { CronSection } from "./settings/CronSection";
 import { DevicesSection } from "./settings/DevicesSection";
@@ -40,8 +42,6 @@ function getSaveIndicator(state: SettingsPageProps["saveState"], t: (key: string
         text: t("settings.saveError"),
         title: state.message,
       };
-    case "saved":
-    case "idle":
     default:
       return {
         dotClass: "bg-emerald-500",
@@ -63,24 +63,17 @@ function NavItem({ icon, label, active, onClick }: NavItemProps) {
     <button
       type="button"
       onClick={onClick}
-      className={`settings-nav-item group relative w-full rounded-lg px-3 py-2 text-left transition-all duration-150 ${
+      className={cn(
+        "settings-nav-item group relative flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm transition-all duration-150",
         active
-          ? "settings-nav-item-active bg-primary/10 font-medium text-primary"
-          : "text-muted-foreground hover:bg-accent/60 hover:text-foreground"
-      }`}
+          ? "settings-nav-item-active bg-accent font-medium text-foreground"
+          : "text-foreground/75 hover:bg-accent/60 hover:text-foreground",
+      )}
     >
-      <div className="flex items-center gap-3">
-        <div
-          className={`settings-nav-icon flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${
-            active
-              ? "bg-primary/15 text-primary"
-              : "bg-muted/60 text-muted-foreground group-hover:bg-accent group-hover:text-foreground"
-          }`}
-        >
-          {icon}
-        </div>
-        <div className="settings-nav-label min-w-0 truncate text-sm leading-none">{label}</div>
-      </div>
+      <span className="settings-nav-icon flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground transition-colors group-hover:text-foreground">
+        {icon}
+      </span>
+      <span className="settings-nav-label min-w-0 truncate leading-tight">{label}</span>
     </button>
   );
 }
@@ -137,19 +130,23 @@ export function SettingsPage(props: SettingsPageProps) {
   const { t } = useLocale();
   const [section, setSection] = useState<SectionId>(initialSection);
   const [pendingProviderId, setPendingProviderId] = useState(initialProviderId);
+  const [navQuery, setNavQuery] = useState("");
 
-  const sectionLabels: Record<SectionId, string> = {
-    system: t("settings.navSystem"),
-    systemTools: t("settings.navSystemTools"),
-    providers: t("settings.navProviders"),
-    agents: t("settings.navAgents"),
-    ssh: t("settings.navSsh"),
-    memory: t("settings.navMemory"),
-    hooks: t("settings.navHooks"),
-    cron: t("settings.navCron"),
-    devices: t("settings.navAgentManagement"),
-    remote: t("settings.navRemote"),
-  };
+  const sectionLabels = useMemo<Record<SectionId, string>>(
+    () => ({
+      system: t("settings.navSystem"),
+      systemTools: t("settings.navSystemTools"),
+      providers: t("settings.navProviders"),
+      agents: t("settings.navAgents"),
+      ssh: t("settings.navSsh"),
+      memory: t("settings.navMemory"),
+      hooks: t("settings.navHooks"),
+      cron: t("settings.navCron"),
+      devices: t("settings.navAgentManagement"),
+      remote: t("settings.navRemote"),
+    }),
+    [t],
+  );
 
   const hiddenSectionSet = useMemo(() => new Set(hiddenSections), [hiddenSections]);
   const navGroups = useMemo(
@@ -163,6 +160,16 @@ export function SettingsPage(props: SettingsPageProps) {
     [hiddenSectionSet, sectionLabels, t],
   );
   const allNavItems = useMemo(() => navGroups.flatMap((g) => g.items), [navGroups]);
+  const visibleNavGroups = useMemo(() => {
+    const query = navQuery.trim().toLocaleLowerCase();
+    if (!query) return navGroups;
+    return navGroups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => item.label.toLocaleLowerCase().includes(query)),
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [navGroups, navQuery]);
 
   useEffect(() => {
     setSection(initialSection);
@@ -221,7 +228,7 @@ export function SettingsPage(props: SettingsPageProps) {
 
   return (
     <div className="settings-page-shell flex h-full bg-background">
-      <aside className="settings-sidebar flex w-60 shrink-0 flex-col border-r border-border/60 bg-muted/20">
+      <aside className="settings-sidebar flex w-64 shrink-0 flex-col border-r border-border/60 bg-muted/30">
         <div className="settings-back-bar">
           <button
             type="button"
@@ -233,7 +240,7 @@ export function SettingsPage(props: SettingsPageProps) {
           </button>
         </div>
 
-        <div className="settings-sidebar-header border-b border-border/60 px-3 pb-3 pt-3">
+        <div className="settings-sidebar-header px-3 pb-2 pt-3">
           <button
             type="button"
             onClick={onBack}
@@ -243,21 +250,23 @@ export function SettingsPage(props: SettingsPageProps) {
             <span>{t("settings.backToChat")}</span>
           </button>
 
-          <div className="mt-3 flex items-center gap-2.5 px-1">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
-              <Settings2 className="h-4 w-4 text-primary" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold tracking-tight">{t("settings.title")}</div>
-              <div className="text-[11px] text-muted-foreground">LiveAgent</div>
-            </div>
+          <div className="relative mt-2">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/75" />
+            <input
+              type="search"
+              value={navQuery}
+              onChange={(event) => setNavQuery(event.currentTarget.value)}
+              placeholder={t("settings.searchPlaceholder")}
+              aria-label={t("settings.searchPlaceholder")}
+              className="h-9 w-full rounded-xl border border-border/70 bg-background/85 pl-9 pr-3 text-sm shadow-xs outline-none placeholder:text-muted-foreground/70 focus:border-border focus:ring-2 focus:ring-foreground/5"
+            />
           </div>
         </div>
 
         <nav className="settings-nav flex-1 overflow-y-auto px-3 py-3">
-          {navGroups.map((group, gi) => (
-            <div key={group.label} className={`settings-nav-group ${gi > 0 ? "mt-4" : ""}`}>
-              <div className="settings-nav-group-label mb-1 px-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
+          {visibleNavGroups.map((group, gi) => (
+            <div key={group.label} className={cn("settings-nav-group", gi > 0 && "mt-5")}>
+              <div className="settings-nav-group-label mb-1 px-3 text-xs font-medium text-muted-foreground/65">
                 {group.label}
               </div>
               <div className="space-y-0.5">
@@ -273,13 +282,26 @@ export function SettingsPage(props: SettingsPageProps) {
               </div>
             </div>
           ))}
+          {visibleNavGroups.length === 0 ? (
+            <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+              {t("settings.searchNoResults")}
+            </div>
+          ) : null}
         </nav>
       </aside>
 
       <main className="settings-main flex min-w-0 flex-1 flex-col">
-        <header className="settings-main-header flex items-center justify-between border-b px-6 py-4">
-          <div className="settings-main-title overflow-hidden">
-            <div key={section} className="settings-section-title-enter text-base font-semibold">
+        <header className="settings-main-header flex items-center justify-between px-8 pb-2 pt-8">
+          <div
+            className={cn(
+              "settings-main-title w-full overflow-hidden",
+              section === "system" && "mx-auto max-w-[920px]",
+            )}
+          >
+            <div
+              key={section}
+              className="settings-section-title-enter text-[28px] font-semibold tracking-tight"
+            >
               {sectionLabels[section]}
             </div>
           </div>
@@ -288,7 +310,7 @@ export function SettingsPage(props: SettingsPageProps) {
               className="settings-save-indicator flex items-center gap-1.5 text-xs text-muted-foreground"
               title={saveIndicator.title}
             >
-              <div className={`h-1.5 w-1.5 rounded-full ${saveIndicator.dotClass}`} />
+              <div className={cn("h-1.5 w-1.5 rounded-full", saveIndicator.dotClass)} />
               {saveIndicator.text}
             </div>
           ) : null}
@@ -296,18 +318,23 @@ export function SettingsPage(props: SettingsPageProps) {
 
         <div
           key={section}
-          className={`settings-content settings-content-${section} settings-section-enter flex-1 px-6 py-5 ${
+          className={cn(
+            "settings-content settings-section-enter flex-1 px-8 pb-8 pt-6",
+            `settings-content-${section}`,
             section === "hooks" || section === "providers" || section === "memory"
               ? "flex min-h-0 flex-col overflow-hidden"
-              : "overflow-auto"
-          }`}
+              : "overflow-auto",
+          )}
         >
           <div
-            className={`settings-section-shell settings-section-shell-${section} ${
+            className={cn(
+              "settings-section-shell",
+              `settings-section-shell-${section}`,
+              section === "system" && "mx-auto w-full max-w-[920px]",
               section === "hooks" || section === "providers" || section === "memory"
                 ? "flex min-h-0 flex-1 flex-col"
-                : "min-h-full"
-            }`}
+                : "min-h-full",
+            )}
           >
             {sectionContent}
           </div>
diff --git a/crates/agent-gateway/web/src/pages/settings/SystemSettingsForm.tsx b/crates/agent-gateway/web/src/pages/settings/SystemSettingsForm.tsx
index f4b6080a8..9ca5d5089 100644
--- a/crates/agent-gateway/web/src/pages/settings/SystemSettingsForm.tsx
+++ b/crates/agent-gateway/web/src/pages/settings/SystemSettingsForm.tsx
@@ -1,14 +1,13 @@
-import { useEffect, useMemo, useState } from "react";
+import { type ComponentProps, type ReactNode, useEffect, useMemo, useState } from "react";
 import {
   CheckCircle2,
+  ChevronRight,
   Cpu,
-  Globe,
   MessageSquare,
   MonitorSmartphone,
   Moon,
-  ScanText,
+  Settings2,
   Sun,
-  Terminal,
   Wrench,
 } from "../../components/icons";
 import { Input } from "../../components/ui/input";
@@ -20,7 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../components/ui/select";
-import { SUPPORTED_LOCALES, useLocale } from "../../i18n";
+import { type Locale, SUPPORTED_LOCALES, useLocale } from "../../i18n";
 import {
   buildFontFamilySelectOptions,
   FONT_FAMILY_CUSTOM_SELECT_VALUE,
@@ -40,6 +39,7 @@ import {
   updateCustomSettings,
   updateSystem,
 } from "../../lib/settings";
+import { cn } from "../../lib/shared/utils";
 import { AgentActivationSwitch } from "./shared";
 import type { SettingsSectionProps } from "./types";
 
@@ -52,6 +52,187 @@ const FONT_FAMILY_FIELDS: ReadonlyArray<{ key: FontFamilySettingKey; labelKey: s
   { key: "codeFontFamily", labelKey: "settings.codeFontFamily" },
 ];
 
+type SettingsGroupProps = {
+  title: string;
+  children: ReactNode;
+};
+
+function SettingsGroup({ title, children }: SettingsGroupProps) {
+  return (
+    <section className="space-y-2.5">
+      <h2 className="px-1 text-[15px] font-semibold tracking-tight text-foreground">{title}</h2>
+      <div className="overflow-hidden rounded-2xl border border-border/75 bg-card shadow-[0_1px_2px_hsl(var(--foreground)/0.02)]">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+type SettingsSelectTriggerProps = ComponentProps<typeof SelectTrigger>;
+
+function SettingsSelectTrigger({ className = "", ...props }: SettingsSelectTriggerProps) {
+  return (
+    <SelectTrigger
+      className={cn(
+        "h-8 w-fit max-w-[260px] gap-1.5 whitespace-nowrap rounded-[10px] border-border/65 bg-background px-2.5 py-0 text-[13px] font-normal leading-none shadow-[0_1px_2px_hsl(var(--foreground)/0.035)] transition-colors hover:bg-muted/25 focus-visible:ring-2 focus-visible:ring-foreground/10 [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:opacity-40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type SettingsSelectContentProps = ComponentProps<typeof SelectContent>;
+
+function SettingsSelectContent({ className = "", ...props }: SettingsSelectContentProps) {
+  return (
+    <SelectContent
+      className={cn(
+        "rounded-xl border-border/70 shadow-[0_10px_30px_hsl(var(--foreground)/0.1)] [&_[role=option]]:min-h-8 [&_[role=option]]:rounded-lg [&_[role=option]]:text-[13px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type SettingsRowProps = {
+  title: string;
+  description?: string;
+  control: ReactNode;
+};
+
+function SettingsRow({ title, description, control }: SettingsRowProps) {
+  return (
+    <div className="relative flex min-h-[72px] flex-col gap-3 px-5 py-4 after:pointer-events-none after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px after:bg-border/60 after:content-[''] last:after:hidden sm:flex-row sm:items-center sm:justify-between">
+      <div className="min-w-0 flex-1 pr-2">
+        <div className="text-sm font-medium text-foreground">{title}</div>
+        {description ? (
+          <p className="mt-0.5 max-w-2xl text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      <div className="flex w-full items-center sm:w-auto sm:shrink-0 sm:justify-end">{control}</div>
+    </div>
+  );
+}
+
+type ProxySettingsRowProps = {
+  title: string;
+  description: string;
+  actionLabel: string;
+  expanded: boolean;
+  switchControl: ReactNode;
+  onToggleDetails: () => void;
+};
+
+function ProxySettingsRow({
+  title,
+  description,
+  actionLabel,
+  expanded,
+  switchControl,
+  onToggleDetails,
+}: ProxySettingsRowProps) {
+  return (
+    <div className="relative flex min-h-[76px] flex-col gap-3 px-5 py-4 after:pointer-events-none after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px after:bg-border/60 after:content-[''] last:after:hidden sm:flex-row sm:items-center">
+      <button
+        type="button"
+        aria-expanded={expanded}
+        aria-controls="system-proxy-details"
+        onClick={onToggleDetails}
+        className="group flex min-w-0 flex-1 items-center justify-between gap-4 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-foreground/10"
+      >
+        <span className="min-w-0 flex-1">
+          <span className="block text-sm font-medium text-foreground">{title}</span>
+          <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </span>
+        </span>
+        <span className="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-border/70 bg-background px-3 py-2 text-xs font-medium text-foreground/80 shadow-xs transition-colors group-hover:bg-muted/45">
+          <Settings2 className="h-3.5 w-3.5 text-muted-foreground" />
+          <span>{actionLabel}</span>
+          <ChevronRight
+            className={cn(
+              "h-3.5 w-3.5 text-muted-foreground transition-transform",
+              expanded && "rotate-90",
+            )}
+          />
+        </span>
+      </button>
+      <div className="flex shrink-0 items-center sm:border-l sm:border-border/60 sm:pl-4">
+        {switchControl}
+      </div>
+    </div>
+  );
+}
+
+type ExecutionModeRowProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  selected: boolean;
+  onClick: () => void;
+};
+
+function ExecutionModeRow({ icon, title, description, selected, onClick }: ExecutionModeRowProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onClick}
+      className="group relative flex w-full items-center gap-3 px-5 py-4 text-left transition-colors after:pointer-events-none after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px after:bg-border/60 after:content-[''] last:after:hidden hover:bg-muted/20"
+    >
+      <span
+        className={cn(
+          "flex h-5 w-5 shrink-0 items-center justify-center transition-colors",
+          selected
+            ? "text-foreground/70"
+            : "text-muted-foreground/45 group-hover:text-foreground/60",
+        )}
+      >
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm font-medium text-foreground">{title}</span>
+        <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
+          {description}
+        </span>
+      </span>
+      <span className="ml-2 flex h-5 w-5 shrink-0 items-center justify-center">
+        {selected ? <CheckCircle2 className="h-4.5 w-4.5 text-foreground/80" /> : null}
+      </span>
+    </button>
+  );
+}
+
+type SegmentedButtonProps = {
+  selected: boolean;
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+};
+
+function SegmentedButton({ selected, label, icon, onClick }: SegmentedButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs transition-all",
+        selected
+          ? "bg-background font-medium text-foreground shadow-sm ring-1 ring-border/70"
+          : "text-muted-foreground hover:text-foreground",
+      )}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
+
 export function SystemSettingsForm(props: SettingsSectionProps) {
   const { settings, setSettings } = props;
   const { t } = useLocale();
@@ -59,14 +240,6 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   const executionMode = settings.system.executionMode;
   const isClassicAgentMode = executionMode === "tools";
   const isAgentDevMode = executionMode === "agent-dev";
-  const appearanceIcon =
-    settings.theme === "system" ? (
-      <MonitorSmartphone className="h-4 w-4 text-muted-foreground" />
-    ) : settings.theme === "dark" ? (
-      <Moon className="h-4 w-4 text-muted-foreground" />
-    ) : (
-      <Sun className="h-4 w-4 text-muted-foreground" />
-    );
 
   function getThemeLabel(theme: Theme) {
     if (theme === "light") return t("settings.light");
@@ -75,9 +248,9 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   }
 
   function renderThemeIcon(theme: Theme) {
-    if (theme === "light") return <Sun className="h-4.5 w-4.5" />;
-    if (theme === "dark") return <Moon className="h-4.5 w-4.5" />;
-    return <MonitorSmartphone className="h-4.5 w-4.5" />;
+    if (theme === "light") return <Sun className="h-3.5 w-3.5 opacity-60" />;
+    if (theme === "dark") return <Moon className="h-3.5 w-3.5 opacity-60" />;
+    return <MonitorSmartphone className="h-3.5 w-3.5 opacity-60" />;
   }
 
   const fontScale = settings.customSettings.fontScale;
@@ -211,6 +384,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   const systemProxyInvalid = systemProxy.enabled && !proxyConfigValid;
   // 配置无效且当前未启用时禁止开启开关（护栏 A）；已启用时始终允许关闭。
   const proxyToggleDisabled = !systemProxy.enabled && !proxyConfigValid;
+  const [proxyDetailsOpen, setProxyDetailsOpen] = useState(false);
 
   function patchSystemProxy(patch: Partial<SystemProxyConfig>) {
     setSettings((prev) =>
@@ -250,341 +424,248 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   }
 
   return (
-    <div className="settings-system-section space-y-6">
-      <div className="space-y-3">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <Terminal className="h-4 w-4 text-muted-foreground" />
-          {t("settings.executionMode")}
-        </div>
-
-        <div className="settings-choice-grid grid grid-cols-1 gap-3 md:grid-cols-3">
-          <button
-            type="button"
+    <div className="settings-system-section space-y-9 pb-10">
+      <SettingsGroup title={t("settings.executionMode")}>
+        <fieldset aria-label={t("settings.executionMode")} className="m-0 min-w-0 border-0 p-0">
+          <ExecutionModeRow
+            icon={<MessageSquare className="h-4.5 w-4.5" />}
+            title={t("settings.chatMode")}
+            description={t("settings.chatModeDesc")}
+            selected={executionMode === "text"}
             onClick={() =>
               setSettings((prev) => updateSystem(prev, { executionMode: "text" as ExecutionMode }))
             }
-            className={`group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all ${
-              executionMode === "text"
-                ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                : "border-transparent bg-muted/40 hover:border-border hover:bg-muted/60"
-            }`}
-          >
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
-                executionMode === "text"
-                  ? "bg-primary/10 text-primary"
-                  : "bg-muted text-muted-foreground group-hover:bg-accent"
-              }`}
-            >
-              <MessageSquare className="h-5 w-5" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold">{t("settings.chatMode")}</div>
-              <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                {t("settings.chatModeDesc")}
-              </div>
-            </div>
-            {executionMode === "text" ? (
-              <div className="absolute right-3 top-3">
-                <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-              </div>
-            ) : null}
-          </button>
-
-          <button
-            type="button"
+          />
+          <ExecutionModeRow
+            icon={<Wrench className="h-4.5 w-4.5" />}
+            title={t("settings.agentMode")}
+            description={t("settings.agentModeDesc")}
+            selected={isClassicAgentMode}
             onClick={() =>
               setSettings((prev) => updateSystem(prev, { executionMode: "tools" as ExecutionMode }))
             }
-            className={`group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all ${
-              isClassicAgentMode
-                ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                : "border-transparent bg-muted/40 hover:border-border hover:bg-muted/60"
-            }`}
-          >
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
-                isClassicAgentMode
-                  ? "bg-primary/10 text-primary"
-                  : "bg-muted text-muted-foreground group-hover:bg-accent"
-              }`}
-            >
-              <Wrench className="h-5 w-5" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold">{t("settings.agentMode")}</div>
-              <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                {t("settings.agentModeDesc")}
-              </div>
-            </div>
-            {isClassicAgentMode ? (
-              <div className="absolute right-3 top-3">
-                <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-              </div>
-            ) : null}
-          </button>
-
-          <button
-            type="button"
+          />
+          <ExecutionModeRow
+            icon={<Cpu className="h-4.5 w-4.5" />}
+            title={t("settings.agentDevMode")}
+            description={t("settings.agentDevModeDesc")}
+            selected={isAgentDevMode}
             onClick={() =>
               setSettings((prev) =>
                 updateSystem(prev, { executionMode: "agent-dev" as ExecutionMode }),
               )
             }
-            className={`group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all ${
-              isAgentDevMode
-                ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                : "border-transparent bg-muted/40 hover:border-border hover:bg-muted/60"
-            }`}
-          >
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
-                isAgentDevMode
-                  ? "bg-primary/10 text-primary"
-                  : "bg-muted text-muted-foreground group-hover:bg-accent"
-              }`}
-            >
-              <Cpu className="h-5 w-5" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold">{t("settings.agentDevMode")}</div>
-              <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                {t("settings.agentDevModeDesc")}
-              </div>
-            </div>
-            {isAgentDevMode ? (
-              <div className="absolute right-3 top-3">
-                <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
+          />
+        </fieldset>
+      </SettingsGroup>
+
+      <SettingsGroup title={t("settings.groupGeneral")}>
+        <div>
+          <SettingsRow
+            title={t("settings.appearance")}
+            description={t("settings.appearanceDesc")}
+            control={
+              <div className="flex items-center gap-0.5 rounded-xl bg-muted/55 p-1">
+                {THEME_OPTIONS.map((theme) => (
+                  <SegmentedButton
+                    key={theme}
+                    selected={settings.theme === theme}
+                    label={getThemeLabel(theme)}
+                    icon={renderThemeIcon(theme)}
+                    onClick={() => setSettings((prev) => ({ ...prev, theme }))}
+                  />
+                ))}
               </div>
-            ) : null}
-          </button>
+            }
+          />
+
+          <SettingsRow
+            title={t("settings.language")}
+            control={
+              <Select
+                value={settings.locale}
+                onValueChange={(locale) =>
+                  setSettings((prev) => ({ ...prev, locale: locale as Locale }))
+                }
+              >
+                <SettingsSelectTrigger>
+                  <SelectValue>
+                    {settings.locale === "zh-CN" ? "🇨🇳  简体中文" : "🇺🇸  English"}
+                  </SelectValue>
+                </SettingsSelectTrigger>
+                <SettingsSelectContent>
+                  {SUPPORTED_LOCALES.map((locale) => (
+                    <SelectItem key={locale} value={locale}>
+                      {locale === "zh-CN"
+                        ? `🇨🇳  ${t("settings.chinese")}`
+                        : `🇺🇸  ${t("settings.english")}`}
+                    </SelectItem>
+                  ))}
+                </SettingsSelectContent>
+              </Select>
+            }
+          />
         </div>
-      </div>
+      </SettingsGroup>
 
-      <div className="border-t" />
+      <SettingsGroup title={t("settings.systemProxy")}>
+        <div>
+          <ProxySettingsRow
+            title={t("settings.systemProxyEnable")}
+            description={
+              systemProxy.enabled && proxyConfigValid
+                ? `${systemProxy.type === "socks5" ? "SOCKS5" : "HTTP"} · ${effectiveProxyHost}:${effectiveProxyPort}`
+                : systemProxy.enabled
+                  ? t("settings.systemProxyInvalid")
+                  : t("settings.systemProxyDisabled")
+            }
+            actionLabel={
+              proxyDetailsOpen ? t("settings.systemProxyDone") : t("settings.systemProxySettings")
+            }
+            expanded={proxyDetailsOpen}
+            onToggleDetails={() => setProxyDetailsOpen((open) => !open)}
+            switchControl={
+              <AgentActivationSwitch
+                checked={systemProxy.enabled}
+                title={t("settings.systemProxyEnable")}
+                disabled={proxyToggleDisabled}
+                onToggle={() => patchSystemProxy({ enabled: !systemProxy.enabled })}
+              />
+            }
+          />
 
-      <div className="settings-preferences-grid grid gap-4 md:grid-cols-2">
-        <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-          <div className="flex items-start gap-3">
-            <div className="space-y-1">
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                {appearanceIcon}
-                {t("settings.appearance")}
-              </div>
-            </div>
-          </div>
-
-          <div className="settings-choice-grid settings-appearance-grid grid gap-2 sm:grid-cols-3">
-            {THEME_OPTIONS.map((theme) => {
-              const selected = settings.theme === theme;
-              return (
-                <button
-                  key={theme}
-                  type="button"
-                  onClick={() => setSettings((prev) => ({ ...prev, theme }))}
-                  className={`group relative flex h-full items-start gap-3 rounded-xl border px-3.5 py-3.5 text-left transition-all ${
-                    selected
-                      ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                      : "border-border/60 bg-background/80 hover:border-border hover:bg-muted/35"
-                  }`}
+          {proxyDetailsOpen ? (
+            <div
+              id="system-proxy-details"
+              className="animate-in fade-in slide-in-from-top-1 bg-muted/10 px-5 py-4 duration-150"
+            >
+              <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
+                {t("settings.systemProxyDesc")}
+              </p>
+              {systemProxyInvalid || proxyToggleDisabled ? (
+                <p
+                  className={cn(
+                    "mb-4 text-xs leading-relaxed",
+                    systemProxyInvalid ? "text-destructive" : "text-muted-foreground",
+                  )}
                 >
-                  <div
-                    className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
-                      selected
-                        ? "bg-primary/10 text-primary"
-                        : "bg-muted text-muted-foreground group-hover:bg-accent/80"
-                    }`}
+                  {systemProxyInvalid
+                    ? t("settings.systemProxyInvalid")
+                    : t("settings.systemProxyEnableHint")}
+                </p>
+              ) : null}
+
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-[auto_minmax(0,1fr)_7rem] sm:items-start">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-muted-foreground">
+                    {t("settings.systemProxyType")}
+                  </Label>
+                  <Select
+                    value={systemProxy.type}
+                    onValueChange={(value) => patchSystemProxy({ type: value as SystemProxyType })}
                   >
-                    {renderThemeIcon(theme)}
-                  </div>
-                  <div className="min-w-0 pr-6">
-                    <div className="text-sm font-semibold">{getThemeLabel(theme)}</div>
-                  </div>
-                  {selected ? (
-                    <div className="absolute right-3 top-3">
-                      <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-                    </div>
-                  ) : null}
-                </button>
-              );
-            })}
-          </div>
-        </section>
-
-        <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-          <div className="flex items-start gap-3">
-            <div className="space-y-1">
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                <MessageSquare className="h-4 w-4 text-muted-foreground" />
-                {t("settings.language")}
+                    <SettingsSelectTrigger className="rounded-lg">
+                      <SelectValue>{systemProxy.type === "socks5" ? "SOCKS5" : "HTTP"}</SelectValue>
+                    </SettingsSelectTrigger>
+                    <SettingsSelectContent>
+                      <SelectItem value="http">HTTP</SelectItem>
+                      <SelectItem value="socks5">SOCKS5</SelectItem>
+                    </SettingsSelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-host"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyHost")}
+                  </Label>
+                  <Input
+                    id="system-proxy-host"
+                    className="rounded-lg"
+                    value={proxyHostDraft ?? systemProxy.host}
+                    placeholder="127.0.0.1"
+                    onChange={(event) => setProxyHostDraft(event.currentTarget.value)}
+                    onBlur={commitProxyHostDraft}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-port"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyPort")}
+                  </Label>
+                  <Input
+                    id="system-proxy-port"
+                    className="rounded-lg"
+                    type="number"
+                    min={1}
+                    max={65535}
+                    value={proxyPortDraft ?? (systemProxy.port > 0 ? String(systemProxy.port) : "")}
+                    placeholder={systemProxy.type === "socks5" ? "1080" : "7890"}
+                    onChange={(event) => setProxyPortDraft(event.currentTarget.value)}
+                    onBlur={commitProxyPortDraft}
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-
-          <div className="settings-choice-grid settings-language-grid grid grid-cols-2 gap-2">
-            {SUPPORTED_LOCALES.map((locale) => {
-              const selected = settings.locale === locale;
-              const localeLabel =
-                locale === "zh-CN"
-                  ? t("settings.chinese")
-                  : locale === "en-US"
-                    ? t("settings.english")
-                    : locale;
-              return (
-                <button
-                  key={locale}
-                  type="button"
-                  onClick={() => setSettings((prev) => ({ ...prev, locale }))}
-                  className={`group relative flex items-center gap-3 rounded-xl border px-3.5 py-3 text-left transition-all ${
-                    selected
-                      ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                      : "border-border/60 bg-background/80 hover:border-border hover:bg-muted/35"
-                  }`}
-                >
-                  <span className="text-base leading-none">{locale === "zh-CN" ? "🇨🇳" : "🇺🇸"}</span>
-                  <div className="min-w-0 flex-1 pr-5">
-                    <div className="truncate text-sm font-semibold">{localeLabel}</div>
-                    <div className="mt-0.5 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
-                      {locale}
-                    </div>
-                  </div>
-                  {selected ? (
-                    <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                      <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
+
+              <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-username"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyUsername")}
+                  </Label>
+                  <Input
+                    id="system-proxy-username"
+                    className="rounded-lg"
+                    value={proxyUsernameDraft ?? systemProxy.username}
+                    onChange={(event) => setProxyUsernameDraft(event.currentTarget.value)}
+                    onBlur={commitProxyUsernameDraft}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-password"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyPassword")}
+                  </Label>
+                  <Input
+                    id="system-proxy-password"
+                    className="rounded-lg"
+                    type="password"
+                    value={proxyPasswordDraft ?? systemProxy.password}
+                    onChange={(event) => setProxyPasswordDraft(event.currentTarget.value)}
+                    onBlur={commitProxyPasswordDraft}
+                  />
+                  {systemProxy.passwordConfigured &&
+                  !(proxyPasswordDraft ?? systemProxy.password).trim() ? (
+                    <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                      <span>{t("settings.systemProxyPasswordConfigured")}</span>
+                      <button
+                        type="button"
+                        className="underline-offset-2 hover:text-foreground hover:underline"
+                        onClick={() => {
+                          setProxyPasswordDraft(null);
+                          patchSystemProxy({ password: "", passwordConfigured: false });
+                        }}
+                      >
+                        {t("settings.systemProxyPasswordClear")}
+                      </button>
                     </div>
                   ) : null}
-                </button>
-              );
-            })}
-          </div>
-        </section>
-      </div>
-
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-            <Globe className="h-4 w-4 text-muted-foreground" />
-            {t("settings.systemProxy")}
-          </div>
-          <AgentActivationSwitch
-            checked={systemProxy.enabled}
-            title={t("settings.systemProxyEnable")}
-            disabled={proxyToggleDisabled}
-            onToggle={() => patchSystemProxy({ enabled: !systemProxy.enabled })}
-          />
-        </div>
-        <p className="text-xs text-muted-foreground">{t("settings.systemProxyDesc")}</p>
-        {systemProxyInvalid ? (
-          <p className="text-xs text-destructive">{t("settings.systemProxyInvalid")}</p>
-        ) : proxyToggleDisabled ? (
-          <p className="text-xs text-muted-foreground">{t("settings.systemProxyEnableHint")}</p>
-        ) : null}
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-12 lg:items-start">
-          <div className="space-y-1.5 sm:col-span-2 lg:col-span-2">
-            <Label className="text-xs font-medium text-muted-foreground">
-              {t("settings.systemProxyType")}
-            </Label>
-            <Select
-              value={systemProxy.type}
-              onValueChange={(value) => patchSystemProxy({ type: value as SystemProxyType })}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue>{systemProxy.type === "socks5" ? "SOCKS5" : "HTTP"}</SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="http">HTTP</SelectItem>
-                <SelectItem value="socks5">SOCKS5</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5 lg:col-span-4">
-            <Label
-              htmlFor="system-proxy-host"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyHost")}
-            </Label>
-            <Input
-              id="system-proxy-host"
-              value={proxyHostDraft ?? systemProxy.host}
-              placeholder="127.0.0.1"
-              onChange={(event) => setProxyHostDraft(event.currentTarget.value)}
-              onBlur={commitProxyHostDraft}
-            />
-          </div>
-          <div className="space-y-1.5 lg:col-span-2">
-            <Label
-              htmlFor="system-proxy-port"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyPort")}
-            </Label>
-            <Input
-              id="system-proxy-port"
-              type="number"
-              min={1}
-              max={65535}
-              value={proxyPortDraft ?? (systemProxy.port > 0 ? String(systemProxy.port) : "")}
-              placeholder={systemProxy.type === "socks5" ? "1080" : "7890"}
-              onChange={(event) => setProxyPortDraft(event.currentTarget.value)}
-              onBlur={commitProxyPortDraft}
-            />
-          </div>
-          <div className="space-y-1.5 lg:col-span-2">
-            <Label
-              htmlFor="system-proxy-username"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyUsername")}
-            </Label>
-            <Input
-              id="system-proxy-username"
-              value={proxyUsernameDraft ?? systemProxy.username}
-              onChange={(event) => setProxyUsernameDraft(event.currentTarget.value)}
-              onBlur={commitProxyUsernameDraft}
-            />
-          </div>
-          <div className="space-y-1.5 lg:col-span-2">
-            <Label
-              htmlFor="system-proxy-password"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyPassword")}
-            </Label>
-            <Input
-              id="system-proxy-password"
-              type="password"
-              value={proxyPasswordDraft ?? systemProxy.password}
-              onChange={(event) => setProxyPasswordDraft(event.currentTarget.value)}
-              onBlur={commitProxyPasswordDraft}
-            />
-            {systemProxy.passwordConfigured &&
-            !(proxyPasswordDraft ?? systemProxy.password).trim() ? (
-              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
-                <span>{t("settings.systemProxyPasswordConfigured")}</span>
-                <button
-                  type="button"
-                  className="underline-offset-2 hover:text-foreground hover:underline"
-                  onClick={() => {
-                    setProxyPasswordDraft(null);
-                    patchSystemProxy({ password: "", passwordConfigured: false });
-                  }}
-                >
-                  {t("settings.systemProxyPasswordClear")}
-                </button>
+                </div>
               </div>
-            ) : null}
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <ScanText className="h-4 w-4 text-muted-foreground" />
-          {t("settings.fontFamily")}
+            </div>
+          ) : null}
         </div>
+      </SettingsGroup>
 
-        <div className="grid gap-3 md:grid-cols-3">
+      <SettingsGroup title={t("settings.fontFamily")}>
+        <div>
           {FONT_FAMILY_FIELDS.map(({ key, labelKey }) => {
             const currentValue = settings.customSettings[key];
             const selectValue = toFontFamilySelectValue(
@@ -595,124 +676,108 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
             const showCustomInput = selectValue === FONT_FAMILY_CUSTOM_SELECT_VALUE;
             const customDraft = customFontDrafts[key] ?? currentValue;
             return (
-              <div key={key} className="space-y-1.5">
-                <Label
-                  htmlFor={`${key}-font-family`}
-                  className="text-xs font-medium text-muted-foreground"
-                >
-                  {t(labelKey)}
-                </Label>
-                <div className="flex min-w-0 items-center gap-2">
-                  <Select
-                    value={selectValue}
-                    onValueChange={(value) => handleFontFamilySelect(key, value)}
-                  >
-                    <SelectTrigger
-                      id={`${key}-font-family`}
-                      className={showCustomInput ? "w-[9.5rem] shrink-0" : "w-full"}
+              <SettingsRow
+                key={key}
+                title={t(labelKey)}
+                control={
+                  <div className="flex w-full min-w-0 flex-col items-start gap-2 sm:w-auto sm:items-end">
+                    <Select
+                      value={selectValue}
+                      onValueChange={(value) => handleFontFamilySelect(key, value)}
                     >
-                      <SelectValue placeholder={t("settings.fontFamilyDefault")}>
-                        {(value) => {
-                          if (value === FONT_FAMILY_DEFAULT_SELECT_VALUE) {
-                            return t("settings.fontFamilyDefault");
-                          }
-                          if (value === FONT_FAMILY_CUSTOM_SELECT_VALUE) {
-                            return t("settings.fontFamilyCustom");
-                          }
-                          const match = fontFamilyOptions.find((option) => option.value === value);
-                          return match?.label ?? String(value ?? "");
-                        }}
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent className="max-h-72">
-                      <SelectItem value={FONT_FAMILY_DEFAULT_SELECT_VALUE}>
-                        {t("settings.fontFamilyDefault")}
-                      </SelectItem>
-                      <SelectItem value={FONT_FAMILY_CUSTOM_SELECT_VALUE}>
-                        {t("settings.fontFamilyCustom")}
-                      </SelectItem>
-                      {fontFamilyOptions.map((option) => (
-                        <SelectItem
-                          key={option.value}
-                          value={option.value}
-                          style={{ fontFamily: option.value }}
-                        >
-                          {option.label}
+                      <SettingsSelectTrigger id={`${key}-font-family`}>
+                        <SelectValue placeholder={t("settings.fontFamilyDefault")}>
+                          {(value) => {
+                            if (value === FONT_FAMILY_DEFAULT_SELECT_VALUE) {
+                              return t("settings.fontFamilyDefault");
+                            }
+                            if (value === FONT_FAMILY_CUSTOM_SELECT_VALUE) {
+                              return t("settings.fontFamilyCustom");
+                            }
+                            const match = fontFamilyOptions.find(
+                              (option) => option.value === value,
+                            );
+                            return match?.label ?? String(value ?? "");
+                          }}
+                        </SelectValue>
+                      </SettingsSelectTrigger>
+                      <SettingsSelectContent className="max-h-72">
+                        <SelectItem value={FONT_FAMILY_DEFAULT_SELECT_VALUE}>
+                          {t("settings.fontFamilyDefault")}
                         </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  {showCustomInput ? (
-                    <Input
-                      id={`${key}-custom-input`}
-                      className="min-w-0 flex-1"
-                      value={customDraft}
-                      list="font-family-suggestions"
-                      spellCheck={false}
-                      autoComplete="off"
-                      placeholder={t("settings.fontFamilyPlaceholder")}
-                      onChange={(event) =>
-                        setCustomFontDrafts((current) => ({
-                          ...current,
-                          [key]: event.currentTarget.value,
-                        }))
-                      }
-                      onBlur={() => commitCustomFontFamily(key)}
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter") {
-                          event.currentTarget.blur();
+                        <SelectItem value={FONT_FAMILY_CUSTOM_SELECT_VALUE}>
+                          {t("settings.fontFamilyCustom")}
+                        </SelectItem>
+                        {fontFamilyOptions.map((option) => (
+                          <SelectItem
+                            key={option.value}
+                            value={option.value}
+                            style={{ fontFamily: option.value }}
+                          >
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SettingsSelectContent>
+                    </Select>
+                    {showCustomInput ? (
+                      <Input
+                        id={`${key}-custom-input`}
+                        className="w-full min-w-0 rounded-xl sm:w-[240px]"
+                        value={customDraft}
+                        list="font-family-suggestions"
+                        spellCheck={false}
+                        autoComplete="off"
+                        placeholder={t("settings.fontFamilyPlaceholder")}
+                        onChange={(event) =>
+                          setCustomFontDrafts((current) => ({
+                            ...current,
+                            [key]: event.currentTarget.value,
+                          }))
                         }
-                      }}
-                    />
-                  ) : null}
-                </div>
-              </div>
+                        onBlur={() => commitCustomFontFamily(key)}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") {
+                            event.currentTarget.blur();
+                          }
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                }
+              />
             );
           })}
         </div>
-        <datalist id="font-family-suggestions">
-          {localFontFamilies.map((family) => (
-            <option key={family} value={family} />
-          ))}
-        </datalist>
-      </section>
-
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <ScanText className="h-4 w-4 text-muted-foreground" />
-          {t("settings.fontSize")}
-        </div>
+      </SettingsGroup>
 
-        <div className="space-y-2">
+      <SettingsGroup title={t("settings.fontSize")}>
+        <div>
           {fontScaleZones.map((zone) => (
-            <div
+            <SettingsRow
               key={zone.key}
-              className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-border/60 bg-background/80 px-3.5 py-2.5"
-            >
-              <div className="text-sm font-medium text-foreground">{zone.label}</div>
-              <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-0.5">
-                {FONT_SCALE_OPTIONS.map((value) => {
-                  const selected = fontScale[zone.key] === value;
-                  return (
-                    <button
+              title={zone.label}
+              control={
+                <div className="flex items-center gap-0.5 rounded-xl bg-muted/55 p-1">
+                  {FONT_SCALE_OPTIONS.map((value) => (
+                    <SegmentedButton
                       key={value}
-                      type="button"
+                      selected={fontScale[zone.key] === value}
+                      label={getFontScaleLabel(value)}
                       onClick={() => setZoneFontScale(zone.key, value)}
-                      className={`rounded-md px-2.5 py-1 text-xs transition-all ${
-                        selected
-                          ? "bg-background font-semibold text-foreground shadow-sm"
-                          : "text-muted-foreground hover:text-foreground"
-                      }`}
-                    >
-                      {getFontScaleLabel(value)}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
+                    />
+                  ))}
+                </div>
+              }
+            />
           ))}
         </div>
-      </section>
+      </SettingsGroup>
+
+      <datalist id="font-family-suggestions">
+        {localFontFamilies.map((family) => (
+          <option key={family} value={family} />
+        ))}
+      </datalist>
     </div>
   );
 }
diff --git a/crates/agent-gateway/web/src/pages/settings/shared.tsx b/crates/agent-gateway/web/src/pages/settings/shared.tsx
index 6296d3570..c8de027d4 100644
--- a/crates/agent-gateway/web/src/pages/settings/shared.tsx
+++ b/crates/agent-gateway/web/src/pages/settings/shared.tsx
@@ -1,3 +1,6 @@
+import { Switch } from "../../components/ui/switch";
+import { cn } from "../../lib/shared/utils";
+
 export {
   ConfirmActionPopover,
   ConfirmDeletePopover,
@@ -6,11 +9,12 @@ export {
 export function PromptTag({ label, muted = false }: { label: string; muted?: boolean }) {
   return (
     <span
-      className={`inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] leading-none ${
+      className={cn(
+        "inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] leading-none",
         muted
           ? "border-border/60 bg-muted/40 text-muted-foreground"
-          : "border-border/70 bg-muted/60 text-foreground/80"
-      }`}
+          : "border-border/70 bg-muted/60 text-foreground/80",
+      )}
     >
       {label}
     </span>
@@ -27,28 +31,13 @@ export function AgentActivationSwitch(props: {
   const { checked, title, disabled = false, className, onToggle } = props;
 
   return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      aria-disabled={disabled}
+    <Switch
+      checked={checked}
+      disabled={disabled}
       title={title}
       aria-label={title}
-      disabled={disabled}
-      onClick={disabled ? undefined : onToggle}
-      className={`relative h-5 w-9 shrink-0 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 ${
-        checked
-          ? "bg-sky-500"
-          : disabled
-            ? "bg-muted-foreground/15"
-            : "bg-muted-foreground/20 hover:bg-muted-foreground/30"
-      } ${disabled ? "cursor-not-allowed opacity-60" : ""} ${className ?? ""}`}
-    >
-      <span
-        className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
-          checked ? "translate-x-4" : "translate-x-0"
-        }`}
-      />
-    </button>
+      onCheckedChange={onToggle}
+      className={className}
+    />
   );
 }
diff --git a/crates/agent-gui/src/components/ui/switch.tsx b/crates/agent-gui/src/components/ui/switch.tsx
new file mode 100644
index 000000000..ff85f65a0
--- /dev/null
+++ b/crates/agent-gui/src/components/ui/switch.tsx
@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react";
+import * as React from "react";
+
+import { cn } from "../../lib/shared/utils";
+
+export const Switch = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    data-slot="switch"
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-muted-foreground/20 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 data-[checked]:bg-sky-500 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60 data-[unchecked]:hover:bg-muted-foreground/30",
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      data-slot="switch-thumb"
+      className="pointer-events-none block h-4 w-4 translate-x-0.5 rounded-full bg-white shadow-sm transition-transform data-[checked]:translate-x-[18px]"
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = "Switch";
diff --git a/crates/agent-gui/src/i18n/config.ts b/crates/agent-gui/src/i18n/config.ts
index 5bba8e173..1f6d47f2e 100644
--- a/crates/agent-gui/src/i18n/config.ts
+++ b/crates/agent-gui/src/i18n/config.ts
@@ -963,6 +963,8 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.groupOther": "其他",
     "settings.backToChat": "返回对话",
     "settings.title": "设置",
+    "settings.searchPlaceholder": "搜索设置…",
+    "settings.searchNoResults": "未找到匹配的设置",
 
     /* ── Settings Memory ── */
     "settings.memoryTitle": "记忆",
@@ -1203,6 +1205,9 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.systemProxyInvalid":
       "代理已启用，请填写有效的代理地址和端口；配置有效前相关请求将直接报错。",
     "settings.systemProxyEnableHint": "请先填写有效的代理地址和端口后再启用代理。",
+    "settings.systemProxyDisabled": "当前未启用，仅在需要时配置并开启。",
+    "settings.systemProxySettings": "代理设置",
+    "settings.systemProxyDone": "完成",
     "settings.systemProxyType": "代理类型",
     "settings.systemProxyHost": "代理地址",
     "settings.systemProxyPort": "端口",
@@ -3241,6 +3246,8 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.groupOther": "Other",
     "settings.backToChat": "Back to Chat",
     "settings.title": "Settings",
+    "settings.searchPlaceholder": "Search settings…",
+    "settings.searchNoResults": "No matching settings",
 
     /* ── Settings Memory ── */
     "settings.memoryTitle": "Memory",
@@ -3498,6 +3505,9 @@ export const translations: Record<Locale, Record<string, string>> = {
       "The proxy is enabled. Enter a valid host and port; affected requests fail until the configuration is valid.",
     "settings.systemProxyEnableHint":
       "Enter a valid proxy host and port before enabling the proxy.",
+    "settings.systemProxyDisabled": "Currently off. Configure and enable it only when needed.",
+    "settings.systemProxySettings": "Proxy settings",
+    "settings.systemProxyDone": "Done",
     "settings.systemProxyType": "Proxy type",
     "settings.systemProxyHost": "Proxy host",
     "settings.systemProxyPort": "Port",
diff --git a/crates/agent-gui/src/pages/SettingsPage.tsx b/crates/agent-gui/src/pages/SettingsPage.tsx
index 05422f7cf..9c863c611 100644
--- a/crates/agent-gui/src/pages/SettingsPage.tsx
+++ b/crates/agent-gui/src/pages/SettingsPage.tsx
@@ -9,6 +9,7 @@ import {
   Info,
   Key,
   Keyboard,
+  Search,
   Settings2,
   Wrench,
   Zap,
@@ -16,6 +17,7 @@ import {
 import { isMacOsTauri, MacOsTitleBarSpacer } from "../components/MacOsTitleBarSpacer";
 
 import { useLocale } from "../i18n";
+import { cn } from "../lib/shared/utils";
 import { AboutSection } from "./settings/AboutSection";
 import { AgentsSection } from "./settings/AgentsSection";
 import { CronSection } from "./settings/CronSection";
@@ -43,8 +45,6 @@ function getSaveIndicator(state: SettingsPageProps["saveState"], t: (key: string
         text: t("settings.saveError"),
         title: state.message,
       };
-    case "saved":
-    case "idle":
     default:
       return {
         dotClass: "bg-emerald-500",
@@ -66,22 +66,17 @@ function NavItem({ icon, label, active, onClick }: NavItemProps) {
     <button
       type="button"
       onClick={onClick}
-      className={`settings-nav-item group relative flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-left text-sm transition-all duration-150 ${
+      className={cn(
+        "settings-nav-item group relative flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm transition-all duration-150",
         active
-          ? "settings-nav-item-active bg-primary/10 font-medium text-primary"
-          : "text-muted-foreground hover:bg-accent/60 hover:text-foreground"
-      }`}
+          ? "settings-nav-item-active bg-accent font-medium text-foreground"
+          : "text-foreground/75 hover:bg-accent/60 hover:text-foreground",
+      )}
     >
-      <span
-        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-md transition-colors ${
-          active
-            ? "bg-primary/15 text-primary"
-            : "bg-muted/60 text-muted-foreground group-hover:bg-accent group-hover:text-foreground"
-        }`}
-      >
+      <span className="flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground transition-colors group-hover:text-foreground">
         {icon}
       </span>
-      <span className="truncate leading-none">{label}</span>
+      <span className="truncate leading-tight">{label}</span>
     </button>
   );
 }
@@ -144,20 +139,24 @@ export function SettingsPage(props: SettingsPageProps) {
   const { t } = useLocale();
   const [section, setSection] = useState<SectionId>(initialSection);
   const [pendingProviderId, setPendingProviderId] = useState(initialProviderId);
+  const [navQuery, setNavQuery] = useState("");
 
-  const sectionLabels: Record<SectionId, string> = {
-    system: t("settings.navSystem"),
-    shortcuts: t("settings.navShortcuts"),
-    systemTools: t("settings.navSystemTools"),
-    providers: t("settings.navProviders"),
-    agents: t("settings.navAgents"),
-    ssh: t("settings.navSsh"),
-    memory: t("settings.navMemory"),
-    hooks: t("settings.navHooks"),
-    cron: t("settings.navCron"),
-    remote: t("settings.navRemote"),
-    about: t("settings.navAbout"),
-  };
+  const sectionLabels = useMemo<Record<SectionId, string>>(
+    () => ({
+      system: t("settings.navSystem"),
+      shortcuts: t("settings.navShortcuts"),
+      systemTools: t("settings.navSystemTools"),
+      providers: t("settings.navProviders"),
+      agents: t("settings.navAgents"),
+      ssh: t("settings.navSsh"),
+      memory: t("settings.navMemory"),
+      hooks: t("settings.navHooks"),
+      cron: t("settings.navCron"),
+      remote: t("settings.navRemote"),
+      about: t("settings.navAbout"),
+    }),
+    [t],
+  );
 
   const hiddenSectionSet = useMemo(() => new Set(hiddenSections), [hiddenSections]);
   const navGroups = useMemo(
@@ -171,6 +170,16 @@ export function SettingsPage(props: SettingsPageProps) {
     [hiddenSectionSet, sectionLabels, t],
   );
   const allNavItems = useMemo(() => navGroups.flatMap((g) => g.items), [navGroups]);
+  const visibleNavGroups = useMemo(() => {
+    const query = navQuery.trim().toLocaleLowerCase();
+    if (!query) return navGroups;
+    return navGroups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => item.label.toLocaleLowerCase().includes(query)),
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [navGroups, navQuery]);
 
   useEffect(() => {
     setSection(initialSection);
@@ -234,30 +243,35 @@ export function SettingsPage(props: SettingsPageProps) {
   return (
     <div className="flex h-full flex-col bg-background">
       <div className="flex min-h-0 flex-1">
-        <aside className="settings-sidebar flex w-56 shrink-0 flex-col border-r border-border/60 bg-muted/20">
+        <aside className="settings-sidebar flex w-64 shrink-0 flex-col border-r border-border/60 bg-muted/30">
           {onMac && <div data-tauri-drag-region className="h-[38px] shrink-0" />}
-          <div className="border-b border-border/60 px-3 pb-3 pt-3">
+          <div className="px-3 pb-2 pt-3">
             <button
               type="button"
               onClick={onBack}
-              className="settings-back-button flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
+              className="settings-back-button flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
             >
-              <ArrowLeft className="h-3.5 w-3.5 shrink-0" />
+              <ArrowLeft className="h-4 w-4 shrink-0" />
               <span>{t("settings.backToChat")}</span>
             </button>
 
-            <div className="mt-3 flex items-center gap-2.5 px-1">
-              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10">
-                <Settings2 className="h-3.5 w-3.5 text-primary" />
-              </div>
-              <span className="text-sm font-semibold tracking-tight">{t("settings.title")}</span>
+            <div className="relative mt-2">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/75" />
+              <input
+                type="search"
+                value={navQuery}
+                onChange={(event) => setNavQuery(event.currentTarget.value)}
+                placeholder={t("settings.searchPlaceholder")}
+                aria-label={t("settings.searchPlaceholder")}
+                className="h-9 w-full rounded-xl border border-border/70 bg-background/85 pl-9 pr-3 text-sm shadow-xs outline-none placeholder:text-muted-foreground/70 focus:border-border focus:ring-2 focus:ring-foreground/5"
+              />
             </div>
           </div>
 
           <nav className="settings-nav flex-1 overflow-y-auto px-3 py-3">
-            {navGroups.map((group, gi) => (
-              <div key={group.label} className={gi > 0 ? "mt-4" : ""}>
-                <div className="mb-1 px-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
+            {visibleNavGroups.map((group, gi) => (
+              <div key={group.label} className={cn(gi > 0 && "mt-5")}>
+                <div className="mb-1 px-3 text-xs font-medium text-muted-foreground/65">
                   {group.label}
                 </div>
                 <div className="space-y-0.5">
@@ -273,6 +287,11 @@ export function SettingsPage(props: SettingsPageProps) {
                 </div>
               </div>
             ))}
+            {visibleNavGroups.length === 0 ? (
+              <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+                {t("settings.searchNoResults")}
+              </div>
+            ) : null}
           </nav>
 
           <div className="border-t border-border/60 px-3 py-2.5">
@@ -280,7 +299,7 @@ export function SettingsPage(props: SettingsPageProps) {
               className="flex items-center gap-1.5 px-2.5 text-[11px] text-muted-foreground"
               title={saveIndicator.title}
             >
-              <div className={`h-1.5 w-1.5 rounded-full ${saveIndicator.dotClass}`} />
+              <div className={cn("h-1.5 w-1.5 rounded-full", saveIndicator.dotClass)} />
               {saveIndicator.text}
             </div>
           </div>
@@ -288,26 +307,34 @@ export function SettingsPage(props: SettingsPageProps) {
 
         <main className="flex min-w-0 flex-1 flex-col">
           <MacOsTitleBarSpacer />
-          <div className="border-b px-6 py-3.5">
-            <div key={section} className="settings-section-title-enter text-base font-semibold">
-              {sectionLabels[section]}
+          <div className="px-8 pb-2 pt-8">
+            <div className={cn("w-full", section === "system" && "mx-auto max-w-[920px]")}>
+              <div
+                key={section}
+                className="settings-section-title-enter text-[28px] font-semibold tracking-tight"
+              >
+                {sectionLabels[section]}
+              </div>
             </div>
           </div>
 
           <div
             key={section}
-            className={`settings-section-enter flex-1 px-6 py-5 ${
+            className={cn(
+              "settings-section-enter flex-1 px-8 pb-8 pt-6",
               section === "hooks" || section === "providers" || section === "memory"
                 ? "flex min-h-0 flex-col overflow-hidden"
-                : "overflow-auto"
-            }`}
+                : "overflow-auto",
+            )}
           >
             <div
-              className={`settings-section-shell ${
+              className={cn(
+                "settings-section-shell",
+                section === "system" && "mx-auto w-full max-w-[920px]",
                 section === "hooks" || section === "providers" || section === "memory"
                   ? "flex min-h-0 flex-1 flex-col"
-                  : "min-h-full"
-              }`}
+                  : "min-h-full",
+              )}
             >
               {sectionContent}
             </div>
diff --git a/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx b/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx
index 8088af59d..a4c084df5 100644
--- a/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx
+++ b/crates/agent-gui/src/pages/settings/SystemSettingsForm.tsx
@@ -1,16 +1,13 @@
-import { useEffect, useMemo, useState } from "react";
+import { type ComponentProps, type ReactNode, useEffect, useMemo, useState } from "react";
 import {
   CheckCircle2,
+  ChevronRight,
   Cpu,
-  Globe,
-  LogOut,
   MessageSquare,
-  Minimize2,
   MonitorSmartphone,
   Moon,
-  ScanText,
+  Settings2,
   Sun,
-  Terminal,
   Wrench,
 } from "../../components/icons";
 import { Input } from "../../components/ui/input";
@@ -22,10 +19,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../components/ui/select";
-import { SUPPORTED_LOCALES, useLocale } from "../../i18n";
+import { type Locale, SUPPORTED_LOCALES, useLocale } from "../../i18n";
 import { inferRuntimePlatform } from "../../lib/runtimePlatform";
 import {
-  CLOSE_WINDOW_BEHAVIOR_OPTIONS,
+  type CLOSE_WINDOW_BEHAVIOR_OPTIONS,
   type ExecutionMode,
   type FontScaleSettings,
   isValidSystemProxyHost,
@@ -36,6 +33,7 @@ import {
   updateCustomSettings,
   updateSystem,
 } from "../../lib/settings";
+import { cn } from "../../lib/shared/utils";
 import {
   buildFontFamilySelectOptions,
   FONT_FAMILY_CUSTOM_SELECT_VALUE,
@@ -54,6 +52,193 @@ const FONT_FAMILY_FIELDS = ["interfaceFontFamily", "chatFontFamily", "codeFontFa
 
 type FontFamilySettingKey = (typeof FONT_FAMILY_FIELDS)[number];
 
+type SettingsGroupProps = {
+  title: string;
+  children: ReactNode;
+};
+
+function SettingsGroup({ title, children }: SettingsGroupProps) {
+  return (
+    <section className="space-y-2.5">
+      <h2 className="px-1 text-[15px] font-semibold tracking-tight text-foreground">{title}</h2>
+      <div className="overflow-hidden rounded-2xl border border-border/75 bg-card shadow-[0_1px_2px_hsl(var(--foreground)/0.02)]">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+type SettingsSelectTriggerProps = ComponentProps<typeof SelectTrigger>;
+
+function SettingsSelectTrigger({ className = "", ...props }: SettingsSelectTriggerProps) {
+  return (
+    <SelectTrigger
+      className={cn(
+        "h-8 w-fit max-w-[260px] gap-1.5 whitespace-nowrap rounded-[10px] border-border/65 bg-background px-2.5 py-0 text-[13px] font-normal leading-none shadow-[0_1px_2px_hsl(var(--foreground)/0.035)] transition-colors hover:bg-muted/25 focus-visible:ring-2 focus-visible:ring-foreground/10 [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:opacity-40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type SettingsSelectContentProps = ComponentProps<typeof SelectContent>;
+
+function SettingsSelectContent({ className = "", ...props }: SettingsSelectContentProps) {
+  return (
+    <SelectContent
+      className={cn(
+        "rounded-xl border-border/70 shadow-[0_10px_30px_hsl(var(--foreground)/0.1)] [&_[role=option]]:min-h-8 [&_[role=option]]:rounded-lg [&_[role=option]]:text-[13px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type SettingsRowProps = {
+  title: string;
+  description?: string;
+  control: ReactNode;
+  className?: string;
+};
+
+function SettingsRow({ title, description, control, className = "" }: SettingsRowProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[72px] flex-col gap-3 px-5 py-4 after:pointer-events-none after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px after:bg-border/60 after:content-[''] last:after:hidden sm:flex-row sm:items-center sm:justify-between",
+        className,
+      )}
+    >
+      <div className="min-w-0 flex-1 pr-2">
+        <div className="text-sm font-medium text-foreground">{title}</div>
+        {description ? (
+          <p className="mt-0.5 max-w-2xl text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      <div className="flex w-full items-center sm:w-auto sm:shrink-0 sm:justify-end">{control}</div>
+    </div>
+  );
+}
+
+type ProxySettingsRowProps = {
+  title: string;
+  description: string;
+  actionLabel: string;
+  expanded: boolean;
+  switchControl: ReactNode;
+  onToggleDetails: () => void;
+};
+
+function ProxySettingsRow({
+  title,
+  description,
+  actionLabel,
+  expanded,
+  switchControl,
+  onToggleDetails,
+}: ProxySettingsRowProps) {
+  return (
+    <div className="relative flex min-h-[76px] flex-col gap-3 px-5 py-4 after:pointer-events-none after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px after:bg-border/60 after:content-[''] last:after:hidden sm:flex-row sm:items-center">
+      <button
+        type="button"
+        aria-expanded={expanded}
+        aria-controls="system-proxy-details"
+        onClick={onToggleDetails}
+        className="group flex min-w-0 flex-1 items-center justify-between gap-4 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-foreground/10"
+      >
+        <span className="min-w-0 flex-1">
+          <span className="block text-sm font-medium text-foreground">{title}</span>
+          <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </span>
+        </span>
+        <span className="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-border/70 bg-background px-3 py-2 text-xs font-medium text-foreground/80 shadow-xs transition-colors group-hover:bg-muted/45">
+          <Settings2 className="h-3.5 w-3.5 text-muted-foreground" />
+          <span>{actionLabel}</span>
+          <ChevronRight
+            className={cn(
+              "h-3.5 w-3.5 text-muted-foreground transition-transform",
+              expanded && "rotate-90",
+            )}
+          />
+        </span>
+      </button>
+      <div className="flex shrink-0 items-center sm:border-l sm:border-border/60 sm:pl-4">
+        {switchControl}
+      </div>
+    </div>
+  );
+}
+
+type ExecutionModeRowProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  selected: boolean;
+  onClick: () => void;
+};
+
+function ExecutionModeRow({ icon, title, description, selected, onClick }: ExecutionModeRowProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onClick}
+      className="group relative flex w-full items-center gap-3 px-5 py-4 text-left transition-colors after:pointer-events-none after:absolute after:bottom-0 after:left-5 after:right-5 after:h-px after:bg-border/60 after:content-[''] last:after:hidden hover:bg-muted/20"
+    >
+      <span
+        className={cn(
+          "flex h-5 w-5 shrink-0 items-center justify-center transition-colors",
+          selected
+            ? "text-foreground/70"
+            : "text-muted-foreground/45 group-hover:text-foreground/60",
+        )}
+      >
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm font-medium text-foreground">{title}</span>
+        <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
+          {description}
+        </span>
+      </span>
+      <span className="ml-2 flex h-5 w-5 shrink-0 items-center justify-center">
+        {selected ? <CheckCircle2 className="h-4.5 w-4.5 text-foreground/80" /> : null}
+      </span>
+    </button>
+  );
+}
+
+type SegmentedButtonProps = {
+  selected: boolean;
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+};
+
+function SegmentedButton({ selected, label, icon, onClick }: SegmentedButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs transition-all",
+        selected
+          ? "bg-background font-medium text-foreground shadow-sm ring-1 ring-border/70"
+          : "text-muted-foreground hover:text-foreground",
+      )}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
+
 export function SystemSettingsForm(props: SettingsSectionProps) {
   const { settings, setSettings } = props;
   const { t } = useLocale();
@@ -63,14 +248,6 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   const executionMode = settings.system.executionMode;
   const isClassicAgentMode = executionMode === "tools";
   const isAgentDevMode = executionMode === "agent-dev";
-  const appearanceIcon =
-    settings.theme === "system" ? (
-      <MonitorSmartphone className="h-4 w-4 text-muted-foreground" />
-    ) : settings.theme === "dark" ? (
-      <Moon className="h-4 w-4 text-muted-foreground" />
-    ) : (
-      <Sun className="h-4 w-4 text-muted-foreground" />
-    );
 
   function getThemeLabel(theme: Theme) {
     if (theme === "light") return t("settings.light");
@@ -79,9 +256,9 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   }
 
   function renderThemeIcon(theme: Theme) {
-    if (theme === "light") return <Sun className="h-4.5 w-4.5" />;
-    if (theme === "dark") return <Moon className="h-4.5 w-4.5" />;
-    return <MonitorSmartphone className="h-4.5 w-4.5" />;
+    if (theme === "light") return <Sun className="h-3.5 w-3.5 opacity-60" />;
+    if (theme === "dark") return <Moon className="h-3.5 w-3.5 opacity-60" />;
+    return <MonitorSmartphone className="h-3.5 w-3.5 opacity-60" />;
   }
 
   const fontScale = settings.customSettings.fontScale;
@@ -215,6 +392,7 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
   const systemProxyInvalid = systemProxy.enabled && !proxyConfigValid;
   // 配置无效且当前未启用时禁止开启开关（护栏 A）；已启用时始终允许关闭。
   const proxyToggleDisabled = !systemProxy.enabled && !proxyConfigValid;
+  const [proxyDetailsOpen, setProxyDetailsOpen] = useState(false);
 
   function patchSystemProxy(patch: Partial<SystemProxyConfig>) {
     setSettings((prev) =>
@@ -253,439 +431,314 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
     }
   }
 
-  return (
-    <div className="space-y-6">
-      <div className="space-y-3">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <Terminal className="h-4 w-4 text-muted-foreground" />
-          {t("settings.executionMode")}
-        </div>
+  const closeWindowDescription =
+    settings.closeWindowBehavior === "minimize"
+      ? t("settings.closeWindowMinimizeDesc")
+      : t("settings.closeWindowExitDesc");
 
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
-          <button
-            type="button"
+  return (
+    <div className="settings-system-section space-y-9 pb-10">
+      <SettingsGroup title={t("settings.executionMode")}>
+        <fieldset aria-label={t("settings.executionMode")} className="m-0 min-w-0 border-0 p-0">
+          <ExecutionModeRow
+            icon={<MessageSquare className="h-4.5 w-4.5" />}
+            title={t("settings.chatMode")}
+            description={t("settings.chatModeDesc")}
+            selected={executionMode === "text"}
             onClick={() =>
               setSettings((prev) => updateSystem(prev, { executionMode: "text" as ExecutionMode }))
             }
-            className={`group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all ${
-              executionMode === "text"
-                ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                : "border-transparent bg-muted/40 hover:border-border hover:bg-muted/60"
-            }`}
-          >
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
-                executionMode === "text"
-                  ? "bg-primary/10 text-primary"
-                  : "bg-muted text-muted-foreground group-hover:bg-accent"
-              }`}
-            >
-              <MessageSquare className="h-5 w-5" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold">{t("settings.chatMode")}</div>
-              <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                {t("settings.chatModeDesc")}
-              </div>
-            </div>
-            {executionMode === "text" ? (
-              <div className="absolute right-3 top-3">
-                <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-              </div>
-            ) : null}
-          </button>
-
-          <button
-            type="button"
+          />
+          <ExecutionModeRow
+            icon={<Wrench className="h-4.5 w-4.5" />}
+            title={t("settings.agentMode")}
+            description={t("settings.agentModeDesc")}
+            selected={isClassicAgentMode}
             onClick={() =>
               setSettings((prev) => updateSystem(prev, { executionMode: "tools" as ExecutionMode }))
             }
-            className={`group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all ${
-              isClassicAgentMode
-                ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                : "border-transparent bg-muted/40 hover:border-border hover:bg-muted/60"
-            }`}
-          >
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
-                isClassicAgentMode
-                  ? "bg-primary/10 text-primary"
-                  : "bg-muted text-muted-foreground group-hover:bg-accent"
-              }`}
-            >
-              <Wrench className="h-5 w-5" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold">{t("settings.agentMode")}</div>
-              <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                {t("settings.agentModeDesc")}
-              </div>
-            </div>
-            {isClassicAgentMode ? (
-              <div className="absolute right-3 top-3">
-                <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-              </div>
-            ) : null}
-          </button>
-
-          <button
-            type="button"
+          />
+          <ExecutionModeRow
+            icon={<Cpu className="h-4.5 w-4.5" />}
+            title={t("settings.agentDevMode")}
+            description={t("settings.agentDevModeDesc")}
+            selected={isAgentDevMode}
             onClick={() =>
               setSettings((prev) =>
                 updateSystem(prev, { executionMode: "agent-dev" as ExecutionMode }),
               )
             }
-            className={`group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all ${
-              isAgentDevMode
-                ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                : "border-transparent bg-muted/40 hover:border-border hover:bg-muted/60"
-            }`}
-          >
-            <div
-              className={`flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
-                isAgentDevMode
-                  ? "bg-primary/10 text-primary"
-                  : "bg-muted text-muted-foreground group-hover:bg-accent"
-              }`}
-            >
-              <Cpu className="h-5 w-5" />
-            </div>
-            <div>
-              <div className="text-sm font-semibold">{t("settings.agentDevMode")}</div>
-              <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                {t("settings.agentDevModeDesc")}
-              </div>
-            </div>
-            {isAgentDevMode ? (
-              <div className="absolute right-3 top-3">
-                <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-              </div>
-            ) : null}
-          </button>
-        </div>
-      </div>
-
-      <div className="border-t" />
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-          <div className="flex items-start gap-3">
-            <div className="space-y-1">
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                {appearanceIcon}
-                {t("settings.appearance")}
-              </div>
-            </div>
-          </div>
-
-          <div className="grid gap-2 sm:grid-cols-3">
-            {THEME_OPTIONS.map((theme) => {
-              const selected = settings.theme === theme;
-              return (
-                <button
-                  key={theme}
-                  type="button"
-                  onClick={() => setSettings((prev) => ({ ...prev, theme }))}
-                  className={`group relative flex h-full items-start gap-3 rounded-xl border px-3.5 py-3.5 text-left transition-all ${
-                    selected
-                      ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                      : "border-border/60 bg-background/80 hover:border-border hover:bg-muted/35"
-                  }`}
-                >
-                  <div
-                    className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
-                      selected
-                        ? "bg-primary/10 text-primary"
-                        : "bg-muted text-muted-foreground group-hover:bg-accent/80"
-                    }`}
-                  >
-                    {renderThemeIcon(theme)}
-                  </div>
-                  <div className="min-w-0 pr-6">
-                    <div className="text-sm font-semibold">{getThemeLabel(theme)}</div>
-                  </div>
-                  {selected ? (
-                    <div className="absolute right-3 top-3">
-                      <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-                    </div>
-                  ) : null}
-                </button>
-              );
-            })}
-          </div>
-        </section>
-
-        <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-          <div className="flex items-start gap-3">
-            <div className="space-y-1">
-              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-                <MessageSquare className="h-4 w-4 text-muted-foreground" />
-                {t("settings.language")}
-              </div>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-2">
-            {SUPPORTED_LOCALES.map((locale) => {
-              const selected = settings.locale === locale;
-              const localeLabel =
-                locale === "zh-CN"
-                  ? t("settings.chinese")
-                  : locale === "en-US"
-                    ? t("settings.english")
-                    : locale;
-              return (
-                <button
-                  key={locale}
-                  type="button"
-                  onClick={() => setSettings((prev) => ({ ...prev, locale }))}
-                  className={`group relative flex items-center gap-3 rounded-xl border px-3.5 py-3 text-left transition-all ${
-                    selected
-                      ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                      : "border-border/60 bg-background/80 hover:border-border hover:bg-muted/35"
-                  }`}
-                >
-                  <span className="text-base leading-none">{locale === "zh-CN" ? "🇨🇳" : "🇺🇸"}</span>
-                  <div className="min-w-0 flex-1 pr-5">
-                    <div className="truncate text-sm font-semibold">{localeLabel}</div>
-                    <div className="mt-0.5 text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
-                      {locale}
-                    </div>
-                  </div>
-                  {selected ? (
-                    <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                      <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-                    </div>
-                  ) : null}
-                </button>
-              );
-            })}
-          </div>
-        </section>
-      </div>
-
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-            <Globe className="h-4 w-4 text-muted-foreground" />
-            {t("settings.systemProxy")}
-          </div>
-          <AgentActivationSwitch
-            checked={systemProxy.enabled}
-            title={t("settings.systemProxyEnable")}
-            disabled={proxyToggleDisabled}
-            onToggle={() => patchSystemProxy({ enabled: !systemProxy.enabled })}
           />
-        </div>
-        <p className="text-xs text-muted-foreground">{t("settings.systemProxyDesc")}</p>
-        {systemProxyInvalid ? (
-          <p className="text-xs text-destructive">{t("settings.systemProxyInvalid")}</p>
-        ) : proxyToggleDisabled ? (
-          <p className="text-xs text-muted-foreground">{t("settings.systemProxyEnableHint")}</p>
-        ) : null}
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-12 lg:items-start">
-          <div className="space-y-1.5 sm:col-span-2 lg:col-span-2">
-            <Label className="text-xs font-medium text-muted-foreground">
-              {t("settings.systemProxyType")}
-            </Label>
-            <Select
-              value={systemProxy.type}
-              onValueChange={(value) => patchSystemProxy({ type: value as SystemProxyType })}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue>{systemProxy.type === "socks5" ? "SOCKS5" : "HTTP"}</SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="http">HTTP</SelectItem>
-                <SelectItem value="socks5">SOCKS5</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-1.5 lg:col-span-4">
-            <Label
-              htmlFor="system-proxy-host"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyHost")}
-            </Label>
-            <Input
-              id="system-proxy-host"
-              value={proxyHostDraft ?? systemProxy.host}
-              placeholder="127.0.0.1"
-              onChange={(event) => setProxyHostDraft(event.currentTarget.value)}
-              onBlur={commitProxyHostDraft}
-            />
-          </div>
-          <div className="space-y-1.5 lg:col-span-2">
-            <Label
-              htmlFor="system-proxy-port"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyPort")}
-            </Label>
-            <Input
-              id="system-proxy-port"
-              type="number"
-              min={1}
-              max={65535}
-              value={proxyPortDraft ?? (systemProxy.port > 0 ? String(systemProxy.port) : "")}
-              placeholder={systemProxy.type === "socks5" ? "1080" : "7890"}
-              onChange={(event) => setProxyPortDraft(event.currentTarget.value)}
-              onBlur={commitProxyPortDraft}
-            />
-          </div>
-          <div className="space-y-1.5 lg:col-span-2">
-            <Label
-              htmlFor="system-proxy-username"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyUsername")}
-            </Label>
-            <Input
-              id="system-proxy-username"
-              value={proxyUsernameDraft ?? systemProxy.username}
-              onChange={(event) => setProxyUsernameDraft(event.currentTarget.value)}
-              onBlur={commitProxyUsernameDraft}
-            />
-          </div>
-          <div className="space-y-1.5 lg:col-span-2">
-            <Label
-              htmlFor="system-proxy-password"
-              className="text-xs font-medium text-muted-foreground"
-            >
-              {t("settings.systemProxyPassword")}
-            </Label>
-            <Input
-              id="system-proxy-password"
-              type="password"
-              value={proxyPasswordDraft ?? systemProxy.password}
-              onChange={(event) => setProxyPasswordDraft(event.currentTarget.value)}
-              onBlur={commitProxyPasswordDraft}
-            />
-            {systemProxy.passwordConfigured &&
-            !(proxyPasswordDraft ?? systemProxy.password).trim() ? (
-              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
-                <span>{t("settings.systemProxyPasswordConfigured")}</span>
-                <button
-                  type="button"
-                  className="underline-offset-2 hover:text-foreground hover:underline"
-                  onClick={() => {
-                    setProxyPasswordDraft(null);
-                    patchSystemProxy({ password: "", passwordConfigured: false });
-                  }}
-                >
-                  {t("settings.systemProxyPasswordClear")}
-                </button>
+        </fieldset>
+      </SettingsGroup>
+
+      <SettingsGroup title={t("settings.groupGeneral")}>
+        <div>
+          <SettingsRow
+            title={t("settings.appearance")}
+            description={t("settings.appearanceDesc")}
+            control={
+              <div className="flex items-center gap-0.5 rounded-xl bg-muted/55 p-1">
+                {THEME_OPTIONS.map((theme) => (
+                  <SegmentedButton
+                    key={theme}
+                    selected={settings.theme === theme}
+                    label={getThemeLabel(theme)}
+                    icon={renderThemeIcon(theme)}
+                    onClick={() => setSettings((prev) => ({ ...prev, theme }))}
+                  />
+                ))}
               </div>
-            ) : null}
-          </div>
-        </div>
-      </section>
+            }
+          />
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <Minimize2 className="h-4 w-4 text-muted-foreground" />
-          {t("settings.closeWindowBehavior")}
-        </div>
+          <SettingsRow
+            title={t("settings.language")}
+            control={
+              <Select
+                value={settings.locale}
+                onValueChange={(locale) =>
+                  setSettings((prev) => ({ ...prev, locale: locale as Locale }))
+                }
+              >
+                <SettingsSelectTrigger>
+                  <SelectValue>
+                    {settings.locale === "zh-CN" ? "🇨🇳  简体中文" : "🇺🇸  English"}
+                  </SelectValue>
+                </SettingsSelectTrigger>
+                <SettingsSelectContent>
+                  {SUPPORTED_LOCALES.map((locale) => (
+                    <SelectItem key={locale} value={locale}>
+                      {locale === "zh-CN"
+                        ? `🇨🇳  ${t("settings.chinese")}`
+                        : `🇺🇸  ${t("settings.english")}`}
+                    </SelectItem>
+                  ))}
+                </SettingsSelectContent>
+              </Select>
+            }
+          />
 
-        <div className="grid gap-2 sm:grid-cols-2">
-          {CLOSE_WINDOW_BEHAVIOR_OPTIONS.map((behavior) => {
-            const selected = settings.closeWindowBehavior === behavior;
-            const isMinimize = behavior === "minimize";
-            return (
-              <button
-                key={behavior}
-                type="button"
-                onClick={() =>
+          <SettingsRow
+            title={t("settings.closeWindowBehavior")}
+            description={closeWindowDescription}
+            control={
+              <Select
+                value={settings.closeWindowBehavior}
+                onValueChange={(closeWindowBehavior) =>
                   setSettings((prev) => ({
                     ...prev,
-                    closeWindowBehavior: behavior,
+                    closeWindowBehavior:
+                      closeWindowBehavior as (typeof CLOSE_WINDOW_BEHAVIOR_OPTIONS)[number],
                   }))
                 }
-                className={`group relative flex h-full items-start gap-3 rounded-xl border px-3.5 py-3.5 text-left transition-all ${
-                  selected
-                    ? "border-primary bg-primary/5 shadow-sm shadow-primary/10"
-                    : "border-border/60 bg-background/80 hover:border-border hover:bg-muted/35"
-                }`}
               >
-                <div
-                  className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
-                    selected
-                      ? "bg-primary/10 text-primary"
-                      : "bg-muted text-muted-foreground group-hover:bg-accent/80"
-                  }`}
-                >
-                  {isMinimize ? (
-                    <Minimize2 className="h-4.5 w-4.5" />
-                  ) : (
-                    <LogOut className="h-4.5 w-4.5" />
+                <SettingsSelectTrigger>
+                  <SelectValue>
+                    {settings.closeWindowBehavior === "minimize"
+                      ? t("settings.closeWindowMinimize")
+                      : t("settings.closeWindowExit")}
+                  </SelectValue>
+                </SettingsSelectTrigger>
+                <SettingsSelectContent>
+                  <SelectItem value="minimize">{t("settings.closeWindowMinimize")}</SelectItem>
+                  <SelectItem value="exit">{t("settings.closeWindowExit")}</SelectItem>
+                </SettingsSelectContent>
+              </Select>
+            }
+          />
+        </div>
+      </SettingsGroup>
+
+      <SettingsGroup title={t("settings.systemProxy")}>
+        <div>
+          <ProxySettingsRow
+            title={t("settings.systemProxyEnable")}
+            description={
+              systemProxy.enabled && proxyConfigValid
+                ? `${systemProxy.type === "socks5" ? "SOCKS5" : "HTTP"} · ${effectiveProxyHost}:${effectiveProxyPort}`
+                : systemProxy.enabled
+                  ? t("settings.systemProxyInvalid")
+                  : t("settings.systemProxyDisabled")
+            }
+            actionLabel={
+              proxyDetailsOpen ? t("settings.systemProxyDone") : t("settings.systemProxySettings")
+            }
+            expanded={proxyDetailsOpen}
+            onToggleDetails={() => setProxyDetailsOpen((open) => !open)}
+            switchControl={
+              <AgentActivationSwitch
+                checked={systemProxy.enabled}
+                title={t("settings.systemProxyEnable")}
+                disabled={proxyToggleDisabled}
+                onToggle={() => patchSystemProxy({ enabled: !systemProxy.enabled })}
+              />
+            }
+          />
+
+          {proxyDetailsOpen ? (
+            <div
+              id="system-proxy-details"
+              className="animate-in fade-in slide-in-from-top-1 bg-muted/10 px-5 py-4 duration-150"
+            >
+              <p className="mb-4 text-xs leading-relaxed text-muted-foreground">
+                {t("settings.systemProxyDesc")}
+              </p>
+              {systemProxyInvalid || proxyToggleDisabled ? (
+                <p
+                  className={cn(
+                    "mb-4 text-xs leading-relaxed",
+                    systemProxyInvalid ? "text-destructive" : "text-muted-foreground",
                   )}
+                >
+                  {systemProxyInvalid
+                    ? t("settings.systemProxyInvalid")
+                    : t("settings.systemProxyEnableHint")}
+                </p>
+              ) : null}
+
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-[auto_minmax(0,1fr)_7rem] sm:items-start">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-muted-foreground">
+                    {t("settings.systemProxyType")}
+                  </Label>
+                  <Select
+                    value={systemProxy.type}
+                    onValueChange={(value) => patchSystemProxy({ type: value as SystemProxyType })}
+                  >
+                    <SettingsSelectTrigger className="rounded-lg">
+                      <SelectValue>{systemProxy.type === "socks5" ? "SOCKS5" : "HTTP"}</SelectValue>
+                    </SettingsSelectTrigger>
+                    <SettingsSelectContent>
+                      <SelectItem value="http">HTTP</SelectItem>
+                      <SelectItem value="socks5">SOCKS5</SelectItem>
+                    </SettingsSelectContent>
+                  </Select>
                 </div>
-                <div className="min-w-0 pr-6">
-                  <div className="text-sm font-semibold">
-                    {isMinimize ? t("settings.closeWindowMinimize") : t("settings.closeWindowExit")}
-                  </div>
-                  <div className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
-                    {isMinimize
-                      ? t("settings.closeWindowMinimizeDesc")
-                      : t("settings.closeWindowExitDesc")}
-                  </div>
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-host"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyHost")}
+                  </Label>
+                  <Input
+                    id="system-proxy-host"
+                    className="rounded-lg"
+                    value={proxyHostDraft ?? systemProxy.host}
+                    placeholder="127.0.0.1"
+                    onChange={(event) => setProxyHostDraft(event.currentTarget.value)}
+                    onBlur={commitProxyHostDraft}
+                  />
                 </div>
-                {selected ? (
-                  <div className="absolute right-3 top-3">
-                    <CheckCircle2 className="h-4.5 w-4.5 text-primary" />
-                  </div>
-                ) : null}
-              </button>
-            );
-          })}
-        </div>
-      </section>
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-port"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyPort")}
+                  </Label>
+                  <Input
+                    id="system-proxy-port"
+                    className="rounded-lg"
+                    type="number"
+                    min={1}
+                    max={65535}
+                    value={proxyPortDraft ?? (systemProxy.port > 0 ? String(systemProxy.port) : "")}
+                    placeholder={systemProxy.type === "socks5" ? "1080" : "7890"}
+                    onChange={(event) => setProxyPortDraft(event.currentTarget.value)}
+                    onBlur={commitProxyPortDraft}
+                  />
+                </div>
+              </div>
 
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <MonitorSmartphone className="h-4 w-4 text-muted-foreground" />
-          {t("settings.trayTitle")}
+              <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-username"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyUsername")}
+                  </Label>
+                  <Input
+                    id="system-proxy-username"
+                    className="rounded-lg"
+                    value={proxyUsernameDraft ?? systemProxy.username}
+                    onChange={(event) => setProxyUsernameDraft(event.currentTarget.value)}
+                    onBlur={commitProxyUsernameDraft}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="system-proxy-password"
+                    className="text-xs font-medium text-muted-foreground"
+                  >
+                    {t("settings.systemProxyPassword")}
+                  </Label>
+                  <Input
+                    id="system-proxy-password"
+                    className="rounded-lg"
+                    type="password"
+                    value={proxyPasswordDraft ?? systemProxy.password}
+                    onChange={(event) => setProxyPasswordDraft(event.currentTarget.value)}
+                    onBlur={commitProxyPasswordDraft}
+                  />
+                  {systemProxy.passwordConfigured &&
+                  !(proxyPasswordDraft ?? systemProxy.password).trim() ? (
+                    <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                      <span>{t("settings.systemProxyPasswordConfigured")}</span>
+                      <button
+                        type="button"
+                        className="underline-offset-2 hover:text-foreground hover:underline"
+                        onClick={() => {
+                          setProxyPasswordDraft(null);
+                          patchSystemProxy({ password: "", passwordConfigured: false });
+                        }}
+                      >
+                        {t("settings.systemProxyPasswordClear")}
+                      </button>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          ) : null}
         </div>
-        <div className="flex items-center justify-between gap-3">
-          <div className="min-w-0">
-            <div className="text-sm text-foreground">{t("settings.trayShowTitles")}</div>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {t("settings.trayShowTitlesDesc")}
-            </p>
-          </div>
-          <AgentActivationSwitch
-            checked={trayPrefs.showConversationTitles}
+      </SettingsGroup>
+
+      <SettingsGroup title={t("settings.trayTitle")}>
+        <div>
+          <SettingsRow
             title={t("settings.trayShowTitles")}
-            onToggle={() =>
-              writeTrayPrefs({ showConversationTitles: !trayPrefs.showConversationTitles })
+            description={t("settings.trayShowTitlesDesc")}
+            control={
+              <AgentActivationSwitch
+                checked={trayPrefs.showConversationTitles}
+                title={t("settings.trayShowTitles")}
+                onToggle={() =>
+                  writeTrayPrefs({ showConversationTitles: !trayPrefs.showConversationTitles })
+                }
+              />
             }
           />
-        </div>
-        {isMacPlatform ? (
-          <div className="flex items-center justify-between gap-3">
-            <div className="min-w-0">
-              <div className="text-sm text-foreground">{t("settings.trayRunningBadge")}</div>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                {t("settings.trayRunningBadgeDesc")}
-              </p>
-            </div>
-            <AgentActivationSwitch
-              checked={trayPrefs.showRunningBadge}
+          {isMacPlatform ? (
+            <SettingsRow
               title={t("settings.trayRunningBadge")}
-              onToggle={() => writeTrayPrefs({ showRunningBadge: !trayPrefs.showRunningBadge })}
+              description={t("settings.trayRunningBadgeDesc")}
+              control={
+                <AgentActivationSwitch
+                  checked={trayPrefs.showRunningBadge}
+                  title={t("settings.trayRunningBadge")}
+                  onToggle={() => writeTrayPrefs({ showRunningBadge: !trayPrefs.showRunningBadge })}
+                />
+              }
             />
-          </div>
-        ) : null}
-      </section>
-
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <ScanText className="h-4 w-4 text-muted-foreground" />
-          {t("settings.fontFamily")}
+          ) : null}
         </div>
+      </SettingsGroup>
 
-        <div className="space-y-2">
+      <SettingsGroup title={t("settings.fontFamily")}>
+        <div>
           {FONT_FAMILY_FIELDS.map((key) => {
             const currentValue = settings.customSettings[key];
             const selectValue = toFontFamilySelectValue(
@@ -696,124 +749,108 @@ export function SystemSettingsForm(props: SettingsSectionProps) {
             const showCustomInput = selectValue === FONT_FAMILY_CUSTOM_SELECT_VALUE;
             const customDraft = customFontDrafts[key] ?? currentValue;
             return (
-              <div key={key} className="space-y-1.5">
-                <Label
-                  htmlFor={`${key}-select`}
-                  className="text-xs font-medium text-muted-foreground"
-                >
-                  {t(`settings.${key}`)}
-                </Label>
-                <div className="flex min-w-0 items-center gap-2">
-                  <Select
-                    value={selectValue}
-                    onValueChange={(value) => handleFontFamilySelect(key, value)}
-                  >
-                    <SelectTrigger
-                      id={`${key}-select`}
-                      className={showCustomInput ? "w-[9.5rem] shrink-0" : "w-full"}
+              <SettingsRow
+                key={key}
+                title={t(`settings.${key}`)}
+                control={
+                  <div className="flex w-full min-w-0 flex-col items-start gap-2 sm:w-auto sm:items-end">
+                    <Select
+                      value={selectValue}
+                      onValueChange={(value) => handleFontFamilySelect(key, value)}
                     >
-                      <SelectValue placeholder={t("settings.fontFamilyDefault")}>
-                        {(value) => {
-                          if (value === FONT_FAMILY_DEFAULT_SELECT_VALUE) {
-                            return t("settings.fontFamilyDefault");
-                          }
-                          if (value === FONT_FAMILY_CUSTOM_SELECT_VALUE) {
-                            return t("settings.fontFamilyCustom");
-                          }
-                          const match = fontFamilyOptions.find((option) => option.value === value);
-                          return match?.label ?? String(value ?? "");
-                        }}
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent className="max-h-72">
-                      <SelectItem value={FONT_FAMILY_DEFAULT_SELECT_VALUE}>
-                        {t("settings.fontFamilyDefault")}
-                      </SelectItem>
-                      <SelectItem value={FONT_FAMILY_CUSTOM_SELECT_VALUE}>
-                        {t("settings.fontFamilyCustom")}
-                      </SelectItem>
-                      {fontFamilyOptions.map((option) => (
-                        <SelectItem
-                          key={option.value}
-                          value={option.value}
-                          style={{ fontFamily: option.value }}
-                        >
-                          {option.label}
+                      <SettingsSelectTrigger id={`${key}-select`}>
+                        <SelectValue placeholder={t("settings.fontFamilyDefault")}>
+                          {(value) => {
+                            if (value === FONT_FAMILY_DEFAULT_SELECT_VALUE) {
+                              return t("settings.fontFamilyDefault");
+                            }
+                            if (value === FONT_FAMILY_CUSTOM_SELECT_VALUE) {
+                              return t("settings.fontFamilyCustom");
+                            }
+                            const match = fontFamilyOptions.find(
+                              (option) => option.value === value,
+                            );
+                            return match?.label ?? String(value ?? "");
+                          }}
+                        </SelectValue>
+                      </SettingsSelectTrigger>
+                      <SettingsSelectContent className="max-h-72">
+                        <SelectItem value={FONT_FAMILY_DEFAULT_SELECT_VALUE}>
+                          {t("settings.fontFamilyDefault")}
                         </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  {showCustomInput ? (
-                    <Input
-                      id={`${key}-custom-input`}
-                      className="min-w-0 flex-1"
-                      value={customDraft}
-                      list="font-family-suggestions"
-                      spellCheck={false}
-                      autoComplete="off"
-                      placeholder={t("settings.fontFamilyPlaceholder")}
-                      onChange={(event) =>
-                        setCustomFontDrafts((current) => ({
-                          ...current,
-                          [key]: event.target.value,
-                        }))
-                      }
-                      onBlur={() => commitCustomFontFamily(key)}
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter") {
-                          event.currentTarget.blur();
+                        <SelectItem value={FONT_FAMILY_CUSTOM_SELECT_VALUE}>
+                          {t("settings.fontFamilyCustom")}
+                        </SelectItem>
+                        {fontFamilyOptions.map((option) => (
+                          <SelectItem
+                            key={option.value}
+                            value={option.value}
+                            style={{ fontFamily: option.value }}
+                          >
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SettingsSelectContent>
+                    </Select>
+                    {showCustomInput ? (
+                      <Input
+                        id={`${key}-custom-input`}
+                        className="w-full min-w-0 rounded-xl sm:w-[240px]"
+                        value={customDraft}
+                        list="font-family-suggestions"
+                        spellCheck={false}
+                        autoComplete="off"
+                        placeholder={t("settings.fontFamilyPlaceholder")}
+                        onChange={(event) =>
+                          setCustomFontDrafts((current) => ({
+                            ...current,
+                            [key]: event.currentTarget.value,
+                          }))
                         }
-                      }}
-                    />
-                  ) : null}
-                </div>
-              </div>
+                        onBlur={() => commitCustomFontFamily(key)}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") {
+                            event.currentTarget.blur();
+                          }
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                }
+              />
             );
           })}
         </div>
-        <datalist id="font-family-suggestions">
-          {localFontFamilies.map((family) => (
-            <option key={family} value={family} />
-          ))}
-        </datalist>
-      </section>
-
-      <section className="space-y-3 rounded-2xl border border-border/60 bg-card p-4">
-        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-          <ScanText className="h-4 w-4 text-muted-foreground" />
-          {t("settings.fontSize")}
-        </div>
+      </SettingsGroup>
 
-        <div className="space-y-2">
+      <SettingsGroup title={t("settings.fontSize")}>
+        <div>
           {fontScaleZones.map((zone) => (
-            <div
+            <SettingsRow
               key={zone.key}
-              className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-border/60 bg-background/80 px-3.5 py-2.5"
-            >
-              <div className="text-sm font-medium text-foreground">{zone.label}</div>
-              <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-0.5">
-                {FONT_SCALE_OPTIONS.map((value) => {
-                  const selected = fontScale[zone.key] === value;
-                  return (
-                    <button
+              title={zone.label}
+              control={
+                <div className="flex items-center gap-0.5 rounded-xl bg-muted/55 p-1">
+                  {FONT_SCALE_OPTIONS.map((value) => (
+                    <SegmentedButton
                       key={value}
-                      type="button"
+                      selected={fontScale[zone.key] === value}
+                      label={getFontScaleLabel(value)}
                       onClick={() => setZoneFontScale(zone.key, value)}
-                      className={`rounded-md px-2.5 py-1 text-xs transition-all ${
-                        selected
-                          ? "bg-background font-semibold text-foreground shadow-sm"
-                          : "text-muted-foreground hover:text-foreground"
-                      }`}
-                    >
-                      {getFontScaleLabel(value)}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
+                    />
+                  ))}
+                </div>
+              }
+            />
           ))}
         </div>
-      </section>
+      </SettingsGroup>
+
+      <datalist id="font-family-suggestions">
+        {localFontFamilies.map((family) => (
+          <option key={family} value={family} />
+        ))}
+      </datalist>
     </div>
   );
 }
diff --git a/crates/agent-gui/src/pages/settings/shared.tsx b/crates/agent-gui/src/pages/settings/shared.tsx
index 6296d3570..c8de027d4 100644
--- a/crates/agent-gui/src/pages/settings/shared.tsx
+++ b/crates/agent-gui/src/pages/settings/shared.tsx
@@ -1,3 +1,6 @@
+import { Switch } from "../../components/ui/switch";
+import { cn } from "../../lib/shared/utils";
+
 export {
   ConfirmActionPopover,
   ConfirmDeletePopover,
@@ -6,11 +9,12 @@ export {
 export function PromptTag({ label, muted = false }: { label: string; muted?: boolean }) {
   return (
     <span
-      className={`inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] leading-none ${
+      className={cn(
+        "inline-flex shrink-0 items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] leading-none",
         muted
           ? "border-border/60 bg-muted/40 text-muted-foreground"
-          : "border-border/70 bg-muted/60 text-foreground/80"
-      }`}
+          : "border-border/70 bg-muted/60 text-foreground/80",
+      )}
     >
       {label}
     </span>
@@ -27,28 +31,13 @@ export function AgentActivationSwitch(props: {
   const { checked, title, disabled = false, className, onToggle } = props;
 
   return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      aria-disabled={disabled}
+    <Switch
+      checked={checked}
+      disabled={disabled}
       title={title}
       aria-label={title}
-      disabled={disabled}
-      onClick={disabled ? undefined : onToggle}
-      className={`relative h-5 w-9 shrink-0 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 ${
-        checked
-          ? "bg-sky-500"
-          : disabled
-            ? "bg-muted-foreground/15"
-            : "bg-muted-foreground/20 hover:bg-muted-foreground/30"
-      } ${disabled ? "cursor-not-allowed opacity-60" : ""} ${className ?? ""}`}
-    >
-      <span
-        className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
-          checked ? "translate-x-4" : "translate-x-0"
-        }`}
-      />
-    </button>
+      onCheckedChange={onToggle}
+      className={className}
+    />
   );
 }