diff --git a/__tests__/components/chat/error-message-banner.test.tsx b/__tests__/components/chat/error-message-banner.test.tsx
index 88bcc2704..82d73628e 100644
--- a/__tests__/components/chat/error-message-banner.test.tsx
+++ b/__tests__/components/chat/error-message-banner.test.tsx
@@ -34,6 +34,13 @@ describe("ErrorMessageBanner", () => {
     expect(onRetry).toHaveBeenCalledTimes(1);
   });
 
+  it("shows a red error icon beside the message", () => {
+    render(<ErrorMessageBanner message="Something went wrong" />);
+
+    const icon = screen.getByTestId("error-message-banner-icon");
+    expect(icon).toHaveStyle({ color: "var(--oh-status-error)" });
+  });
+
   it("uses greyscale theme tokens instead of red error styling", () => {
     render(<ErrorMessageBanner message="Something went wrong" />);
 
diff --git a/__tests__/components/features/conversation-panel/conversation-panel-list-helpers.test.ts b/__tests__/components/features/conversation-panel/conversation-panel-list-helpers.test.ts
index bf87a56ef..08343a115 100644
--- a/__tests__/components/features/conversation-panel/conversation-panel-list-helpers.test.ts
+++ b/__tests__/components/features/conversation-panel/conversation-panel-list-helpers.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import {
+  getGroupConversationPreview,
   groupConversations,
+  GROUP_CONVERSATIONS_PREVIEW_LIMIT,
   parseConversationTimeMs,
   sortConversationsByField,
 } from "#/components/features/conversation-panel/conversation-panel-list-helpers";
@@ -212,6 +214,48 @@ describe("conversation-panel-list-helpers", () => {
     ]);
   });
 
+  it("limits grouped folder previews to five conversations with an expand path", () => {
+    const conversations = Array.from({ length: 6 }, (_, index) => ({
+      ...base,
+      id: `c-${index}`,
+      title: `Conversation ${index}`,
+      updated_at: `2024-01-0${index + 1}T00:00:00.000Z`,
+    }));
+
+    const truncated = getGroupConversationPreview(conversations, {
+      expanded: false,
+    });
+    expect(truncated.visibleConversations.map((c) => c.id)).toEqual([
+      "c-0",
+      "c-1",
+      "c-2",
+      "c-3",
+      "c-4",
+    ]);
+    expect(truncated.isPreviewTruncated).toBe(true);
+    expect(truncated.isShowingAll).toBe(false);
+
+    const expanded = getGroupConversationPreview(conversations, {
+      expanded: true,
+    });
+    expect(expanded.visibleConversations).toHaveLength(6);
+    expect(expanded.isPreviewTruncated).toBe(true);
+    expect(expanded.isShowingAll).toBe(true);
+
+    const withActiveBeyondPreview = getGroupConversationPreview(conversations, {
+      expanded: false,
+      activeConversationId: "c-5",
+    });
+    expect(withActiveBeyondPreview.visibleConversations.map((c) => c.id)).toEqual([
+      "c-0",
+      "c-1",
+      "c-2",
+      "c-3",
+      "c-5",
+    ]);
+    expect(GROUP_CONVERSATIONS_PREVIEW_LIMIT).toBe(5);
+  });
+
   it("groups local conversations by selected_workspace, collapsing per-conversation worktree paths", () => {
     // Two conversations launched against the same workspace but with
     // different per-conversation worktree dirs (the agent-server runs
diff --git a/__tests__/components/features/home/home-chat-launcher.test.tsx b/__tests__/components/features/home/home-chat-launcher.test.tsx
index bbeb51133..f063fa742 100644
--- a/__tests__/components/features/home/home-chat-launcher.test.tsx
+++ b/__tests__/components/features/home/home-chat-launcher.test.tsx
@@ -9,6 +9,16 @@ import AgentServerConversationService from "#/api/conversation-service/agent-ser
 
 const mockNavigate = vi.fn();
 const mockUseActiveBackend = vi.fn();
+const mockDisplayErrorToast = vi.fn();
+
+vi.mock("#/utils/custom-toast-handlers", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("#/utils/custom-toast-handlers")>();
+  return {
+    ...actual,
+    displayErrorToast: (...args: unknown[]) => mockDisplayErrorToast(...args),
+  };
+});
 
 vi.mock("react-i18next", () => ({
   useTranslation: () => ({ t: (key: string) => key }),
@@ -294,7 +304,6 @@ describe("HomeChatLauncher", () => {
   });
 
   it("surfaces a toast and skips navigation when conversation creation fails", async () => {
-    const toastErrorSpy = vi.spyOn(toast, "error");
     vi.spyOn(AgentServerConversationService, "createConversation").mockRejectedValue(
       new Error("Network down"),
     );
@@ -303,7 +312,7 @@ describe("HomeChatLauncher", () => {
     const user = userEvent.setup();
     await user.click(screen.getByTestId("stub-chat-submit"));
 
-    await waitFor(() => expect(toastErrorSpy).toHaveBeenCalled());
+    await waitFor(() => expect(mockDisplayErrorToast).toHaveBeenCalled());
     expect(mockNavigate).not.toHaveBeenCalled();
   });
 });
diff --git a/__tests__/components/settings/llm-profiles/profile-actions-menu.test.tsx b/__tests__/components/settings/llm-profiles/profile-actions-menu.test.tsx
index 59ba44f78..453d7320f 100644
--- a/__tests__/components/settings/llm-profiles/profile-actions-menu.test.tsx
+++ b/__tests__/components/settings/llm-profiles/profile-actions-menu.test.tsx
@@ -173,11 +173,12 @@ describe("ProfileActionsMenu", () => {
     expect(menuItems).toHaveLength(4);
   });
 
-  it("marks the Delete menu item as destructive", () => {
+  it("styles Delete like other menu items", () => {
     render(<ProfileActionsMenu {...defaultProps} />);
 
     const deleteButton = screen.getByTestId("profile-delete");
-    expect(deleteButton).toHaveAttribute("data-destructive", "true");
+    expect(deleteButton).not.toHaveAttribute("data-destructive");
+    expect(deleteButton.className).not.toMatch(/text-red/);
   });
 
   it("does not call onClose when clicking inside the menu container", () => {
diff --git a/__tests__/themes/color-themes.test.tsx b/__tests__/themes/color-themes.test.tsx
new file mode 100644
index 000000000..854197d4a
--- /dev/null
+++ b/__tests__/themes/color-themes.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AgentServerUIRoot } from "#/components/providers/agent-server-ui-root";
+import {
+  AVAILABLE_COLOR_THEMES,
+  COLOR_THEMES,
+  applyColorTheme,
+} from "#/themes/color-themes";
+
+describe("color themes", () => {
+  it("includes OpenHands-Neo as a neutral-based theme with white button tokens", () => {
+    const neo = COLOR_THEMES["openhands-neo"];
+
+    expect(neo.label).toBe("OpenHands-Neo");
+    expect(neo.scale).toEqual(COLOR_THEMES["openhands-neutral"].scale);
+    expect(neo.heroui).toEqual(COLOR_THEMES["openhands-neutral"].heroui);
+    expect(neo.tokens?.["--oh-color-primary"]).toBe("#ffffff");
+    expect(neo.tokens?.["--oh-accent"]).toBe("#ffffff");
+  });
+
+  it("exposes Neo in the settings theme picker", () => {
+    expect(AVAILABLE_COLOR_THEMES.map((theme) => theme.key)).toContain(
+      "openhands-neo",
+    );
+    expect(
+      AVAILABLE_COLOR_THEMES.find((theme) => theme.key === "openhands-neo")
+        ?.label,
+    ).toBe("OpenHands-Neo");
+  });
+
+  it("injects white primary tokens when applying OpenHands-Neo", () => {
+    document.body.setAttribute("data-agent-server-ui", "");
+
+    applyColorTheme("openhands-neo");
+
+    const styleEl = document.getElementById("oh-color-theme-override");
+    expect(styleEl?.textContent).toContain("--oh-color-primary: #ffffff;");
+    expect(styleEl?.textContent).toContain("--oh-accent: #ffffff;");
+
+    styleEl?.remove();
+    document.body.removeAttribute("data-agent-server-ui");
+    document.body.style.removeProperty("--oh-color-primary");
+    document.body.style.removeProperty("--oh-accent");
+    document.body.style.removeProperty("--oh-warning");
+  });
+
+  it("applies Neo button tokens on the scoped UI root used by primary buttons", () => {
+    render(
+      <AgentServerUIRoot>
+        <button type="button" data-testid="primary-button">
+          Save
+        </button>
+      </AgentServerUIRoot>,
+    );
+
+    applyColorTheme("openhands-neo");
+
+    const scopeRoot = screen.getByTestId("primary-button").closest(
+      "[data-agent-server-ui]",
+    ) as HTMLElement;
+
+    expect(scopeRoot.style.getPropertyValue("--oh-color-primary")).toBe(
+      "#ffffff",
+    );
+
+    applyColorTheme("openhands-neutral");
+
+    expect(scopeRoot.style.getPropertyValue("--oh-color-primary")).toBe("");
+  });
+});
diff --git a/__tests__/utils/custom-toast-handlers.test.ts b/__tests__/utils/custom-toast-handlers.test.ts
index 610b23890..251c01bd6 100644
--- a/__tests__/utils/custom-toast-handlers.test.ts
+++ b/__tests__/utils/custom-toast-handlers.test.ts
@@ -5,12 +5,18 @@ import {
   displayErrorToast,
 } from "#/utils/custom-toast-handlers";
 
-// Mock react-hot-toast
-vi.mock("react-hot-toast", () => ({
-  default: {
+const { toastMock } = vi.hoisted(() => ({
+  toastMock: Object.assign(vi.fn(), {
     success: vi.fn(),
     error: vi.fn(),
-  },
+    loading: vi.fn(),
+    dismiss: vi.fn(),
+  }),
+}));
+
+// Mock react-hot-toast
+vi.mock("react-hot-toast", () => ({
+  default: toastMock,
 }));
 
 describe("custom-toast-handlers", () => {
@@ -29,6 +35,7 @@ describe("custom-toast-handlers", () => {
           duration: 5000, // Should use minimum duration of 5000ms
           position: "top-right",
           style: expect.objectContaining({
+            borderRadius: "var(--oh-radius)",
             maxWidth: "400px",
             wordBreak: "break-word",
           }),
@@ -47,6 +54,7 @@ describe("custom-toast-handlers", () => {
           duration: expect.any(Number),
           position: "top-right",
           style: expect.objectContaining({
+            borderRadius: "var(--oh-radius)",
             maxWidth: "400px",
             wordBreak: "break-word",
           }),
@@ -67,44 +75,48 @@ describe("custom-toast-handlers", () => {
   });
 
   describe("displayErrorToast", () => {
-    it("should call toast.error with calculated duration for short message", () => {
+    it("should call toast with calculated duration for short message", () => {
       const shortMessage = "Error occurred";
       displayErrorToast(shortMessage);
 
-      expect(toast.error).toHaveBeenCalledWith(
+      expect(toastMock).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
           duration: 4000, // Should use minimum duration of 4000ms for errors
           position: "top-right",
+          icon: null,
           style: expect.objectContaining({
+            borderRadius: "var(--oh-radius)",
             maxWidth: "400px",
             wordBreak: "break-word",
+            color: "var(--oh-muted)",
           }),
         }),
       );
     });
 
-    it("should call toast.error with longer duration for long error message", () => {
+    it("should call toast with longer duration for long error message", () => {
       const longMessage =
         "A very long error message that should take more time to read and understand what went wrong with the operation.";
       displayErrorToast(longMessage);
 
-      expect(toast.error).toHaveBeenCalledWith(
+      expect(toastMock).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
           duration: expect.any(Number),
           position: "top-right",
+          icon: null,
           style: expect.objectContaining({
+            borderRadius: "var(--oh-radius)",
             maxWidth: "400px",
             wordBreak: "break-word",
+            color: "var(--oh-muted)",
           }),
         }),
       );
 
       // Get the actual duration that was passed
-      const callArgs = (
-        toast.error as unknown as { mock: { calls: unknown[][] } }
-      ).mock.calls[0][1] as { duration: number };
+      const callArgs = toastMock.mock.calls[0][1] as { duration: number };
       const actualDuration = callArgs.duration;
 
       // For a long message, duration should be more than the minimum 4000ms
diff --git a/__tests__/utils/form-control-classes.test.ts b/__tests__/utils/form-control-classes.test.ts
new file mode 100644
index 000000000..e52d64519
--- /dev/null
+++ b/__tests__/utils/form-control-classes.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import {
+  formControlButtonClassName,
+  formControlFieldClassName,
+  formControlShellClassName,
+} from "#/utils/form-control-classes";
+
+describe("formControlClasses", () => {
+  it("standardizes fields, shells, and buttons to 36px with rounded-lg", () => {
+    expect(formControlFieldClassName).toContain("h-9");
+    expect(formControlFieldClassName).toContain("rounded-lg");
+    expect(formControlFieldClassName).toContain("border-[var(--oh-border)]");
+    expect(formControlFieldClassName).toContain("bg-base-secondary");
+
+    expect(formControlShellClassName).toContain("h-9");
+    expect(formControlShellClassName).toContain("rounded-lg");
+    expect(formControlShellClassName).toContain("focus-within:ring-1");
+
+    expect(formControlButtonClassName).toContain("h-9");
+    expect(formControlButtonClassName).toContain("rounded-lg");
+  });
+});
diff --git a/src/components/conversation-events/chat/event-message-components/skill-ready-content-list.tsx b/src/components/conversation-events/chat/event-message-components/skill-ready-content-list.tsx
index fd4421b4e..19520ed2f 100644
--- a/src/components/conversation-events/chat/event-message-components/skill-ready-content-list.tsx
+++ b/src/components/conversation-events/chat/event-message-components/skill-ready-content-list.tsx
@@ -45,7 +45,7 @@ export function SkillReadyContentList({ items }: SkillReadyContentListProps) {
                   <ChevronRight size={14} />
                 )}
               </Typography.Text>
-              <Typography.Text className="font-semibold text-[var(--oh-foreground)] text-sm">
+              <Typography.Text className="font-normal text-[var(--oh-foreground)] text-sm">
                 {item.name}
               </Typography.Text>
             </button>
diff --git a/src/components/features/automations/automation-group.tsx b/src/components/features/automations/automation-group.tsx
index 225adfba4..5904965ed 100644
--- a/src/components/features/automations/automation-group.tsx
+++ b/src/components/features/automations/automation-group.tsx
@@ -24,7 +24,7 @@ export function AutomationGroup({
   return (
     <section>
       <div className="flex items-center">
-        <h2 className="text-sm font-semibold text-white">{title}</h2>
+        <h2 className="text-sm font-medium text-white">{title}</h2>
         <StatusBadge count={count} />
       </div>
       <div className="mt-3 flex flex-col gap-3">
diff --git a/src/components/features/automations/backend-not-configured.tsx b/src/components/features/automations/backend-not-configured.tsx
index 6f2a91ddc..56a40c546 100644
--- a/src/components/features/automations/backend-not-configured.tsx
+++ b/src/components/features/automations/backend-not-configured.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import ExclamationCircleIcon from "#/icons/exclamation-circle.svg?react";
+import { BrandButton } from "#/components/features/settings/brand-button";
 
 interface BackendUnavailableProps {
   onRetry: () => void;
@@ -12,19 +13,20 @@ export function BackendUnavailable({ onRetry }: BackendUnavailableProps) {
   return (
     <div className="flex flex-col items-center justify-center py-20 px-4">
       <ExclamationCircleIcon className="size-12 text-[var(--oh-warning)]" />
-      <h2 className="mt-4 text-lg font-semibold text-content">
+      <h2 className="mt-4 text-lg font-medium text-content">
         {t(I18nKey.AUTOMATIONS$BACKEND_UNAVAILABLE_TITLE)}
       </h2>
       <p className="mt-2 text-sm text-muted text-center max-w-md">
         {t(I18nKey.AUTOMATIONS$BACKEND_UNAVAILABLE_MESSAGE)}
       </p>
-      <button
+      <BrandButton
         type="button"
+        variant="secondary"
+        className="mt-6"
         onClick={onRetry}
-        className="mt-6 rounded-lg border border-[var(--oh-border)] px-4 py-2 text-sm text-white hover:bg-surface-raised"
       >
         {t(I18nKey.AUTOMATIONS$BACKEND_UNAVAILABLE_RETRY)}
-      </button>
+      </BrandButton>
     </div>
   );
 }
diff --git a/src/components/features/automations/create-instructions.tsx b/src/components/features/automations/create-instructions.tsx
index 25ca5d42e..e939188c2 100644
--- a/src/components/features/automations/create-instructions.tsx
+++ b/src/components/features/automations/create-instructions.tsx
@@ -65,7 +65,7 @@ export function CreateInstructions({
           </p>
           <NavigationLink
             to={NEW_CONVERSATION_URL}
-            className="mt-2 inline-flex items-center gap-1 rounded-md bg-surface-raised px-3 py-2 text-xs font-medium text-content hover:bg-surface-raised transition-colors"
+            className="mt-2 inline-flex items-center gap-1 rounded-md bg-surface-raised px-3 py-2 text-xs font-normal text-content hover:bg-surface-raised transition-colors"
           >
             {t(I18nKey.AUTOMATIONS$EMPTY_START_CONVERSATION)}
             <span aria-hidden="true">→</span>
@@ -96,7 +96,7 @@ export function CreateInstructions({
           aria-expanded={isExpanded}
           className="flex w-full items-center justify-between p-4 text-left hover:bg-surface-raised transition-colors rounded-lg"
         >
-          <span className="text-sm font-medium text-content">
+          <span className="text-sm font-normal text-content">
             {t(I18nKey.AUTOMATIONS$EMPTY_HOW_TO_CREATE_TITLE)}
           </span>
           <ChevronDownIcon
diff --git a/src/components/features/automations/delete-confirmation-modal.tsx b/src/components/features/automations/delete-confirmation-modal.tsx
index 3c512a485..db133e772 100644
--- a/src/components/features/automations/delete-confirmation-modal.tsx
+++ b/src/components/features/automations/delete-confirmation-modal.tsx
@@ -39,7 +39,7 @@ export function DeleteConfirmationModal({
           <XMarkIcon className="size-5" />
         </button>
 
-        <h2 className="text-lg font-semibold text-content-2">
+        <h2 className="text-lg font-medium text-white">
           {t(I18nKey.AUTOMATIONS$DELETE_CONFIRM_TITLE)}
         </h2>
         <p className="mt-2 text-sm text-muted">
diff --git a/src/components/features/automations/detail/detail-header.tsx b/src/components/features/automations/detail/detail-header.tsx
index 050b59cb2..f478bc364 100644
--- a/src/components/features/automations/detail/detail-header.tsx
+++ b/src/components/features/automations/detail/detail-header.tsx
@@ -71,7 +71,7 @@ export function DetailHeader({
     <div className="flex flex-col gap-4">
       <div className="flex items-start justify-between">
         <div className="flex items-center gap-3">
-          <h1 className="text-xl font-semibold text-content">
+          <h1 className="text-xl font-medium text-content">
             {automation.name}
           </h1>
           <ActiveStatusBadge active={automation.enabled} />
diff --git a/src/components/features/automations/detail/edit-automation-modal.tsx b/src/components/features/automations/detail/edit-automation-modal.tsx
index 84e3b16cc..f22d4ff8d 100644
--- a/src/components/features/automations/detail/edit-automation-modal.tsx
+++ b/src/components/features/automations/detail/edit-automation-modal.tsx
@@ -18,6 +18,11 @@ import {
   parseTimeOfDay,
   type SchedulePresetKind,
 } from "#/utils/automation-schedule";
+import { cn } from "#/utils/utils";
+import {
+  formControlMultilineFieldClassName,
+  formControlSettingsFieldClassName,
+} from "#/utils/form-control-classes";
 import XMarkIcon from "#/icons/x-mark.svg?react";
 
 interface EditAutomationModalProps {
@@ -214,7 +219,7 @@ export function EditAutomationModal({
           <XMarkIcon className="size-5" />
         </button>
 
-        <h2 className="text-lg font-semibold text-content-2">
+        <h2 className="text-lg font-medium text-white">
           {t(I18nKey.AUTOMATIONS$EDIT_TITLE)}
         </h2>
 
@@ -244,7 +249,10 @@ export function EditAutomationModal({
                 setForm((f) => ({ ...f, prompt: e.target.value }))
               }
               rows={4}
-              className="bg-tertiary border border-[var(--oh-border-input)] w-full min-w-0 rounded-sm p-2 text-sm placeholder:text-tertiary-alt"
+              className={cn(
+                formControlMultilineFieldClassName,
+                "placeholder:italic",
+              )}
             />
             <span className="text-xs text-muted">
               {t(I18nKey.AUTOMATIONS$EDIT_PROMPT_HINT)}
@@ -291,7 +299,10 @@ export function EditAutomationModal({
                 setForm((f) => ({ ...f, timeOfDay: e.target.value }))
               }
               disabled={form.isCustomSchedule && !isTimeEditable}
-              className="bg-tertiary border border-[var(--oh-border-input)] h-10 w-full min-w-0 rounded-sm p-2 disabled:bg-[var(--oh-surface-raised)] disabled:cursor-not-allowed"
+              className={cn(
+                formControlSettingsFieldClassName,
+                "disabled:bg-[var(--oh-surface-raised)]",
+              )}
             />
             {automation.timezone && (
               <span className="text-xs text-muted">
diff --git a/src/components/features/automations/detail/run-logs-modal.tsx b/src/components/features/automations/detail/run-logs-modal.tsx
index 4c6441dd9..2ef4c94df 100644
--- a/src/components/features/automations/detail/run-logs-modal.tsx
+++ b/src/components/features/automations/detail/run-logs-modal.tsx
@@ -97,7 +97,7 @@ export function RunLogsModal({
   const activeBody = activeTab === "stdout" ? stdout : stderr;
 
   const tabBaseClass =
-    "border-b-2 px-3 py-2 text-sm font-medium transition-colors focus:outline-none";
+    "border-b-2 px-3 py-2 text-sm font-normal transition-colors focus:outline-none";
   const tabActiveClass = "border-[var(--oh-primary)] text-white";
   const tabInactiveClass = "border-transparent text-muted hover:text-content";
 
@@ -126,7 +126,7 @@ export function RunLogsModal({
           <XMarkIcon className="size-5" />
         </button>
 
-        <h2 className="pr-8 text-lg font-semibold text-content-2">
+        <h2 className="pr-8 text-lg font-medium text-white">
           {t(I18nKey.AUTOMATIONS$DETAIL$LOGS_TITLE)}
         </h2>
 
diff --git a/src/components/features/automations/recommended-automations-section.tsx b/src/components/features/automations/recommended-automations-section.tsx
index ce27b6bc9..94baaaf13 100644
--- a/src/components/features/automations/recommended-automations-section.tsx
+++ b/src/components/features/automations/recommended-automations-section.tsx
@@ -96,7 +96,7 @@ export function RecommendedAutomationsSection({
   return (
     <section data-testid="recommended-automations-section">
       <div className="flex items-center">
-        <h2 className="text-sm font-semibold text-white">
+        <h2 className="text-sm font-medium text-white">
           {t(I18nKey.RECOMMENDED_AUTOMATIONS$SECTION_TITLE)}
         </h2>
         <StatusBadge count={visibleAutomations.length} />
@@ -122,10 +122,10 @@ export function RecommendedAutomationsSection({
             >
               <div className="flex items-start justify-between gap-4">
                 <div className="min-w-0 flex-1">
-                  <div className="text-xs font-medium text-muted">
+                  <div className="text-xs font-normal text-muted">
                     {automation.category}
                   </div>
-                  <h3 className="mt-1 truncate text-base font-semibold text-white">
+                  <h3 className="mt-1 truncate text-base font-normal text-white">
                     {automation.name}
                   </h3>
                   <p className="mt-1 line-clamp-2 text-sm text-muted">
diff --git a/src/components/features/automations/search-input.tsx b/src/components/features/automations/search-input.tsx
index aa2f0c85e..cb19dcbca 100644
--- a/src/components/features/automations/search-input.tsx
+++ b/src/components/features/automations/search-input.tsx
@@ -1,24 +1,31 @@
 import { useTranslation } from "react-i18next";
+import { Search } from "lucide-react";
 import { I18nKey } from "#/i18n/declaration";
-import SearchIcon from "#/icons/search.svg?react";
+import { cn } from "#/utils/utils";
+import {
+  formControlInlineInputClassName,
+  formControlShellClassName,
+} from "#/utils/form-control-classes";
 
 interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
+  className?: string;
 }
 
-export function SearchInput({ value, onChange }: SearchInputProps) {
+export function SearchInput({ value, onChange, className }: SearchInputProps) {
   const { t } = useTranslation("openhands");
 
   return (
-    <div className="relative">
-      <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted" />
+    <div className={cn(formControlShellClassName, "w-full", className)}>
+      <Search className="ml-3 h-4 w-4 shrink-0 text-tertiary-alt" aria-hidden />
       <input
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={t(I18nKey.AUTOMATIONS$SEARCH_PLACEHOLDER)}
-        className="w-full max-w-sm rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface)] py-2 pl-10 pr-3 text-sm text-white placeholder:text-muted focus:border-[var(--oh-border)] focus:outline-none"
+        aria-label={t(I18nKey.AUTOMATIONS$SEARCH_PLACEHOLDER)}
+        className={formControlInlineInputClassName}
       />
     </div>
   );
diff --git a/src/components/features/automations/toggle-switch.tsx b/src/components/features/automations/toggle-switch.tsx
index 5b2b1dabe..27a5dcf40 100644
--- a/src/components/features/automations/toggle-switch.tsx
+++ b/src/components/features/automations/toggle-switch.tsx
@@ -1,37 +1 @@
-import { cn } from "#/utils/utils";
-
-interface ToggleSwitchProps {
-  enabled: boolean;
-  label: string;
-  onToggle: () => void;
-}
-
-export function ToggleSwitch({ enabled, label, onToggle }: ToggleSwitchProps) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={enabled}
-      aria-label={label}
-      onClick={(e) => {
-        e.stopPropagation();
-        onToggle();
-      }}
-      className={cn(
-        "relative inline-flex h-[22px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border transition-colors",
-        enabled
-          ? "border-[var(--oh-success)] bg-[var(--oh-success)]/15"
-          : "border-[var(--oh-border)] bg-surface-raised",
-      )}
-    >
-      <span
-        className={cn(
-          "inline-block size-4 rounded-full transition-transform",
-          enabled
-            ? "translate-x-[20px] bg-[var(--oh-success)]"
-            : "translate-x-[3px] bg-[var(--oh-muted)]",
-        )}
-      />
-    </button>
-  );
-}
+export { ToggleSwitch } from "#/ui/toggle-switch";
diff --git a/src/components/features/backends/backend-form-modal.tsx b/src/components/features/backends/backend-form-modal.tsx
index 88a5f3b27..494965230 100644
--- a/src/components/features/backends/backend-form-modal.tsx
+++ b/src/components/features/backends/backend-form-modal.tsx
@@ -522,7 +522,7 @@ function CloudLoginColumn({ onClose }: { onClose: () => void }) {
         <OpenHandsLogoWhite width={56} height={56} aria-hidden />
 
         <h4
-          className="text-lg font-bold text-content-2"
+          className="text-lg font-medium text-white"
           data-testid="add-backend-cloud-title"
         >
           {t(I18nKey.BACKEND$CLOUD_TITLE)}
diff --git a/src/components/features/backends/backend-selector.tsx b/src/components/features/backends/backend-selector.tsx
index 092837d0f..c6b7537dc 100644
--- a/src/components/features/backends/backend-selector.tsx
+++ b/src/components/features/backends/backend-selector.tsx
@@ -26,6 +26,8 @@ import { useConversationStore } from "#/stores/conversation-store";
 import { AddBackendModal } from "./add-backend-modal";
 import { BackendStatusDot } from "./backend-status-dot";
 import { ManageBackendsModal } from "./manage-backends-modal";
+import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 const VALUE_SEPARATOR = "::";
 
@@ -325,7 +327,7 @@ export function BackendSelector({
             placeholder={active.backend.name}
             loading={someCloudLoading}
             options={options}
-            className="h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)]"
+            className="h-10 px-2 py-0 bg-transparent border-transparent hover:bg-[var(--oh-surface-raised)] focus-within:bg-[var(--oh-surface-raised)] focus-within:border-transparent focus-within:ring-0"
           />
         </div>
         {!hideTrigger ? (
@@ -342,8 +344,14 @@ export function BackendSelector({
               onClick={() => navigate("/settings")}
               className={
                 isSettingsActive
-                  ? "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-medium transition-colors cursor-pointer"
-                  : "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] transition-colors cursor-pointer"
+                  ? cn(
+                      "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer",
+                      formControlTransitionClassName,
+                    )
+                  : cn(
+                      "inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer",
+                      formControlTransitionClassName,
+                    )
               }
             >
               <Settings width={16} height={16} />
diff --git a/src/components/features/backends/backend-status-dot.tsx b/src/components/features/backends/backend-status-dot.tsx
index 8569132e2..3ac5910d0 100644
--- a/src/components/features/backends/backend-status-dot.tsx
+++ b/src/components/features/backends/backend-status-dot.tsx
@@ -21,7 +21,7 @@ export function BackendStatusDot({
   let label: string;
   let status: string;
   if (isConnected === true) {
-    color = "bg-green-500";
+    color = "bg-[var(--oh-status-success)]";
     label = "Connected";
     status = "connected";
   } else if (isConnected === false) {
diff --git a/src/components/features/backends/manage-backends-modal.tsx b/src/components/features/backends/manage-backends-modal.tsx
index d2f05fb16..31a6e3538 100644
--- a/src/components/features/backends/manage-backends-modal.tsx
+++ b/src/components/features/backends/manage-backends-modal.tsx
@@ -159,7 +159,10 @@ export function ManageBackendsModal({ onClose }: ManageBackendsModalProps) {
           )}
         >
           <div className="flex items-start justify-between gap-4 p-5">
-            <BaseModalTitle title={t(I18nKey.BACKEND$MANAGE_TITLE)} />
+            <BaseModalTitle
+              title={t(I18nKey.BACKEND$MANAGE_TITLE)}
+              className="text-white"
+            />
             <button
               type="button"
               onClick={onClose}
diff --git a/src/components/features/chat/btw-messages.tsx b/src/components/features/chat/btw-messages.tsx
index c4a72e20e..00252b5d8 100644
--- a/src/components/features/chat/btw-messages.tsx
+++ b/src/components/features/chat/btw-messages.tsx
@@ -10,7 +10,7 @@ function GotItButton({ onClick }: { onClick: () => void }) {
     <button
       type="button"
       onClick={onClick}
-      className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium text-success bg-success/10 hover:bg-success/20 border border-success/30 transition-colors"
+      className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-normal text-success bg-success/10 hover:bg-success/20 border border-success/30 transition-colors"
     >
       <CheckCircle className="w-3.5 h-3.5 fill-success" />
       <span>{t(I18nKey.CHAT_INTERFACE$BTW_GOT_IT)}</span>
diff --git a/src/components/features/chat/change-agent-button.tsx b/src/components/features/chat/change-agent-button.tsx
index c9827b923..91782582b 100644
--- a/src/components/features/chat/change-agent-button.tsx
+++ b/src/components/features/chat/change-agent-button.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
-import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
+import { ComboboxCaretInline } from "#/ui/combobox-caret";
 import LessonPlanIcon from "#/icons/lesson-plan.svg?react";
 import { CodePillIcon } from "#/icons/code-pill";
 import { useConversationStore } from "#/stores/conversation-store";
@@ -144,7 +144,6 @@ export function ChangeAgentButton() {
     }
     return <LessonPlanIcon width={18} height={18} color="currentColor" />;
   }, [isExecutionAgent]);
-  const caretColor = "currentColor";
 
   return (
     <div className="relative">
@@ -176,7 +175,7 @@ export function ChangeAgentButton() {
             {buttonLabel}
           </Typography.Text>
         </div>
-        <ChevronDownSmallIcon width={18} height={18} color={caretColor} />
+        <ComboboxCaretInline isOpen={contextMenuOpen} />
       </button>
       {contextMenuOpen && (
         <ChangeAgentContextMenu
diff --git a/src/components/features/chat/chat-suggestions.tsx b/src/components/features/chat/chat-suggestions.tsx
index 0c5bf1774..c8c8de7e6 100644
--- a/src/components/features/chat/chat-suggestions.tsx
+++ b/src/components/features/chat/chat-suggestions.tsx
@@ -25,7 +25,7 @@ export function ChatSuggestions({ onSuggestionsClick }: ChatSuggestionsProps) {
           className="pointer-events-auto absolute inset-x-4 bottom-[151px] top-0 flex flex-col items-center justify-center md:inset-x-8"
         >
           <div className="flex flex-col items-center p-4 rounded-xl w-full">
-            <span className="text-[32px] font-bold leading-5 text-white pb-6">
+            <span className="pb-6 text-[32px] font-medium leading-5 text-white">
               {t(I18nKey.LANDING$TITLE)}
             </span>
           </div>
diff --git a/src/components/features/chat/components/chat-input-actions.tsx b/src/components/features/chat/components/chat-input-actions.tsx
index 544cb81b6..1a63ba505 100644
--- a/src/components/features/chat/components/chat-input-actions.tsx
+++ b/src/components/features/chat/components/chat-input-actions.tsx
@@ -38,6 +38,7 @@ import { ContextMenu } from "#/ui/context-menu";
 import { Divider } from "#/ui/divider";
 import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 interface ChatInputActionsProps {
   disabled: boolean;
@@ -451,12 +452,18 @@ export function ChatInputActions({
                 <NavigationLink
                   to="/settings"
                   onClick={closeOverflowMenus}
-                  className="group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors"
+                  className={cn(
+                    "group flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]",
+                    formControlTransitionClassName,
+                  )}
                 >
                   <SettingsGearIcon
                     width={16}
                     height={16}
-                    className="shrink-0 text-[var(--oh-muted)] transition-colors group-hover:text-[var(--oh-foreground)]"
+                    className={cn(
+                      "shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]",
+                      formControlTransitionClassName,
+                    )}
                     aria-hidden
                   />
                   <span>{llmDestinationLabel}</span>
@@ -500,7 +507,8 @@ export function ChatInputActions({
                 ref={overflowTriggerRef}
                 type="button"
                 className={cn(
-                  "flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)] transition-colors",
+                  "flex size-6 items-center justify-center rounded-full text-[var(--oh-muted)]",
+                  formControlTransitionClassName,
                   "hover:bg-white/10 hover:text-white cursor-pointer",
                 )}
                 aria-label="More input actions"
diff --git a/src/components/features/chat/components/chat-input-model.tsx b/src/components/features/chat/components/chat-input-model.tsx
index 04b5af5d9..6de537ee8 100644
--- a/src/components/features/chat/components/chat-input-model.tsx
+++ b/src/components/features/chat/components/chat-input-model.tsx
@@ -1,6 +1,6 @@
 import { useActiveConversation } from "#/hooks/query/use-active-conversation";
 import { useSettings } from "#/hooks/query/use-settings";
-import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
+import { ComboboxCaretInline } from "#/ui/combobox-caret";
 import SettingsGearIcon from "#/icons/settings-gear.svg?react";
 import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
 import { NavigationLink } from "#/components/shared/navigation-link";
@@ -67,7 +67,7 @@ export function ChatInputModel() {
       <button
         type="button"
         className={cn(
-          "inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,color]",
+          "inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none",
           "hover:text-white hover:bg-white/10 cursor-pointer",
         )}
         title={llmModel}
@@ -81,13 +81,7 @@ export function ChatInputModel() {
         }}
       >
         <span>{truncatedModelLabel}</span>
-        <ChevronDownSmallIcon
-          width={18}
-          height={18}
-          color="currentColor"
-          className="shrink-0"
-          aria-hidden
-        />
+        <ComboboxCaretInline isOpen={isPopoverOpen} />
       </button>
 
       {isPopoverOpen && (
diff --git a/src/components/features/chat/components/slash-command-menu.tsx b/src/components/features/chat/components/slash-command-menu.tsx
index 4a8cdf0a9..98a47814b 100644
--- a/src/components/features/chat/components/slash-command-menu.tsx
+++ b/src/components/features/chat/components/slash-command-menu.tsx
@@ -110,7 +110,7 @@ function SlashCommandMenuItem({
         onSelect(item);
       }}
     >
-      <Text className="font-semibold">{item.command}</Text>
+      <Text className="font-normal">{item.command}</Text>
       {description && (
         <Text className="text-xs text-[var(--oh-muted)] mt-0.5 truncate block">
           {description}
diff --git a/src/components/features/chat/error-message-banner.tsx b/src/components/features/chat/error-message-banner.tsx
index a5814911c..63dd1f158 100644
--- a/src/components/features/chat/error-message-banner.tsx
+++ b/src/components/features/chat/error-message-banner.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { X } from "lucide-react";
+import { CircleX, X } from "lucide-react";
+import { OH_STATUS_ERROR_COLOR } from "#/constants/status-colors";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";
 
@@ -63,6 +64,13 @@ export function ErrorMessageBanner({
       )}
       data-testid="error-message-banner"
     >
+      <CircleX
+        aria-hidden
+        className="h-4 w-4 shrink-0"
+        strokeWidth={2}
+        style={{ color: OH_STATUS_ERROR_COLOR }}
+        data-testid="error-message-banner-icon"
+      />
       <div className="min-w-0 flex-1">
         <div
           ref={contentRef}
@@ -78,7 +86,7 @@ export function ErrorMessageBanner({
         {shouldShowToggle && (
           <button
             type="button"
-            className="mt-1 cursor-pointer text-xs font-semibold text-[var(--oh-foreground)] underline"
+            className="mt-1 cursor-pointer text-xs font-normal text-[var(--oh-foreground)] underline"
             onClick={() => setIsExpanded((prev) => !prev)}
             data-testid="error-message-banner-toggle"
           >
@@ -99,7 +107,7 @@ export function ErrorMessageBanner({
           <button
             type="button"
             onClick={onRetry}
-            className="cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-medium text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]"
+            className="cursor-pointer rounded-md border border-[var(--oh-border)] px-2 py-1 text-xs font-normal text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]"
             data-testid="error-message-banner-retry"
           >
             {t(I18nKey.CHAT_INTERFACE$MESSAGE_RETRY)}
diff --git a/src/components/features/chat/model-messages.tsx b/src/components/features/chat/model-messages.tsx
index 8e54a2ca1..92b690cc6 100644
--- a/src/components/features/chat/model-messages.tsx
+++ b/src/components/features/chat/model-messages.tsx
@@ -26,7 +26,7 @@ function ProfileRow({ profile }: ProfileRowProps) {
         <span className="text-neutral-300">
           {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
         </span>
-        <span className="font-semibold text-neutral-200 text-sm">
+        <span className="font-normal text-neutral-200 text-sm">
           {profile.name}
         </span>
       </button>
diff --git a/src/components/features/chat/plan-preview.tsx b/src/components/features/chat/plan-preview.tsx
index 430dfa826..1dd63a7be 100644
--- a/src/components/features/chat/plan-preview.tsx
+++ b/src/components/features/chat/plan-preview.tsx
@@ -71,7 +71,7 @@ export function PlanPreview({
       {/* Header */}
       <div className="border-b border-[var(--oh-border)] flex h-[41px] items-center px-2 gap-1">
         <LessonPlanIcon width={18} height={18} color="var(--oh-muted)" />
-        <Typography.Text className="font-medium text-[11px] text-white tracking-[0.11px] leading-4">
+        <Typography.Text className="font-normal text-[11px] text-white tracking-[0.11px] leading-4">
           {t(I18nKey.COMMON$PLAN_MD)}
         </Typography.Text>
         <div className="flex-1" />
@@ -81,7 +81,7 @@ export function PlanPreview({
           className="flex items-center gap-1 hover:opacity-80 transition-opacity cursor-pointer"
           data-testid="plan-preview-view-button"
         >
-          <Typography.Text className="font-medium text-[11px] text-white tracking-[0.11px] leading-4">
+          <Typography.Text className="font-normal text-[11px] text-white tracking-[0.11px] leading-4">
             {t(I18nKey.COMMON$VIEW)}
           </Typography.Text>
           <ArrowUpRight className="text-white" size={18} />
@@ -129,9 +129,9 @@ export function PlanPreview({
           )}
           data-testid="plan-preview-build-button"
         >
-          <Typography.Text className="font-medium text-[14px] text-black leading-5">
+          <Typography.Text className="font-normal text-[14px] text-black leading-5">
             {t(I18nKey.COMMON$BUILD)}{" "}
-            <Typography.Text className="font-medium text-black">
+            <Typography.Text className="font-normal text-black">
               ⌘↩
             </Typography.Text>
           </Typography.Text>
diff --git a/src/components/features/chat/switch-profile-button.tsx b/src/components/features/chat/switch-profile-button.tsx
index c2f07b68f..bd2c11b78 100644
--- a/src/components/features/chat/switch-profile-button.tsx
+++ b/src/components/features/chat/switch-profile-button.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
-import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
+import { ComboboxCaretInline } from "#/ui/combobox-caret";
 import { useLlmProfiles } from "#/hooks/query/use-llm-profiles";
 import { useSwitchLlmProfileAndLog } from "#/hooks/mutation/use-switch-llm-profile-and-log";
 import { useActiveConversation } from "#/hooks/query/use-active-conversation";
@@ -88,7 +88,7 @@ export function SwitchProfileButton() {
         aria-haspopup="menu"
         aria-expanded={contextMenuOpen}
         className={cn(
-          "inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,color] max-w-[200px]",
+          "inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none max-w-[200px]",
           "hover:text-white hover:bg-white/10 cursor-pointer",
           "disabled:opacity-50 disabled:cursor-not-allowed",
         )}
@@ -96,13 +96,7 @@ export function SwitchProfileButton() {
         <span className="truncate">
           {activeProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER)}
         </span>
-        <ChevronDownSmallIcon
-          width={18}
-          height={18}
-          color="currentColor"
-          className="shrink-0"
-          aria-hidden
-        />
+        <ComboboxCaretInline isOpen={contextMenuOpen} />
       </button>
       {contextMenuOpen && (
         <SwitchProfileContextMenu
diff --git a/src/components/features/context-menu/context-menu-icon-text.tsx b/src/components/features/context-menu/context-menu-icon-text.tsx
index 9ecbc7933..c016647e7 100644
--- a/src/components/features/context-menu/context-menu-icon-text.tsx
+++ b/src/components/features/context-menu/context-menu-icon-text.tsx
@@ -1,4 +1,5 @@
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 interface ContextMenuIconTextProps {
   icon: React.ComponentType<{ className?: string }>;
@@ -17,7 +18,8 @@ export function ContextMenuIconText({
     <div className={cn("flex min-w-0 items-center gap-2", className)}>
       <Icon
         className={cn(
-          "h-4 w-4 shrink-0 text-[var(--oh-muted)] transition-colors group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)]",
+          "h-4 w-4 shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)]",
+          formControlTransitionClassName,
           iconClassName,
         )}
       />
diff --git a/src/components/features/controls/server-status-context-menu-icon-text.tsx b/src/components/features/controls/server-status-context-menu-icon-text.tsx
index e56d5c3fd..948811fb4 100644
--- a/src/components/features/controls/server-status-context-menu-icon-text.tsx
+++ b/src/components/features/controls/server-status-context-menu-icon-text.tsx
@@ -1,3 +1,7 @@
+import { ContextMenuListItem } from "#/components/features/context-menu/context-menu-list-item";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
+import { cn } from "#/utils/utils";
+
 interface ServerStatusContextMenuIconTextProps {
   icon: React.ReactNode;
   text: string;
@@ -12,14 +16,19 @@ export function ServerStatusContextMenuIconText({
   testId,
 }: ServerStatusContextMenuIconTextProps) {
   return (
-    <button
-      className="flex items-center justify-between p-2 hover:bg-[var(--oh-interactive-hover)] rounded text-sm text-white font-normal leading-5 cursor-pointer w-full"
-      onClick={onClick}
-      data-testid={testId}
-      type="button"
-    >
-      {text}
-      {icon}
-    </button>
+    <ContextMenuListItem testId={testId} onClick={onClick}>
+      <div className="flex min-w-0 w-full items-center justify-between gap-2">
+        <span className="min-w-0 truncate">{text}</span>
+        <span
+          className={cn(
+            "flex shrink-0 items-center text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current",
+            formControlTransitionClassName,
+          )}
+          aria-hidden
+        >
+          {icon}
+        </span>
+      </div>
+    </ContextMenuListItem>
   );
 }
diff --git a/src/components/features/controls/server-status-context-menu.tsx b/src/components/features/controls/server-status-context-menu.tsx
index 0d88ba81e..b83380175 100644
--- a/src/components/features/controls/server-status-context-menu.tsx
+++ b/src/components/features/controls/server-status-context-menu.tsx
@@ -49,12 +49,12 @@ export function ServerStatusContextMenu({
       <ServerStatus
         executionStatus={executionStatus}
         isPausing={isPausing}
-        className="py-1"
+        className="pl-0 pr-2 py-1"
       />
 
       {shouldActionShown && (
         <>
-          <Divider />
+          <Divider inset="menu" />
 
           {isActive && onStopServer && (
             <ServerStatusContextMenuIconText
diff --git a/src/components/features/controls/tools-context-menu-icon-text.tsx b/src/components/features/controls/tools-context-menu-icon-text.tsx
index 3058aa459..c40f7ee0d 100644
--- a/src/components/features/controls/tools-context-menu-icon-text.tsx
+++ b/src/components/features/controls/tools-context-menu-icon-text.tsx
@@ -1,4 +1,5 @@
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 interface ToolsContextMenuIconTextProps {
   icon: React.ReactNode;
@@ -22,7 +23,10 @@ export function ToolsContextMenuIconText({
     >
       <div className="flex min-w-0 items-center gap-2">
         <span
-          className="flex shrink-0 items-center text-[var(--oh-muted)] transition-colors group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current"
+          className={cn(
+            "flex shrink-0 items-center text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current",
+            formControlTransitionClassName,
+          )}
           aria-hidden
         >
           {icon}
@@ -31,7 +35,10 @@ export function ToolsContextMenuIconText({
       </div>
       {rightIcon ? (
         <span
-          className="flex shrink-0 items-center text-[var(--oh-muted)] transition-colors group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current"
+          className={cn(
+            "flex shrink-0 items-center text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current",
+            formControlTransitionClassName,
+          )}
           aria-hidden
         >
           {rightIcon}
diff --git a/src/components/features/controls/tools.tsx b/src/components/features/controls/tools.tsx
index f7552201b..d97658958 100644
--- a/src/components/features/controls/tools.tsx
+++ b/src/components/features/controls/tools.tsx
@@ -3,7 +3,7 @@ import { Wrench } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { useOptionalConversationId } from "#/hooks/use-conversation-id";
-import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
+import { ComboboxCaretInline } from "#/ui/combobox-caret";
 import { ToolsContextMenu } from "./tools-context-menu";
 import { useConversationNameContextMenu } from "#/hooks/use-conversation-name-context-menu";
 import { useActiveConversation } from "#/hooks/query/use-active-conversation";
@@ -49,7 +49,7 @@ export function Tools() {
     <div className="relative">
       <button
         type="button"
-        className="group flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-[var(--oh-muted)] transition-[border-color,color] cursor-pointer hover:text-white hover:bg-white/10"
+        className="group flex items-center gap-1 rounded-[100px] border border-transparent px-1.5 text-[var(--oh-muted)] transition-[border-color,background-color,box-shadow,opacity] duration-150 motion-reduce:transition-none cursor-pointer hover:text-white hover:bg-white/10"
         onClick={handleClick}
       >
         <Wrench
@@ -60,12 +60,7 @@ export function Tools() {
         <span className="text-sm font-normal leading-5">
           {t(I18nKey.MICROAGENTS_MODAL$TOOLS)}
         </span>
-        <ChevronDownSmallIcon
-          width={18}
-          height={18}
-          color="currentColor"
-          aria-hidden
-        />
+        <ComboboxCaretInline isOpen={contextMenuOpen} />
       </button>
       {contextMenuOpen && (
         <ToolsContextMenu
diff --git a/src/components/features/conversation-panel/conversation-card/conversation-card-footer.tsx b/src/components/features/conversation-panel/conversation-card/conversation-card-footer.tsx
index 8ab26ab31..924797347 100644
--- a/src/components/features/conversation-panel/conversation-card/conversation-card-footer.tsx
+++ b/src/components/features/conversation-panel/conversation-card/conversation-card-footer.tsx
@@ -62,6 +62,10 @@ export function ConversationCardFooter({
         t(I18nKey.CONVERSATION$ACP_AGENT_GENERIC))
       : null;
 
+  // Match title text start: 18px status column + gap-2 (8px).
+  const metadataIndentClass =
+    executionStatus !== undefined ? "pl-[26px]" : undefined;
+
   return (
     <div
       className={cn(
@@ -70,7 +74,7 @@ export function ConversationCardFooter({
       )}
     >
       {acpDisplayName ? (
-        <div className="pl-[18px]">
+        <div className={metadataIndentClass}>
           <span
             data-testid="conversation-card-acp-badge"
             className="inline-flex items-center px-1.5 py-0.5 rounded-full bg-[var(--oh-surface-raised)] text-[var(--oh-muted)] text-xs font-medium max-w-full truncate"
@@ -82,7 +86,10 @@ export function ConversationCardFooter({
       ) : null}
       {showLlmModel && llmModel ? (
         <span
-          className="min-w-0 max-w-full truncate pl-[18px] text-xs text-[var(--oh-muted)]"
+          className={cn(
+            "min-w-0 max-w-full truncate text-xs text-[var(--oh-muted)]",
+            metadataIndentClass,
+          )}
           title={llmModel}
         >
           {llmModel}
@@ -90,9 +97,8 @@ export function ConversationCardFooter({
       ) : null}
       <div
         className={cn(
-          // Align repo/workspace row with the title (status dot + gap).
           "flex flex-row items-center gap-2 w-full min-w-0",
-          showRepositoryMetadata && "pl-[18px]",
+          showRepositoryMetadata && metadataIndentClass,
         )}
       >
         {showRepositoryMetadata &&
diff --git a/src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx b/src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx
index 6bed9ae39..98340a5d5 100644
--- a/src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx
+++ b/src/components/features/conversation-panel/conversation-card/conversation-repo-link.tsx
@@ -24,25 +24,25 @@ export function ConversationRepoLink({
     : null;
 
   return (
-    <div className="flex items-center gap-3 flex-1 min-w-0 overflow-hidden">
-      <div className="flex items-center gap-1 min-w-0 flex-1">
-        {Icon && <Icon size={14} className="text-[var(--oh-muted)]" />}
+    <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+      <div className="flex min-w-0 items-center gap-1">
+        {Icon && <Icon size={14} className="shrink-0 text-[var(--oh-muted)]" />}
         {selectedRepository.git_provider === "azure_devops" && (
-          <AzureDevOpsLogo className="text-[var(--oh-muted)] w-[14px] h-[14px]" />
+          <AzureDevOpsLogo className="h-[14px] w-[14px] shrink-0 text-[var(--oh-muted)]" />
         )}
         <span
           data-testid="conversation-card-selected-repository"
-          className="text-xs text-[var(--oh-muted)] truncate min-w-0"
+          className="min-w-0 truncate text-xs text-[var(--oh-muted)]"
         >
           {selectedRepository.selected_repository}
         </span>
       </div>
-      <div className="flex items-center gap-1 min-w-0 max-w-[45%] shrink">
-        <FaCodeBranch size={12} className="text-[var(--oh-muted)]" />
+      <div className="flex min-w-0 items-center gap-1">
+        <FaCodeBranch size={12} className="shrink-0 text-[var(--oh-muted)]" />
 
         <span
           data-testid="conversation-card-selected-branch"
-          className="text-xs text-[var(--oh-muted)] truncate min-w-0"
+          className="min-w-0 truncate text-xs text-[var(--oh-muted)]"
         >
           {selectedRepository.selected_branch}
         </span>
diff --git a/src/components/features/conversation-panel/conversation-card/no-repository.tsx b/src/components/features/conversation-panel/conversation-card/no-repository.tsx
index 6b7153b3b..5070b41fc 100644
--- a/src/components/features/conversation-panel/conversation-card/no-repository.tsx
+++ b/src/components/features/conversation-panel/conversation-card/no-repository.tsx
@@ -1,5 +1,4 @@
 import { useTranslation } from "react-i18next";
-import { FaFolder } from "react-icons/fa6";
 import { I18nKey } from "#/i18n/declaration";
 import RepoForkedIcon from "#/icons/repo-forked.svg?react";
 import { getPathBasename } from "#/utils/path-utils";
@@ -17,13 +16,12 @@ export function NoRepository({ workspaceWorkingDir }: NoRepositoryProps) {
 
   if (folderName) {
     return (
-      <div
-        className="flex items-center gap-1 text-xs text-[var(--oh-muted)] flex-1 min-w-0"
+      <span
+        className="truncate min-w-0 text-xs text-[var(--oh-muted)] flex-1"
         title={workspaceWorkingDir ?? undefined}
       >
-        <FaFolder size={12} className="text-[var(--oh-muted)]" />
-        <span className="truncate min-w-0">{folderName}</span>
-      </div>
+        {folderName}
+      </span>
     );
   }
 
diff --git a/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx b/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx
index e3a785b51..7a0c1bdb8 100644
--- a/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx
+++ b/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx
@@ -19,6 +19,7 @@ import { I18nKey } from "#/i18n/declaration";
 import type { BackendKind } from "#/api/backend-registry/types";
 import { Divider } from "#/ui/divider";
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 import type {
   ConversationSortField,
   OrganizeMode,
@@ -111,7 +112,10 @@ function MenuRow({
       )}
     >
       <Icon
-        className="h-3.5 w-3.5 shrink-0 text-[var(--oh-muted)] transition-colors group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)]"
+        className={cn(
+          "h-3.5 w-3.5 shrink-0 text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)]",
+          formControlTransitionClassName,
+        )}
         aria-hidden
       />
       <span className="min-w-0 flex-1 truncate">{label}</span>
@@ -234,7 +238,10 @@ export function ConversationPanelFilterMenu({
         aria-haspopup="menu"
         aria-expanded={filterMenuOpen}
         onClick={() => setFilterMenuOpen(!filterMenuOpen)}
-        className="inline-flex h-7 w-7 items-center justify-center rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] transition-colors"
+        className={cn(
+          "inline-flex h-7 w-7 items-center justify-center rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
+          formControlTransitionClassName,
+        )}
       >
         <ListFilter
           className="lucide lucide-list-filter shrink-0"
diff --git a/src/components/features/conversation-panel/conversation-panel-list-helpers.ts b/src/components/features/conversation-panel/conversation-panel-list-helpers.ts
index 04747cd46..7420c7e8a 100644
--- a/src/components/features/conversation-panel/conversation-panel-list-helpers.ts
+++ b/src/components/features/conversation-panel/conversation-panel-list-helpers.ts
@@ -6,6 +6,57 @@ export type ConversationSortField = "created" | "updated";
 export type ThreadScope = "all" | "relevant";
 export type OrganizeMode = "grouped" | "chronological";
 
+/** Max conversations shown under a workspace/repo folder before "View more". */
+export const GROUP_CONVERSATIONS_PREVIEW_LIMIT = 5;
+
+interface GroupConversationPreviewOptions {
+  limit?: number;
+  expanded: boolean;
+  activeConversationId?: string | null;
+}
+
+export function getGroupConversationPreview(
+  conversations: readonly AppConversation[],
+  options: GroupConversationPreviewOptions,
+): {
+  visibleConversations: AppConversation[];
+  isPreviewTruncated: boolean;
+  isShowingAll: boolean;
+} {
+  const limit = options.limit ?? GROUP_CONVERSATIONS_PREVIEW_LIMIT;
+
+  if (options.expanded || conversations.length <= limit) {
+    return {
+      visibleConversations: [...conversations],
+      isPreviewTruncated: conversations.length > limit,
+      isShowingAll: true,
+    };
+  }
+
+  const activeIndex =
+    options.activeConversationId != null
+      ? conversations.findIndex((c) => c.id === options.activeConversationId)
+      : -1;
+
+  if (activeIndex >= limit) {
+    const activeConversation = conversations[activeIndex];
+    return {
+      visibleConversations: [
+        ...conversations.slice(0, limit - 1),
+        activeConversation,
+      ],
+      isPreviewTruncated: true,
+      isShowingAll: false,
+    };
+  }
+
+  return {
+    visibleConversations: conversations.slice(0, limit),
+    isPreviewTruncated: conversations.length > limit,
+    isShowingAll: false,
+  };
+}
+
 /** Subset of `useCreateConversation` variables for launching from a group row */
 export type ConversationGroupLaunch = {
   workingDir?: string;
diff --git a/src/components/features/conversation-panel/conversation-panel.tsx b/src/components/features/conversation-panel/conversation-panel.tsx
index 4c9c29fa8..38d5c3dbd 100644
--- a/src/components/features/conversation-panel/conversation-panel.tsx
+++ b/src/components/features/conversation-panel/conversation-panel.tsx
@@ -33,6 +33,7 @@ import { ConversationPanelFilterMenu } from "./conversation-panel-filter-menu";
 import { ConversationPanelNewThreadPicker } from "./conversation-panel-new-thread-picker";
 import {
   groupConversations,
+  getGroupConversationPreview,
   sortConversationsByField,
   type ConversationGroupLaunch,
 } from "./conversation-panel-list-helpers";
@@ -140,6 +141,9 @@ export function ConversationPanel({
   const [collapsedGroupIds, setCollapsedGroupIds] = React.useState<
     ReadonlySet<string>
   >(() => new Set());
+  const [expandedGroupPreviewIds, setExpandedGroupPreviewIds] = React.useState<
+    ReadonlySet<string>
+  >(() => new Set());
 
   const toggleGroupCollapsed = React.useCallback((groupId: string) => {
     setCollapsedGroupIds((prev) => {
@@ -153,9 +157,22 @@ export function ConversationPanel({
     });
   }, []);
 
+  const toggleGroupPreviewExpanded = React.useCallback((groupId: string) => {
+    setExpandedGroupPreviewIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  }, []);
+
   React.useEffect(() => {
     if (organizeMode !== "grouped") {
       setCollapsedGroupIds(new Set());
+      setExpandedGroupPreviewIds(new Set());
     }
   }, [organizeMode]);
 
@@ -170,8 +187,14 @@ export function ConversationPanel({
     string | null
   >(null);
 
-  const { data, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage } =
-    usePaginatedConversations();
+  const {
+    data,
+    isLoading,
+    isFetched,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = usePaginatedConversations();
 
   // Fetch in-progress start tasks
   const { data: startTasks } = useStartTasks();
@@ -419,7 +442,7 @@ export function ConversationPanel({
           key={conversation.id}
           to={`/conversations/${conversation.id}`}
           onClick={onClose}
-          className="block py-0.5"
+          className="block"
         >
           <ConversationCard
             onDelete={() =>
@@ -475,13 +498,16 @@ export function ConversationPanel({
   // child fills the panel and scrolls when its content overflows. Modals are
   // siblings of the scroll element and are `position: fixed`, so they don't
   // participate in the panel's scroll geometry.
-  // Gate on `isLoading` (true only during the first fetch with no cached
-  // data), not `isFetching` — the latter flips back to true on every 10s
-  // background refetch, causing the skeleton/empty-state to flicker when
-  // the list is empty.
-  const showInitialSkeleton = isLoading;
+  // Gate on `isLoading` / `!isFetched` (true only until the first fetch settles),
+  // not `isFetching` — the latter flips back to true on every 10s background
+  // refetch, causing the skeleton/empty-state to flicker when the list is empty.
+  const showInitialSkeleton = isLoading || !isFetched;
   const showEmptyState =
-    !isLoading && !compact && listIsEffectivelyEmpty && !startTasks?.length;
+    isFetched &&
+    !isLoading &&
+    !compact &&
+    listIsEffectivelyEmpty &&
+    !startTasks?.length;
 
   const showConversationHeader = !compact;
 
@@ -550,8 +576,11 @@ export function ConversationPanel({
         {showInitialSkeleton && <ConversationCardSkeleton compact={compact} />}
 
         {!compact && showEmptyState && (
-          <div className="flex min-h-0 flex-1 flex-col items-center justify-center px-4 py-8">
-            <p className="text-[var(--oh-muted)]">
+          <div
+            data-testid="conversation-panel-empty-state"
+            className="flex min-h-0 flex-1 flex-col items-center justify-center px-4 py-8"
+          >
+            <p className="text-xs text-[var(--oh-muted)]">
               {t(I18nKey.CONVERSATION$NO_CONVERSATIONS)}
             </p>
           </div>
@@ -586,12 +615,22 @@ export function ConversationPanel({
           >
             {conversationGroups.map((group) => {
               const headingId = `thread-folder-${group.id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+              const groupTestIdSuffix = group.id.replace(
+                /[^a-zA-Z0-9_-]/g,
+                "-",
+              );
               const expanded = !collapsedGroupIds.has(group.id);
+              const previewExpanded = expandedGroupPreviewIds.has(group.id);
+              const { visibleConversations, isPreviewTruncated, isShowingAll } =
+                getGroupConversationPreview(group.conversations, {
+                  expanded: previewExpanded,
+                  activeConversationId: currentConversationId,
+                });
               return (
                 <section key={group.id} aria-labelledby={headingId}>
                   <div
                     className={cn(
-                      "flex h-8 w-full min-w-0 items-center gap-0.5 rounded-md pl-2 pr-1 text-sm font-medium",
+                      "flex h-8 w-full min-w-0 items-center gap-0.5 rounded-md pl-2 pr-1 text-sm font-normal",
                       "text-[var(--oh-muted)] transition-colors",
                       "hover:bg-[var(--oh-surface-raised)] hover:text-white",
                     )}
@@ -636,7 +675,21 @@ export function ConversationPanel({
                   </div>
                   {expanded ? (
                     <div className="mt-0.5 space-y-0.5">
-                      {group.conversations.map(renderConversationCard)}
+                      {visibleConversations.map(renderConversationCard)}
+                      {isPreviewTruncated ? (
+                        <div className="pl-2">
+                          <button
+                            type="button"
+                            data-testid={`thread-folder-view-more-${groupTestIdSuffix}`}
+                            onClick={() => toggleGroupPreviewExpanded(group.id)}
+                            className="ml-[26px] cursor-pointer text-xs text-[var(--oh-text-dim)] hover:text-white"
+                          >
+                            {isShowingAll
+                              ? t(I18nKey.CONVERSATION_PANEL$LESS)
+                              : t(I18nKey.CONVERSATION_PANEL$MORE)}
+                          </button>
+                        </div>
+                      ) : null}
                     </div>
                   ) : null}
                 </section>
@@ -648,7 +701,9 @@ export function ConversationPanel({
         {!showInitialSkeleton &&
         !compact &&
         organizeMode === "chronological" ? (
-          <>{sortedVisibleConversations.map(renderConversationCard)}</>
+          <div className="space-y-0.5">
+            {sortedVisibleConversations.map(renderConversationCard)}
+          </div>
         ) : null}
 
         {/* Explicit "Load more" trigger. Only shown when more pages exist
diff --git a/src/components/features/conversation-panel/ellipsis-button.tsx b/src/components/features/conversation-panel/ellipsis-button.tsx
index e87c1a3d4..1aeea45bb 100644
--- a/src/components/features/conversation-panel/ellipsis-button.tsx
+++ b/src/components/features/conversation-panel/ellipsis-button.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ThreeDotsVerticalIcon from "#/icons/three-dots-vertical.svg?react";
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 interface EllipsisButtonProps {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -49,7 +50,8 @@ export const EllipsisButton = React.forwardRef<
       onClick={onClick}
       aria-label={ariaLabel}
       className={cn(
-        "p-1 rounded-md cursor-pointer transition-colors",
+        "p-1 rounded-md cursor-pointer",
+        formControlTransitionClassName,
         "text-[var(--oh-muted)] hover:text-white hover:bg-white/10",
         "flex items-center justify-center",
         className,
diff --git a/src/components/features/conversation-panel/new-conversation-button.tsx b/src/components/features/conversation-panel/new-conversation-button.tsx
index d2613e256..dcea5eceb 100644
--- a/src/components/features/conversation-panel/new-conversation-button.tsx
+++ b/src/components/features/conversation-panel/new-conversation-button.tsx
@@ -58,7 +58,7 @@ export function NewConversationButton({
           aria-label={compact ? newConversationLabel : undefined}
           className={cn(
             "flex items-center rounded-md cursor-pointer transition-colors",
-            "text-sm font-medium text-white bg-[var(--oh-surface)]/60 hover:bg-[var(--oh-surface-raised)]",
+            "text-sm text-white bg-[var(--oh-surface)]/60 hover:bg-[var(--oh-surface-raised)]",
             "border border-[var(--oh-border)]",
             compact
               ? "justify-center w-10 h-10 p-0 mx-auto"
diff --git a/src/components/features/conversation-panel/skills-modal-section.tsx b/src/components/features/conversation-panel/skills-modal-section.tsx
index a1bed46ee..f88d10e7a 100644
--- a/src/components/features/conversation-panel/skills-modal-section.tsx
+++ b/src/components/features/conversation-panel/skills-modal-section.tsx
@@ -16,7 +16,7 @@ export function SkillsModalSection({
     <section className="w-full">
       <div className="sticky top-0 z-10 border-b border-[var(--oh-border)] bg-surface-raised px-3 py-2">
         <div className="flex items-center justify-between gap-2">
-          <Typography.Text className="text-xs font-semibold tracking-[0.01em] text-tertiary-light">
+          <Typography.Text className="text-xs font-medium tracking-[0.01em] text-tertiary-light">
             {title}
           </Typography.Text>
           <span className="inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[11px] font-medium leading-4 border border-[var(--oh-border)] bg-[var(--oh-surface)] text-tertiary-light">
diff --git a/src/components/features/conversation-panel/system-message-modal/tab-button.tsx b/src/components/features/conversation-panel/system-message-modal/tab-button.tsx
index 43c174064..649cd77b0 100644
--- a/src/components/features/conversation-panel/system-message-modal/tab-button.tsx
+++ b/src/components/features/conversation-panel/system-message-modal/tab-button.tsx
@@ -20,7 +20,7 @@ export function TabButton({
       type="button"
       disabled={disabled}
       className={cn(
-        "px-4 py-2 font-medium border-b-2 transition-colors",
+        "px-4 py-2 font-normal border-b-2 transition-colors",
         isActive
           ? "border-foreground text-foreground"
           : "border-transparent text-[var(--oh-muted)] hover:text-[var(--oh-foreground)]",
diff --git a/src/components/features/conversation/conversation-loading.tsx b/src/components/features/conversation/conversation-loading.tsx
index d9904247d..86ec4ba10 100644
--- a/src/components/features/conversation/conversation-loading.tsx
+++ b/src/components/features/conversation/conversation-loading.tsx
@@ -21,7 +21,7 @@ export function ConversationLoading({ className }: ConversationLoadingProps) {
         className="h-8 w-8 shrink-0 animate-spin text-[var(--oh-text-secondary)]"
         aria-hidden
       />
-      <span className="text-base font-normal leading-5 text-[var(--oh-focus)] opacity-80">
+      <span className="text-base font-normal leading-5 text-[var(--oh-text-secondary)]">
         {t(I18nKey.HOME$LOADING)}
       </span>
     </div>
diff --git a/src/components/features/conversation/conversation-name-context-menu-icon-text.tsx b/src/components/features/conversation/conversation-name-context-menu-icon-text.tsx
index 7955c0132..982248257 100644
--- a/src/components/features/conversation/conversation-name-context-menu-icon-text.tsx
+++ b/src/components/features/conversation/conversation-name-context-menu-icon-text.tsx
@@ -1,4 +1,5 @@
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 interface ConversationNameContextMenuIconTextProps {
   icon: React.ReactNode;
@@ -14,7 +15,10 @@ export function ConversationNameContextMenuIconText({
   return (
     <div className={cn("flex min-w-0 w-full items-center gap-2", className)}>
       <span
-        className="flex shrink-0 items-center text-[var(--oh-muted)] transition-colors group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current"
+        className={cn(
+          "flex shrink-0 items-center text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)] group-focus-visible:text-[var(--oh-foreground)] [&_svg]:text-current",
+          formControlTransitionClassName,
+        )}
         aria-hidden
       >
         {icon}
diff --git a/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx b/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
index ba4ba16b3..7e1b350ba 100644
--- a/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
+++ b/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
@@ -47,7 +47,7 @@ export function ConversationTabNav({
     >
       <Icon className={cn("w-5 h-5 text-inherit flex-shrink-0")} />
       {isActive && label && (
-        <span className="text-sm font-medium whitespace-nowrap">{label}</span>
+        <span className="text-sm font-normal whitespace-nowrap">{label}</span>
       )}
     </button>
   );
diff --git a/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx b/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
index 5a0f72e7d..76c37de8a 100644
--- a/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
+++ b/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
@@ -352,7 +352,7 @@ export function ConversationTabs({
             )}
             data-testid="planner-tab-build-button"
           >
-            <Typography.Text className="text-[11px] font-medium leading-5 text-black">
+            <Typography.Text className="text-[11px] font-normal leading-5 text-black">
               {/* eslint-disable-next-line i18next/no-literal-string */}
               {t(I18nKey.COMMON$BUILD)} ⌘↩
             </Typography.Text>
diff --git a/src/components/features/home/git-branch-dropdown/git-branch-dropdown.tsx b/src/components/features/home/git-branch-dropdown/git-branch-dropdown.tsx
index 45f72916e..8d5020456 100644
--- a/src/components/features/home/git-branch-dropdown/git-branch-dropdown.tsx
+++ b/src/components/features/home/git-branch-dropdown/git-branch-dropdown.tsx
@@ -10,6 +10,7 @@ import { Branch } from "#/types/git";
 import { Provider } from "#/types/settings";
 import { useDebounce } from "#/hooks/use-debounce";
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 import { useBranchData } from "#/hooks/query/use-branch-data";
 
 import { ClearButton } from "../shared/clear-button";
@@ -183,7 +184,7 @@ export function GitBranchDropdown({
 
   return (
     <div className={cn("relative", className)}>
-      <div className="relative">
+      <div className="group relative text-[var(--oh-muted)] hover:text-white">
         <div className="absolute left-2 top-1/2 transform -translate-y-1/2 z-10">
           {isLoadingState ? (
             <div className="animate-spin h-4 w-4 border-2 border-white/20 border-t-white rounded-full" />
@@ -196,11 +197,10 @@ export function GitBranchDropdown({
             disabled: disabled || !repository,
             placeholder,
             className: cn(
-              "w-full px-3 py-2 border border-[var(--oh-border-input)] rounded-sm shadow-none h-[42px] min-h-[42px] max-h-[42px]",
-              "bg-tertiary text-[var(--oh-muted)] placeholder:text-[var(--oh-muted)]",
-              "focus:outline-none focus:ring-0 focus:border-[var(--oh-border-input)]",
-              "disabled:bg-tertiary disabled:cursor-not-allowed disabled:opacity-60",
-              "pl-7 pr-16 text-sm font-normal leading-5", // Space for clear and toggle buttons
+              formControlFieldClassName,
+              "text-inherit shadow-none pl-7 pr-16 text-sm font-normal leading-5",
+              "placeholder:text-[var(--oh-muted)]",
+              "disabled:cursor-not-allowed disabled:opacity-60",
             ),
             // Direct onChange for cursor position preservation
             onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -219,7 +219,6 @@ export function GitBranchDropdown({
             isOpen={isOpen}
             disabled={disabled || !repository}
             getToggleButtonProps={getToggleButtonProps}
-            iconClassName="w-10 h-10"
           />
         </div>
       </div>
diff --git a/src/components/features/home/git-provider-dropdown/git-provider-dropdown.tsx b/src/components/features/home/git-provider-dropdown/git-provider-dropdown.tsx
index 023cfa062..a4b61ea60 100644
--- a/src/components/features/home/git-provider-dropdown/git-provider-dropdown.tsx
+++ b/src/components/features/home/git-provider-dropdown/git-provider-dropdown.tsx
@@ -156,7 +156,7 @@ export function GitProviderDropdown({
 
   return (
     <div className={cn("relative", className)}>
-      <div className="relative">
+      <div className="group relative text-[var(--oh-muted)] hover:text-white">
         {/* Provider icon */}
         {selectedItem && (
           <div className="absolute left-2 top-1/2 transform -translate-y-1/2 z-10">
@@ -174,7 +174,7 @@ export function GitProviderDropdown({
             readOnly: true, // Make it non-searchable like the original
             className: cn(
               "w-29.5 h-6 py-0 border border-[var(--oh-border-input)] rounded shadow-none h-6 min-h-6 max-h-6 ",
-              "bg-tertiary text-[var(--oh-muted)] placeholder:text-[var(--oh-muted)]",
+              "text-inherit bg-tertiary placeholder:text-[var(--oh-muted)]",
               "focus:outline-none focus:ring-0 focus:border-[var(--oh-border-input)]",
               "disabled:bg-tertiary disabled:cursor-not-allowed disabled:opacity-60",
               "pl-1.5 pr-[1px] cursor-pointer text-xs font-normal leading-5", // Space for toggle button and pointer cursor
@@ -190,10 +190,7 @@ export function GitProviderDropdown({
             isOpen={isOpen}
             disabled={disabled}
             getToggleButtonProps={getToggleButtonProps}
-            iconClassName={cn(
-              "w-[23px] h-[23px] translate-y-[1px]",
-              toggleButtonClassName,
-            )}
+            iconClassName={toggleButtonClassName}
           />
         </div>
 
diff --git a/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx b/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx
index 27e5657c0..13dce4918 100644
--- a/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx
+++ b/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx
@@ -11,6 +11,7 @@ import { Provider } from "#/types/settings";
 import { GitRepository } from "#/types/git";
 import { useDebounce } from "#/hooks/use-debounce";
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 
 import { ClearButton } from "../shared/clear-button";
 import { ToggleButton } from "../shared/toggle-button";
@@ -286,7 +287,7 @@ export function GitRepoDropdown({
 
   return (
     <div className={cn("relative", className)}>
-      <div className="relative">
+      <div className="group relative text-[var(--oh-muted)] hover:text-white">
         <div className="absolute left-2 top-1/2 transform -translate-y-1/2 z-10">
           {isLoadingState ? (
             <div className="animate-spin h-4 w-4 border-2 border-white/20 border-t-white rounded-full" />
@@ -299,11 +300,10 @@ export function GitRepoDropdown({
             disabled,
             placeholder,
             className: cn(
-              "w-full px-3 py-2 border border-[var(--oh-border-input)] rounded-sm shadow-none h-[42px] min-h-[42px] max-h-[42px]",
-              "bg-tertiary text-[var(--oh-muted)] placeholder:text-[var(--oh-muted)]",
-              "focus:outline-none focus:ring-0 focus:border-[var(--oh-border-input)]",
-              "disabled:bg-tertiary disabled:cursor-not-allowed disabled:opacity-60",
-              "pl-7 pr-16 text-sm font-normal leading-5", // Space for clear and toggle buttons
+              formControlFieldClassName,
+              "text-inherit shadow-none pl-7 pr-16 text-sm font-normal leading-5",
+              "placeholder:text-[var(--oh-muted)]",
+              "disabled:cursor-not-allowed disabled:opacity-60",
             ),
             // Direct onChange for cursor position preservation
             onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -322,7 +322,6 @@ export function GitRepoDropdown({
             isOpen={isOpen}
             disabled={disabled}
             getToggleButtonProps={getToggleButtonProps}
-            iconClassName="w-10 h-10"
           />
         </div>
       </div>
diff --git a/src/components/features/home/home-header/home-header-title.tsx b/src/components/features/home/home-header/home-header-title.tsx
index 8cc478da4..db840d556 100644
--- a/src/components/features/home/home-header/home-header-title.tsx
+++ b/src/components/features/home/home-header/home-header-title.tsx
@@ -6,7 +6,7 @@ export function HomeHeaderTitle() {
 
   return (
     <div className="flex min-h-[80px] w-full items-center justify-center py-2">
-      <Typography.H1 className="w-full text-center font-semibold leading-normal">
+      <Typography.H1 className="w-full text-center leading-normal">
         {t("HOME$LETS_START_BUILDING")}
       </Typography.H1>
     </div>
diff --git a/src/components/features/home/new-conversation.tsx b/src/components/features/home/new-conversation.tsx
index 0c508b26d..767483e8a 100644
--- a/src/components/features/home/new-conversation.tsx
+++ b/src/components/features/home/new-conversation.tsx
@@ -51,7 +51,7 @@ export function NewConversation() {
           )
         }
         isDisabled={isCreatingConversation}
-        className="w-auto absolute bottom-5 left-5 right-5 font-semibold"
+        className="w-auto absolute bottom-5 left-5 right-5"
       >
         {!isCreatingConversation && t("COMMON$NEW_CONVERSATION")}
         {isCreatingConversation && t("HOME$LOADING")}
diff --git a/src/components/features/home/new-conversation/create-conversation-button.tsx b/src/components/features/home/new-conversation/create-conversation-button.tsx
index e417a90e2..1a26f3e35 100644
--- a/src/components/features/home/new-conversation/create-conversation-button.tsx
+++ b/src/components/features/home/new-conversation/create-conversation-button.tsx
@@ -36,7 +36,7 @@ export function CreateConversationButton() {
       type="button"
       onClick={handleCreateConversation}
       isDisabled={isCreatingConversation}
-      className="w-auto absolute bottom-5 left-5 right-5 font-semibold"
+      className="w-auto absolute bottom-5 left-5 right-5"
     >
       {!isCreatingConversation && t("COMMON$NEW_CONVERSATION")}
       {isCreatingConversation && t("HOME$LOADING")}
diff --git a/src/components/features/home/open-launcher-button.tsx b/src/components/features/home/open-launcher-button.tsx
index 3d4756036..6fb4a0e7c 100644
--- a/src/components/features/home/open-launcher-button.tsx
+++ b/src/components/features/home/open-launcher-button.tsx
@@ -1,8 +1,13 @@
+import { Folder } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
-import FolderIcon from "#/icons/folder.svg?react";
 import RepoForkedIcon from "#/icons/repo-forked.svg?react";
 import { cn } from "#/utils/utils";
+import {
+  formControlBorderClassName,
+  formControlSurfaceClassName,
+  formControlTransitionClassName,
+} from "#/utils/form-control-classes";
 
 interface OpenLauncherButtonProps {
   kind: "local" | "cloud";
@@ -30,20 +35,23 @@ export function OpenLauncherButton({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "flex flex-row items-center gap-2 pl-2.5 pr-2.5 py-1 rounded-[100px] border border-[rgba(71,74,84,0.50)] bg-transparent",
+        "flex flex-row items-center gap-2 rounded-full px-2.5 py-1 text-white",
+        formControlBorderClassName,
+        formControlSurfaceClassName,
+        formControlTransitionClassName,
         disabled
-          ? "opacity-50 cursor-not-allowed"
-          : "hover:border-[var(--oh-border-subtle)] cursor-pointer",
+          ? "cursor-not-allowed opacity-50"
+          : "cursor-pointer hover:bg-surface-raised",
       )}
     >
-      <span className="w-3 h-3 flex items-center justify-center text-white">
+      <span className="flex h-4 w-4 shrink-0 items-center justify-center">
         {isLocal ? (
-          <FolderIcon width={12} height={12} />
+          <Folder aria-hidden className="h-4 w-4" strokeWidth={2} />
         ) : (
-          <RepoForkedIcon width={12} height={12} color="white" />
+          <RepoForkedIcon width={16} height={16} className="shrink-0" />
         )}
       </span>
-      <span className="font-normal text-white text-sm leading-5">{label}</span>
+      <span className="text-sm font-normal leading-5">{label}</span>
     </button>
   );
 }
diff --git a/src/components/features/home/repo-selection-form.tsx b/src/components/features/home/repo-selection-form.tsx
index a4887efb8..1074827c5 100644
--- a/src/components/features/home/repo-selection-form.tsx
+++ b/src/components/features/home/repo-selection-form.tsx
@@ -240,7 +240,7 @@ export function RepositorySelectionForm({
             },
           );
         }}
-        className="w-full font-semibold"
+        className="w-full"
       >
         {onConfirm
           ? t(I18nKey.BUTTON$CONFIRM)
diff --git a/src/components/features/home/repository-selection/branch-error-state.tsx b/src/components/features/home/repository-selection/branch-error-state.tsx
index defa4873b..23d10128a 100644
--- a/src/components/features/home/repository-selection/branch-error-state.tsx
+++ b/src/components/features/home/repository-selection/branch-error-state.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 
 interface BranchErrorStateProps {
   wrapperClassName?: string;
@@ -11,7 +12,8 @@ export function BranchErrorState({ wrapperClassName }: BranchErrorStateProps) {
     <div
       data-testid="branch-dropdown-error"
       className={cn(
-        "flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[var(--oh-border-input)] rounded-sm text-red-500",
+        formControlFieldClassName,
+        "flex max-w-[500px] items-center gap-2 text-red-500",
         wrapperClassName,
       )}
     >
diff --git a/src/components/features/home/repository-selection/branch-loading-state.tsx b/src/components/features/home/repository-selection/branch-loading-state.tsx
index 6359aacc2..ed998d70d 100644
--- a/src/components/features/home/repository-selection/branch-loading-state.tsx
+++ b/src/components/features/home/repository-selection/branch-loading-state.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Spinner } from "@heroui/react";
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 
 interface BranchLoadingStateProps {
   wrapperClassName?: string;
@@ -14,7 +15,8 @@ export function BranchLoadingState({
     <div
       data-testid="branch-dropdown-loading"
       className={cn(
-        "flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[var(--oh-border-input)] rounded-sm",
+        formControlFieldClassName,
+        "flex max-w-[500px] items-center gap-2",
         wrapperClassName,
       )}
     >
diff --git a/src/components/features/home/repository-selection/repository-error-state.tsx b/src/components/features/home/repository-selection/repository-error-state.tsx
index 1d4c8f556..90159d284 100644
--- a/src/components/features/home/repository-selection/repository-error-state.tsx
+++ b/src/components/features/home/repository-selection/repository-error-state.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 
 export interface RepositoryErrorStateProps {
   wrapperClassName?: string;
@@ -13,7 +14,8 @@ export function RepositoryErrorState({
     <div
       data-testid="repo-dropdown-error"
       className={cn(
-        "flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[var(--oh-border-input)] rounded-sm text-red-500",
+        formControlFieldClassName,
+        "flex max-w-[500px] items-center gap-2 text-red-500",
         wrapperClassName,
       )}
     >
diff --git a/src/components/features/home/repository-selection/repository-loading-state.tsx b/src/components/features/home/repository-selection/repository-loading-state.tsx
index e26de2f19..510466932 100644
--- a/src/components/features/home/repository-selection/repository-loading-state.tsx
+++ b/src/components/features/home/repository-selection/repository-loading-state.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Spinner } from "@heroui/react";
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 
 export interface RepositoryLoadingStateProps {
   wrapperClassName?: string;
@@ -14,7 +15,8 @@ export function RepositoryLoadingState({
     <div
       data-testid="repo-dropdown-loading"
       className={cn(
-        "flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[var(--oh-border-input)] rounded-sm",
+        formControlFieldClassName,
+        "flex max-w-[500px] items-center gap-2",
         wrapperClassName,
       )}
     >
diff --git a/src/components/features/home/shared/dropdown-item.tsx b/src/components/features/home/shared/dropdown-item.tsx
index c39fc94a7..05cded7fb 100644
--- a/src/components/features/home/shared/dropdown-item.tsx
+++ b/src/components/features/home/shared/dropdown-item.tsx
@@ -44,7 +44,7 @@ export function DropdownItem<T>({
     <li key={getItemKey(item)} {...itemProps}>
       <div className="flex items-center gap-2">
         {renderIcon?.(item)}
-        <span className="font-medium">{getDisplayText(item)}</span>
+        <span className="font-normal">{getDisplayText(item)}</span>
       </div>
     </li>
   );
diff --git a/src/components/features/home/shared/toggle-button.tsx b/src/components/features/home/shared/toggle-button.tsx
index b074abb84..e38af6e60 100644
--- a/src/components/features/home/shared/toggle-button.tsx
+++ b/src/components/features/home/shared/toggle-button.tsx
@@ -1,5 +1,8 @@
+import {
+  ComboboxCaretIcon,
+  comboboxCaretButtonClassName,
+} from "#/ui/combobox-caret";
 import { cn } from "#/utils/utils";
-import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
 
 interface ToggleButtonProps {
   isOpen: boolean;
@@ -21,20 +24,16 @@ export function ToggleButton({
       {...getToggleButtonProps({
         disabled,
         className: cn(
-          "text-[#fff]",
-          "disabled:cursor-not-allowed disabled:opacity-60",
+          comboboxCaretButtonClassName,
+          "text-current",
+          isOpen && "rotate-180",
+          disabled && "cursor-not-allowed opacity-60",
         ),
       })}
       type="button"
       aria-label="Toggle menu"
     >
-      <ChevronDownSmallIcon
-        className={cn(
-          "w-4 h-4 transition-transform",
-          isOpen && "rotate-180",
-          iconClassName,
-        )}
-      />
+      <ComboboxCaretIcon className={iconClassName} />
     </button>
   );
 }
diff --git a/src/components/features/home/tasks/task-suggestions.tsx b/src/components/features/home/tasks/task-suggestions.tsx
index f09c14b42..cdd6b254a 100644
--- a/src/components/features/home/tasks/task-suggestions.tsx
+++ b/src/components/features/home/tasks/task-suggestions.tsx
@@ -58,7 +58,7 @@ export function TaskSuggestions({ filterFor }: TaskSuggestionsProps) {
           !hasSuggestedTasks && "mb-[14px]",
         )}
       >
-        <h3 className="text-xs leading-4 text-white font-semibold py-[14px] pl-[14px]">
+        <h3 className="text-xs leading-4 text-white font-medium py-[14px] pl-[14px]">
           {t(I18nKey.TASKS$SUGGESTED_TASKS)}
         </h3>
       </div>
diff --git a/src/components/features/home/workspace-dropdown/folder-browser-modal.tsx b/src/components/features/home/workspace-dropdown/folder-browser-modal.tsx
index 4b0e96c3a..a5297b424 100644
--- a/src/components/features/home/workspace-dropdown/folder-browser-modal.tsx
+++ b/src/components/features/home/workspace-dropdown/folder-browser-modal.tsx
@@ -218,7 +218,7 @@ export function FolderBrowserModal({
         {/* Title bar */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-[var(--oh-border-input)]">
           <BaseModalTitle
-            className="text-base"
+            className="text-sm font-medium text-white"
             title={t(I18nKey.HOME$ADD_WORKSPACES_TITLE)}
           />
         </div>
diff --git a/src/components/features/home/workspace-dropdown/manage-workspaces-modal.tsx b/src/components/features/home/workspace-dropdown/manage-workspaces-modal.tsx
index 14bfe4a81..fbbb1c47d 100644
--- a/src/components/features/home/workspace-dropdown/manage-workspaces-modal.tsx
+++ b/src/components/features/home/workspace-dropdown/manage-workspaces-modal.tsx
@@ -83,7 +83,7 @@ export function ManageWorkspacesModal({
         >
           <div className="flex items-center justify-between px-5 py-3 border-b border-[var(--oh-border-input)]">
             <BaseModalTitle
-              className="text-base"
+              className="text-sm font-medium text-white"
               title={t(I18nKey.HOME$MANAGE_WORKSPACES)}
             />
           </div>
diff --git a/src/components/features/home/workspace-dropdown/workspace-dropdown.tsx b/src/components/features/home/workspace-dropdown/workspace-dropdown.tsx
index 3868803b7..06b722a90 100644
--- a/src/components/features/home/workspace-dropdown/workspace-dropdown.tsx
+++ b/src/components/features/home/workspace-dropdown/workspace-dropdown.tsx
@@ -3,6 +3,7 @@ import { useCombobox } from "downshift";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "#/utils/utils";
+import { formControlFieldClassName } from "#/utils/form-control-classes";
 import { LocalWorkspace } from "#/types/workspace";
 import { I18nKey } from "#/i18n/declaration";
 import RepoIcon from "#/icons/repo.svg?react";
@@ -168,7 +169,7 @@ export function WorkspaceDropdown({
 
   return (
     <div className={cn("relative", className)}>
-      <div className="relative">
+      <div className="group relative text-[var(--oh-muted)] hover:text-white">
         <div className="absolute left-2 top-1/2 transform -translate-y-1/2 z-10">
           <RepoIcon width={16} height={16} />
         </div>
@@ -177,11 +178,10 @@ export function WorkspaceDropdown({
             disabled,
             placeholder: placeholder ?? t(I18nKey.HOME$WORKSPACE_PLACEHOLDER),
             className: cn(
-              "w-full px-3 py-2 border border-[var(--oh-border-input)] rounded-sm shadow-none h-[42px] min-h-[42px] max-h-[42px]",
-              "bg-tertiary text-[var(--oh-muted)] placeholder:text-[var(--oh-muted)]",
-              "focus:outline-none focus:ring-0 focus:border-[var(--oh-border-input)]",
-              "disabled:bg-tertiary disabled:cursor-not-allowed disabled:opacity-60",
-              "pl-7 pr-16 text-sm font-normal leading-5",
+              formControlFieldClassName,
+              "text-inherit shadow-none pl-7 pr-16 text-sm font-normal leading-5",
+              "placeholder:text-[var(--oh-muted)]",
+              "disabled:cursor-not-allowed disabled:opacity-60",
             ),
             onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
               setInputValue(e.target.value);
@@ -196,7 +196,6 @@ export function WorkspaceDropdown({
             isOpen={isOpen}
             disabled={disabled}
             getToggleButtonProps={getToggleButtonProps}
-            iconClassName="w-10 h-10"
           />
         </div>
       </div>
diff --git a/src/components/features/home/workspace-selection-form.tsx b/src/components/features/home/workspace-selection-form.tsx
index 2ae5d34bc..70e68c679 100644
--- a/src/components/features/home/workspace-selection-form.tsx
+++ b/src/components/features/home/workspace-selection-form.tsx
@@ -136,9 +136,7 @@ export function WorkspaceSelectionForm({
         }
         onClick={handleLaunch}
         className={
-          onConfirm
-            ? "w-full font-semibold"
-            : "w-auto absolute bottom-5 left-5 right-5 font-semibold"
+          onConfirm ? "w-full" : "w-auto absolute bottom-5 left-5 right-5"
         }
       >
         {onConfirm
diff --git a/src/components/features/launch/plugin-launch-plugin-section.tsx b/src/components/features/launch/plugin-launch-plugin-section.tsx
index c0e8dd459..7dd228ae9 100644
--- a/src/components/features/launch/plugin-launch-plugin-section.tsx
+++ b/src/components/features/launch/plugin-launch-plugin-section.tsx
@@ -42,7 +42,7 @@ export function PluginLaunchPluginSection({
         className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-base-tertiary rounded-t-lg cursor-pointer"
         data-testid={`plugin-section-${originalIndex}`}
       >
-        <Typography.Text className="text-base font-medium">
+        <Typography.Text className="text-base font-normal">
           {getPluginDisplayName(plugin)}
         </Typography.Text>
         {isExpanded ? (
diff --git a/src/components/features/mcp-page/custom-server-editor.tsx b/src/components/features/mcp-page/custom-server-editor.tsx
index 69c67ef81..ae93e0df6 100644
--- a/src/components/features/mcp-page/custom-server-editor.tsx
+++ b/src/components/features/mcp-page/custom-server-editor.tsx
@@ -87,7 +87,7 @@ export function CustomServerEditor({
       >
         <div className="mb-4 flex items-start justify-between gap-4">
           <BaseModalTitle
-            className="text-lg"
+            className="text-lg font-medium"
             title={
               isEditing
                 ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)
diff --git a/src/components/features/mcp-page/install-server-modal.tsx b/src/components/features/mcp-page/install-server-modal.tsx
index 02f7003d9..ef7efb3e6 100644
--- a/src/components/features/mcp-page/install-server-modal.tsx
+++ b/src/components/features/mcp-page/install-server-modal.tsx
@@ -287,9 +287,7 @@ export function InstallServerModal({
           <div className="flex min-w-0 flex-1 items-start gap-3">
             <McpLogoBadge entry={entry} />
             <div className="flex min-w-0 flex-1 flex-col">
-              <h2 className="text-lg font-semibold text-content-2">
-                {entry.name}
-              </h2>
+              <h2 className="text-lg font-medium">{entry.name}</h2>
               <p className="text-xs text-tertiary-alt">{entry.description}</p>
             </div>
           </div>
diff --git a/src/components/features/mcp-page/marketplace-section.tsx b/src/components/features/mcp-page/marketplace-section.tsx
index 1727402ae..e45650773 100644
--- a/src/components/features/mcp-page/marketplace-section.tsx
+++ b/src/components/features/mcp-page/marketplace-section.tsx
@@ -40,7 +40,7 @@ export function MarketplaceSection({
       data-testid="mcp-marketplace-section"
       className="flex flex-col gap-3"
     >
-      <h2 className="text-base font-semibold text-foreground">
+      <h2 className="text-base font-medium text-foreground">
         {t(I18nKey.MCP$LIBRARY_TITLE)}
       </h2>
 
diff --git a/src/components/features/onboarding/steps/check-backend-step.tsx b/src/components/features/onboarding/steps/check-backend-step.tsx
index c3f00f686..f717d3884 100644
--- a/src/components/features/onboarding/steps/check-backend-step.tsx
+++ b/src/components/features/onboarding/steps/check-backend-step.tsx
@@ -90,7 +90,7 @@ export function CheckBackendStep({ onBack, onNext }: CheckBackendStepProps) {
       className="flex flex-col gap-6"
     >
       <header className="flex flex-col gap-2">
-        <h2 className="text-2xl font-semibold text-white">
+        <h2 className="text-2xl font-medium text-white">
           {t(I18nKey.ONBOARDING$BACKEND_TITLE)}
         </h2>
         <p className="text-sm text-[var(--oh-muted)]">
diff --git a/src/components/features/onboarding/steps/choose-agent-step.tsx b/src/components/features/onboarding/steps/choose-agent-step.tsx
index 313dcb585..d9452df81 100644
--- a/src/components/features/onboarding/steps/choose-agent-step.tsx
+++ b/src/components/features/onboarding/steps/choose-agent-step.tsx
@@ -187,7 +187,7 @@ export function ChooseAgentStep({
       className="flex flex-col gap-6"
     >
       <header className="flex flex-col gap-2">
-        <h2 className="text-2xl font-semibold text-white">
+        <h2 className="text-2xl font-medium text-white">
           {t(I18nKey.ONBOARDING$AGENT_TITLE)}
         </h2>
         <p className="text-sm text-[var(--oh-muted)]">
@@ -221,7 +221,7 @@ export function ChooseAgentStep({
               <div className="flex min-w-0 flex-1 flex-col gap-1">
                 <div className="flex min-w-0 items-center gap-2">
                   <AgentOptionIcon id={option.id} muted={false} />
-                  <span className="truncate text-base font-medium text-white">
+                  <span className="truncate text-base font-normal text-white">
                     {option.label}
                   </span>
                 </div>
diff --git a/src/components/features/onboarding/steps/say-hello-step.tsx b/src/components/features/onboarding/steps/say-hello-step.tsx
index fc68f65d5..7688cb54b 100644
--- a/src/components/features/onboarding/steps/say-hello-step.tsx
+++ b/src/components/features/onboarding/steps/say-hello-step.tsx
@@ -69,7 +69,7 @@ export function SayHelloStep({ onBack, onLaunched }: SayHelloStepProps) {
       className="flex flex-col gap-6"
     >
       <header className="flex flex-col gap-2">
-        <h2 className="text-2xl font-semibold text-white">
+        <h2 className="text-2xl font-medium text-white">
           {t(I18nKey.ONBOARDING$HELLO_TITLE)}
         </h2>
         <p className="text-sm text-[var(--oh-muted)]">
diff --git a/src/components/features/onboarding/steps/setup-llm-step.tsx b/src/components/features/onboarding/steps/setup-llm-step.tsx
index fb403c8b1..3c47677cd 100644
--- a/src/components/features/onboarding/steps/setup-llm-step.tsx
+++ b/src/components/features/onboarding/steps/setup-llm-step.tsx
@@ -107,7 +107,7 @@ export function SetupLlmStep({ onBack, onNext }: SetupLlmStepProps) {
       className="flex flex-col gap-6 max-h-[calc(90vh-7rem)]"
     >
       <header className="flex flex-col gap-2">
-        <h2 className="text-2xl font-semibold text-white">
+        <h2 className="text-2xl font-medium text-white">
           {t(I18nKey.ONBOARDING$LLM_TITLE)}
         </h2>
         <p className="text-sm text-[var(--oh-muted)]">
diff --git a/src/components/features/settings/api-key-modal-base.tsx b/src/components/features/settings/api-key-modal-base.tsx
index 584d9e2e6..0617b149a 100644
--- a/src/components/features/settings/api-key-modal-base.tsx
+++ b/src/components/features/settings/api-key-modal-base.tsx
@@ -92,7 +92,11 @@ export function ApiKeyModalBase({
           MODAL_MAX_WIDTH_VIEWPORT,
         )}
       >
-        <BaseModalTitle id="modal-title" title={title} />
+        <BaseModalTitle
+          id="modal-title"
+          title={title}
+          className="text-xl font-medium text-white"
+        />
         {children}
         <div className="w-full flex justify-end gap-2 mt-2">{footer}</div>
       </div>
diff --git a/src/components/features/settings/brand-button.tsx b/src/components/features/settings/brand-button.tsx
index 48ddaff67..2fced8705 100644
--- a/src/components/features/settings/brand-button.tsx
+++ b/src/components/features/settings/brand-button.tsx
@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { cn } from "#/utils/utils";
+import { formControlButtonClassName } from "#/utils/form-control-classes";
 
 interface BrandButtonProps {
   testId?: string;
@@ -48,16 +49,16 @@ export const BrandButton = forwardRef<
       aria-label={ariaLabel}
       aria-busy={ariaBusy}
       className={cn(
-        "w-fit p-2 text-sm rounded-sm disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer",
+        formControlButtonClassName,
         variant === "primary" &&
           "bg-primary text-[var(--oh-color-base)] hover:opacity-80",
         variant === "secondary" &&
-          "border border-[var(--oh-border)] text-white hover:bg-surface-raised",
+          "border border-[var(--oh-border)] bg-base-secondary text-white hover:bg-surface-raised",
         variant === "tertiary" &&
           "bg-[var(--oh-interactive-hover)] text-white hover:opacity-80",
         variant === "danger" && "bg-red-600 text-white hover:bg-red-700",
         variant === "ghost-danger" &&
-          "bg-transparent text-red-600 underline hover:text-red-700 hover:no-underline font-medium",
+          "h-auto min-h-0 bg-transparent px-0 text-red-600 underline hover:text-red-700 hover:no-underline font-normal",
         startContent && "flex items-center justify-center gap-2",
         className,
       )}
diff --git a/src/components/features/settings/llm-profiles/llm-profiles-manager.tsx b/src/components/features/settings/llm-profiles/llm-profiles-manager.tsx
index af646690d..85e87e9d1 100644
--- a/src/components/features/settings/llm-profiles/llm-profiles-manager.tsx
+++ b/src/components/features/settings/llm-profiles/llm-profiles-manager.tsx
@@ -53,7 +53,7 @@ export function LlmProfilesManager({
     <>
       <div className="flex flex-col gap-4">
         <div className="flex flex-wrap items-center justify-between gap-3">
-          <h2 className="text-base font-semibold text-white">
+          <h2 className="text-base font-medium text-white">
             {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}
           </h2>
           {onAddProfile ? (
diff --git a/src/components/features/settings/llm-profiles/llm-settings-local-view.tsx b/src/components/features/settings/llm-profiles/llm-settings-local-view.tsx
index b60ac0de9..d83a23757 100644
--- a/src/components/features/settings/llm-profiles/llm-settings-local-view.tsx
+++ b/src/components/features/settings/llm-profiles/llm-settings-local-view.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { LlmProfilesManager } from "./llm-profiles-manager";
 import { ProfileNameInput } from "./profile-name-input";
@@ -21,6 +21,8 @@ import {
 import { SdkSectionSaveControl } from "../sdk-settings/sdk-section-page";
 import { SettingsFormValues } from "#/utils/sdk-settings-schema";
 import { ArrowLeft } from "lucide-react";
+import { Typography } from "#/ui/typography";
+import { useSettingsSectionHeader } from "#/contexts/settings-section-header-context";
 
 type ViewMode = "list" | "create" | "edit";
 
@@ -41,6 +43,7 @@ interface EditingProfile {
 
 export function LlmSettingsLocalView() {
   const { t } = useTranslation("openhands");
+  const { setHideSectionHeader } = useSettingsSectionHeader();
   const saveProfile = useSaveLlmProfile();
   const { data: profilesData } = useLlmProfiles();
 
@@ -54,6 +57,11 @@ export function LlmSettingsLocalView() {
   );
   const [isSaving, setIsSaving] = useState(false);
 
+  useEffect(() => {
+    setHideSectionHeader(viewMode !== "list");
+    return () => setHideSectionHeader(false);
+  }, [viewMode, setHideSectionHeader]);
+
   // Get existing profile names for validation
   const existingNames = useMemo(
     () => new Set(profilesData?.profiles.map((p) => p.name) ?? []),
@@ -268,20 +276,18 @@ export function LlmSettingsLocalView() {
     <div className="flex flex-col gap-6">
       {/* Header with back button */}
       <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={handleBackToList}
-            className="p-2 rounded-lg hover:bg-tertiary text-neutral-400 hover:text-white transition-colors"
-            aria-label={t(I18nKey.BUTTON$BACK)}
-            data-testid="back-to-profiles"
-          >
-            <ArrowLeft size={20} />
-          </button>
-          <h2 className="text-base font-semibold text-white">
-            {profileEditorTitle}
-          </h2>
-        </div>
+        <button
+          type="button"
+          onClick={handleBackToList}
+          className="flex items-center gap-2 self-start rounded-lg p-2 text-[var(--oh-muted)] transition-colors hover:bg-tertiary hover:text-white"
+          data-testid="back-to-profiles"
+        >
+          <ArrowLeft size={20} aria-hidden />
+          <span className="text-sm leading-5">{t(I18nKey.BUTTON$BACK)}</span>
+        </button>
+        <Typography.H2 testId="profile-editor-title">
+          {profileEditorTitle}
+        </Typography.H2>
         <p
           data-testid="profile-editor-description"
           className="text-sm leading-5 text-tertiary-light"
diff --git a/src/components/features/settings/llm-profiles/profile-actions-menu.tsx b/src/components/features/settings/llm-profiles/profile-actions-menu.tsx
index 71e560e3d..86bdccde4 100644
--- a/src/components/features/settings/llm-profiles/profile-actions-menu.tsx
+++ b/src/components/features/settings/llm-profiles/profile-actions-menu.tsx
@@ -7,31 +7,34 @@ import {
 } from "react";
 import ReactDOM from "react-dom";
 import { useTranslation } from "react-i18next";
+import { TextCursor } from "lucide-react";
 import { cn } from "#/utils/utils";
 import { I18nKey } from "#/i18n/declaration";
+import { ConversationNameContextMenuIconText } from "#/components/features/conversation/conversation-name-context-menu-icon-text";
+import EditIcon from "#/icons/u-edit.svg?react";
+import CheckCircleIcon from "#/icons/u-check-circle.svg?react";
+import DeleteIcon from "#/icons/u-delete.svg?react";
 
 interface MenuItemProps {
   index: number;
+  icon: React.ReactNode;
   label: string;
   onClick: () => void;
   onKeyDown: (e: React.KeyboardEvent, index: number) => void;
   menuItemsRef: React.MutableRefObject<(HTMLButtonElement | null)[]>;
   disabled?: boolean;
-  className?: string;
   testId: string;
-  destructive?: boolean;
 }
 
 function MenuItem({
   index,
+  icon,
   label,
   onClick,
   onKeyDown,
   menuItemsRef,
   disabled,
-  className,
   testId,
-  destructive,
 }: MenuItemProps) {
   return (
     <button
@@ -44,15 +47,14 @@ function MenuItem({
       onKeyDown={(e) => onKeyDown(e, index)}
       disabled={disabled}
       className={cn(
-        "w-full text-left px-4 py-2 text-sm text-white hover:bg-tertiary cursor-pointer",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className,
+        "group w-full cursor-pointer rounded px-2 py-2 text-start text-nowrap text-sm font-normal",
+        "text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
       )}
       role="menuitem"
       data-testid={testId}
-      data-destructive={destructive ? "true" : undefined}
     >
-      {label}
+      <ConversationNameContextMenuIconText icon={icon} text={label} />
     </button>
   );
 }
@@ -97,13 +99,13 @@ export function ProfileActionsMenu({
     const updatePosition = () => {
       const rect = anchorElement.getBoundingClientRect();
       if (!rect) return;
-      // 4px gap matches the previous `mt-1` spacing.
-      const gap = 4;
+      const gap = 8;
       setPortalStyle({
         position: "fixed",
         zIndex: 9999,
         top: rect.bottom + gap,
         right: window.innerWidth - rect.right,
+        width: "max-content",
       });
     };
 
@@ -176,11 +178,7 @@ export function ProfileActionsMenu({
     <div
       ref={menuRef}
       className={cn(
-        "absolute right-0 top-full mt-1 z-10 bg-base-secondary border border-[var(--oh-border)] rounded-md shadow-lg py-1 w-[160px]",
-        // When portaled the menu is positioned via the wrapper's inline
-        // `style` (fixed coords from the anchor rect), so we must neutralize
-        // the Tailwind absolute positioning that would otherwise pin it to
-        // its now-irrelevant offset parent.
+        "absolute right-0 top-full z-10 mt-2 w-[160px] rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg",
         isPortaled &&
           "!static !top-auto !bottom-auto !left-auto !right-auto !mt-0",
       )}
@@ -190,6 +188,7 @@ export function ProfileActionsMenu({
     >
       <MenuItem
         index={0}
+        icon={<EditIcon width={16} height={16} />}
         label={t(I18nKey.SETTINGS$PROFILE_EDIT)}
         onClick={() => handleAction(onEdit)}
         onKeyDown={handleKeyDown}
@@ -198,6 +197,7 @@ export function ProfileActionsMenu({
       />
       <MenuItem
         index={1}
+        icon={<TextCursor aria-hidden className="size-4" strokeWidth={2} />}
         label={t(I18nKey.BUTTON$RENAME)}
         onClick={() => handleAction(onRename)}
         onKeyDown={handleKeyDown}
@@ -206,6 +206,7 @@ export function ProfileActionsMenu({
       />
       <MenuItem
         index={2}
+        icon={<CheckCircleIcon width={16} height={16} />}
         label={t(I18nKey.SETTINGS$PROFILE_SET_ACTIVE)}
         onClick={() => handleAction(onSetActive)}
         onKeyDown={handleKeyDown}
@@ -215,13 +216,12 @@ export function ProfileActionsMenu({
       />
       <MenuItem
         index={3}
+        icon={<DeleteIcon width={16} height={16} />}
         label={t(I18nKey.BUTTON$DELETE)}
         onClick={() => handleAction(onDelete)}
         onKeyDown={handleKeyDown}
         menuItemsRef={menuItemsRef}
-        className="text-red-400"
         testId="profile-delete"
-        destructive
       />
     </div>
   );
diff --git a/src/components/features/settings/llm-profiles/profile-row.tsx b/src/components/features/settings/llm-profiles/profile-row.tsx
index 2d049c8c3..e5490eecc 100644
--- a/src/components/features/settings/llm-profiles/profile-row.tsx
+++ b/src/components/features/settings/llm-profiles/profile-row.tsx
@@ -5,6 +5,11 @@ import { ProfileInfo } from "#/api/profiles-service/profiles-service.api";
 import { I18nKey } from "#/i18n/declaration";
 import { EllipsisButton } from "#/components/features/conversation-panel/ellipsis-button";
 import { BrandBadge } from "#/components/shared/badge";
+import { cn } from "#/utils/utils";
+import {
+  settingsListIconActionButtonClassName,
+  settingsListRowClassName,
+} from "#/utils/settings-list-classes";
 
 interface ProfileRowProps {
   profile: ProfileInfo;
@@ -32,18 +37,18 @@ export function ProfileRow({
   return (
     <div
       data-testid="profile-row"
-      className="flex items-center justify-between gap-3 px-5 py-4"
+      className={cn(settingsListRowClassName, "justify-between gap-3")}
     >
-      <div className="flex flex-col gap-1 min-w-0 flex-1 sm:flex-row sm:items-center sm:gap-3">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
         <span
-          className="font-medium text-white truncate min-w-0 max-w-full"
+          className="min-w-0 max-w-full truncate text-sm font-medium text-white"
           title={profile.name}
         >
           {profile.name}
         </span>
         {profile.model ? (
           <span
-            className="text-sm text-[var(--oh-muted)] truncate min-w-0 max-w-full"
+            className="min-w-0 max-w-full truncate text-sm text-[var(--oh-muted)]"
             title={profile.model}
           >
             {profile.model}
@@ -51,7 +56,7 @@ export function ProfileRow({
         ) : null}
         {isActive && (
           <BrandBadge
-            className="text-xs px-2.5 py-1 whitespace-nowrap self-start sm:self-auto"
+            className="shrink-0 whitespace-nowrap px-2.5 py-1 text-xs"
             data-testid="profile-active-badge"
           >
             {t(I18nKey.SETTINGS$PROFILE_ACTIVE)}
@@ -64,6 +69,7 @@ export function ProfileRow({
           onClick={() => setMenuOpen((open) => !open)}
           ariaLabel={t(I18nKey.SETTINGS$PROFILE_MENU)}
           testId="profile-menu-trigger"
+          className={settingsListIconActionButtonClassName}
         />
         {menuOpen && (
           <ProfileActionsMenu
diff --git a/src/components/features/settings/llm-profiles/profiles-body.tsx b/src/components/features/settings/llm-profiles/profiles-body.tsx
index 5c0cc3c88..cc597e9db 100644
--- a/src/components/features/settings/llm-profiles/profiles-body.tsx
+++ b/src/components/features/settings/llm-profiles/profiles-body.tsx
@@ -3,6 +3,11 @@ import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { ProfileRow } from "./profile-row";
 import { ProfileInfo } from "#/api/profiles-service/profiles-service.api";
 import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
+import {
+  settingsListContainerClassName,
+  settingsListDividerClassName,
+} from "#/utils/settings-list-classes";
 
 interface ProfilesBodyProps {
   isLoading: boolean;
@@ -54,7 +59,12 @@ export function ProfilesBody({
   }
 
   return (
-    <div className="border border-[var(--oh-border)] rounded-md divide-y divide-[var(--oh-border-subtle)]">
+    <div
+      className={cn(
+        settingsListContainerClassName,
+        settingsListDividerClassName,
+      )}
+    >
       {profiles.map((profile) => (
         <ProfileRow
           key={profile.name}
diff --git a/src/components/features/settings/mcp-settings/mcp-server-form.tsx b/src/components/features/settings/mcp-settings/mcp-server-form.tsx
index 4276d8737..a2937da13 100644
--- a/src/components/features/settings/mcp-settings/mcp-server-form.tsx
+++ b/src/components/features/settings/mcp-settings/mcp-server-form.tsx
@@ -6,6 +6,7 @@ import { SettingsDropdownInput } from "../settings-dropdown-input";
 import { BrandButton } from "../brand-button";
 import { OptionalTag } from "../optional-tag";
 import { cn } from "#/utils/utils";
+import { formControlMultilineFieldClassName } from "#/utils/form-control-classes";
 
 type MCPServerType = "sse" | "stdio" | "shttp";
 
@@ -376,8 +377,9 @@ export function MCPServerForm({
               defaultValue={server?.args?.join("\n") || ""}
               placeholder="arg1&#10;arg2&#10;arg3"
               className={cn(
-                "bg-tertiary border border-[var(--oh-border-input)] w-full rounded-sm p-2 placeholder:text-tertiary-alt resize-none",
-                "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed",
+                formControlMultilineFieldClassName,
+                "resize-none placeholder:italic",
+                "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]",
               )}
             />
             <p className="text-xs text-tertiary-alt">
@@ -399,9 +401,9 @@ export function MCPServerForm({
               defaultValue={formatEnvironmentVariables(server?.env)}
               placeholder="KEY1=value1&#10;KEY2=value2"
               className={cn(
-                "resize-none",
-                "bg-tertiary border border-[var(--oh-border-input)] rounded-sm p-2 placeholder:text-tertiary-alt",
-                "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed",
+                formControlMultilineFieldClassName,
+                "resize-none placeholder:italic",
+                "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]",
               )}
             />
           </label>
diff --git a/src/components/features/settings/sdk-settings/schema-field.tsx b/src/components/features/settings/sdk-settings/schema-field.tsx
index 294e80a59..f69e0b8df 100644
--- a/src/components/features/settings/sdk-settings/schema-field.tsx
+++ b/src/components/features/settings/sdk-settings/schema-field.tsx
@@ -14,6 +14,10 @@ import {
   resolveSchemaFieldLabel,
 } from "#/utils/sdk-settings-field-metadata";
 import { cn } from "#/utils/utils";
+import {
+  formControlMultilineFieldClassName,
+  formControlSwitchDescriptionClassName,
+} from "#/utils/form-control-classes";
 
 // ---------------------------------------------------------------------------
 // Help links – UI-only mapping from field keys to user-facing guidance.
@@ -117,7 +121,9 @@ export function SchemaField({
         >
           {label}
         </SettingsSwitch>
-        <FieldHelp field={field} />
+        <div className={formControlSwitchDescriptionClassName}>
+          <FieldHelp field={field} />
+        </div>
       </div>
     );
   }
@@ -167,9 +173,9 @@ export function SchemaField({
           disabled={isDisabled}
           onChange={(event) => onChange(event.target.value)}
           className={cn(
-            "bg-tertiary border border-[var(--oh-border-input)] min-h-32 w-full min-w-0 rounded-sm p-2 font-mono text-sm",
-            "placeholder:text-tertiary-alt",
-            "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed",
+            formControlMultilineFieldClassName,
+            "min-h-32 font-mono placeholder:italic",
+            "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]",
           )}
         />
         <FieldHelp field={field} />
diff --git a/src/components/features/settings/sdk-settings/view-toggle.tsx b/src/components/features/settings/sdk-settings/view-toggle.tsx
index 70f9591b8..83a9dbe45 100644
--- a/src/components/features/settings/sdk-settings/view-toggle.tsx
+++ b/src/components/features/settings/sdk-settings/view-toggle.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { SettingsView } from "#/utils/sdk-settings-schema";
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 interface ViewToggleProps {
   view: SettingsView;
@@ -13,7 +14,8 @@ interface ViewToggleProps {
 
 const tabButtonClass = (isActive: boolean, isDisabled: boolean) =>
   cn(
-    "w-fit px-2 py-2 text-sm cursor-pointer rounded-none bg-transparent transition-[color,border-color]",
+    "w-fit px-2 py-2 text-sm cursor-pointer rounded-none bg-transparent",
+    formControlTransitionClassName,
     "border-b-2 pb-2",
     isActive
       ? "text-white border-white"
diff --git a/src/components/features/settings/secrets-settings/secret-form.tsx b/src/components/features/settings/secrets-settings/secret-form.tsx
index 1b63ea8db..6cffc4ff6 100644
--- a/src/components/features/settings/secrets-settings/secret-form.tsx
+++ b/src/components/features/settings/secrets-settings/secret-form.tsx
@@ -6,6 +6,10 @@ import { useCreateSecret } from "#/hooks/mutation/use-create-secret";
 import { useUpdateSecret } from "#/hooks/mutation/use-update-secret";
 import { SettingsInput } from "../settings-input";
 import { cn } from "#/utils/utils";
+import {
+  formControlMultilineFieldClassName,
+  formControlSettingsFieldClassName,
+} from "#/utils/form-control-classes";
 import { BrandButton } from "../brand-button";
 import { useSearchSecrets } from "#/hooks/query/use-get-secrets";
 import { OptionalTag } from "../optional-tag";
@@ -138,7 +142,8 @@ export function SecretForm({
             required
             className={cn(
               "resize-none",
-              "bg-tertiary border border-[var(--oh-border-input)] rounded-sm p-2 placeholder:text-tertiary-alt",
+              formControlMultilineFieldClassName,
+              "placeholder:italic",
               "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed",
             )}
             rows={8}
@@ -156,9 +161,8 @@ export function SecretForm({
           name="secret-description"
           defaultValue={secretDescription}
           className={cn(
-            "resize-none",
-            "bg-tertiary border border-[var(--oh-border-input)] rounded-sm p-2 placeholder:text-tertiary-alt",
-            "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed",
+            formControlSettingsFieldClassName,
+            "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]",
           )}
         />
       </label>
diff --git a/src/components/features/settings/secrets-settings/secret-list-item.tsx b/src/components/features/settings/secrets-settings/secret-list-item.tsx
index 81d14af40..e89205b08 100644
--- a/src/components/features/settings/secrets-settings/secret-list-item.tsx
+++ b/src/components/features/settings/secrets-settings/secret-list-item.tsx
@@ -1,13 +1,24 @@
 import { Pencil, Trash2 } from "lucide-react";
+import { cn } from "#/utils/utils";
+import {
+  settingsListIconActionButtonClassName,
+  settingsListRowClassName,
+  settingsListTableCellClassName,
+  settingsListTableRowClassName,
+} from "#/utils/settings-list-classes";
 
 export function SecretListItemSkeleton() {
   return (
-    <div className="border-t border-[var(--oh-border-input)] last-of-type:border-b w-full min-w-0 pr-2.5 py-[13px] flex items-center justify-between">
-      <div className="flex items-center justify-between w-1/3">
-        <span className="skeleton h-4 w-1/2" />
+    <div
+      className={cn(
+        settingsListRowClassName,
+        "justify-between border-t border-[var(--oh-border)] first:border-t-0",
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-4">
         <span className="skeleton h-4 w-1/4" />
+        <span className="skeleton h-4 w-1/2" />
       </div>
-
       <div className="flex items-center gap-1">
         <span className="skeleton h-4 w-4" />
         <span className="skeleton h-4 w-4" />
@@ -30,29 +41,35 @@ export function SecretListItem({
   onDelete,
 }: SecretListItemProps) {
   return (
-    <tr
-      data-testid="secret-item"
-      className="border-t border-[var(--oh-border)]"
-    >
-      <td className="px-3 py-2 text-sm text-content-2 truncate" title={title}>
+    <tr data-testid="secret-item" className={settingsListTableRowClassName}>
+      <td
+        className={cn(
+          settingsListTableCellClassName,
+          "text-content-2 truncate",
+        )}
+        title={title}
+      >
         {title}
       </td>
 
       <td
-        className="px-3 py-2 truncate overflow-hidden whitespace-nowrap text-sm text-content-2 opacity-80"
+        className={cn(
+          settingsListTableCellClassName,
+          "truncate text-content-2 opacity-80",
+        )}
         title={description || ""}
       >
         {description || ""}
       </td>
 
-      <td className="px-3 py-2">
+      <td className={settingsListTableCellClassName}>
         <div className="flex items-center justify-end gap-0.5">
           <button
             data-testid="edit-secret-button"
             type="button"
             onClick={onEdit}
             aria-label={`Edit ${title}`}
-            className="inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white"
+            className={settingsListIconActionButtonClassName}
           >
             <Pencil aria-hidden className="size-4" strokeWidth={2} />
           </button>
@@ -61,7 +78,7 @@ export function SecretListItem({
             type="button"
             onClick={onDelete}
             aria-label={`Delete ${title}`}
-            className="inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white"
+            className={settingsListIconActionButtonClassName}
           >
             <Trash2 aria-hidden className="size-4" strokeWidth={2} />
           </button>
diff --git a/src/components/features/settings/settings-dropdown-input.tsx b/src/components/features/settings/settings-dropdown-input.tsx
index ac3a2bebe..603627805 100644
--- a/src/components/features/settings/settings-dropdown-input.tsx
+++ b/src/components/features/settings/settings-dropdown-input.tsx
@@ -3,6 +3,8 @@ import React, { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { OptionalTag } from "./optional-tag";
 import { cn } from "#/utils/utils";
+import { formControlSettingsFieldClassName } from "#/utils/form-control-classes";
+import { heroUiAutocompleteSelectorButtonClassName } from "#/ui/combobox-caret";
 
 interface SettingsDropdownInputProps {
   testId: string;
@@ -79,14 +81,13 @@ export function SettingsDropdownInput({
         className="w-full"
         classNames={{
           popoverContent: "bg-content1 rounded-xl",
-          selectorButton:
-            "!rounded-none !bg-transparent data-[hover=true]:!bg-transparent !min-w-0 !w-auto !h-auto px-1",
+          selectorButton: heroUiAutocompleteSelectorButtonClassName,
         }}
         selectorButtonProps={{ disableRipple: true }}
         inputProps={{
           classNames: {
             inputWrapper: cn(
-              "bg-tertiary border border-[var(--oh-border-input)] h-10 w-full min-w-0 rounded-sm p-2 placeholder:text-tertiary-alt",
+              formControlSettingsFieldClassName,
               inputWrapperClassName,
             ),
             input: inputClassName,
diff --git a/src/components/features/settings/settings-input.tsx b/src/components/features/settings/settings-input.tsx
index 0a4ee2370..1d35bcb9b 100644
--- a/src/components/features/settings/settings-input.tsx
+++ b/src/components/features/settings/settings-input.tsx
@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { cn } from "#/utils/utils";
+import { formControlSettingsFieldClassName } from "#/utils/form-control-classes";
 import { OptionalTag } from "./optional-tag";
 
 interface SettingsInputProps {
@@ -106,8 +107,8 @@ export const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(
           aria-describedby={errorId ?? ariaDescribedBy}
           aria-invalid={!!error || ariaInvalid}
           className={cn(
-            "bg-tertiary border border-[var(--oh-border-input)] h-10 w-full min-w-0 rounded-sm p-2 placeholder:text-tertiary-alt",
-            "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed",
+            formControlSettingsFieldClassName,
+            "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]",
             error && "border-red-500",
             inputClassName,
           )}
diff --git a/src/components/features/settings/settings-nav-link.tsx b/src/components/features/settings/settings-nav-link.tsx
index 74528fa9f..209866a4d 100644
--- a/src/components/features/settings/settings-nav-link.tsx
+++ b/src/components/features/settings/settings-nav-link.tsx
@@ -4,6 +4,7 @@ import { cn } from "#/utils/utils";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
 import { SettingsNavItem } from "#/constants/settings-nav";
+import { navInteractiveTransitionClassName } from "#/components/features/sidebar/sidebar-layout";
 
 interface SettingsNavLinkProps {
   item: SettingsNavItem;
@@ -55,20 +56,21 @@ export function SettingsNavLink({
       onClick={onClick}
       className={({ isActive }) =>
         cn(
-          "group flex items-center gap-3 p-1 sm:px-3.5 sm:py-2 rounded transition-all duration-200",
+          "group flex items-center gap-3 p-1 sm:px-3.5 sm:py-2 rounded",
+          navInteractiveTransitionClassName,
           isActive ? "bg-tertiary" : "hover:bg-[var(--oh-surface-raised)]",
           isActive ? "[&_*]:text-white" : "",
         )
       }
     >
-      <Typography.Text className="flex h-5 w-5 shrink-0 items-center justify-center text-[var(--oh-muted)] group-hover:text-white transition-colors duration-200">
+      <Typography.Text className="flex h-5 w-5 shrink-0 items-center justify-center text-[var(--oh-muted)] group-hover:text-white">
         {icon}
       </Typography.Text>
       <div className="min-w-0 flex-1 overflow-hidden">
         <Typography.Text
           className={cn(
-            "block truncate whitespace-nowrap text-[var(--oh-muted)] transition-all duration-300",
-            "group-hover:translate-x-1 group-hover:text-white",
+            "block truncate whitespace-nowrap text-[var(--oh-muted)] group-hover:text-white",
+            "transition-transform duration-300 motion-reduce:transition-none group-hover:translate-x-1",
           )}
         >
           {t(text as I18nKey)}
diff --git a/src/components/features/settings/settings-navigation.tsx b/src/components/features/settings/settings-navigation.tsx
index 315c39b56..02bb33c08 100644
--- a/src/components/features/settings/settings-navigation.tsx
+++ b/src/components/features/settings/settings-navigation.tsx
@@ -9,6 +9,7 @@ import { SettingsNavHeader } from "./settings-nav-header";
 import { SettingsNavDivider } from "./settings-nav-divider";
 import { SettingsNavLink } from "./settings-nav-link";
 import { SidebarNavLink } from "#/components/features/sidebar/sidebar-nav-link";
+import { navInteractiveTransitionClassName } from "#/components/features/sidebar/sidebar-layout";
 import { BackendSyncedSettingsBadge } from "#/components/features/settings/backend-synced-settings-badge";
 
 interface SettingsNavigationProps {
@@ -111,7 +112,10 @@ export function SettingsMobileDrawer({
           <button
             type="button"
             onClick={onCloseMobileMenu}
-            className="cursor-pointer rounded-md p-0.5 transition-colors hover:bg-tertiary md:hidden"
+            className={cn(
+              "cursor-pointer rounded-md p-0.5 hover:bg-tertiary md:hidden",
+              navInteractiveTransitionClassName,
+            )}
             aria-label="Close navigation menu"
           >
             <CloseIcon width={32} height={32} />
diff --git a/src/components/features/settings/settings-switch.tsx b/src/components/features/settings/settings-switch.tsx
index ba2177ee8..a3b3ea48f 100644
--- a/src/components/features/settings/settings-switch.tsx
+++ b/src/components/features/settings/settings-switch.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";
-import { StyledSwitchComponent } from "./styled-switch-component";
+import { ToggleSwitchVisual } from "#/ui/toggle-switch";
 
 interface SettingsSwitchProps {
   testId?: string;
@@ -49,7 +49,7 @@ export function SettingsSwitch({
   );
 
   const toggle = (
-    <StyledSwitchComponent isToggled={controlledIsToggled ?? isToggled} />
+    <ToggleSwitchVisual enabled={controlledIsToggled ?? isToggled} />
   );
 
   const label =
diff --git a/src/components/features/settings/styled-switch-component.tsx b/src/components/features/settings/styled-switch-component.tsx
deleted file mode 100644
index d2ca80f60..000000000
--- a/src/components/features/settings/styled-switch-component.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { cn } from "#/utils/utils";
-
-interface StyledSwitchComponentProps {
-  isToggled: boolean;
-}
-
-export function StyledSwitchComponent({
-  isToggled,
-}: StyledSwitchComponentProps) {
-  return (
-    <div
-      className={cn(
-        "w-12 h-6 rounded-xl flex items-center p-1.5 cursor-pointer",
-        isToggled && "justify-end bg-primary",
-        !isToggled &&
-          "justify-start bg-base-secondary border border-[var(--oh-border)]",
-      )}
-    >
-      <div
-        className={cn(
-          "w-3 h-3 rounded-xl",
-          isToggled ? "bg-base-secondary" : "bg-tertiary-light",
-        )}
-      />
-    </div>
-  );
-}
diff --git a/src/components/features/settings/upgrade-button.tsx b/src/components/features/settings/upgrade-button.tsx
index aa5b0f5ac..e0bb54a03 100644
--- a/src/components/features/settings/upgrade-button.tsx
+++ b/src/components/features/settings/upgrade-button.tsx
@@ -20,7 +20,7 @@ export function UpgradeButton({
       onClick={onClick}
       disabled={isDisabled}
       className={cn(
-        "bg-[var(--oh-interactive-selected)] text-white text-[9px] font-medium w-16 h-4 rounded-[100px] mix-blend-multiply hover:opacity-80 transition-opacity cursor-pointer",
+        "bg-[var(--oh-interactive-selected)] text-white text-[9px] font-normal w-16 h-4 rounded-[100px] mix-blend-multiply hover:opacity-80 transition-opacity cursor-pointer",
         className,
       )}
     >
diff --git a/src/components/features/sidebar/sidebar-collapsed-icon-slot.tsx b/src/components/features/sidebar/sidebar-collapsed-icon-slot.tsx
index d8c8cf017..fcb7402af 100644
--- a/src/components/features/sidebar/sidebar-collapsed-icon-slot.tsx
+++ b/src/components/features/sidebar/sidebar-collapsed-icon-slot.tsx
@@ -12,7 +12,7 @@ interface SidebarCollapsedIconSlotProps {
   children: React.ReactNode;
 }
 
-/** Collapsed rail: 40×40 hover/active square aligned with the expanded icon column. */
+/** Collapsed rail: 36px-tall hover/active target aligned with the expanded icon column. */
 export function SidebarCollapsedIconSlot({
   active,
   className,
diff --git a/src/components/features/sidebar/sidebar-layout.ts b/src/components/features/sidebar/sidebar-layout.ts
index f4aebd201..392433933 100644
--- a/src/components/features/sidebar/sidebar-layout.ts
+++ b/src/components/features/sidebar/sidebar-layout.ts
@@ -1,11 +1,16 @@
 import { cn } from "#/utils/utils";
 
-/** Expanded sidebar icon column beside labels. */
+/** Nav rows and side nav links — hover color/background snap instantly (no fade). */
+export const navInteractiveTransitionClassName =
+  "transition-none motion-reduce:transition-none";
+
+/** Expanded sidebar icon column beside labels (matches 36px nav rows). */
 export const SIDEBAR_ICON_SLOT_CLASS =
-  "flex h-10 w-[18px] shrink-0 items-center justify-center";
+  "flex h-9 w-[18px] shrink-0 items-center justify-center";
 
-/** Collapsed rail: 40×40 control; aside `md:px-2.5` is the only horizontal inset. */
-export const SIDEBAR_COLLAPSED_ICON_SLOT_CLASS = "relative size-10 shrink-0";
+/** Collapsed rail: 36px-tall hit target; width follows the row (full rail). */
+export const SIDEBAR_COLLAPSED_ICON_SLOT_CLASS =
+  "relative h-9 min-h-9 max-h-9 w-full shrink-0";
 
 export const SIDEBAR_HEADER_ROW_CLASS =
   "flex h-10 min-h-10 shrink-0 items-center gap-2 pl-2.5 pr-2.5 w-full";
@@ -18,7 +23,7 @@ export function sidebarHeaderRowClassName(collapsed: boolean): string {
 }
 
 export const SIDEBAR_ROW_INTERACTIVE_CLASS = {
-  active: "bg-tertiary text-white font-medium",
+  active: "bg-tertiary text-white font-normal",
   idle: "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
 } as const;
 
@@ -35,7 +40,8 @@ export function sidebarNavRowClassName(options?: {
 }): string {
   const { indent = false, collapsed = false } = options ?? {};
   return cn(
-    "flex h-10 min-h-10 min-w-0 items-center rounded-md transition-colors",
+    "flex h-9 min-h-9 min-w-0 items-center rounded-md",
+    navInteractiveTransitionClassName,
     "text-sm leading-5 w-full",
     collapsed
       ? "group gap-0 px-0 overflow-visible bg-transparent hover:bg-transparent"
@@ -46,7 +52,8 @@ export function sidebarNavRowClassName(options?: {
 
 export function sidebarCollapsedIconBgClassName(active: boolean): string {
   return cn(
-    "pointer-events-none absolute inset-0 z-0 rounded-md transition-colors",
+    "pointer-events-none absolute inset-0 z-0 rounded-md",
+    navInteractiveTransitionClassName,
     active
       ? "bg-tertiary"
       : "bg-transparent group-hover:bg-[var(--oh-surface-raised)]",
@@ -56,11 +63,11 @@ export function sidebarCollapsedIconBgClassName(active: boolean): string {
 /** Matches expanded row `px-2.5` + 18px icon column alignment. */
 export function sidebarCollapsedIconGlyphClassName(active: boolean): string {
   return cn(
-    // Full width inside the 40×40 slot; `pl-2.5` aligns with expanded `px-2.5` rows.
+    // Full width inside the 36px-tall slot; `pl-2.5` aligns with expanded `px-2.5` rows.
     // Do not set a narrow `w-[18px]` here — with horizontal padding it shrinks the glyph.
     "relative z-[1] flex h-full w-full items-center justify-start pl-2.5 [&_svg]:shrink-0",
     active
-      ? "text-white font-medium"
+      ? "text-white font-normal"
       : "text-[var(--oh-muted)] group-hover:text-white",
   );
 }
@@ -73,8 +80,9 @@ export function sidebarNavLabelClassName(collapsed: boolean): string {
 }
 
 export const SIDEBAR_ICON_BUTTON_CLASS = cn(
-  "inline-flex size-8 shrink-0 items-center justify-center rounded-md",
-  "transition-colors cursor-pointer",
+  "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md",
+  navInteractiveTransitionClassName,
+  "cursor-pointer",
 );
 
 /** Logo + expand overlay when the desktop rail is collapsed. */
@@ -84,7 +92,9 @@ export const SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS = cn(
 );
 
 export const SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS = cn(
-  "absolute left-1/2 top-1/2 hidden size-8 -translate-x-1/2 -translate-y-1/2 md:inline-flex",
-  "items-center justify-center rounded-md transition-[opacity,colors] cursor-pointer",
+  "absolute left-1/2 top-1/2 hidden h-7 w-7 -translate-x-1/2 -translate-y-1/2 md:inline-flex",
+  "items-center justify-center rounded-md",
+  navInteractiveTransitionClassName,
+  "cursor-pointer",
   "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
 );
diff --git a/src/components/features/sidebar/sidebar-rail-body.tsx b/src/components/features/sidebar/sidebar-rail-body.tsx
index 15cafcd34..611fb9912 100644
--- a/src/components/features/sidebar/sidebar-rail-body.tsx
+++ b/src/components/features/sidebar/sidebar-rail-body.tsx
@@ -83,21 +83,29 @@ export function SidebarRailBody({
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       <div className={sidebarHeaderRowClassName(collapsed)}>
-        {collapsed && showCollapseToggle ? (
-          <div className={SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS}>
-            <div
-              className={cn(
+        <div
+          className={cn(
+            collapsed && showCollapseToggle
+              ? SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS
+              : "flex min-w-0 shrink-0 items-center",
+          )}
+        >
+          <div
+            className={cn(
+              collapsed &&
+                showCollapseToggle &&
                 "flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150",
-                showCollapsedExpandButton && "opacity-0",
-              )}
-            >
-              <OpenHandsLogoButton
-                logoWidth={SIDEBAR_LOGO_WIDTH}
-                logoHeight={SIDEBAR_LOGO_HEIGHT}
-                logoClassName="max-w-none"
-                className={cn(SIDEBAR_ICON_SLOT_CLASS, "overflow-visible")}
-              />
-            </div>
+              collapsed && showCollapsedExpandButton && "opacity-0",
+            )}
+          >
+            <OpenHandsLogoButton
+              logoWidth={SIDEBAR_LOGO_WIDTH}
+              logoHeight={SIDEBAR_LOGO_HEIGHT}
+              logoClassName="max-w-none"
+              className={cn(SIDEBAR_ICON_SLOT_CLASS, "overflow-visible")}
+            />
+          </div>
+          {collapsed && showCollapseToggle ? (
             <button
               type="button"
               data-testid="sidebar-collapse-toggle"
@@ -111,50 +119,41 @@ export function SidebarRailBody({
                   : "opacity-0 pointer-events-none",
               )}
             >
-              <ChevronRight width={16} height={16} />
+              <ChevronRight width={14} height={14} />
             </button>
-          </div>
-        ) : (
-          <>
-            <OpenHandsLogoButton
-              logoWidth={SIDEBAR_LOGO_WIDTH}
-              logoHeight={SIDEBAR_LOGO_HEIGHT}
-              logoClassName="max-w-none"
-              className={cn(SIDEBAR_ICON_SLOT_CLASS, "overflow-visible")}
-            />
-            {showCollapseToggle ? (
-              <button
-                type="button"
-                data-testid="sidebar-collapse-toggle"
-                aria-pressed={collapsed}
-                aria-label={collapseToggleLabel}
-                onClick={onCollapse}
-                className={cn(
-                  "hidden md:inline-flex ml-auto",
-                  SIDEBAR_ICON_BUTTON_CLASS,
-                  "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
-                )}
-              >
-                <ChevronLeft width={16} height={16} />
-              </button>
-            ) : null}
-            {showMobileCloseButton ? (
-              <button
-                type="button"
-                data-testid="sidebar-mobile-drawer-close"
-                onClick={onCloseMobile}
-                aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}
-                className={cn(
-                  "inline-flex ml-auto",
-                  SIDEBAR_ICON_BUTTON_CLASS,
-                  "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
-                )}
-              >
-                <ChevronLeft width={16} height={16} />
-              </button>
-            ) : null}
-          </>
-        )}
+          ) : null}
+        </div>
+        {!collapsed && showCollapseToggle ? (
+          <button
+            type="button"
+            data-testid="sidebar-collapse-toggle"
+            aria-pressed={collapsed}
+            aria-label={collapseToggleLabel}
+            onClick={onCollapse}
+            className={cn(
+              "hidden md:inline-flex ml-auto",
+              SIDEBAR_ICON_BUTTON_CLASS,
+              "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
+            )}
+          >
+            <ChevronLeft width={14} height={14} />
+          </button>
+        ) : null}
+        {!collapsed && showMobileCloseButton ? (
+          <button
+            type="button"
+            data-testid="sidebar-mobile-drawer-close"
+            onClick={onCloseMobile}
+            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}
+            className={cn(
+              "inline-flex ml-auto",
+              SIDEBAR_ICON_BUTTON_CLASS,
+              "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
+            )}
+          >
+            <ChevronLeft width={14} height={14} />
+          </button>
+        ) : null}
       </div>
 
       <nav className={sidebarNavListClassName(collapsed)}>
diff --git a/src/components/features/sidebar/sidebar.tsx b/src/components/features/sidebar/sidebar.tsx
index 6a6149df9..59fa294f0 100644
--- a/src/components/features/sidebar/sidebar.tsx
+++ b/src/components/features/sidebar/sidebar.tsx
@@ -64,6 +64,8 @@ export function Sidebar() {
   const [manageBackendsModalOpen, setManageBackendsModalOpen] =
     React.useState(false);
   const [collapsedRailHovered, setCollapsedRailHovered] = React.useState(false);
+  const suppressCollapsedExpandRef = React.useRef(false);
+  const [, refreshCollapsedExpandGate] = React.useReducer((n) => n + 1, 0);
   const { isOpen: isMobileNavOpen, close: closeMobileNav } =
     useSidebarMobileNav();
   const [mobileDrawerMounted, setMobileDrawerMounted] = React.useState(false);
@@ -165,7 +167,18 @@ export function Sidebar() {
     },
     [collapsed, setCollapsed],
   );
-  const showCollapsedExpandButton = collapsed && collapsedRailHovered;
+  const handleCollapse = React.useCallback(() => {
+    setCollapsedRailHovered(false);
+    suppressCollapsedExpandRef.current = true;
+    refreshCollapsedExpandGate();
+    setCollapsed(true);
+    window.setTimeout(() => {
+      suppressCollapsedExpandRef.current = false;
+      refreshCollapsedExpandGate();
+    }, 250);
+  }, [setCollapsed]);
+  const showCollapsedExpandButton =
+    collapsed && collapsedRailHovered && !suppressCollapsedExpandRef.current;
 
   const isExtensionsActive =
     currentPath === "/customize" ||
@@ -176,7 +189,7 @@ export function Sidebar() {
   const railBodyProps = {
     linkDisabled,
     collapseToggleLabel,
-    onCollapse: () => setCollapsed(true),
+    onCollapse: handleCollapse,
     onExpand: () => setCollapsed(false),
     showCollapsedExpandButton,
     isExtensionsActive,
diff --git a/src/components/features/skills/extensions-navigation.tsx b/src/components/features/skills/extensions-navigation.tsx
index b88c91114..d688b57c5 100644
--- a/src/components/features/skills/extensions-navigation.tsx
+++ b/src/components/features/skills/extensions-navigation.tsx
@@ -7,6 +7,10 @@ import { cn } from "#/utils/utils";
 import SkillsIcon from "#/icons/skills.svg?react";
 import ServerProcessIcon from "#/icons/server-process.svg?react";
 import { BackendSyncedSettingsBadge } from "#/components/features/settings/backend-synced-settings-badge";
+import {
+  SIDEBAR_ROW_INTERACTIVE_CLASS,
+  sidebarNavRowClassName,
+} from "#/components/features/sidebar/sidebar-layout";
 import { I18nKey } from "#/i18n/declaration";
 import { useSidebarStore } from "#/stores/sidebar-store";
 import { useBreakpoint } from "#/hooks/use-breakpoint";
@@ -130,7 +134,10 @@ export function ExtensionsNavigation() {
                 <span
                   aria-disabled="true"
                   data-testid={`sidebar-extensions-${item.to}`}
-                  className="flex items-center gap-2 rounded-md text-sm leading-5 truncate px-2 py-2 w-full text-[var(--oh-muted)] opacity-50 cursor-not-allowed"
+                  className={cn(
+                    sidebarNavRowClassName(),
+                    "truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed",
+                  )}
                 >
                   {baseRow}
                   {label}
@@ -148,10 +155,11 @@ export function ExtensionsNavigation() {
               data-testid={`sidebar-extensions-${item.to}`}
               className={({ isActive }) =>
                 cn(
-                  "flex items-center gap-2 rounded-md transition-colors text-sm leading-5 truncate px-2 py-2 w-full",
+                  sidebarNavRowClassName(),
+                  "truncate",
                   isActive
-                    ? "bg-tertiary text-white font-medium"
-                    : "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]",
+                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active
+                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,
                 )
               }
             >
diff --git a/src/components/features/skills/skill-card.tsx b/src/components/features/skills/skill-card.tsx
index 1c22f35e4..16648e328 100644
--- a/src/components/features/skills/skill-card.tsx
+++ b/src/components/features/skills/skill-card.tsx
@@ -111,7 +111,7 @@ export function SkillCard({ skill, enabled, onToggle }: SkillCardProps) {
             type="button"
             onClick={() => setShowFullDescription((prev) => !prev)}
             data-testid={`skill-show-more-${skill.name}`}
-            className="mt-1 text-xs font-medium text-[var(--oh-muted)] hover:text-white hover:underline transition-colors"
+            className="mt-1 text-xs font-normal text-[var(--oh-muted)] hover:text-white hover:underline transition-colors"
           >
             {showFullDescription
               ? t(I18nKey.SETTINGS$SKILLS_SHOW_LESS)
@@ -143,7 +143,7 @@ export function SkillCard({ skill, enabled, onToggle }: SkillCardProps) {
             data-testid={`skill-details-toggle-${skill.name}`}
             aria-expanded={detailsOpen}
             onClick={() => setDetailsOpen((prev) => !prev)}
-            className="flex w-full items-center justify-between text-xs font-medium text-tertiary-light hover:text-white"
+            className="flex w-full items-center justify-between text-xs font-normal text-tertiary-light hover:text-white"
           >
             <span>{t(I18nKey.SETTINGS$SKILLS_DETAILS)}</span>
             <ChevronDownIcon
diff --git a/src/components/features/skills/skills-toolbar.tsx b/src/components/features/skills/skills-toolbar.tsx
index 7e11546d9..25715ae15 100644
--- a/src/components/features/skills/skills-toolbar.tsx
+++ b/src/components/features/skills/skills-toolbar.tsx
@@ -2,6 +2,10 @@ import { Search, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";
+import {
+  formControlInlineInputClassName,
+  formControlShellClassName,
+} from "#/utils/form-control-classes";
 import {
   SKILL_TYPE_FILTER_OPTIONS,
   type SkillTypeFilter,
@@ -36,15 +40,11 @@ export function SkillsToolbar({
   return (
     <div data-testid="skills-toolbar" className="flex flex-col gap-6">
       <div
-        className={cn(
-          "relative flex items-center w-full lg:w-1/2",
-          "rounded-lg border border-[var(--oh-border)] bg-base-secondary",
-          "focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20",
-          "transition-colors",
-        )}
+        data-testid="skills-toolbar-search"
+        className={cn(formControlShellClassName, "w-full lg:w-1/2")}
       >
         <Search
-          className="ml-3 h-4 w-4 text-tertiary-alt shrink-0"
+          className="ml-3 h-4 w-4 shrink-0 text-tertiary-alt"
           aria-hidden
         />
         <input
@@ -54,11 +54,7 @@ export function SkillsToolbar({
           onChange={(e) => onSearchChange(e.target.value)}
           placeholder={t(I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER)}
           aria-label={t(I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER)}
-          className={cn(
-            "flex-1 min-w-0 bg-transparent border-0 outline-none",
-            "px-3 py-2 text-sm placeholder:text-tertiary-alt",
-            "[&::-webkit-search-cancel-button]:hidden",
-          )}
+          className={formControlInlineInputClassName}
         />
         {search && (
           <button
@@ -87,7 +83,7 @@ export function SkillsToolbar({
                 aria-pressed={active}
                 onClick={() => onTypeFilterChange(option)}
                 className={cn(
-                  "rounded-full border px-3 py-1 text-xs font-medium transition-colors cursor-pointer",
+                  "rounded-full border px-3 py-1 text-xs font-normal transition-colors cursor-pointer",
                   active
                     ? "border-white/60 bg-white/10 text-white"
                     : "border-[var(--oh-border)] bg-transparent text-tertiary-light hover:border-[var(--cool-grey-500)] hover:text-white",
diff --git a/src/components/shared/action-tooltip.tsx b/src/components/shared/action-tooltip.tsx
index b59f3cf2e..a72413284 100644
--- a/src/components/shared/action-tooltip.tsx
+++ b/src/components/shared/action-tooltip.tsx
@@ -32,7 +32,7 @@ export function ActionTooltip({ type, onClick }: ActionTooltipProps) {
         type="button"
         aria-label={ariaLabel}
         className={cn(
-          "rounded px-2 h-6.5 text-sm font-medium leading-5 cursor-pointer hover:opacity-80",
+          "rounded px-2 h-6.5 text-sm font-normal leading-5 cursor-pointer hover:opacity-80",
           type === "confirm" ? "bg-tertiary text-white" : "bg-white text-base",
         )}
         onClick={onClick}
diff --git a/src/components/shared/buttons/modal-button.tsx b/src/components/shared/buttons/modal-button.tsx
index 76c104994..6082e5554 100644
--- a/src/components/shared/buttons/modal-button.tsx
+++ b/src/components/shared/buttons/modal-button.tsx
@@ -31,7 +31,7 @@ export function ModalButton({
       disabled={disabled}
       onClick={onClick}
       className={clsx(
-        variant === "default" && "text-sm font-[500] py-[10px] rounded-sm",
+        variant === "default" && "text-sm font-normal py-[10px] rounded-sm",
         variant === "text-like" && "text-xs leading-4 font-normal",
         icon && "flex items-center justify-center gap-2",
         disabled && "opacity-50 cursor-not-allowed",
diff --git a/src/components/shared/buttons/openhands-logo-button.tsx b/src/components/shared/buttons/openhands-logo-button.tsx
index 630f3ede3..17a41aaf4 100644
--- a/src/components/shared/buttons/openhands-logo-button.tsx
+++ b/src/components/shared/buttons/openhands-logo-button.tsx
@@ -2,7 +2,6 @@ import { useTranslation } from "react-i18next";
 import OpenHandsLogo from "#/assets/branding/openhands-logo.svg?react";
 import { NavigationLink } from "#/components/shared/navigation-link";
 import { I18nKey } from "#/i18n/declaration";
-import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
 import { cn } from "#/utils/utils";
 
 const DEFAULT_LOGO_WIDTH = 46;
@@ -24,22 +23,19 @@ export function OpenHandsLogoButton({
 }: OpenHandsLogoButtonProps = {}) {
   const { t } = useTranslation("openhands");
 
-  const tooltipText = t(I18nKey.BRANDING$OPENHANDS);
   const ariaLabel = t(I18nKey.BRANDING$OPENHANDS_LOGO);
 
   return (
-    <StyledTooltip content={tooltipText}>
-      <NavigationLink
-        to="/conversations"
-        aria-label={ariaLabel}
-        className={cn(className)}
-      >
-        <OpenHandsLogo
-          width={logoWidth}
-          height={logoHeight}
-          className={cn("shrink-0", logoClassName)}
-        />
-      </NavigationLink>
-    </StyledTooltip>
+    <NavigationLink
+      to="/conversations"
+      aria-label={ariaLabel}
+      className={cn(className)}
+    >
+      <OpenHandsLogo
+        width={logoWidth}
+        height={logoHeight}
+        className={cn("shrink-0", logoClassName)}
+      />
+    </NavigationLink>
   );
 }
diff --git a/src/components/shared/modals/confirmation-modals/base-modal.tsx b/src/components/shared/modals/confirmation-modals/base-modal.tsx
index 9c1710363..a851a400a 100644
--- a/src/components/shared/modals/confirmation-modals/base-modal.tsx
+++ b/src/components/shared/modals/confirmation-modals/base-modal.tsx
@@ -20,7 +20,7 @@ export function BaseModalTitle({ title, id, className }: BaseModalTitleProps) {
     <span
       id={id}
       className={cn(
-        "text-xl leading-6 -tracking-[0.01em] font-semibold text-content-2",
+        "text-xl leading-6 -tracking-[0.01em] font-medium text-content-2",
         className,
       )}
     >
diff --git a/src/components/shared/modals/settings/model-selector.tsx b/src/components/shared/modals/settings/model-selector.tsx
index 84b4b5f3e..e6ef01dc3 100644
--- a/src/components/shared/modals/settings/model-selector.tsx
+++ b/src/components/shared/modals/settings/model-selector.tsx
@@ -9,6 +9,8 @@ import { I18nKey } from "#/i18n/declaration";
 import { mapProvider } from "#/utils/map-provider";
 import { extractModelAndProvider } from "#/utils/extract-model-and-provider";
 import { cn } from "#/utils/utils";
+import { formControlSettingsFieldClassName } from "#/utils/form-control-classes";
+import { heroUiAutocompleteSelectorButtonClassName } from "#/ui/combobox-caret";
 import { HelpLink } from "#/ui/help-link";
 import { PRODUCT_URL } from "#/utils/constants";
 import { useSearchProviders } from "#/hooks/query/use-search-providers";
@@ -142,14 +144,12 @@ export function ModelSelector({
           classNames={{
             popoverContent:
               "bg-content1 rounded-xl border border-[var(--oh-border)]",
-            selectorButton:
-              "!rounded-none !bg-transparent data-[hover=true]:!bg-transparent !min-w-0 !w-auto !h-auto px-1",
+            selectorButton: heroUiAutocompleteSelectorButtonClassName,
           }}
           selectorButtonProps={{ disableRipple: true }}
           inputProps={{
             classNames: {
-              inputWrapper:
-                "bg-tertiary border border-[var(--oh-border-input)] h-10 w-full rounded-sm p-2",
+              inputWrapper: formControlSettingsFieldClassName,
             },
           }}
         >
@@ -213,14 +213,12 @@ export function ModelSelector({
           classNames={{
             popoverContent:
               "bg-content1 rounded-xl border border-[var(--oh-border)]",
-            selectorButton:
-              "!rounded-none !bg-transparent data-[hover=true]:!bg-transparent !min-w-0 !w-auto !h-auto px-1",
+            selectorButton: heroUiAutocompleteSelectorButtonClassName,
           }}
           selectorButtonProps={{ disableRipple: true }}
           inputProps={{
             classNames: {
-              inputWrapper:
-                "bg-tertiary border border-[var(--oh-border-input)] h-10 w-full rounded-sm p-2",
+              inputWrapper: formControlSettingsFieldClassName,
             },
           }}
         >
diff --git a/src/components/shared/modals/settings/settings-form.tsx b/src/components/shared/modals/settings/settings-form.tsx
index fe748349d..e4981b3c8 100644
--- a/src/components/shared/modals/settings/settings-form.tsx
+++ b/src/components/shared/modals/settings/settings-form.tsx
@@ -117,7 +117,7 @@ export function SettingsForm({ settings, onClose }: SettingsFormProps) {
             testId="save-settings-button"
             type="submit"
             variant="primary"
-            className="w-full font-semibold"
+            className="w-full"
           >
             {t(I18nKey.BUTTON$SAVE)}
           </BrandButton>
diff --git a/src/components/shared/modals/settings/settings-modal.tsx b/src/components/shared/modals/settings/settings-modal.tsx
index ae8ef40c4..231db086a 100644
--- a/src/components/shared/modals/settings/settings-modal.tsx
+++ b/src/components/shared/modals/settings/settings-modal.tsx
@@ -26,7 +26,7 @@ export function SettingsModal({ onClose, settings }: SettingsModalProps) {
           MODAL_MAX_WIDTH_VIEWPORT,
         )}
       >
-        <span className="text-5 leading-6 font-semibold -tracking-[0.2px]">
+        <span className="text-5 leading-6 font-medium -tracking-[0.2px]">
           {t(I18nKey.AI_SETTINGS$TITLE)}
         </span>
         <HelpLink
diff --git a/src/constants/status-colors.ts b/src/constants/status-colors.ts
new file mode 100644
index 000000000..06785cbf5
--- /dev/null
+++ b/src/constants/status-colors.ts
@@ -0,0 +1,5 @@
+/** Connected / running indicators (sidebar conversation dots, server status). */
+export const OH_STATUS_SUCCESS_COLOR = "var(--oh-status-success)";
+
+/** Disconnected / error indicators aligned with sidebar status dots. */
+export const OH_STATUS_ERROR_COLOR = "var(--oh-status-error)";
diff --git a/src/contexts/settings-section-header-context.tsx b/src/contexts/settings-section-header-context.tsx
new file mode 100644
index 000000000..0f244d7f7
--- /dev/null
+++ b/src/contexts/settings-section-header-context.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+interface SettingsSectionHeaderContextValue {
+  setHideSectionHeader: (hide: boolean) => void;
+}
+
+const SettingsSectionHeaderContext =
+  React.createContext<SettingsSectionHeaderContextValue | null>(null);
+
+export function SettingsSectionHeaderProvider({
+  setHideSectionHeader,
+  children,
+}: React.PropsWithChildren<{
+  setHideSectionHeader: (hide: boolean) => void;
+}>) {
+  const value = React.useMemo(
+    () => ({ setHideSectionHeader }),
+    [setHideSectionHeader],
+  );
+
+  return (
+    <SettingsSectionHeaderContext.Provider value={value}>
+      {children}
+    </SettingsSectionHeaderContext.Provider>
+  );
+}
+
+export function useSettingsSectionHeader() {
+  const context = React.useContext(SettingsSectionHeaderContext);
+  return (
+    context ?? {
+      setHideSectionHeader: () => {},
+    }
+  );
+}
diff --git a/src/hooks/mutation/use-unified-stop-conversation.ts b/src/hooks/mutation/use-unified-stop-conversation.ts
index 1c807abae..61b304f45 100644
--- a/src/hooks/mutation/use-unified-stop-conversation.ts
+++ b/src/hooks/mutation/use-unified-stop-conversation.ts
@@ -1,7 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { TOAST_OPTIONS } from "#/utils/custom-toast-handlers";
+import {
+  TOAST_OPTIONS,
+  displayErrorToast,
+} from "#/utils/custom-toast-handlers";
 import { useNavigation } from "#/context/navigation-context";
 import { I18nKey } from "#/i18n/declaration";
 import { ExecutionStatus } from "#/types/agent-server/core";
@@ -37,7 +40,7 @@ export const useUnifiedPauseConversation = () => {
       if (context?.toastId) {
         toast.dismiss(context.toastId);
       }
-      toast.error(t(I18nKey.TOAST$FAILED_TO_STOP_CONVERSATION), TOAST_OPTIONS);
+      displayErrorToast(t(I18nKey.TOAST$FAILED_TO_STOP_CONVERSATION));
 
       if (context?.previousConversations) {
         queryClient.setQueryData(
diff --git a/src/i18n/translation.json b/src/i18n/translation.json
index f3fd2c817..32c8cec7d 100644
--- a/src/i18n/translation.json
+++ b/src/i18n/translation.json
@@ -1002,6 +1002,40 @@
     "uk": "Додати новий секрет",
     "ca": "Afegeix un nou secret"
   },
+  "SECRETS$ADD_A_SECRET": {
+    "en": "Add a Secret",
+    "ja": "シークレットを追加",
+    "zh-CN": "添加密钥",
+    "zh-TW": "添加密鑰",
+    "ko-KR": "비밀 추가",
+    "no": "Legg til en hemmelighet",
+    "it": "Aggiungi un segreto",
+    "pt": "Adicionar um segredo",
+    "es": "Añadir un secreto",
+    "ar": "إضافة سر",
+    "fr": "Ajouter un secret",
+    "tr": "Gizli ekle",
+    "de": "Geheimnis hinzufügen",
+    "uk": "Додати секрет",
+    "ca": "Afegeix un secret"
+  },
+  "SECRETS$EDIT_A_SECRET": {
+    "en": "Edit a Secret",
+    "ja": "シークレットを編集",
+    "zh-CN": "编辑密钥",
+    "zh-TW": "編輯密鑰",
+    "ko-KR": "비밀 편집",
+    "no": "Rediger hemmelighet",
+    "it": "Modifica segreto",
+    "pt": "Editar segredo",
+    "es": "Editar secreto",
+    "ar": "تحرير سر",
+    "fr": "Modifier un secret",
+    "tr": "Gizli düzenle",
+    "de": "Geheimnis bearbeiten",
+    "uk": "Редагувати секрет",
+    "ca": "Edita un secret"
+  },
   "SECRETS$CONFIRM_DELETE_KEY": {
     "en": "Are you sure you want to delete this key?",
     "ja": "このキーを削除してもよろしいですか？",
@@ -15656,6 +15690,40 @@
     "tr": "{{label}} içinde yeni sohbet başlat",
     "uk": "Почати нову розмову в {{label}}"
   },
+  "CONVERSATION_PANEL$MORE": {
+    "en": "More",
+    "ja": "もっと",
+    "zh-CN": "更多",
+    "zh-TW": "更多",
+    "ko-KR": "더 보기",
+    "no": "Mer",
+    "ar": "المزيد",
+    "de": "Mehr",
+    "fr": "Plus",
+    "it": "Altro",
+    "pt": "Mais",
+    "es": "Más",
+    "ca": "Més",
+    "tr": "Daha fazla",
+    "uk": "Більше"
+  },
+  "CONVERSATION_PANEL$LESS": {
+    "en": "Less",
+    "ja": "少なく",
+    "zh-CN": "收起",
+    "zh-TW": "收起",
+    "ko-KR": "간략히",
+    "no": "Mindre",
+    "ar": "أقل",
+    "de": "Weniger",
+    "fr": "Moins",
+    "it": "Meno",
+    "pt": "Menos",
+    "es": "Menos",
+    "ca": "Menys",
+    "tr": "Daha az",
+    "uk": "Менше"
+  },
   "CONVERSATION$CONFIRM_DELETE_ALL_TITLE": {
     "en": "Delete all conversations",
     "ja": "すべての会話を削除",
diff --git a/src/root.tsx b/src/root.tsx
index e878b9950..35855120b 100644
--- a/src/root.tsx
+++ b/src/root.tsx
@@ -11,6 +11,7 @@ import "./index.css";
 import React from "react";
 import { Toaster } from "react-hot-toast";
 import { isAgentServerUnavailableError } from "#/api/agent-server-compatibility";
+import { TOAST_OPTIONS } from "#/utils/custom-toast-handlers";
 import { TelemetryConsentBanner } from "#/components/features/analytics/telemetry-consent-banner";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { useConfig } from "#/hooks/query/use-config";
@@ -49,7 +50,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <AgentServerUIRoot contentClassName="min-h-screen">
           <ColorThemeApplier />
           {children}
-          <Toaster />
+          <Toaster toastOptions={TOAST_OPTIONS} />
           <TelemetryConsentBanner />
           <div id="modal-portal-exit" />
         </AgentServerUIRoot>
diff --git a/src/routes/agent-settings.tsx b/src/routes/agent-settings.tsx
index bf0f2a059..c812a538e 100644
--- a/src/routes/agent-settings.tsx
+++ b/src/routes/agent-settings.tsx
@@ -10,6 +10,8 @@ import { SettingsSwitch } from "#/components/features/settings/settings-switch";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
+import { formControlSwitchDescriptionClassName } from "#/utils/form-control-classes";
+import { cn } from "#/utils/utils";
 import { SettingsFieldSchema } from "#/types/settings";
 import {
   displayErrorToast,
@@ -295,7 +297,12 @@ function AgentSettingsScreen() {
             {subAgentsLabel}
           </SettingsSwitch>
           {subAgentsDescription ? (
-            <Typography.Paragraph className="text-tertiary-alt text-xs leading-5">
+            <Typography.Paragraph
+              className={cn(
+                formControlSwitchDescriptionClassName,
+                "text-tertiary-alt text-xs leading-5",
+              )}
+            >
               {subAgentsDescription}
             </Typography.Paragraph>
           ) : null}
diff --git a/src/routes/app-settings.tsx b/src/routes/app-settings.tsx
index 8bef5551e..22ad5702f 100644
--- a/src/routes/app-settings.tsx
+++ b/src/routes/app-settings.tsx
@@ -168,7 +168,7 @@ export function AppSettingsScreen() {
             <h3 className="text-lg font-medium mb-2">
               {t(I18nKey.SETTINGS$GIT_SETTINGS)}
             </h3>
-            <p className="text-xs mb-4">
+            <p className="mb-4 text-sm leading-5 text-tertiary-light">
               {t(I18nKey.SETTINGS$GIT_SETTINGS_DESCRIPTION)}
             </p>
             <div className="flex flex-col gap-6">
diff --git a/src/routes/automations-list.tsx b/src/routes/automations-list.tsx
index 6baee8325..b5693bf76 100644
--- a/src/routes/automations-list.tsx
+++ b/src/routes/automations-list.tsx
@@ -108,7 +108,7 @@ export default function AutomationsList() {
     return (
       <div className="min-h-full">
         <div className="p-6 max-w-4xl mx-auto">
-          <h1 className="text-xl font-semibold text-content">
+          <h1 className="text-xl font-medium text-content">
             {t(I18nKey.AUTOMATIONS$TITLE)}
           </h1>
           <p className="mt-1 text-sm text-muted">
@@ -129,7 +129,7 @@ export default function AutomationsList() {
     return (
       <div className="min-h-full">
         <div className="p-6 max-w-4xl mx-auto">
-          <h1 className="text-xl font-semibold text-content">
+          <h1 className="text-xl font-medium text-content">
             {t(I18nKey.AUTOMATIONS$TITLE)}
           </h1>
           <p className="mt-1 text-sm text-muted">
@@ -145,7 +145,7 @@ export default function AutomationsList() {
     <div className="min-h-full">
       <div className="p-6 max-w-4xl mx-auto">
         {/* Header */}
-        <h1 className="text-xl font-semibold text-content">
+        <h1 className="text-xl font-medium text-content">
           {t(I18nKey.AUTOMATIONS$TITLE)}
         </h1>
         <p className="mt-1 text-sm text-muted">
diff --git a/src/routes/device-verify.tsx b/src/routes/device-verify.tsx
index 34b003009..7f3cf1985 100644
--- a/src/routes/device-verify.tsx
+++ b/src/routes/device-verify.tsx
@@ -102,7 +102,7 @@ export default function DeviceVerify() {
                 </svg>
               )}
             </div>
-            <h2 className="text-xl font-semibold mb-2">
+            <h2 className="text-xl font-medium mb-2">
               {verificationResult.success
                 ? t(I18nKey.DEVICE$SUCCESS_TITLE)
                 : t(I18nKey.DEVICE$ERROR_TITLE)}
diff --git a/src/routes/launch.tsx b/src/routes/launch.tsx
index 9c8e3fc02..4caca63fd 100644
--- a/src/routes/launch.tsx
+++ b/src/routes/launch.tsx
@@ -105,7 +105,7 @@ function ErrorDisplay({
       data-testid="launch-error"
     >
       <div className="max-w-md rounded-lg bg-[var(--oh-surface)] p-6 text-center">
-        <h2 className="mb-4 text-xl font-semibold text-red-400">
+        <h2 className="mb-4 text-xl font-medium text-red-400">
           {t(I18nKey.LAUNCH$ERROR_TITLE)}
         </h2>
         <p className="mb-6 text-[var(--oh-text-tertiary)]">
diff --git a/src/routes/mcp.tsx b/src/routes/mcp.tsx
index 0be76a79a..86aa467f1 100644
--- a/src/routes/mcp.tsx
+++ b/src/routes/mcp.tsx
@@ -137,7 +137,7 @@ export default function MCPPage() {
           <div className="min-w-0">
             <div className="flex items-start justify-between gap-4">
               <div className="space-y-1">
-                <h2 className="text-xl font-semibold leading-6 text-foreground">
+                <h2 className="text-xl font-medium leading-6 text-foreground">
                   {t(I18nKey.SETTINGS$MCP_TITLE)}
                 </h2>
                 <div className="max-w-2xl text-sm text-tertiary-light">
@@ -159,7 +159,7 @@ export default function MCPPage() {
           <MarketplaceSearch value={searchQuery} onChange={setSearchQuery} />
 
           <section className="flex flex-col gap-3">
-            <h2 className="text-base font-semibold text-foreground">
+            <h2 className="text-base font-medium text-foreground">
               {t(I18nKey.MCP$INSTALLED_TITLE)}
             </h2>
             <InstalledServersSection
diff --git a/src/routes/secrets-settings.tsx b/src/routes/secrets-settings.tsx
index 1fa851bab..69b3b08f2 100644
--- a/src/routes/secrets-settings.tsx
+++ b/src/routes/secrets-settings.tsx
@@ -1,6 +1,7 @@
 import { useQueryClient } from "@tanstack/react-query";
 import React, { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { ArrowLeft } from "lucide-react";
 import { useSearchSecrets } from "#/hooks/query/use-get-secrets";
 import { useDeleteSecret } from "#/hooks/mutation/use-delete-secret";
 import { SecretForm } from "#/components/features/settings/secrets-settings/secret-form";
@@ -10,8 +11,17 @@ import {
 } from "#/components/features/settings/secrets-settings/secret-list-item";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { ConfirmationModal } from "#/components/shared/modals/confirmation-modal";
+import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
+import {
+  settingsListScrollContainerClassName,
+  settingsListTableHeadClassName,
+  settingsListTableHeaderCellClassName,
+} from "#/utils/settings-list-classes";
+
+export const handle = { hideTitle: true };
 
 export function SecretsSettingsScreen() {
   const queryClient = useQueryClient();
@@ -77,8 +87,60 @@ export function SecretsSettingsScreen() {
     setConfirmationModalIsVisible(false);
   };
 
+  const handleBackToList = () => {
+    setView("list");
+    setSelectedSecret(null);
+  };
+
+  const isFormView = view === "add-secret-form" || view === "edit-secret-form";
+  const formTitle =
+    view === "add-secret-form"
+      ? t(I18nKey.SECRETS$ADD_A_SECRET)
+      : t(I18nKey.SECRETS$EDIT_A_SECRET);
+
   return (
-    <div data-testid="secrets-settings-screen" className="flex flex-col gap-5">
+    <div data-testid="secrets-settings-screen" className="flex flex-col gap-6">
+      {view === "list" ? (
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 space-y-1">
+            <Typography.H2>{t(I18nKey.SETTINGS$NAV_SECRETS)}</Typography.H2>
+            <p
+              data-testid="settings-page-subtitle"
+              className="text-sm leading-5 text-tertiary-light"
+            >
+              {t(I18nKey.SETTINGS$PAGE_SECRETS_SUBLINE)}
+            </p>
+          </div>
+          <BrandButton
+            testId="add-secret-button"
+            type="button"
+            variant="primary"
+            className="shrink-0 whitespace-nowrap"
+            onClick={() => setView("add-secret-form")}
+            isDisabled={isLoadingSecrets}
+          >
+            {t("SECRETS$ADD_NEW_SECRET")}
+          </BrandButton>
+        </div>
+      ) : null}
+
+      {isFormView ? (
+        <div className="flex flex-col gap-2">
+          <button
+            type="button"
+            onClick={handleBackToList}
+            className="flex items-center gap-2 self-start rounded-lg p-2 text-[var(--oh-muted)] transition-colors hover:bg-tertiary hover:text-white"
+            data-testid="back-to-secrets"
+          >
+            <ArrowLeft size={20} aria-hidden />
+            <span className="text-sm leading-5">{t(I18nKey.BUTTON$BACK)}</span>
+          </button>
+          <Typography.H2 testId="secret-editor-title">
+            {formTitle}
+          </Typography.H2>
+        </div>
+      ) : null}
+
       {isLoadingSecrets && view === "list" && (
         <ul>
           <SecretListItemSkeleton />
@@ -87,34 +149,31 @@ export function SecretsSettingsScreen() {
         </ul>
       )}
 
-      {view === "list" && (
-        <BrandButton
-          testId="add-secret-button"
-          type="button"
-          variant="primary"
-          onClick={() => setView("add-secret-form")}
-          isDisabled={isLoadingSecrets}
-        >
-          {t("SECRETS$ADD_NEW_SECRET")}
-        </BrandButton>
-      )}
-
       {view === "list" && !isLoadingSecrets && (
         <div
           ref={tableContainerRef}
-          className="border border-[var(--oh-border)] rounded-md overflow-auto max-h-[min(40vh,22rem)] bg-base-secondary"
+          className={settingsListScrollContainerClassName}
           onScroll={handleScroll}
         >
           <table className="w-full min-w-full table-fixed">
-            <thead className="bg-base-tertiary sticky top-0">
+            <thead className={settingsListTableHeadClassName}>
               <tr>
-                <th className="w-1/4 px-3 py-2 text-left text-sm font-medium">
+                <th
+                  className={cn(settingsListTableHeaderCellClassName, "w-1/4")}
+                >
                   {t(I18nKey.SETTINGS$NAME)}
                 </th>
-                <th className="w-1/2 px-3 py-2 text-left text-sm font-medium">
+                <th
+                  className={cn(settingsListTableHeaderCellClassName, "w-1/2")}
+                >
                   {t(I18nKey.SECRETS$DESCRIPTION)}
                 </th>
-                <th className="w-1/4 px-3 py-2 text-right text-sm font-medium">
+                <th
+                  className={cn(
+                    settingsListTableHeaderCellClassName,
+                    "w-1/4 text-right",
+                  )}
+                >
                   {t(I18nKey.SETTINGS$ACTIONS)}
                 </th>
               </tr>
@@ -150,7 +209,7 @@ export function SecretsSettingsScreen() {
         <SecretForm
           mode={view === "add-secret-form" ? "add" : "edit"}
           selectedSecret={selectedSecret}
-          onCancel={() => setView("list")}
+          onCancel={handleBackToList}
         />
       )}
 
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index 47f9e8802..0f787d896 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Outlet, redirect, useLocation, useMatches } from "react-router";
 import { useTranslation } from "react-i18next";
 import { Route } from "./+types/settings";
@@ -16,6 +16,7 @@ import {
   isSettingsPageHidden,
 } from "#/utils/settings-utils";
 import { redirectIfAcpActive } from "#/utils/acp-route-guard";
+import { SettingsSectionHeaderProvider } from "#/contexts/settings-section-header-context";
 
 export const clientLoader = async ({ request }: Route.ClientLoaderArgs) => {
   const url = new URL(request.url);
@@ -58,6 +59,7 @@ function SettingsScreen() {
   const matches = useMatches();
   const navItems = useSettingsNavItems();
   const isMobile = useBreakpoint(768);
+  const [hideSectionHeader, setHideSectionHeader] = useState(false);
 
   const { currentSectionTitle, currentSectionSubtitle } = useMemo(() => {
     const currentRenderedItem = navItems.find(
@@ -85,28 +87,33 @@ function SettingsScreen() {
   const routeHandle = matches.find((m) => m.pathname === location.pathname)
     ?.handle as { hideTitle?: boolean } | undefined;
   const isMobileHub = isMobile && location.pathname === "/settings";
-  const shouldHideTitle = routeHandle?.hideTitle === true || isMobileHub;
+  const shouldHideTitle =
+    routeHandle?.hideTitle === true || isMobileHub || hideSectionHeader;
 
   return (
     <main data-testid="settings-screen" className="min-h-0">
-      <SettingsLayout navigationItems={navItems}>
-        <div className="flex flex-col gap-6 pb-8">
-          {!shouldHideTitle && (
-            <header className="space-y-1">
-              <Typography.H2>{t(currentSectionTitle)}</Typography.H2>
-              {currentSectionSubtitle ? (
-                <p
-                  data-testid="settings-page-subtitle"
-                  className="text-sm leading-5 text-tertiary-light"
-                >
-                  {t(currentSectionSubtitle)}
-                </p>
-              ) : null}
-            </header>
-          )}
-          <Outlet />
-        </div>
-      </SettingsLayout>
+      <SettingsSectionHeaderProvider
+        setHideSectionHeader={setHideSectionHeader}
+      >
+        <SettingsLayout navigationItems={navItems}>
+          <div className="flex flex-col gap-6 pb-8">
+            {!shouldHideTitle && (
+              <header className="space-y-1">
+                <Typography.H2>{t(currentSectionTitle)}</Typography.H2>
+                {currentSectionSubtitle ? (
+                  <p
+                    data-testid="settings-page-subtitle"
+                    className="text-sm leading-5 text-tertiary-light"
+                  >
+                    {t(currentSectionSubtitle)}
+                  </p>
+                ) : null}
+              </header>
+            )}
+            <Outlet />
+          </div>
+        </SettingsLayout>
+      </SettingsSectionHeaderProvider>
     </main>
   );
 }
diff --git a/src/routes/shared-conversation.tsx b/src/routes/shared-conversation.tsx
index a329aaaf2..70461d811 100644
--- a/src/routes/shared-conversation.tsx
+++ b/src/routes/shared-conversation.tsx
@@ -87,7 +87,7 @@ export default function SharedConversation() {
             <OpenHandsLogo width={46} height={30} />
           </Link>
           <div className="flex-1 min-w-0">
-            <h1 className="text-xl font-semibold mb-2">
+            <h1 className="text-xl font-medium mb-2">
               {conversation?.title ||
                 t(I18nKey.CONVERSATION$SHARED_CONVERSATION)}
             </h1>
diff --git a/src/routes/skills-plugins.tsx b/src/routes/skills-plugins.tsx
index f37f2d2e6..158b17fc0 100644
--- a/src/routes/skills-plugins.tsx
+++ b/src/routes/skills-plugins.tsx
@@ -15,7 +15,7 @@ export default function SkillsPluginsScreen() {
       <main className={settingsLikeMainScrollClassName}>
         <div className="mx-auto w-full min-w-0 max-w-[800px]">
           <div className="mb-4 min-w-0 space-y-1">
-            <h2 className="text-xl font-semibold leading-6 text-foreground">
+            <h2 className="text-xl font-medium leading-6 text-foreground">
               {t(I18nKey.SETTINGS$PLUGINS_TITLE)}
             </h2>
             <div className="max-w-2xl text-sm text-tertiary-light">
diff --git a/src/routes/skills-settings.tsx b/src/routes/skills-settings.tsx
index 0475a5c76..2ff5d1f2e 100644
--- a/src/routes/skills-settings.tsx
+++ b/src/routes/skills-settings.tsx
@@ -95,7 +95,7 @@ function SkillsSettingsScreen() {
       <main className={cn(settingsLikeMainScrollClassName, "h-full")}>
         <div className="mx-auto flex w-full min-w-0 max-w-[800px] flex-col gap-6">
           <div className="min-w-0 space-y-1">
-            <h2 className="text-xl font-semibold leading-6 text-foreground">
+            <h2 className="text-xl font-medium leading-6 text-foreground">
               {t(I18nKey.SETTINGS$SKILLS_TITLE)}
             </h2>
             <div
diff --git a/src/routes/verification-settings.tsx b/src/routes/verification-settings.tsx
index e89875987..1dd71bee4 100644
--- a/src/routes/verification-settings.tsx
+++ b/src/routes/verification-settings.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { SettingsDropdownInput } from "#/components/features/settings/settings-dropdown-input";
 import { SettingsSwitch } from "#/components/features/settings/settings-switch";
+import { formControlSwitchDescriptionClassName } from "#/utils/form-control-classes";
+import { cn } from "#/utils/utils";
 import {
   SdkSectionHeaderProps,
   SdkSectionPage,
@@ -63,7 +65,12 @@ function VerificationSettingsHeader({
           >
             {t(I18nKey.SETTINGS_FORM$ENABLE_CONFIRMATION_MODE_LABEL)}
           </SettingsSwitch>
-          <p className="text-tertiary-alt text-xs leading-5">
+          <p
+            className={cn(
+              formControlSwitchDescriptionClassName,
+              "text-tertiary-alt text-xs leading-5",
+            )}
+          >
             {t(I18nKey.SETTINGS$CONFIRMATION_MODE_TOOLTIP)}
           </p>
         </div>
diff --git a/src/styles/agent-server-ui-style-scope.ts b/src/styles/agent-server-ui-style-scope.ts
index c5c29d7e8..469becbf9 100644
--- a/src/styles/agent-server-ui-style-scope.ts
+++ b/src/styles/agent-server-ui-style-scope.ts
@@ -4,8 +4,20 @@ export const AGENT_SERVER_UI_DEFAULT_THEME = "dark" as const;
 
 export type AgentServerUITheme = "dark" | "light" | "default";
 
+/** Brand tokens controlled by color themes — not inlined on AgentServerUIRoot. */
+export const AGENT_SERVER_UI_THEMEABLE_BRAND_VARIABLES = [
+  "--oh-color-primary",
+  "--oh-accent",
+  "--oh-warning",
+] as const;
+
+export type AgentServerUIThemeableBrandVariable =
+  (typeof AGENT_SERVER_UI_THEMEABLE_BRAND_VARIABLES)[number];
+
 export const AGENT_SERVER_UI_DEFAULT_CSS_VARIABLES = {
-  "--oh-color-primary": "#c9b974",
+  // Brand/button colors (--oh-color-primary, --oh-accent, --oh-warning) live in
+  // tailwind.css and are overridden at runtime by applyColorTheme(); keep them
+  // out of inline defaults so theme tokens are not blocked by element.style.
   "--oh-color-logo": "#cfb755",
   "--oh-color-base": "var(--cool-grey-950)",
   "--oh-color-base-secondary": "var(--cool-grey-925)",
@@ -38,11 +50,9 @@ export const AGENT_SERVER_UI_DEFAULT_CSS_VARIABLES = {
     "color-mix(in srgb, var(--cool-grey-400) 50%, transparent)",
   "--oh-default": "var(--cool-grey-800)",
   "--oh-default-foreground": "var(--cool-grey-100)",
-  "--oh-accent": "#c9b974",
   "--oh-accent-foreground": "var(--cool-grey-950)",
   "--oh-success": "#a5e75e",
   "--oh-success-foreground": "var(--cool-grey-950)",
-  "--oh-warning": "#c9b974",
   "--oh-warning-foreground": "var(--cool-grey-950)",
   "--oh-danger": "#e76a5e",
   "--oh-danger-foreground": "var(--cool-grey-50)",
@@ -55,9 +65,11 @@ export const AGENT_SERVER_UI_DEFAULT_CSS_VARIABLES = {
   "--oh-border-subtle": "var(--cool-grey-800)",
   "--oh-separator": "rgba(113, 120, 136, 0.5)",
   "--oh-focus": "#ffffff",
+  "--oh-status-success": "#1FBD53",
+  "--oh-status-error": "#FF684E",
   "--oh-link": "var(--cool-grey-100)",
-  "--oh-radius": "5px",
-  "--oh-field-radius": "5px",
+  "--oh-radius": "8px",
+  "--oh-field-radius": "8px",
   "--oh-surface-shadow": "none",
   "--oh-overlay-shadow": "none",
   "--oh-field-shadow": "none",
@@ -75,7 +87,8 @@ export const AGENT_SERVER_UI_DEFAULT_CSS_VARIABLES = {
 } as const;
 
 export type AgentServerUICssVariableName =
-  keyof typeof AGENT_SERVER_UI_DEFAULT_CSS_VARIABLES;
+  | keyof typeof AGENT_SERVER_UI_DEFAULT_CSS_VARIABLES
+  | AgentServerUIThemeableBrandVariable;
 
 export type AgentServerUIStyleOverrides = Partial<
   Record<AgentServerUICssVariableName, string>
diff --git a/src/tailwind.css b/src/tailwind.css
index d0b37713e..b9c9cc612 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -115,8 +115,8 @@
   --oh-status-success: #1FBD53;
   --oh-status-error: #FF684E;
   --oh-link: var(--cool-grey-100);
-  --oh-radius: 5px;
-  --oh-field-radius: 5px;
+  --oh-radius: 8px;
+  --oh-field-radius: 8px;
   --oh-surface-shadow: none;
   --oh-overlay-shadow: none;
   --oh-field-shadow: none;
@@ -389,34 +389,34 @@
 }
 
 .loader {
-  background: #c9b974;
+  background: var(--oh-color-primary);
   animation: l5 1s infinite linear alternate;
 }
 
 @keyframes l5 {
   0% {
     box-shadow:
-      20px 0 #c9b974,
-      -20px 0 rgba(201, 185, 116, 0.1);
-    background: #c9b974;
+      20px 0 var(--oh-color-primary),
+      -20px 0 color-mix(in srgb, var(--oh-color-primary) 10%, transparent);
+    background: var(--oh-color-primary);
   }
   33% {
     box-shadow:
-      20px 0 #c9b974,
-      -20px 0 rgba(201, 185, 116, 0.1);
-    background: rgba(201, 185, 116, 0.1);
+      20px 0 var(--oh-color-primary),
+      -20px 0 color-mix(in srgb, var(--oh-color-primary) 10%, transparent);
+    background: color-mix(in srgb, var(--oh-color-primary) 10%, transparent);
   }
   66% {
     box-shadow:
-      20px 0 rgba(201, 185, 116, 0.1),
-      -20px 0 #c9b974;
-    background: rgba(201, 185, 116, 0.1);
+      20px 0 color-mix(in srgb, var(--oh-color-primary) 10%, transparent),
+      -20px 0 var(--oh-color-primary);
+    background: color-mix(in srgb, var(--oh-color-primary) 10%, transparent);
   }
   100% {
     box-shadow:
-      20px 0 rgba(201, 185, 116, 0.1),
-      -20px 0 #c9b974;
-    background: #c9b974;
+      20px 0 color-mix(in srgb, var(--oh-color-primary) 10%, transparent),
+      -20px 0 var(--oh-color-primary);
+    background: var(--oh-color-primary);
   }
 }
 
diff --git a/src/themes/color-themes.ts b/src/themes/color-themes.ts
index 7c618839d..51f5ac66b 100644
--- a/src/themes/color-themes.ts
+++ b/src/themes/color-themes.ts
@@ -1,4 +1,7 @@
-export type ColorThemeKey = "openhands-deepsea" | "openhands-neutral";
+export type ColorThemeKey =
+  | "openhands-deepsea"
+  | "openhands-neutral"
+  | "openhands-neo";
 
 export interface ColorThemeDefinition {
   label: string;
@@ -13,6 +16,8 @@ export interface ColorThemeDefinition {
    * from a later stylesheet to pick up theme changes at runtime.
    */
   heroui: Record<string, string>;
+  /** Overrides for --oh-* semantic tokens such as brand / button colors. */
+  tokens?: Record<string, string>;
 }
 
 // HSL channel strings for the neutral grey palette (H=0, S=0%, L=hex/255*100)
@@ -33,6 +38,73 @@ const NEUTRAL_HSL = {
   975: "0 0% 6.27%",  // #101010
 };
 
+const NEUTRAL_SCALE = {
+  "--cool-grey-50": "#F7F7F7",
+  "--cool-grey-100": "#ECECEC",
+  "--cool-grey-200": "#DCDCDC",
+  "--cool-grey-300": "#BEBEBE",
+  "--cool-grey-400": "#979797",
+  "--cool-grey-500": "#737373",
+  "--cool-grey-600": "#565656",
+  "--cool-grey-700": "#404040",
+  "--cool-grey-800": "#313131",
+  "--cool-grey-900": "#282828",
+  "--cool-grey-925": "#202020",
+  "--cool-grey-950": "#181818",
+  "--cool-grey-975": "#101010",
+};
+
+const NEUTRAL_HEROUI = {
+  "--heroui-background": NEUTRAL_HSL[950],
+  "--heroui-background-foreground": NEUTRAL_HSL[50],
+  "--heroui-foreground-50": NEUTRAL_HSL[975],
+  "--heroui-foreground-100": NEUTRAL_HSL[950],
+  "--heroui-foreground-200": NEUTRAL_HSL[900],
+  "--heroui-foreground-300": NEUTRAL_HSL[850],
+  "--heroui-foreground-400": NEUTRAL_HSL[800],
+  "--heroui-foreground-500": NEUTRAL_HSL[700],
+  "--heroui-foreground-600": NEUTRAL_HSL[600],
+  "--heroui-foreground-700": NEUTRAL_HSL[500],
+  "--heroui-foreground-800": NEUTRAL_HSL[400],
+  "--heroui-foreground-900": NEUTRAL_HSL[300],
+  "--heroui-foreground": NEUTRAL_HSL[300],
+  "--heroui-content1": NEUTRAL_HSL[900],
+  "--heroui-content1-foreground": NEUTRAL_HSL[100],
+  "--heroui-content2": NEUTRAL_HSL[850],
+  "--heroui-content2-foreground": NEUTRAL_HSL[200],
+  "--heroui-content3": NEUTRAL_HSL[800],
+  "--heroui-content3-foreground": NEUTRAL_HSL[300],
+  "--heroui-content4": NEUTRAL_HSL[700],
+  "--heroui-content4-foreground": NEUTRAL_HSL[400],
+  "--heroui-default-50": NEUTRAL_HSL[975],
+  "--heroui-default-100": NEUTRAL_HSL[950],
+  "--heroui-default-200": NEUTRAL_HSL[900],
+  "--heroui-default-300": NEUTRAL_HSL[850],
+  "--heroui-default-400": NEUTRAL_HSL[800],
+  "--heroui-default-500": NEUTRAL_HSL[700],
+  "--heroui-default-600": NEUTRAL_HSL[600],
+  "--heroui-default-700": NEUTRAL_HSL[500],
+  "--heroui-default-800": NEUTRAL_HSL[400],
+  "--heroui-default-900": NEUTRAL_HSL[300],
+  "--heroui-default-foreground": NEUTRAL_HSL[50],
+  "--heroui-default": NEUTRAL_HSL[800],
+};
+
+import { AGENT_SERVER_UI_THEMEABLE_BRAND_VARIABLES } from "#/styles/agent-server-ui-style-scope";
+
+/** CSS custom properties overridden by color themes (see applyColorTheme). */
+export const COLOR_THEME_TOKEN_KEYS = AGENT_SERVER_UI_THEMEABLE_BRAND_VARIABLES;
+
+/** White primary/accent tokens — used by OpenHands-Neo for button surfaces. */
+const NEO_WHITE_BUTTON_TOKENS: Record<
+  (typeof COLOR_THEME_TOKEN_KEYS)[number],
+  string
+> = {
+  "--oh-color-primary": "#ffffff",
+  "--oh-accent": "#ffffff",
+  "--oh-warning": "#ffffff",
+};
+
 export const COLOR_THEMES: Record<ColorThemeKey, ColorThemeDefinition> = {
   "openhands-deepsea": {
     label: "OpenHands-DeepSea",
@@ -94,60 +166,19 @@ export const COLOR_THEMES: Record<ColorThemeKey, ColorThemeDefinition> = {
 
   "openhands-neutral": {
     label: "OpenHands-Neutral",
-    scale: {
-      "--cool-grey-50": "#F7F7F7",
-      "--cool-grey-100": "#ECECEC",
-      "--cool-grey-200": "#DCDCDC",
-      "--cool-grey-300": "#BEBEBE",
-      "--cool-grey-400": "#979797",
-      "--cool-grey-500": "#737373",
-      "--cool-grey-600": "#565656",
-      "--cool-grey-700": "#404040",
-      "--cool-grey-800": "#313131",
-      "--cool-grey-900": "#282828",
-      "--cool-grey-925": "#202020",
-      "--cool-grey-950": "#181818",
-      "--cool-grey-975": "#101010",
-    },
+    scale: NEUTRAL_SCALE,
     // Each stop follows the same positional mapping as hero.ts:
     //   heroui-default-100 ← cool-grey-950 position ← neutral-950 (#181818)
     //   heroui-default-200 ← cool-grey-925 position ← neutral-900 (#202020)
     //   ...etc.
-    heroui: {
-      "--heroui-background": NEUTRAL_HSL[950],
-      "--heroui-background-foreground": NEUTRAL_HSL[50],
-      "--heroui-foreground-50": NEUTRAL_HSL[975],
-      "--heroui-foreground-100": NEUTRAL_HSL[950],
-      "--heroui-foreground-200": NEUTRAL_HSL[900],
-      "--heroui-foreground-300": NEUTRAL_HSL[850],
-      "--heroui-foreground-400": NEUTRAL_HSL[800],
-      "--heroui-foreground-500": NEUTRAL_HSL[700],
-      "--heroui-foreground-600": NEUTRAL_HSL[600],
-      "--heroui-foreground-700": NEUTRAL_HSL[500],
-      "--heroui-foreground-800": NEUTRAL_HSL[400],
-      "--heroui-foreground-900": NEUTRAL_HSL[300],
-      "--heroui-foreground": NEUTRAL_HSL[300],
-      "--heroui-content1": NEUTRAL_HSL[900],
-      "--heroui-content1-foreground": NEUTRAL_HSL[100],
-      "--heroui-content2": NEUTRAL_HSL[850],
-      "--heroui-content2-foreground": NEUTRAL_HSL[200],
-      "--heroui-content3": NEUTRAL_HSL[800],
-      "--heroui-content3-foreground": NEUTRAL_HSL[300],
-      "--heroui-content4": NEUTRAL_HSL[700],
-      "--heroui-content4-foreground": NEUTRAL_HSL[400],
-      "--heroui-default-50": NEUTRAL_HSL[975],
-      "--heroui-default-100": NEUTRAL_HSL[950],
-      "--heroui-default-200": NEUTRAL_HSL[900],
-      "--heroui-default-300": NEUTRAL_HSL[850],
-      "--heroui-default-400": NEUTRAL_HSL[800],
-      "--heroui-default-500": NEUTRAL_HSL[700],
-      "--heroui-default-600": NEUTRAL_HSL[600],
-      "--heroui-default-700": NEUTRAL_HSL[500],
-      "--heroui-default-800": NEUTRAL_HSL[400],
-      "--heroui-default-900": NEUTRAL_HSL[300],
-      "--heroui-default-foreground": NEUTRAL_HSL[50],
-      "--heroui-default": NEUTRAL_HSL[800],
-    },
+    heroui: NEUTRAL_HEROUI,
+  },
+
+  "openhands-neo": {
+    label: "OpenHands-Neo",
+    scale: NEUTRAL_SCALE,
+    heroui: NEUTRAL_HEROUI,
+    tokens: NEO_WHITE_BUTTON_TOKENS,
   },
 };
 
@@ -200,7 +231,7 @@ const THEME_STYLE_TAG_ID = "oh-color-theme-override";
  */
 export function applyColorTheme(key: ColorThemeKey): void {
   if (typeof document === "undefined") return;
-  const { scale, heroui } = COLOR_THEMES[key];
+  const { scale, heroui, tokens = {} } = COLOR_THEMES[key];
 
   const scaleDecls = Object.entries(scale)
     .map(([p, v]) => `  ${p}: ${v};`)
@@ -210,13 +241,17 @@ export function applyColorTheme(key: ColorThemeKey): void {
     .map(([p, v]) => `  ${p}: ${v};`)
     .join("\n");
 
+  const tokenDecls = Object.entries(tokens)
+    .map(([p, v]) => `  ${p}: ${v};`)
+    .join("\n");
+
   // Target both selectors for heroui vars:
   //   [data-agent-server-ui] — covers document.body (portal destination) so
   //     portalled popover/listbox content inherits the overridden values.
   //   [data-theme=dark]      — covers the inner AgentServerUIRoot wrapper so
   //     components scoped inside the dark theme wrapper also pick them up.
   const css = [
-    `[data-agent-server-ui] {\n${scaleDecls}\n${herouiDecls}\n}`,
+    `[data-agent-server-ui] {\n${scaleDecls}\n${herouiDecls}\n${tokenDecls}\n}`,
     `[data-theme=dark] {\n${herouiDecls}\n}`,
   ].join("\n");
 
@@ -229,4 +264,24 @@ export function applyColorTheme(key: ColorThemeKey): void {
     document.head.appendChild(styleEl);
   }
   styleEl.textContent = css;
+
+  syncColorThemeTokensOnScopeRoots(tokens);
+}
+
+function syncColorThemeTokensOnScopeRoots(
+  tokens: Record<string, string>,
+): void {
+  const roots = document.querySelectorAll("[data-agent-server-ui]");
+  for (const root of roots) {
+    if (!(root instanceof HTMLElement)) continue;
+
+    for (const key of COLOR_THEME_TOKEN_KEYS) {
+      const value = tokens[key];
+      if (value) {
+        root.style.setProperty(key, value);
+      } else {
+        root.style.removeProperty(key);
+      }
+    }
+  }
 }
diff --git a/src/ui/card-title.tsx b/src/ui/card-title.tsx
index 7c46fa9ef..0ce8285c9 100644
--- a/src/ui/card-title.tsx
+++ b/src/ui/card-title.tsx
@@ -11,7 +11,7 @@ const cardTitleVariants = cva("flex items-center", {
       default: "text-base",
     },
     fontWeight: {
-      default: "font-bold",
+      default: "font-medium",
     },
     textColor: {
       default: "text-white",
diff --git a/src/ui/combobox-caret.tsx b/src/ui/combobox-caret.tsx
new file mode 100644
index 000000000..474bbdeb4
--- /dev/null
+++ b/src/ui/combobox-caret.tsx
@@ -0,0 +1,79 @@
+import { cn } from "#/utils/utils";
+
+export function ComboboxCaretIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      width="1em"
+      className={className}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+/** Matches HeroUI Autocomplete selectorButton styling. */
+export const comboboxCaretButtonClassName =
+  "inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none transition-[transform] duration-150 ease motion-reduce:transition-none";
+
+/** HeroUI Autocomplete selectorButton slot — keep only chevron rotation animated. */
+export const heroUiAutocompleteSelectorButtonClassName = cn(
+  comboboxCaretButtonClassName,
+  "!rounded-none !bg-transparent data-[hover=true]:!bg-transparent",
+);
+
+interface ComboboxCaretButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isOpen?: boolean;
+}
+
+export function ComboboxCaretButton({
+  isOpen,
+  className,
+  disabled,
+  children,
+  ...props
+}: ComboboxCaretButtonProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      className={cn(
+        comboboxCaretButtonClassName,
+        isOpen && "rotate-180",
+        disabled && "cursor-not-allowed opacity-60",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <ComboboxCaretIcon />}
+    </button>
+  );
+}
+
+/** Inline caret for buttons where only the icon rotates, not the whole control. */
+export function ComboboxCaretInline({
+  isOpen,
+  className,
+}: {
+  isOpen?: boolean;
+  className?: string;
+}) {
+  return (
+    <ComboboxCaretIcon
+      className={cn(
+        "shrink-0 transition-[transform] duration-150 ease motion-reduce:transition-none",
+        isOpen && "rotate-180",
+        className,
+      )}
+    />
+  );
+}
diff --git a/src/ui/dropdown/dropdown-input.tsx b/src/ui/dropdown/dropdown-input.tsx
index 90a9d7ccd..afa021a9d 100644
--- a/src/ui/dropdown/dropdown-input.tsx
+++ b/src/ui/dropdown/dropdown-input.tsx
@@ -1,4 +1,5 @@
 import { cn } from "#/utils/utils";
+import { formControlInlineInputClassName } from "#/utils/form-control-classes";
 
 interface DropdownInputProps {
   placeholder?: string;
@@ -17,7 +18,8 @@ export function DropdownInput({
         placeholder,
         disabled: isDisabled,
         className: cn(
-          "flex-1 min-w-0 outline-none bg-transparent text-white not-italic placeholder:text-tertiary-alt",
+          formControlInlineInputClassName,
+          "px-0 not-italic text-inherit",
         ),
       })}
     />
diff --git a/src/ui/dropdown/dropdown.tsx b/src/ui/dropdown/dropdown.tsx
index 7cec37793..9c7c1b944 100644
--- a/src/ui/dropdown/dropdown.tsx
+++ b/src/ui/dropdown/dropdown.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useCombobox } from "downshift";
 import { cn } from "#/utils/utils";
 import { DropdownOption } from "./types";
+import { formControlShellClassName } from "#/utils/form-control-classes";
 import { LoadingSpinner } from "./loading-spinner";
 import { ClearButton } from "./clear-button";
 import { ToggleButton } from "./toggle-button";
@@ -164,8 +165,8 @@ export function Dropdown({
       {!hideTrigger ? (
         <div
           className={cn(
-            "bg-tertiary border border-[var(--oh-border-input)] rounded w-full p-2",
-            "flex items-center gap-2",
+            formControlShellClassName,
+            "group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white",
             isDisabled && "cursor-not-allowed opacity-60",
             className,
           )}
diff --git a/src/ui/dropdown/toggle-button.tsx b/src/ui/dropdown/toggle-button.tsx
index 4e9e6c070..fdc650b39 100644
--- a/src/ui/dropdown/toggle-button.tsx
+++ b/src/ui/dropdown/toggle-button.tsx
@@ -1,4 +1,7 @@
-import { ChevronDown } from "lucide-react";
+import {
+  ComboboxCaretIcon,
+  comboboxCaretButtonClassName,
+} from "#/ui/combobox-caret";
 import { cn } from "#/utils/utils";
 
 interface ToggleButtonProps {
@@ -18,13 +21,15 @@ export function ToggleButton({
       data-testid="dropdown-trigger"
       {...getToggleButtonProps({
         disabled: isDisabled,
-        className: cn("text-white", isDisabled && "cursor-not-allowed"),
+        className: cn(
+          comboboxCaretButtonClassName,
+          "text-current",
+          isOpen && "rotate-180",
+          isDisabled && "cursor-not-allowed",
+        ),
       })}
     >
-      <ChevronDown
-        size={16}
-        className={cn("transition-transform", isOpen && "rotate-180")}
-      />
+      <ComboboxCaretIcon />
     </button>
   );
 }
diff --git a/src/ui/interactive-chip.tsx b/src/ui/interactive-chip.tsx
index 6edc3640d..ea863592c 100644
--- a/src/ui/interactive-chip.tsx
+++ b/src/ui/interactive-chip.tsx
@@ -22,7 +22,7 @@ export function InteractiveChip({
       data-testid={testId}
       onClick={onClick}
       className={cn(
-        "bg-[var(--oh-text-tertiary)] px-2 rounded-[100px] text-black text-sm text-center font-semibold cursor-pointer",
+        "bg-[var(--oh-text-tertiary)] px-2 rounded-[100px] text-black text-sm text-center font-normal cursor-pointer",
         "hover:bg-[var(--oh-text-tertiary)] transition-colors",
         className,
       )}
diff --git a/src/ui/pagination.tsx b/src/ui/pagination.tsx
index 87e1a45b7..07708f47b 100644
--- a/src/ui/pagination.tsx
+++ b/src/ui/pagination.tsx
@@ -99,7 +99,7 @@ export function Pagination({
             className={cn(
               "min-w-[32px] h-8 px-2 text-sm rounded-md transition-colors cursor-pointer",
               currentPage === page
-                ? "bg-surface-button text-white font-medium"
+                ? "bg-surface-button text-white font-normal"
                 : "text-tertiary-alt hover:bg-surface-outline",
             )}
             aria-current={currentPage === page ? "page" : undefined}
diff --git a/src/ui/toggle-switch.tsx b/src/ui/toggle-switch.tsx
new file mode 100644
index 000000000..3416429d6
--- /dev/null
+++ b/src/ui/toggle-switch.tsx
@@ -0,0 +1,66 @@
+import { cn } from "#/utils/utils";
+
+interface ToggleSwitchVisualProps {
+  enabled: boolean;
+  className?: string;
+}
+
+/** Shared toggle track + thumb used by settings labels and automation controls. */
+export function ToggleSwitchVisual({
+  enabled,
+  className,
+}: ToggleSwitchVisualProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "relative inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border",
+        "transition-colors duration-200 ease-in-out motion-reduce:transition-none",
+        enabled
+          ? "border-white bg-white"
+          : "border-[var(--oh-border)] bg-surface-raised",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block size-4 rounded-full",
+          "transition-transform duration-200 ease-in-out motion-reduce:transition-none",
+          enabled
+            ? "translate-x-[21px] bg-base-secondary"
+            : "translate-x-[2px] bg-[var(--oh-muted)]",
+        )}
+      />
+    </span>
+  );
+}
+
+interface ToggleSwitchProps {
+  enabled: boolean;
+  label: string;
+  onToggle: () => void;
+  className?: string;
+}
+
+export function ToggleSwitch({
+  enabled,
+  label,
+  onToggle,
+  className,
+}: ToggleSwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+      aria-label={label}
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggle();
+      }}
+      className={cn("cursor-pointer", className)}
+    >
+      <ToggleSwitchVisual enabled={enabled} />
+    </button>
+  );
+}
diff --git a/src/ui/typography.tsx b/src/ui/typography.tsx
index 908a319de..54008896f 100644
--- a/src/ui/typography.tsx
+++ b/src/ui/typography.tsx
@@ -4,9 +4,9 @@ import { cn } from "#/utils/utils";
 const typographyVariants = cva("", {
   variants: {
     variant: {
-      h1: "text-[32px] text-white font-bold leading-5",
-      h2: "text-xl font-semibold leading-6 -tracking-[0.02em] text-white",
-      h3: "text-sm font-semibold text-[var(--oh-text-tertiary)]",
+      h1: "text-[32px] text-white font-medium leading-5",
+      h2: "text-xl font-medium leading-6 -tracking-[0.02em] text-white",
+      h3: "text-sm font-medium text-[var(--oh-text-tertiary)]",
       span: "text-sm font-normal text-white leading-5.5",
       p: "text-sm font-normal text-white leading-5.5",
       codeBlock:
diff --git a/src/utils/custom-toast-handlers.tsx b/src/utils/custom-toast-handlers.tsx
index e07831101..64a8ce86f 100644
--- a/src/utils/custom-toast-handlers.tsx
+++ b/src/utils/custom-toast-handlers.tsx
@@ -1,6 +1,9 @@
-import { CSSProperties } from "react";
+import React, { CSSProperties, ReactNode } from "react";
+import { CircleX } from "lucide-react";
 import toast, { ToastOptions } from "react-hot-toast";
+import { OH_STATUS_ERROR_COLOR } from "#/constants/status-colors";
 import { calculateToastDuration } from "./toast-duration";
+import { cn } from "#/utils/utils";
 import i18n from "#/i18n";
 
 // react-hot-toast accepts only CSSProperties via the style option — cannot use className
@@ -8,7 +11,7 @@ const TOAST_STYLE: CSSProperties = {
   background: "var(--oh-color-tertiary)",
   border: "1px solid var(--oh-border-input)",
   color: "#fff",
-  borderRadius: "4px",
+  borderRadius: "var(--oh-radius)",
   maxWidth: "400px",
   wordBreak: "break-word",
   overflowWrap: "anywhere",
@@ -20,15 +23,78 @@ export const TOAST_OPTIONS: ToastOptions = {
   style: TOAST_STYLE,
 };
 
+const ERROR_TOAST_STYLE: CSSProperties = {
+  ...TOAST_STYLE,
+  color: "var(--oh-muted)",
+};
+
+/** Icon + message row; center icon for single-line text, top-align when wrapped. */
+export function ErrorToastContent({ message }: { message: ReactNode }) {
+  const contentRef = React.useRef<HTMLSpanElement>(null);
+  const [isMultiLine, setIsMultiLine] = React.useState(false);
+
+  React.useLayoutEffect(() => {
+    const content = contentRef.current;
+    if (!content) {
+      return undefined;
+    }
+
+    const updateIsMultiLine = () => {
+      const lineHeight = Number.parseFloat(
+        getComputedStyle(content).lineHeight,
+      );
+      if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
+        setIsMultiLine(false);
+        return;
+      }
+
+      setIsMultiLine(content.getBoundingClientRect().height > lineHeight * 1.5);
+    };
+
+    updateIsMultiLine();
+
+    const observer = new ResizeObserver(updateIsMultiLine);
+    observer.observe(content);
+
+    return () => observer.disconnect();
+  }, [message]);
+
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 gap-2",
+        isMultiLine ? "items-start" : "items-center",
+      )}
+    >
+      <CircleX
+        aria-hidden
+        className="h-4 w-4 shrink-0"
+        strokeWidth={2}
+        style={{ color: OH_STATUS_ERROR_COLOR }}
+      />
+      <span
+        ref={contentRef}
+        className="min-w-0 flex-1 text-sm leading-5 [word-break:break-word] [overflow-wrap:anywhere]"
+      >
+        {message}
+      </span>
+    </div>
+  );
+}
+
+export const ERROR_TOAST_OPTIONS: ToastOptions = {
+  ...TOAST_OPTIONS,
+  icon: null,
+  style: ERROR_TOAST_STYLE,
+};
+
 export const displayErrorToast = (error: string | null | undefined) => {
   const errorMessage = error || i18n.t("STATUS$ERROR");
   const duration = calculateToastDuration(errorMessage, 4000);
-  toast.error(
-    <span className="[word-break:break-word] [overflow-wrap:anywhere]">
-      {errorMessage}
-    </span>,
-    { ...TOAST_OPTIONS, duration },
-  );
+  toast(<ErrorToastContent message={errorMessage} />, {
+    ...ERROR_TOAST_OPTIONS,
+    duration,
+  });
 };
 
 export const displaySuccessToast = (message: string) => {
diff --git a/src/utils/form-control-classes.ts b/src/utils/form-control-classes.ts
new file mode 100644
index 000000000..2e233d0e4
--- /dev/null
+++ b/src/utils/form-control-classes.ts
@@ -0,0 +1,95 @@
+import { cn } from "#/utils/utils";
+
+/** 36px control height — shared by fields, dropdowns, and buttons. */
+export const formControlHeightClassName = "h-9 min-h-9";
+
+export const formControlRadiusClassName = "rounded-lg";
+
+export const formControlBorderClassName = "border border-[var(--oh-border)]";
+
+export const formControlSurfaceClassName = "bg-base-secondary";
+
+/** Animate shell chrome on hover/focus; foreground color snaps instantly. */
+export const formControlTransitionClassName =
+  "transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none";
+
+/** HeroUI input wrappers ship `transition-colors`; override so caret/text hover is instant. */
+export const formControlHeroUiWrapperTransitionClassName =
+  "!transition-[background-color,border-color,box-shadow,opacity] !duration-150 motion-reduce:transition-none";
+
+export const formControlFocusClassName =
+  "focus:border-white/40 focus:ring-1 focus:ring-white/20 focus:outline-none";
+
+export const formControlFocusWithinClassName =
+  "focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20";
+
+export const formControlDisabledClassName =
+  "disabled:cursor-not-allowed disabled:opacity-60";
+
+/** Native text inputs and HeroUI Autocomplete wrappers. */
+export const formControlFieldClassName = cn(
+  formControlHeightClassName,
+  formControlRadiusClassName,
+  formControlBorderClassName,
+  formControlSurfaceClassName,
+  formControlTransitionClassName,
+  formControlFocusClassName,
+  formControlDisabledClassName,
+  "w-full min-w-0 px-3 text-sm text-white placeholder:text-tertiary-alt",
+);
+
+/** Settings screens keep italic placeholders on form controls. */
+export const formControlSettingsFieldClassName = cn(
+  formControlFieldClassName,
+  "placeholder:italic",
+  formControlHeroUiWrapperTransitionClassName,
+);
+
+/** Multiline fields share border/radius/focus styling without a fixed height. */
+export const formControlMultilineFieldClassName = cn(
+  formControlRadiusClassName,
+  formControlBorderClassName,
+  formControlSurfaceClassName,
+  formControlTransitionClassName,
+  formControlFocusClassName,
+  formControlDisabledClassName,
+  "w-full min-w-0 px-3 py-2 text-sm text-white placeholder:text-tertiary-alt",
+);
+
+/** Combobox / search shell (icon + input), e.g. skills toolbar. */
+export const formControlShellClassName = cn(
+  formControlHeightClassName,
+  "relative flex min-w-0 items-center",
+  formControlRadiusClassName,
+  formControlBorderClassName,
+  formControlSurfaceClassName,
+  formControlTransitionClassName,
+  formControlFocusWithinClassName,
+);
+
+/** Borderless input nested inside {@link formControlShellClassName}. */
+export const formControlInlineInputClassName = cn(
+  "min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none",
+  "placeholder:text-tertiary-alt",
+  "[&::-webkit-search-cancel-button]:hidden",
+);
+
+/** Primary/secondary/danger action buttons. */
+export const formControlButtonClassName = cn(
+  formControlHeightClassName,
+  "inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-3",
+  formControlRadiusClassName,
+  formControlTransitionClassName,
+  "text-sm font-normal disabled:cursor-not-allowed disabled:opacity-30",
+);
+
+/** Helper text under a left-aligned {@link SettingsSwitch} (40px track + gap-2). */
+export const formControlSwitchDescriptionClassName = "pl-12";
+
+/** Filter / enum dropdown triggers beside search toolbars. */
+export const formControlFilterTriggerClassName = cn(
+  formControlButtonClassName,
+  formControlBorderClassName,
+  formControlSurfaceClassName,
+  "shrink-0 text-white",
+);
diff --git a/src/utils/mobile-top-bar-icon-button-classes.ts b/src/utils/mobile-top-bar-icon-button-classes.ts
index 09af0d185..b20af8a46 100644
--- a/src/utils/mobile-top-bar-icon-button-classes.ts
+++ b/src/utils/mobile-top-bar-icon-button-classes.ts
@@ -1,4 +1,5 @@
 import { cn } from "#/utils/utils";
+import { formControlTransitionClassName } from "#/utils/form-control-classes";
 
 /**
  * Shared control for icon-only buttons in mobile top bars (global nav, chat
@@ -7,7 +8,8 @@ import { cn } from "#/utils/utils";
  */
 export const mobileTopBarIconButtonClassName = cn(
   "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1",
-  "text-[var(--oh-muted)] transition-colors",
+  "text-[var(--oh-muted)]",
+  formControlTransitionClassName,
   "hover:bg-white/10 hover:text-white",
 );
 
diff --git a/src/utils/settings-list-classes.ts b/src/utils/settings-list-classes.ts
new file mode 100644
index 000000000..2abb1529b
--- /dev/null
+++ b/src/utils/settings-list-classes.ts
@@ -0,0 +1,65 @@
+import { cn } from "#/utils/utils";
+import {
+  formControlBorderClassName,
+  formControlRadiusClassName,
+  formControlSurfaceClassName,
+  formControlTransitionClassName,
+} from "#/utils/form-control-classes";
+
+/** 48px row height — taller than form controls for settings list/table rows. */
+export const settingsListRowHeightClassName = "h-12 min-h-12";
+
+/** Bordered list shell shared by secrets, LLM profiles, and similar settings tables. */
+export const settingsListContainerClassName = cn(
+  formControlBorderClassName,
+  formControlRadiusClassName,
+  formControlSurfaceClassName,
+  "overflow-hidden",
+);
+
+/** Scrollable variant for long settings lists (e.g. secrets). */
+export const settingsListScrollContainerClassName = cn(
+  settingsListContainerClassName,
+  "overflow-auto max-h-[min(40vh,22rem)]",
+);
+
+export const settingsListDividerClassName =
+  "divide-y divide-[var(--oh-border)]";
+
+/** Interactive row hover on dark list surfaces (base-secondary). */
+export const settingsListRowHoverClassName =
+  "hover:bg-[var(--oh-interactive-hover-low)]";
+
+export const settingsListRowClassName = cn(
+  settingsListRowHeightClassName,
+  "flex items-center px-3",
+  formControlTransitionClassName,
+  settingsListRowHoverClassName,
+);
+
+export const settingsListTableRowClassName = cn(
+  settingsListRowHoverClassName,
+  formControlTransitionClassName,
+  "border-t border-[var(--oh-border)] first:border-t-0",
+);
+
+export const settingsListTableHeadClassName = cn(
+  formControlSurfaceClassName,
+  "sticky top-0 z-10 border-b border-[var(--oh-border)]",
+);
+
+export const settingsListTableHeaderCellClassName = cn(
+  settingsListRowHeightClassName,
+  "px-3 text-left text-sm font-medium align-middle",
+);
+
+export const settingsListTableCellClassName = cn(
+  settingsListRowHeightClassName,
+  "px-3 text-sm align-middle min-w-0",
+);
+
+export const settingsListIconActionButtonClassName = cn(
+  "inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted",
+  formControlTransitionClassName,
+  "hover:bg-[var(--oh-interactive-hover-low)] hover:text-white",
+);
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 1089c810e..7fc024385 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -8,6 +8,10 @@ import { sanitizeQuery } from "#/utils/sanitize-query";
 import { PRODUCT_URL } from "#/utils/constants";
 import { AgentState } from "#/types/agent-state";
 import { I18nKey } from "#/i18n/declaration";
+import {
+  OH_STATUS_ERROR_COLOR,
+  OH_STATUS_SUCCESS_COLOR,
+} from "#/constants/status-colors";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -727,7 +731,7 @@ export const isTaskPolling = (taskStatus: string | null | undefined): boolean =>
  *   isStartingStatus: false,
  *   isStopStatus: false,
  *   curAgentState: AgentState.RUNNING
- * }) // Returns "#BCFF8C"
+ * }) // Returns "var(--oh-status-success)"
  */
 export const getStatusColor = (options: {
   isPausing: boolean;
@@ -754,7 +758,7 @@ export const getStatusColor = (options: {
   // Show task status if we're polling a task
   if (isTask && taskStatus) {
     if (taskStatus === "ERROR") {
-      return "#FF684E";
+      return OH_STATUS_ERROR_COLOR;
     }
     return "#FFD600";
   }
@@ -766,9 +770,9 @@ export const getStatusColor = (options: {
     return "#ffffff";
   }
   if (curAgentState === AgentState.ERROR) {
-    return "#FF684E";
+    return OH_STATUS_ERROR_COLOR;
   }
-  return "#BCFF8C";
+  return OH_STATUS_SUCCESS_COLOR;
 };
 
 interface GetStatusTextArgs {