diff --git a/app/src/agentworld/pages/FeedSection.tsx b/app/src/agentworld/pages/FeedSection.tsx
index 6353023d4..e975fb036 100644
--- a/app/src/agentworld/pages/FeedSection.tsx
+++ b/app/src/agentworld/pages/FeedSection.tsx
@@ -21,6 +21,7 @@ import debug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import PanelScaffold from '../../components/layout/PanelScaffold';
+import Button from '../../components/ui/Button';
 import {
   type GqlComment,
   type GqlHomeFeedItem,
@@ -213,14 +214,13 @@ function CommentComposer({
                    dark:border-neutral-700 dark:bg-neutral-800 dark:placeholder:text-neutral-500
                    dark:focus:border-primary-600 disabled:opacity-50"
       />
-      <button
-        type="button"
+      <Button
+        variant="primary"
+        size="md"
         onClick={() => void handleSubmit()}
-        disabled={!body.trim() || submitting}
-        className="rounded-lg bg-primary-500 px-3 py-2 text-sm font-medium text-white
-                   hover:bg-primary-600 disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-500">
+        disabled={!body.trim() || submitting}>
         {submitting ? 'Posting...' : 'Comment'}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -323,13 +323,14 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
               {remaining}
             </span>
           )}
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => void submit()}
             disabled={!canPost}
-            className="rounded-full bg-primary-500 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-40 dark:bg-primary-600 dark:hover:bg-primary-500">
+            className="rounded-full">
             {submitting ? 'Posting…' : 'Post'}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/agentworld/pages/IdentitiesSection.test.tsx b/app/src/agentworld/pages/IdentitiesSection.test.tsx
index c980c4579..8a2272867 100644
--- a/app/src/agentworld/pages/IdentitiesSection.test.tsx
+++ b/app/src/agentworld/pages/IdentitiesSection.test.tsx
@@ -88,7 +88,7 @@ afterEach(() => {
 // ── Helpers ─────────────────────────────────────────────────────────────────
 
 function gotoTab(name: 'Register' | 'Registry' | 'Trading') {
-  return userEvent.click(screen.getByRole('button', { name }));
+  return userEvent.click(screen.getByRole('tab', { name }));
 }
 
 // ── Tab navigation ────────────────────────────────────────────────────────────
@@ -96,7 +96,7 @@ function gotoTab(name: 'Register' | 'Registry' | 'Trading') {
 describe('tab navigation', () => {
   test('defaults to Register tab', () => {
     render(<IdentitiesSection />);
-    expect(screen.getByRole('button', { name: 'Register' })).toHaveAttribute('data-active', 'true');
+    expect(screen.getByRole('tab', { name: 'Register' })).toHaveAttribute('aria-selected', 'true');
     expect(screen.getByText('Check handle availability')).toBeInTheDocument();
   });
 
@@ -110,21 +110,21 @@ describe('tab navigation', () => {
   test('can switch to Registry tab', async () => {
     render(<IdentitiesSection />);
     await gotoTab('Registry');
-    expect(screen.getByRole('button', { name: 'Registry' })).toHaveAttribute('data-active', 'true');
+    expect(screen.getByRole('tab', { name: 'Registry' })).toHaveAttribute('aria-selected', 'true');
     expect(await screen.findByText('Directory identities')).toBeInTheDocument();
   });
 
   test('can switch to Trading tab', async () => {
     render(<IdentitiesSection />);
     await gotoTab('Trading');
-    expect(screen.getByRole('button', { name: 'Trading' })).toHaveAttribute('data-active', 'true');
+    expect(screen.getByRole('tab', { name: 'Trading' })).toHaveAttribute('aria-selected', 'true');
     expect(await screen.findByText('Floor Prices')).toBeInTheDocument();
   });
 
   test('clicking the active tab again is a no-op (reducer short-circuit)', async () => {
     render(<IdentitiesSection />);
     await gotoTab('Register');
-    expect(screen.getByRole('button', { name: 'Register' })).toHaveAttribute('data-active', 'true');
+    expect(screen.getByRole('tab', { name: 'Register' })).toHaveAttribute('aria-selected', 'true');
   });
 
   test('switching tabs remounts the body (key change clears local state)', async () => {
diff --git a/app/src/agentworld/pages/IdentitiesSection.tsx b/app/src/agentworld/pages/IdentitiesSection.tsx
index f74757d82..2ccc6a1e1 100644
--- a/app/src/agentworld/pages/IdentitiesSection.tsx
+++ b/app/src/agentworld/pages/IdentitiesSection.tsx
@@ -15,7 +15,9 @@
  */
 import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 
+import ChipTabs from '../../components/layout/ChipTabs';
 import PanelScaffold from '../../components/layout/PanelScaffold';
+import Button from '../../components/ui/Button';
 import {
   type AvailabilityResponse,
   type DirectoryIdentityListingsResponse,
@@ -429,12 +431,9 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
               setInput(sanitize(e.target.value));
             }}
           />
-          <button
-            type="submit"
-            disabled={!input.trim()}
-            className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-50">
+          <Button type="submit" variant="primary" size="md" disabled={!input.trim()}>
             Check
-          </button>
+          </Button>
         </form>
 
         {availState.status === 'loading' && (
@@ -455,17 +454,17 @@ function RegisterTab({ onRegistered }: { onRegistered?: () => void }) {
                 <span className="text-xs font-medium text-green-500">
                   @{availableHandle} is available
                 </span>
-                <button
-                  type="button"
+                <Button
+                  variant="primary"
+                  size="sm"
                   disabled={busy}
                   onClick={() => {
                     reg.begin(availableHandle);
-                  }}
-                  className="rounded-md bg-primary-600 px-3 py-1.5 text-xs font-medium text-white disabled:opacity-50">
+                  }}>
                   {reg.state.phase === 'challenge_loading'
                     ? 'Loading…'
                     : `Register @${availableHandle}`}
-                </button>
+                </Button>
               </div>
             ) : (
               <div>
@@ -823,30 +822,33 @@ function TradingTab() {
                 )}
                 <div className="mt-2 flex gap-1">
                   {listing.listingType !== 'auction' && (
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
+                      size="xs"
+                      className="flex-1"
                       disabled={buying !== null}
-                      onClick={() => startBuy(listing)}
-                      className="flex-1 rounded-md bg-primary-600 px-2 py-1 text-xs font-medium text-white disabled:opacity-50">
+                      onClick={() => startBuy(listing)}>
                       Buy
-                    </button>
+                    </Button>
                   )}
                   {listing.listingType === 'auction' && (
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
+                      size="xs"
+                      className="flex-1"
                       disabled={commit !== null}
-                      onClick={() => setCommit({ kind: 'bid', listing })}
-                      className="flex-1 rounded-md bg-primary-600 px-2 py-1 text-xs font-medium text-white disabled:opacity-50">
+                      onClick={() => setCommit({ kind: 'bid', listing })}>
                       Bid
-                    </button>
+                    </Button>
                   )}
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="xs"
+                    className="flex-1"
                     disabled={commit !== null}
-                    onClick={() => setCommit({ kind: 'offer', listing })}
-                    className="flex-1 rounded-md border border-stone-300 px-2 py-1 text-xs font-medium text-stone-700 disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200">
+                    onClick={() => setCommit({ kind: 'offer', listing })}>
                     Offer
-                  </button>
+                  </Button>
                 </div>
               </div>
             ))}
@@ -1026,25 +1028,17 @@ export default function IdentitiesSection() {
 
   return (
     <PanelScaffold description="Claim handles, manage your registry, and trade identities">
-      <div className="flex gap-1">
-        {(Object.keys(TAB_KEYS) as Tab[]).map(tabKey => (
-          <button
-            key={tabKey}
-            type="button"
-            onClick={() => {
-              dispatch({ type: 'set', tab: tabKey });
-            }}
-            data-active={tab === tabKey}
-            className={[
-              'rounded-full px-3 py-1 text-xs font-medium transition-colors',
-              tab === tabKey
-                ? 'bg-stone-800 text-white dark:bg-neutral-100 dark:text-neutral-900'
-                : 'border border-stone-200 bg-white text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800',
-            ].join(' ')}>
-            {TAB_KEYS[tabKey]}
-          </button>
-        ))}
-      </div>
+      <ChipTabs<Tab>
+        as="tab"
+        ariaLabel="Identity sections"
+        className="flex gap-1"
+        items={(Object.keys(TAB_KEYS) as Tab[]).map(tabKey => ({
+          id: tabKey,
+          label: TAB_KEYS[tabKey],
+        }))}
+        value={tab}
+        onChange={tabKey => dispatch({ type: 'set', tab: tabKey })}
+      />
 
       <div key={key}>
         {tab === 'register' && <RegisterTab onRegistered={bumpRegistryKey} />}
diff --git a/app/src/agentworld/pages/MarketplaceSection.tsx b/app/src/agentworld/pages/MarketplaceSection.tsx
index 121fb1ffd..d50ad748d 100644
--- a/app/src/agentworld/pages/MarketplaceSection.tsx
+++ b/app/src/agentworld/pages/MarketplaceSection.tsx
@@ -16,6 +16,7 @@ import { useEffect, useState } from 'react';
 
 import ChipTabs from '../../components/layout/ChipTabs';
 import PanelScaffold from '../../components/layout/PanelScaffold';
+import Button from '../../components/ui/Button';
 import {
   type ArtifactListResult,
   type EscrowListResponse,
@@ -171,13 +172,14 @@ function SearchTab() {
                   ))}
                 </div>
               )}
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                size="sm"
                 disabled={buying !== null}
                 onClick={() => startBuy(product)}
-                className="mt-3 w-full rounded-md bg-primary-600 px-3 py-1.5 text-xs font-medium text-white disabled:opacity-50">
+                className="mt-3 w-full">
                 Buy
-              </button>
+              </Button>
             </div>
           ))}
         </div>
diff --git a/app/src/agentworld/pages/MessagingSection.test.tsx b/app/src/agentworld/pages/MessagingSection.test.tsx
index 64eba9ece..7be92840a 100644
--- a/app/src/agentworld/pages/MessagingSection.test.tsx
+++ b/app/src/agentworld/pages/MessagingSection.test.tsx
@@ -549,22 +549,22 @@ describe('DMs panel (E2E enabled)', () => {
 describe('tab navigation', () => {
   test('defaults to Channels tab', () => {
     render(<MessagingSection tabs={TABS} />);
-    const channelsBtn = screen.getByRole('button', { name: 'Channels' });
-    expect(channelsBtn).toHaveAttribute('data-active', 'true');
+    const channelsBtn = screen.getByRole('tab', { name: 'Channels' });
+    expect(channelsBtn).toHaveAttribute('aria-selected', 'true');
   });
 
   test('can switch to Groups tab', async () => {
     render(<MessagingSection tabs={TABS} />);
-    const groupsBtn = screen.getByRole('button', { name: 'Groups' });
+    const groupsBtn = screen.getByRole('tab', { name: 'Groups' });
     await userEvent.click(groupsBtn);
-    expect(groupsBtn).toHaveAttribute('data-active', 'true');
+    expect(groupsBtn).toHaveAttribute('aria-selected', 'true');
   });
 
   test('can switch to Inbox tab', async () => {
     render(<MessagingSection tabs={TABS} />);
-    const inboxBtn = screen.getByRole('button', { name: 'Inbox' });
+    const inboxBtn = screen.getByRole('tab', { name: 'Inbox' });
     await userEvent.click(inboxBtn);
-    expect(inboxBtn).toHaveAttribute('data-active', 'true');
+    expect(inboxBtn).toHaveAttribute('aria-selected', 'true');
   });
 });
 
@@ -579,19 +579,19 @@ describe('empty states', () => {
 
   test('shows "No groups found" when groups list is empty', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     expect(await screen.findByText(/No groups found/i)).toBeInTheDocument();
   });
 
   test('shows "No broadcasts found" when broadcasts list is empty', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Broadcasts' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Broadcasts' }));
     expect(await screen.findByText(/No broadcasts found/i)).toBeInTheDocument();
   });
 
   test('shows "Your inbox is empty" when inbox is empty', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Inbox' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Inbox' }));
     expect(await screen.findByText(/Your inbox is empty/i)).toBeInTheDocument();
   });
 });
@@ -625,7 +625,7 @@ describe('inbox actions', () => {
 
   async function openInbox() {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Inbox' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Inbox' }));
     await screen.findByText('Hello there');
   }
 
@@ -695,7 +695,7 @@ describe('membership actions', () => {
       },
     ]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Broadcasts' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Broadcasts' }));
     await screen.findByText('Updates');
     await userEvent.click(screen.getByRole('button', { name: 'Subscribe' }));
     expect(apiClient.broadcasts.subscribe).toHaveBeenCalledWith('bc-1');
@@ -716,7 +716,7 @@ describe('membership actions', () => {
     // Both public and membership queries return the same group so button shows "Leave".
     vi.mocked(apiClient.groups.list).mockResolvedValue([group]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Builders');
     await userEvent.click(screen.getByRole('button', { name: 'Leave' }));
     expect(apiClient.groups.leave).toHaveBeenCalledWith('g-1');
@@ -747,7 +747,7 @@ describe('group membership-aware button rendering', () => {
 
   async function openGroups() {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Alpha');
   }
 
@@ -796,7 +796,7 @@ describe('group membership-aware button rendering', () => {
     vi.mocked(apiClient.groups.join).mockResolvedValue(undefined);
 
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Alpha');
 
     // Button shows Join before joining.
@@ -824,7 +824,7 @@ describe('group membership-aware button rendering', () => {
     vi.mocked(apiClient.groups.leave).mockResolvedValue(undefined);
 
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Alpha');
 
     // Button shows Leave (user is a member).
@@ -843,7 +843,7 @@ describe('group membership-aware button rendering', () => {
     vi.mocked(apiClient.groups.list).mockResolvedValue([]);
 
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText(/No groups found/i);
 
     // The second groups.list call should carry member=<agentId>.
@@ -875,7 +875,7 @@ describe('group invite management', () => {
 
   test('renders "Invites" button on group cards', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Invite Test Group');
     expect(screen.getByRole('button', { name: 'Invites' })).toBeInTheDocument();
   });
@@ -883,7 +883,7 @@ describe('group invite management', () => {
   test('clicking "Invites" opens GroupInvitesPanel and calls listInvites', async () => {
     vi.mocked(apiClient.groups.listInvites).mockResolvedValue([]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Invite Test Group');
     await userEvent.click(screen.getByRole('button', { name: 'Invites' }));
     expect(apiClient.groups.listInvites).toHaveBeenCalledWith('g-inv');
@@ -902,7 +902,7 @@ describe('group invite management', () => {
       },
     ]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Invite Test Group');
     await userEvent.click(screen.getByRole('button', { name: 'Invites' }));
     expect(await screen.findByText('tok-abc')).toBeInTheDocument();
@@ -913,7 +913,7 @@ describe('group invite management', () => {
   test('Create Invite button calls groups.createInvite', async () => {
     vi.mocked(apiClient.groups.listInvites).mockResolvedValue([]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Invite Test Group');
     await userEvent.click(screen.getByRole('button', { name: 'Invites' }));
     await screen.findByText(/No active invites/);
@@ -932,7 +932,7 @@ describe('group invite management', () => {
       },
     ]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Invite Test Group');
     await userEvent.click(screen.getByRole('button', { name: 'Invites' }));
     await screen.findByText('tok-revoke');
@@ -943,7 +943,7 @@ describe('group invite management', () => {
   test('Close button returns to the group list', async () => {
     vi.mocked(apiClient.groups.listInvites).mockResolvedValue([]);
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByText('Invite Test Group');
     await userEvent.click(screen.getByRole('button', { name: 'Invites' }));
     await screen.findByText(/Invites for Invite Test Group/);
@@ -956,13 +956,13 @@ describe('group invite management', () => {
 describe('redeem invite', () => {
   test('renders "Redeem Invite" button in the groups tab', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     expect(await screen.findByRole('button', { name: 'Redeem Invite' })).toBeInTheDocument();
   });
 
   test('clicking "Redeem Invite" opens the redeem panel with inputs', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await screen.findByRole('button', { name: 'Redeem Invite' });
     await userEvent.click(screen.getByRole('button', { name: 'Redeem Invite' }));
     expect(screen.getByPlaceholderText('Group ID')).toBeInTheDocument();
@@ -979,7 +979,7 @@ describe('redeem invite', () => {
       valid: true,
     });
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await userEvent.click(screen.getByRole('button', { name: 'Redeem Invite' }));
     await userEvent.type(screen.getByPlaceholderText('Group ID'), 'g-prev');
     await userEvent.type(screen.getByPlaceholderText('Invite token'), 'tok-preview');
@@ -998,7 +998,7 @@ describe('redeem invite', () => {
       updatedAt: '2026-01-01T00:00:00Z',
     });
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Groups' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Groups' }));
     await userEvent.click(screen.getByRole('button', { name: 'Redeem Invite' }));
     await userEvent.type(screen.getByPlaceholderText('Group ID'), 'g-redeem');
     await userEvent.type(screen.getByPlaceholderText('Invite token'), 'tok-redeem');
@@ -1033,7 +1033,7 @@ describe('inbox stream lifecycle', () => {
 
   test('calls streams.start with "inbox" when Inbox tab is opened', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Inbox' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Inbox' }));
     // Wait for async effects to settle.
     await screen.findByText(/Your inbox is empty/i);
     expect(apiClient.streams.start).toHaveBeenCalledWith('inbox');
@@ -1046,7 +1046,7 @@ describe('inbox stream lifecycle', () => {
       clearMessages: vi.fn(),
     }));
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Inbox' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Inbox' }));
     // Wait for the async inbox fetch to settle and the live indicator to appear.
     await screen.findByTestId('inbox-live-indicator');
     expect(screen.getByTestId('inbox-live-indicator')).toBeInTheDocument();
@@ -1054,7 +1054,7 @@ describe('inbox stream lifecycle', () => {
 
   test('does NOT render the Live indicator when streamStatus is idle', async () => {
     render(<MessagingSection tabs={TABS} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Inbox' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Inbox' }));
     await screen.findByText(/Your inbox is empty/i);
     expect(screen.queryByTestId('inbox-live-indicator')).not.toBeInTheDocument();
   });
diff --git a/app/src/agentworld/pages/MessagingSection.tsx b/app/src/agentworld/pages/MessagingSection.tsx
index 9cf4e7551..ce86378c8 100644
--- a/app/src/agentworld/pages/MessagingSection.tsx
+++ b/app/src/agentworld/pages/MessagingSection.tsx
@@ -12,6 +12,8 @@
 import debug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import ChipTabs from '../../components/layout/ChipTabs';
+import Button from '../../components/ui/Button';
 import {
   type BroadcastChannel,
   type BroadcastQueryParams,
@@ -241,22 +243,24 @@ function SignalKeyStatusCard() {
           </p>
         </div>
         {!keysReady && (
-          <button
-            type="button"
-            className="ml-3 flex-shrink-0 rounded-md bg-primary-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-700 disabled:opacity-50"
+          <Button
+            variant="primary"
+            size="sm"
+            className="ml-3 flex-shrink-0"
             disabled={provisioning}
             onClick={() => void handleProvision()}>
             {provisioning ? 'Setting up...' : 'Set up keys'}
-          </button>
+          </Button>
         )}
         {keysReady && !discoverable && (
-          <button
-            type="button"
-            className="ml-3 flex-shrink-0 rounded-md bg-primary-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-700 disabled:opacity-50"
+          <Button
+            variant="primary"
+            size="sm"
+            className="ml-3 flex-shrink-0"
             disabled={publishing}
             onClick={() => void handlePublish()}>
             {publishing ? 'Publishing...' : 'Make discoverable'}
-          </button>
+          </Button>
         )}
       </div>
       {actionError && (
@@ -404,12 +408,9 @@ function GroupsPanel() {
     return (
       <div className="space-y-2">
         <div className="flex justify-end">
-          <button
-            type="button"
-            className="rounded bg-stone-200 dark:bg-neutral-700 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-300 dark:hover:bg-neutral-600"
-            onClick={() => setShowRedeem(true)}>
+          <Button variant="secondary" size="xs" onClick={() => setShowRedeem(true)}>
             Redeem Invite
-          </button>
+          </Button>
         </div>
         <div className="flex items-center justify-center py-12 text-stone-400 dark:text-neutral-500 text-sm">
           No groups found
@@ -560,12 +561,9 @@ function GroupInvitesPanel({
         <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
           Invites for {groupName}
         </span>
-        <button
-          type="button"
-          className="text-xs text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300"
-          onClick={onClose}>
+        <Button variant="tertiary" size="xs" onClick={onClose}>
           Close
-        </button>
+        </Button>
       </div>
       {error ? <p className="mb-2 text-xs text-red-500">{error}</p> : null}
       {loading ? (
@@ -603,13 +601,13 @@ function GroupInvitesPanel({
               ))}
             </div>
           )}
-          <button
-            type="button"
-            className="rounded bg-primary-600 px-2 py-1 text-xs text-white hover:bg-primary-700 disabled:opacity-50"
+          <Button
+            variant="primary"
+            size="xs"
             disabled={creating}
             onClick={() => void handleCreate()}>
             {creating ? 'Creating...' : 'Create Invite'}
-          </button>
+          </Button>
         </>
       )}
     </div>
@@ -662,12 +660,9 @@ function RedeemInvitePanel({ onClose }: { onClose: () => void }) {
         <span className="text-sm font-medium text-stone-900 dark:text-neutral-100">
           Redeem Invite
         </span>
-        <button
-          type="button"
-          className="text-xs text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300"
-          onClick={onClose}>
+        <Button variant="tertiary" size="xs" onClick={onClose}>
           Close
-        </button>
+        </Button>
       </div>
       {error ? <p className="mb-2 text-xs text-red-500">{error}</p> : null}
       {result ? (
@@ -693,20 +688,20 @@ function RedeemInvitePanel({ onClose }: { onClose: () => void }) {
             />
           </div>
           <div className="flex gap-1 mb-2">
-            <button
-              type="button"
-              className="rounded bg-stone-200 dark:bg-neutral-700 px-2 py-1 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-300 dark:hover:bg-neutral-600 disabled:opacity-50"
+            <Button
+              variant="secondary"
+              size="xs"
               disabled={previewLoading || !groupId.trim() || !token.trim()}
               onClick={() => void handlePreview()}>
               {previewLoading ? '...' : 'Preview'}
-            </button>
-            <button
-              type="button"
-              className="rounded bg-primary-600 px-2 py-1 text-xs text-white hover:bg-primary-700 disabled:opacity-50"
+            </Button>
+            <Button
+              variant="primary"
+              size="xs"
               disabled={redeeming || !groupId.trim() || !token.trim()}
               onClick={() => void handleRedeem()}>
               {redeeming ? '...' : 'Redeem'}
-            </button>
+            </Button>
           </div>
           {preview ? (
             <div className="rounded bg-stone-100 dark:bg-neutral-800 p-2 text-xs text-stone-600 dark:text-neutral-300">
@@ -1174,12 +1169,9 @@ function ActiveDmView({
     <div className="flex flex-col h-full">
       {/* Header */}
       <div className="flex items-center gap-2 border-b border-stone-200 dark:border-neutral-800 px-3 py-2">
-        <button
-          type="button"
-          onClick={onBack}
-          className="text-xs text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300">
+        <Button variant="tertiary" size="xs" onClick={onBack}>
           Back
-        </button>
+        </Button>
         <span className="text-sm font-medium text-stone-900 dark:text-neutral-100 truncate">
           {peerId}
         </span>
@@ -1246,13 +1238,13 @@ function ActiveDmView({
           placeholder="Type a message..."
           className="flex-1 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400"
         />
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="md"
           disabled={sending || !composeText.trim()}
-          onClick={() => void handleSend()}
-          className="rounded bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50">
+          onClick={() => void handleSend()}>
           {sending ? 'Sending...' : 'Send'}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -1365,13 +1357,13 @@ function DmsPanel() {
           placeholder="Recipient @handle or wallet address"
           className="flex-1 rounded border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 placeholder:text-stone-400"
         />
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="md"
           disabled={!peerId.trim() || resolving}
-          onClick={() => void handleOpenDm()}
-          className="rounded bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50">
+          onClick={() => void handleOpenDm()}>
           {resolving ? 'Resolving...' : 'Open DM'}
-        </button>
+        </Button>
       </div>
       {resolveError && (
         <p data-testid="dm-resolve-error" className="text-xs text-red-500 dark:text-red-400">
@@ -1407,23 +1399,14 @@ export default function MessagingSection({ tabs = VISIBLE_TABS }: MessagingSecti
     <div className="flex flex-col h-full">
       {/* Tab chips — only shown when more than one tab is enabled. */}
       {showTabBar && (
-        <div className="flex gap-1 px-4 py-3 border-b border-stone-200 dark:border-neutral-800 overflow-x-auto shrink-0">
-          {tabs.map(tab => (
-            <button
-              key={tab}
-              type="button"
-              onClick={() => setActiveTab(tab)}
-              data-active={activeTab === tab}
-              className={[
-                'whitespace-nowrap rounded-full px-3 py-1 text-xs font-medium transition-colors',
-                activeTab === tab
-                  ? 'bg-stone-800 text-white dark:bg-neutral-100 dark:text-neutral-900'
-                  : 'border border-stone-200 bg-white text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800',
-              ].join(' ')}>
-              {TAB_LABELS[tab]}
-            </button>
-          ))}
-        </div>
+        <ChipTabs<Tab>
+          as="tab"
+          ariaLabel="Messaging sections"
+          className="flex gap-1 px-4 py-3 border-b border-stone-200 dark:border-neutral-800 overflow-x-auto shrink-0"
+          items={tabs.map(tab => ({ id: tab, label: TAB_LABELS[tab] }))}
+          value={activeTab}
+          onChange={setActiveTab}
+        />
       )}
 
       {/* Signal key status — always visible when wallet is connected */}
diff --git a/app/src/agentworld/pages/ProfilesSection.tsx b/app/src/agentworld/pages/ProfilesSection.tsx
index d35c31301..99f969250 100644
--- a/app/src/agentworld/pages/ProfilesSection.tsx
+++ b/app/src/agentworld/pages/ProfilesSection.tsx
@@ -10,6 +10,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import PanelScaffold from '../../components/layout/PanelScaffold';
+import Button from '../../components/ui/Button';
 import {
   type FollowStats,
   type GqlAttestation,
@@ -379,13 +380,9 @@ function AgentProfileCard({ data }: { data: ProfileData }) {
 
       {/* Export identity */}
       <div className="mt-4 border-t border-stone-200 pt-4 dark:border-neutral-800">
-        <button
-          type="button"
-          className="rounded-md bg-stone-100 px-3 py-1.5 text-xs font-medium text-stone-700 transition-colors hover:bg-stone-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
-          disabled={exportLoading}
-          onClick={handleExport}>
+        <Button variant="secondary" size="sm" disabled={exportLoading} onClick={handleExport}>
           {exportLoading ? 'Exporting...' : exportData ? 'Hide Export' : 'Export Identity'}
-        </button>
+        </Button>
         {exportError && (
           <p className="mt-2 text-xs text-red-600 dark:text-red-400">{exportError}</p>
         )}
diff --git a/app/src/components/AppUpdatePrompt.tsx b/app/src/components/AppUpdatePrompt.tsx
index 2af06cdfd..5f61e9559 100644
--- a/app/src/components/AppUpdatePrompt.tsx
+++ b/app/src/components/AppUpdatePrompt.tsx
@@ -19,6 +19,7 @@ import { createPortal } from 'react-dom';
 import { useAppUpdate } from '../hooks/useAppUpdate';
 import { useT } from '../lib/i18n/I18nContext';
 import { formatBytes } from '../utils/localAiHelpers';
+import Button from './ui/Button';
 
 interface AppUpdatePromptProps {
   /** Override auto-check defaults (mostly for tests). */
@@ -105,12 +106,14 @@ const AppUpdatePrompt = (props: AppUpdatePromptProps) => {
             <span className="text-sm font-medium text-white">{headerLabel(phase, t)}</span>
           </div>
           {(phase === 'ready_to_install' || phase === 'error') && (
-            <button
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="xs"
               onClick={phase === 'error' ? handleDismissError : handleLater}
-              className="p-1 text-stone-500 hover:text-stone-300 transition-colors"
               aria-label={t('app.update.dismissNotification')}>
               <CloseIcon className="w-3.5 h-3.5" />
-            </button>
+            </Button>
           )}
         </div>
 
@@ -134,16 +137,12 @@ const AppUpdatePrompt = (props: AppUpdatePromptProps) => {
                 {t('app.update.restartNote')}
               </p>
               <div className="mt-3 flex gap-2">
-                <button
-                  onClick={handleInstall}
-                  className="flex-1 px-3 py-1.5 rounded-lg bg-primary-500 hover:bg-primary-400 text-white text-xs font-medium transition-colors">
+                <Button size="sm" onClick={handleInstall} className="flex-1">
                   {t('app.update.restartNow')}
-                </button>
-                <button
-                  onClick={handleLater}
-                  className="px-3 py-1.5 rounded-lg border border-stone-700 text-stone-300 hover:bg-stone-800 text-xs transition-colors">
+                </Button>
+                <Button variant="secondary" size="sm" onClick={handleLater}>
                   {t('app.update.later')}
-                </button>
+                </Button>
               </div>
             </>
           )}
@@ -164,16 +163,12 @@ const AppUpdatePrompt = (props: AppUpdatePromptProps) => {
                 {error ?? t('app.update.errorFallback')}
               </p>
               <div className="mt-3 flex gap-2">
-                <button
-                  onClick={handleRetryDownload}
-                  className="flex-1 px-3 py-1.5 rounded-lg bg-primary-500 hover:bg-primary-400 text-white text-xs font-medium transition-colors">
+                <Button size="sm" onClick={handleRetryDownload} className="flex-1">
                   {t('common.retry')}
-                </button>
-                <button
-                  onClick={handleDismissError}
-                  className="px-3 py-1.5 rounded-lg border border-stone-700 text-stone-300 hover:bg-stone-800 text-xs transition-colors">
+                </Button>
+                <Button variant="secondary" size="sm" onClick={handleDismissError}>
                   {t('common.dismiss')}
-                </button>
+                </Button>
               </div>
             </>
           )}
@@ -264,12 +259,13 @@ const ReleaseNotesToggle = ({
 }) => {
   const { t } = useT();
   return (
-    <button
-      type="button"
+    <Button
+      variant="tertiary"
+      size="xs"
       onClick={onToggle}
-      className="mt-1 text-[11px] text-primary-300 hover:text-primary-200 transition-colors">
+      className="mt-1 px-0 text-[11px] text-primary-300 hover:bg-transparent hover:text-primary-200">
       {expanded ? t('common.showLess') : t('common.showMore')}
-    </button>
+    </Button>
   );
 };
 
diff --git a/app/src/components/BootCheckGate/BootCheckGate.tsx b/app/src/components/BootCheckGate/BootCheckGate.tsx
index cac5254b5..1d3a869ad 100644
--- a/app/src/components/BootCheckGate/BootCheckGate.tsx
+++ b/app/src/components/BootCheckGate/BootCheckGate.tsx
@@ -38,6 +38,7 @@ import {
 import { isTauri } from '../../utils/tauriCommands/common';
 import AppBackground from '../AppBackground';
 import LanguageSelect from '../LanguageSelect';
+import Button from '../ui/Button';
 
 const log = debug('boot-check');
 const logError = debug('boot-check:error');
@@ -350,15 +351,15 @@ function ModePicker({ onConfirm }: PickerProps) {
             </div>
 
             <div className="flex items-center gap-3">
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="sm"
                 onClick={handleTestConnection}
-                disabled={testStatus.kind === 'testing'}
-                className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+                disabled={testStatus.kind === 'testing'}>
                 {testStatus.kind === 'testing'
                   ? t('bootCheck.testing')
                   : t('bootCheck.testConnection')}
-              </button>
+              </Button>
               {testStatus.kind === 'ok' && (
                 <span className="text-xs text-emerald-600" data-testid="test-status-ok">
                   {t('bootCheck.connectedOk')}
@@ -380,12 +381,7 @@ function ModePicker({ onConfirm }: PickerProps) {
       </div>
 
       <div className="mt-6 flex justify-end">
-        <button
-          type="button"
-          onClick={handleContinue}
-          className="rounded-lg bg-primary-500 px-5 py-2 text-sm font-medium text-white hover:bg-primary-600">
-          {t('common.continue')}
-        </button>
+        <Button onClick={handleContinue}>{t('common.continue')}</Button>
       </div>
     </Panel>
   );
@@ -463,54 +459,36 @@ function ResultScreen({
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3 flex-wrap">
           {isPortConflict && foreignOwner ? (
-            <button
-              type="button"
+            <Button
+              tone="danger"
               onClick={() => onForceQuit(foreignOwner.pid)}
               disabled={actionBusy}
-              data-testid="force-quit-owner-btn"
-              className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60">
+              data-testid="force-quit-owner-btn">
               {(actionBusy
                 ? t('bootCheck.portConflictForceQuitting')
                 : t('bootCheck.portConflictForceQuit')
               )
                 .replace('{name}', foreignOwner.name)
                 .trim()}
-            </button>
+            </Button>
           ) : (
             isPortConflict && (
-              <button
-                type="button"
-                onClick={onAction}
-                disabled={actionBusy}
-                data-testid="fix-automatically-btn"
-                className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-60">
+              <Button onClick={onAction} disabled={actionBusy} data-testid="fix-automatically-btn">
                 {actionBusy
                   ? t('bootCheck.portConflictFixing')
                   : t('bootCheck.portConflictFixButton')}
-              </button>
+              </Button>
             )
           )}
-          <button
-            type="button"
-            onClick={onRetry}
-            disabled={actionBusy}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+          <Button variant="secondary" onClick={onRetry} disabled={actionBusy}>
             {t('common.retry')}
-          </button>
-          <button
-            type="button"
-            onClick={onSwitchMode}
-            disabled={actionBusy}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+          </Button>
+          <Button variant="secondary" onClick={onSwitchMode} disabled={actionBusy}>
             {t('bootCheck.switchMode')}
-          </button>
-          <button
-            type="button"
-            onClick={onQuit}
-            disabled={actionBusy}
-            className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60">
+          </Button>
+          <Button tone="danger" onClick={onQuit} disabled={actionBusy}>
             {t('bootCheck.quit')}
-          </button>
+          </Button>
         </div>
       </Panel>
     );
@@ -527,20 +505,12 @@ function ResultScreen({
         </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
-          <button
-            type="button"
-            onClick={onAction}
-            disabled={actionBusy}
-            className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60">
+          <Button tone="danger" onClick={onAction} disabled={actionBusy}>
             {actionBusy ? t('bootCheck.removing') : t('bootCheck.removeContinue')}
-          </button>
-          <button
-            type="button"
-            onClick={onSwitchMode}
-            disabled={actionBusy}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+          </Button>
+          <Button variant="secondary" onClick={onSwitchMode} disabled={actionBusy}>
             {t('bootCheck.switchMode')}
-          </button>
+          </Button>
         </div>
       </Panel>
     );
@@ -557,20 +527,12 @@ function ResultScreen({
         </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
-          <button
-            type="button"
-            onClick={onAction}
-            disabled={actionBusy}
-            className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-60">
+          <Button onClick={onAction} disabled={actionBusy}>
             {actionBusy ? t('bootCheck.restarting') : t('bootCheck.restartCore')}
-          </button>
-          <button
-            type="button"
-            onClick={onSwitchMode}
-            disabled={actionBusy}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+          </Button>
+          <Button variant="secondary" onClick={onSwitchMode} disabled={actionBusy}>
             {t('bootCheck.switchMode')}
-          </button>
+          </Button>
         </div>
       </Panel>
     );
@@ -587,20 +549,12 @@ function ResultScreen({
         </p>
         {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
         <div className="mt-5 flex gap-3">
-          <button
-            type="button"
-            onClick={onAction}
-            disabled={actionBusy}
-            className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-60">
+          <Button onClick={onAction} disabled={actionBusy}>
             {actionBusy ? t('bootCheck.updating') : t('bootCheck.updateCloudCore')}
-          </button>
-          <button
-            type="button"
-            onClick={onSwitchMode}
-            disabled={actionBusy}
-            className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+          </Button>
+          <Button variant="secondary" onClick={onSwitchMode} disabled={actionBusy}>
             {t('bootCheck.switchMode')}
-          </button>
+          </Button>
         </div>
       </Panel>
     );
@@ -617,20 +571,12 @@ function ResultScreen({
       </p>
       {actionError && <p className="mt-3 text-xs text-red-600 font-medium">{actionError}</p>}
       <div className="mt-5 flex gap-3">
-        <button
-          type="button"
-          onClick={onAction}
-          disabled={actionBusy}
-          className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-60">
+        <Button onClick={onAction} disabled={actionBusy}>
           {actionBusy ? t('bootCheck.working') : t('bootCheck.restartUpdateCore')}
-        </button>
-        <button
-          type="button"
-          onClick={onSwitchMode}
-          disabled={actionBusy}
-          className="rounded-lg border border-stone-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-2 text-sm text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+        </Button>
+        <Button variant="secondary" onClick={onSwitchMode} disabled={actionBusy}>
           {t('bootCheck.switchMode')}
-        </button>
+        </Button>
       </div>
     </Panel>
   );
diff --git a/app/src/components/LocalAIDownloadSnackbar.tsx b/app/src/components/LocalAIDownloadSnackbar.tsx
index 1dabfa0ca..2344e114c 100644
--- a/app/src/components/LocalAIDownloadSnackbar.tsx
+++ b/app/src/components/LocalAIDownloadSnackbar.tsx
@@ -16,6 +16,7 @@ import {
   openhumanLocalAiDownloadsProgress,
   openhumanLocalAiStatus,
 } from '../utils/tauriCommands';
+import Button from './ui/Button';
 
 const POLL_INTERVAL = 2000;
 
@@ -153,22 +154,26 @@ const LocalAIDownloadSnackbar = () => {
             <span className="text-sm font-medium text-white">{label}</span>
           </div>
           <div className="flex items-center gap-1">
-            <button
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="xs"
               onClick={handleToggleCollapse}
-              className="p-1 text-stone-500 hover:text-stone-300 transition-colors"
               aria-label={t('app.localAiDownload.collapseAria')}>
               <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
                 <path d="M3.75 7.25a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z" />
               </svg>
-            </button>
-            <button
+            </Button>
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="xs"
               onClick={handleDismiss}
-              className="p-1 text-stone-500 hover:text-stone-300 transition-colors"
               aria-label={t('app.localAiDownload.dismissAria')}>
               <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
                 <path d="M4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22z" />
               </svg>
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/app/src/components/OpenhumanLinkModal.tsx b/app/src/components/OpenhumanLinkModal.tsx
index b4fc6579d..74e64b200 100644
--- a/app/src/components/OpenhumanLinkModal.tsx
+++ b/app/src/components/OpenhumanLinkModal.tsx
@@ -33,6 +33,7 @@ import { BILLING_DASHBOARD_URL, DISCORD_INVITE_URL } from '../utils/links';
 import { openUrl } from '../utils/openUrl';
 import { ProviderIcon } from './accounts/providerIcons';
 import ChannelSetupModal from './channels/ChannelSetupModal';
+import Button from './ui/Button';
 
 interface OpenhumanLinkEvent {
   path: string;
@@ -92,11 +93,12 @@ const OpenhumanLinkModal = () => {
           <h2 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
             {titleForPath(activePath, t)}
           </h2>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="xs"
             onClick={close}
-            aria-label={t('common.close')}
-            className="rounded p-1 text-stone-500 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800/60 hover:text-stone-800 dark:hover:text-neutral-100">
+            aria-label={t('common.close')}>
             <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
               <path
                 strokeLinecap="round"
@@ -105,7 +107,7 @@ const OpenhumanLinkModal = () => {
                 d="M6 6l12 12M6 18L18 6"
               />
             </svg>
-          </button>
+          </Button>
         </div>
         <div className="p-5">{renderBody(activePath, close)}</div>
       </div>
@@ -144,12 +146,9 @@ const MessagingSetupBridge = ({ onClose }: { onClose: () => void }) => {
           onClick={e => e.stopPropagation()}>
           <p>{t('app.openhumanLink.telegramUnavailable')}</p>
           <div className="mt-3 flex justify-end">
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+            <Button variant="secondary" size="sm" onClick={onClose}>
               {t('common.close')}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -275,17 +274,13 @@ const NotificationsBody = ({ close }: { close: () => void }) => {
           {t('app.openhumanLink.notifications.promptHint')}
         </div>
       )}
-      <button
-        type="button"
-        onClick={() => void handleAllow()}
-        disabled={status === 'sending'}
-        className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors disabled:opacity-60">
+      <Button onClick={() => void handleAllow()} disabled={status === 'sending'} className="w-full">
         {status === 'sending'
           ? t('app.openhumanLink.notifications.asking')
           : status === 'error'
             ? t('app.openhumanLink.notifications.retry')
             : t('app.openhumanLink.notifications.send')}
-      </button>
+      </Button>
       {status === 'sent' && (
         <p className="text-xs text-sage-700">{t('app.openhumanLink.notifications.sent')}</p>
       )}
@@ -316,14 +311,13 @@ const BillingBody = ({ close }: { close: () => void }) => {
           {t('app.openhumanLink.billing.trialDesc')}
         </p>
       </div>
-      <button
-        type="button"
+      <Button
         onClick={() => {
           void openUrl(BILLING_DASHBOARD_URL).catch(() => {});
         }}
-        className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors">
+        className="w-full">
         {t('app.openhumanLink.billing.openDashboard')}
-      </button>
+      </Button>
       <DoneFooter close={close} skipLabel={t('app.openhumanLink.billing.stayOnTrial')} />
     </div>
   );
@@ -354,8 +348,7 @@ const DiscordBody = ({ close }: { close: () => void }) => {
           {t('app.openhumanLink.discord.perk4')}
         </li>
       </ul>
-      <button
-        type="button"
+      <Button
         onClick={async () => {
           try {
             await openUrl(DISCORD_INVITE_URL);
@@ -363,9 +356,9 @@ const DiscordBody = ({ close }: { close: () => void }) => {
             // Ignore launcher errors from OS URL handler failures.
           }
         }}
-        className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors">
+        className="w-full">
         {t('app.openhumanLink.discord.openInvite')}
-      </button>
+      </Button>
       <DoneFooter close={close} skipLabel={t('app.openhumanLink.maybeLater')} />
     </div>
   );
@@ -385,8 +378,7 @@ const DiscordReportBody = ({ close }: { close: () => void }) => {
   return (
     <div className="space-y-4 text-sm text-stone-700 dark:text-neutral-200">
       <p>{t('app.openhumanLink.discordReport.intro')}</p>
-      <button
-        type="button"
+      <Button
         onClick={async () => {
           try {
             await openUrl(DISCORD_INVITE_URL);
@@ -394,9 +386,9 @@ const DiscordReportBody = ({ close }: { close: () => void }) => {
             close();
           }
         }}
-        className="w-full rounded-xl bg-primary-500 px-3 py-2.5 text-sm font-medium text-white hover:bg-primary-600 transition-colors">
+        className="w-full">
         {t('app.openhumanLink.discordReport.openDiscord')}
-      </button>
+      </Button>
     </div>
   );
 };
@@ -597,18 +589,12 @@ const DoneFooter = ({
   const resolvedSkip = skipLabel ?? t('app.openhumanLink.skipForNow');
   return (
     <div className="flex items-center justify-between gap-3 pt-1">
-      <button
-        type="button"
-        onClick={close}
-        className="text-xs font-medium text-stone-500 dark:text-neutral-400 hover:text-stone-800 dark:hover:text-neutral-100">
+      <Button variant="tertiary" size="sm" onClick={close}>
         {resolvedSkip}
-      </button>
-      <button
-        type="button"
-        onClick={onDone ?? close}
-        className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+      </Button>
+      <Button variant="secondary" size="sm" onClick={onDone ?? close}>
         {resolvedDone}
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/app/src/components/PersistRehydrationScreen.tsx b/app/src/components/PersistRehydrationScreen.tsx
index dca3698a1..567053a4c 100644
--- a/app/src/components/PersistRehydrationScreen.tsx
+++ b/app/src/components/PersistRehydrationScreen.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useT } from '../lib/i18n/I18nContext';
 import { persistor } from '../store';
 import RouteLoadingScreen from './RouteLoadingScreen';
+import Button from './ui/Button';
 
 const persistWarn = debug('persist:warn');
 
@@ -62,13 +63,9 @@ function PersistRehydrationScreen() {
         <p className="text-xs text-stone-500 dark:text-neutral-400 leading-relaxed">
           {t('app.persistRehydration.body')}
         </p>
-        <button
-          type="button"
-          onClick={handleReset}
-          disabled={resetting}
-          className="w-full rounded-xl bg-primary-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60">
+        <Button onClick={handleReset} disabled={resetting} className="w-full">
           {resetting ? t('app.persistRehydration.resetting') : t('app.persistRehydration.resetCta')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/src/components/PillTabBar.tsx b/app/src/components/PillTabBar.tsx
deleted file mode 100644
index a26b7db36..000000000
--- a/app/src/components/PillTabBar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { ReactNode } from 'react';
-
-interface PillTabBarItem<T extends string> {
-  label: string;
-  value: T;
-}
-
-interface PillTabBarProps<T extends string> {
-  activeClassName?: string;
-  containerClassName?: string;
-  inactiveClassName?: string;
-  itemClassName?: string;
-  items: PillTabBarItem<T>[];
-  onChange: (value: T) => void;
-  renderItem?: (item: PillTabBarItem<T>, active: boolean) => ReactNode;
-  selected: T;
-}
-
-export default function PillTabBar<T extends string>({
-  activeClassName = 'border-primary-200 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300',
-  containerClassName = 'flex gap-2 overflow-x-auto pb-1 scrollbar-hide',
-  inactiveClassName = 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60',
-  itemClassName = 'px-3',
-  items,
-  onChange,
-  renderItem,
-  selected,
-}: PillTabBarProps<T>) {
-  return (
-    <div className={containerClassName} role="tablist">
-      {items.map(item => {
-        const active = selected === item.value;
-        const tabId = `pill-tab-${String(item.value)}`;
-
-        return (
-          <button
-            key={item.value}
-            type="button"
-            id={tabId}
-            role="tab"
-            aria-selected={active}
-            tabIndex={active ? 0 : -1}
-            onClick={() => onChange(item.value)}
-            className={`flex-shrink-0 rounded-full border py-1 text-xs font-medium transition-colors ${itemClassName} ${
-              active ? activeClassName : inactiveClassName
-            }`}>
-            {renderItem ? renderItem(item, active) : item.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/app/src/components/accounts/AddAccountModal.tsx b/app/src/components/accounts/AddAccountModal.tsx
index 9ad37a4b0..68709c532 100644
--- a/app/src/components/accounts/AddAccountModal.tsx
+++ b/app/src/components/accounts/AddAccountModal.tsx
@@ -4,6 +4,7 @@ import { useEscapeKey } from '../../hooks/useEscapeKey';
 import { useT } from '../../lib/i18n/I18nContext';
 import { type AccountProvider, type ProviderDescriptor, PROVIDERS } from '../../types/accounts';
 import { CloseIcon } from '../ui';
+import Button from '../ui/Button';
 import { ProviderIcon } from './providerIcons';
 
 interface AddAccountModalProps {
@@ -47,15 +48,16 @@ const AddAccountModal = ({ open, onClose, onPick, connectedProviders }: AddAccou
             className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
             {t('accounts.addModal.title')}
           </h2>
-          <button
+          <Button
             ref={closeBtnRef}
-            type="button"
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={onClose}
             data-analytics-id="add-account-modal-close"
-            className="rounded p-1 text-stone-500 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60"
             aria-label={t('common.close')}>
             <CloseIcon className="h-5 w-5" />
-          </button>
+          </Button>
         </div>
 
         <div className="space-y-1">
diff --git a/app/src/components/accounts/RespondQueuePanel.tsx b/app/src/components/accounts/RespondQueuePanel.tsx
index dcf9d3141..a92dd1604 100644
--- a/app/src/components/accounts/RespondQueuePanel.tsx
+++ b/app/src/components/accounts/RespondQueuePanel.tsx
@@ -1,6 +1,7 @@
 import { useT } from '../../lib/i18n/I18nContext';
 import type { RespondQueueItem } from '../../types/providerSurfaces';
 import { openUrl } from '../../utils/openUrl';
+import Button from '../ui/Button';
 
 interface RespondQueuePanelProps {
   items: RespondQueueItem[];
@@ -46,13 +47,13 @@ export default function RespondQueuePanel({
             {count} {t('accounts.respondQueue.pending')}
           </p>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="xs"
           onClick={onRefresh}
-          data-analytics-id="respond-queue-refresh"
-          className="rounded-lg border border-stone-200 dark:border-neutral-800 px-2 py-1 text-xs text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60">
+          data-analytics-id="respond-queue-refresh">
           {t('common.refresh')}
-        </button>
+        </Button>
       </div>
       <div className="flex-1 overflow-y-auto px-3 py-3">
         {status === 'loading' && items.length === 0 ? (
diff --git a/app/src/components/accounts/WebviewHost.tsx b/app/src/components/accounts/WebviewHost.tsx
index 20e48f48b..280aadece 100644
--- a/app/src/components/accounts/WebviewHost.tsx
+++ b/app/src/components/accounts/WebviewHost.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../services/webviewAccountService';
 import { useAppSelector } from '../../store/hooks';
 import type { AccountProvider, AccountStatus } from '../../types/accounts';
+import Button from '../ui/Button';
 import { ProviderIcon } from './providerIcons';
 
 const log = debug('webview-accounts:host');
@@ -260,8 +261,9 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
               {t('accounts.webviewHost.timeoutHint')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             data-analytics-id={`webview-host-retry-${provider}`}
             onClick={() => {
               log('retry clicked account=%s provider=%s', accountId, provider);
@@ -276,10 +278,9 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
                 // service-layer dispatched error status + breadcrumb; absorbing
                 // the rejection keeps onunhandledrejection clean.
               });
-            }}
-            className="rounded-md bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-primary-700">
+            }}>
             {t('accounts.webviewHost.retryLoading')}
-          </button>
+          </Button>
         </div>
       ) : null}
     </div>
diff --git a/app/src/components/channels/ChannelSetupModal.tsx b/app/src/components/channels/ChannelSetupModal.tsx
index 3cab44141..c2a41ea3d 100644
--- a/app/src/components/channels/ChannelSetupModal.tsx
+++ b/app/src/components/channels/ChannelSetupModal.tsx
@@ -9,6 +9,7 @@ import { useEscapeKey } from '../../hooks/useEscapeKey';
 import { useT } from '../../lib/i18n/I18nContext';
 import type { ChannelDefinition, ChannelType } from '../../types/channels';
 import { CloseIcon } from '../ui';
+import Button from '../ui/Button';
 import { renderChannelIcon } from './channelIcon';
 import DiscordConfig from './DiscordConfig';
 import TelegramConfig from './TelegramConfig';
@@ -92,11 +93,15 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
                 {definition.description}
               </p>
             </div>
-            <button
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="xs"
+              aria-label={t('common.close')}
               onClick={onClose}
-              className="p-1 text-stone-400 dark:text-neutral-500 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100 dark:hover:text-neutral-100 transition-colors rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 flex-shrink-0">
+              className="flex-shrink-0">
               <CloseIcon className="w-5 h-5" />
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/app/src/components/channels/DiscordConfig.tsx b/app/src/components/channels/DiscordConfig.tsx
index 3676d37ae..8cf198cd8 100644
--- a/app/src/components/channels/DiscordConfig.tsx
+++ b/app/src/components/channels/DiscordConfig.tsx
@@ -22,6 +22,7 @@ import type {
 import { isLocalSessionToken } from '../../utils/localSession';
 import { openUrl } from '../../utils/openUrl';
 import { restartCoreProcess } from '../../utils/tauriCommands/core';
+import Button from '../ui/Button';
 import {
   ChannelAuthFields,
   ChannelAuthModeCard,
@@ -333,12 +334,9 @@ const DiscordConfig = ({ definition }: DiscordConfigProps) => {
                   <code className="flex-1 rounded bg-white dark:bg-neutral-900 border border-primary-200 dark:border-primary-500/30 px-2 py-1 text-xs font-mono text-stone-800 dark:text-neutral-100 select-all break-all">
                     {linkToken}
                   </code>
-                  <button
-                    type="button"
-                    onClick={copyToken}
-                    className="shrink-0 rounded-lg border border-primary-300 dark:border-primary-500/40 px-2 py-1 text-xs font-medium text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-500/20">
+                  <Button variant="secondary" size="xs" onClick={copyToken} className="shrink-0">
                     {copied ? t('common.copied') : t('common.copy')}
-                  </button>
+                  </Button>
                 </div>
                 <p className="text-xs text-stone-500 dark:text-neutral-400">
                   {t('channels.discord.linkTokenInstruction').replace('{token}', linkToken)}
diff --git a/app/src/components/channels/YuanbaoConfig.tsx b/app/src/components/channels/YuanbaoConfig.tsx
index a27a2a4a9..bb3311fb0 100644
--- a/app/src/components/channels/YuanbaoConfig.tsx
+++ b/app/src/components/channels/YuanbaoConfig.tsx
@@ -12,6 +12,7 @@ import {
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import type { ChannelConnectionStatus, ChannelDefinition } from '../../types/channels';
 import { restartCoreProcess } from '../../utils/tauriCommands/core';
+import Button from '../ui/Button';
 import ChannelFieldInput from './ChannelFieldInput';
 import ChannelStatusBadge from './ChannelStatusBadge';
 
@@ -253,45 +254,47 @@ const YuanbaoConfig = ({ definition }: YuanbaoConfigProps) => {
         )}
 
         <div className="mt-3 flex gap-2">
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             disabled={busy}
             onClick={handleConnect}
-            className="inline-flex items-center gap-1.5 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600 disabled:opacity-50">
-            {busy && (
-              <svg
-                className="h-3 w-3 animate-spin"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24">
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-            )}
+            leadingIcon={
+              busy ? (
+                <svg
+                  className="h-3 w-3 animate-spin"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24">
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+              ) : undefined
+            }>
             {busy
               ? t('channels.yuanbao.connecting')
               : status === 'connected'
                 ? t('channels.yuanbao.reconnect')
                 : t('channels.yuanbao.connect')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
             disabled={busy || status === 'disconnected'}
-            onClick={handleDisconnect}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700 disabled:opacity-50">
+            onClick={handleDisconnect}>
             {t('accounts.disconnect')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/components/channels/channelConfigPrimitives.tsx b/app/src/components/channels/channelConfigPrimitives.tsx
index 468935a5e..491d00b08 100644
--- a/app/src/components/channels/channelConfigPrimitives.tsx
+++ b/app/src/components/channels/channelConfigPrimitives.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode, useCallback, useState } from 'react';
 
 import type { AuthModeSpec, ChannelConnectionStatus } from '../../types/channels';
+import Button from '../ui/Button';
 import ChannelFieldInput from './ChannelFieldInput';
 import ChannelStatusBadge from './ChannelStatusBadge';
 
@@ -138,21 +139,17 @@ export function ChannelConnectActions({
   return (
     <div className={`mt-3 flex gap-2 ${className ?? ''}`}>
       {showConnect && onConnect ? (
-        <button
-          type="button"
-          disabled={busy}
-          onClick={onConnect}
-          className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600 disabled:opacity-50">
+        <Button variant="primary" size="sm" disabled={busy} onClick={onConnect}>
           {connectLabel}
-        </button>
+        </Button>
       ) : null}
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        size="sm"
         disabled={busy || status === 'disconnected'}
-        onClick={onDisconnect}
-        className="rounded-lg border border-stone-200 dark:border-neutral-800 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-700 disabled:opacity-50">
+        onClick={onDisconnect}>
         {disconnectLabel}
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/app/src/components/channels/mcp/ConfigAssistantPanel.tsx b/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
index bded666af..48a9b61d9 100644
--- a/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
+++ b/app/src/components/channels/mcp/ConfigAssistantPanel.tsx
@@ -10,6 +10,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useT } from '../../../lib/i18n/I18nContext';
 import { BubbleMarkdown } from '../../../pages/conversations/components/AgentMessageBubble';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
 
 const log = debug('mcp-clients:config-assist');
 
@@ -213,13 +214,14 @@ const ConfigAssistantPanel = ({
           placeholder={t('mcp.configAssistant.inputPlaceholder')}
           className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50 resize-none"
         />
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="md"
           disabled={sending || !input.trim()}
           onClick={() => void handleSend()}
-          className="self-end rounded-lg bg-primary-500 px-3 py-2 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors shrink-0">
+          className="self-end shrink-0">
           {t('mcp.configAssistant.send')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/src/components/channels/mcp/ConfigHelpModal.tsx b/app/src/components/channels/mcp/ConfigHelpModal.tsx
index af01225f1..ecb965dab 100644
--- a/app/src/components/channels/mcp/ConfigHelpModal.tsx
+++ b/app/src/components/channels/mcp/ConfigHelpModal.tsx
@@ -8,6 +8,7 @@
  * only this modal and returns to whatever opened it.
  */
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import ConfigAssistantPanel from './ConfigAssistantPanel';
 
 interface ConfigHelpModalProps {
@@ -51,13 +52,14 @@ const ConfigHelpModal = ({
           <h3 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
             {t('mcp.connectAuth.howToGetToken')}
           </h3>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="xs"
             onClick={onClose}
             aria-label={t('common.cancel')}
-            className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 px-2 py-1 text-xs text-stone-500 dark:text-neutral-400 hover:border-stone-300 dark:hover:border-neutral-600">
+            className="shrink-0">
             ✕
-          </button>
+          </Button>
         </div>
         <div className="min-h-0 flex-1">
           <ConfigAssistantPanel
diff --git a/app/src/components/channels/mcp/ConnectAuthModal.tsx b/app/src/components/channels/mcp/ConnectAuthModal.tsx
index 107f7b8de..84e4bb39a 100644
--- a/app/src/components/channels/mcp/ConnectAuthModal.tsx
+++ b/app/src/components/channels/mcp/ConnectAuthModal.tsx
@@ -24,6 +24,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useT } from '../../../lib/i18n/I18nContext';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
 import { openUrl } from '../../../utils/openUrl';
+import Button from '../../ui/Button';
 import ConfigHelpModal from './ConfigHelpModal';
 import type { InstalledServer, McpTool } from './types';
 
@@ -268,13 +269,9 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
             <p className="text-xs text-stone-600 dark:text-neutral-300">
               {t('mcp.connectAuth.oauthHint')}
             </p>
-            <button
-              type="button"
-              onClick={handleOAuth}
-              disabled={busy}
-              className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+            <Button variant="primary" size="sm" onClick={handleOAuth} disabled={busy}>
               {oauthWaiting ? t('mcp.connectAuth.oauthWaiting') : t('mcp.connectAuth.signIn')}
-            </button>
+            </Button>
             <p className="text-[11px] text-stone-400 dark:text-neutral-500">
               {t('mcp.connectAuth.oauthOrToken')}
             </p>
@@ -324,13 +321,14 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                     data-form-type="other"
                     className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                   />
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="xs"
                     onClick={() => setReveal(prev => ({ ...prev, [key]: !prev[key] }))}
                     disabled={busy}
-                    className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 px-2 py-1 text-[11px] text-stone-500 dark:text-neutral-400 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+                    className="shrink-0">
                     {reveal[key] ? t('mcp.install.hide') : t('mcp.install.show')}
-                  </button>
+                  </Button>
                 </div>
               </div>
             ))}
@@ -392,14 +390,15 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
                   <option value="bearer">{t('mcp.connectAuth.schemeBearer')}</option>
                   <option value="raw">{t('mcp.connectAuth.schemeRaw')}</option>
                 </select>
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  size="xs"
                   onClick={() => removeCustomHeader(h.id)}
                   disabled={busy}
                   aria-label={t('mcp.connectAuth.removeHeader')}
-                  className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 px-2 py-1 text-[11px] text-stone-500 dark:text-neutral-400 hover:border-coral-300 hover:text-coral-600 disabled:opacity-50">
+                  className="shrink-0">
                   ✕
-                </button>
+                </Button>
               </div>
               {/* Row 2: full-width value (tokens are long) */}
               <input
@@ -426,20 +425,12 @@ const ConnectAuthModal = ({ server, onClose, onConnected }: ConnectAuthModalProp
 
         {/* Actions */}
         <div className="flex justify-end gap-2 pt-1">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={busy}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+          <Button variant="secondary" size="sm" onClick={onClose} disabled={busy}>
             {t('common.cancel')}
-          </button>
-          <button
-            type="button"
-            onClick={handleConnect}
-            disabled={busy}
-            className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+          </Button>
+          <Button variant="primary" size="sm" onClick={handleConnect} disabled={busy}>
             {busy ? t('mcp.detail.connecting') : t('mcp.detail.connect')}
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/app/src/components/channels/mcp/InstallDialog.tsx b/app/src/components/channels/mcp/InstallDialog.tsx
index 962b1c8fe..bc0a26f07 100644
--- a/app/src/components/channels/mcp/InstallDialog.tsx
+++ b/app/src/components/channels/mcp/InstallDialog.tsx
@@ -15,6 +15,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
 import { deriveAuthor } from './McpServerCard';
 import type { InstalledServer, SmitheryConnection, SmitheryServerDetail } from './types';
 
@@ -177,12 +178,13 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
         <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-4 py-3 text-sm text-coral-700 dark:text-coral-300">
           {detailError}
         </div>
-        <button
-          type="button"
+        <Button
+          variant="tertiary"
+          size="sm"
           onClick={onCancel}
-          className="text-sm text-stone-500 dark:text-neutral-400 hover:underline">
+          className="text-stone-500 dark:text-neutral-400 hover:underline">
           {t('mcp.install.back')}
-        </button>
+        </Button>
       </div>
     );
   }
@@ -197,12 +199,13 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
   if (step === 'detail') {
     return (
       <div className="space-y-5">
-        <button
-          type="button"
+        <Button
+          variant="tertiary"
+          size="xs"
           onClick={onCancel}
-          className="text-xs text-stone-500 dark:text-neutral-400 hover:underline">
+          className="text-stone-500 dark:text-neutral-400 hover:underline">
           ← {t('mcp.install.back')}
-        </button>
+        </Button>
 
         {/* Header */}
         <div className="flex items-start gap-4">
@@ -320,24 +323,20 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
 
         {/* Actions */}
         <div className="flex gap-2 pt-1">
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="lg"
             disabled={installing}
-            onClick={() => void handleDirectInstall()}
-            className="rounded-lg bg-primary-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+            onClick={() => void handleDirectInstall()}>
             {installing
               ? t('mcp.install.installing')
               : hasEnvKeys
                 ? t('mcp.install.configureAndInstall')
                 : t('mcp.install.button')}
-          </button>
-          <button
-            type="button"
-            disabled={installing}
-            onClick={onCancel}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 px-5 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50 transition-colors">
+          </Button>
+          <Button variant="secondary" size="lg" disabled={installing} onClick={onCancel}>
             {t('common.cancel')}
-          </button>
+          </Button>
         </div>
       </div>
     );
@@ -347,15 +346,16 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
 
   return (
     <div className="space-y-4">
-      <button
-        type="button"
+      <Button
+        variant="tertiary"
+        size="xs"
         onClick={() => {
           setStep('detail');
           setInstallError(null);
         }}
-        className="text-xs text-stone-500 dark:text-neutral-400 hover:underline">
+        className="text-stone-500 dark:text-neutral-400 hover:underline">
         ← {detail.display_name}
-      </button>
+      </Button>
 
       {/* Compact header */}
       <div className="flex items-center gap-3">
@@ -398,13 +398,14 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
                   disabled={installing}
                   className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                 />
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  size="sm"
                   onClick={() => toggleShowEnv(key)}
                   disabled={installing}
-                  className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 px-2.5 py-1.5 text-xs text-stone-500 dark:text-neutral-400 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+                  className="shrink-0">
                   {showEnv[key] ? t('mcp.install.hide') : t('mcp.install.show')}
-                </button>
+                </Button>
               </div>
             </div>
           ))}
@@ -448,20 +449,16 @@ const InstallDialog = ({ qualifiedName, prefillEnv, onSuccess, onCancel }: Insta
 
       {/* Actions */}
       <div className="flex gap-2 pt-1">
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="lg"
           disabled={installing}
-          onClick={() => void handleInstall()}
-          className="rounded-lg bg-primary-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+          onClick={() => void handleInstall()}>
           {installing ? t('mcp.install.installing') : t('mcp.install.button')}
-        </button>
-        <button
-          type="button"
-          disabled={installing}
-          onClick={onCancel}
-          className="rounded-lg border border-stone-200 dark:border-neutral-700 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50 transition-colors">
+        </Button>
+        <Button variant="secondary" size="lg" disabled={installing} onClick={onCancel}>
           {t('common.cancel')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/src/components/channels/mcp/InstalledServerDetail.tsx b/app/src/components/channels/mcp/InstalledServerDetail.tsx
index 90eaaaf9a..4763d1888 100644
--- a/app/src/components/channels/mcp/InstalledServerDetail.tsx
+++ b/app/src/components/channels/mcp/InstalledServerDetail.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
 import { clearConfigChat } from './ConfigAssistantPanel';
 import ConfigHelpModal from './ConfigHelpModal';
 import ConnectAuthModal from './ConnectAuthModal';
@@ -278,44 +279,40 @@ const InstalledServerDetail = ({
             core refuses connect calls on disabled servers. */}
         {server.enabled &&
           (status !== 'connected' ? (
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="sm"
               disabled={busy || status === 'connecting'}
-              onClick={handleConnect}
-              className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+              onClick={handleConnect}>
               {status === 'connecting'
                 ? t('mcp.detail.connecting')
                 : status === 'unauthorized'
                   ? t('mcp.detail.authenticate')
                   : t('mcp.detail.connect')}
-            </button>
+            </Button>
           ) : (
-            <button
-              type="button"
-              disabled={busy}
-              onClick={handleDisconnect}
-              className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+            <Button variant="secondary" size="sm" disabled={busy} onClick={handleDisconnect}>
               {t('mcp.detail.disconnect')}
-            </button>
+            </Button>
           ))}
 
         {/* Enable / Disable toggle */}
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           disabled={busy}
-          onClick={() => handleSetEnabled(!server.enabled)}
-          className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+          onClick={() => handleSetEnabled(!server.enabled)}>
           {server.enabled ? t('mcp.detail.disable') : t('mcp.detail.enable')}
-        </button>
+        </Button>
 
         {SHOW_CONFIG_ASSISTANT && (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             disabled={busy}
-            onClick={() => setShowAssistant(prev => !prev)}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+            onClick={() => setShowAssistant(prev => !prev)}>
             {showAssistant ? t('mcp.connectAuth.hideHelp') : t('mcp.connectAuth.howToGetToken')}
-          </button>
+          </Button>
         )}
 
         {confirmUninstall ? (
@@ -323,29 +320,31 @@ const InstalledServerDetail = ({
             <span className="text-xs text-coral-600 dark:text-coral-400 font-medium">
               {t('mcp.detail.confirmUninstall')}
             </span>
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              tone="danger"
+              size="sm"
               disabled={busy}
-              onClick={handleUninstall}
-              className="rounded-lg bg-coral-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-coral-600 disabled:opacity-50">
+              onClick={handleUninstall}>
               {t('mcp.detail.confirmUninstallAction')}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
               disabled={busy}
-              onClick={() => setConfirmUninstall(false)}
-              className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 disabled:opacity-50">
+              onClick={() => setConfirmUninstall(false)}>
               {t('common.cancel')}
-            </button>
+            </Button>
           </div>
         ) : (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="sm"
             disabled={busy}
-            onClick={() => setConfirmUninstall(true)}
-            className="rounded-lg border border-coral-200 dark:border-coral-500/30 px-3 py-1.5 text-xs font-medium text-coral-600 dark:text-coral-400 hover:bg-coral-50 dark:hover:bg-coral-500/10 disabled:opacity-50">
+            onClick={() => setConfirmUninstall(true)}>
             {t('mcp.detail.uninstall')}
-          </button>
+          </Button>
         )}
       </div>
 
@@ -399,23 +398,20 @@ const InstalledServerDetail = ({
                       disabled={busy}
                       className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40 disabled:opacity-50"
                     />
-                    <button
-                      type="button"
+                    <Button
+                      variant="secondary"
+                      size="xs"
                       onClick={() => setShowReconfig(prev => ({ ...prev, [key]: !prev[key] }))}
                       disabled={busy}
-                      className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 px-2 py-1 text-[11px] text-stone-500 dark:text-neutral-400 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+                      className="shrink-0">
                       {showReconfig[key] ? t('mcp.install.hide') : t('mcp.install.show')}
-                    </button>
+                    </Button>
                   </div>
                 </div>
               ))}
-              <button
-                type="button"
-                disabled={busy}
-                onClick={handleSaveReconfigure}
-                className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+              <Button variant="primary" size="sm" disabled={busy} onClick={handleSaveReconfigure}>
                 {busy ? t('mcp.detail.reconfigureSaving') : t('mcp.detail.saveReconnect')}
-              </button>
+              </Button>
             </div>
           )}
         </div>
diff --git a/app/src/components/channels/mcp/InstalledServerList.tsx b/app/src/components/channels/mcp/InstalledServerList.tsx
index 4f8d07a56..672b970ce 100644
--- a/app/src/components/channels/mcp/InstalledServerList.tsx
+++ b/app/src/components/channels/mcp/InstalledServerList.tsx
@@ -12,6 +12,7 @@
 import { type KeyboardEvent as ReactKeyboardEvent, useMemo, useRef } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import type { ConnStatus, InstalledServer, ServerStatus } from './types';
 
 interface InstalledServerListProps {
@@ -93,23 +94,21 @@ const InstalledServerList = ({
         <h3 className="text-xs font-semibold text-stone-500 dark:text-neutral-400 uppercase tracking-wide">
           {t('mcp.installed.title')}
         </h3>
-        <button
-          type="button"
+        <Button
+          variant="tertiary"
+          size="xs"
           onClick={onBrowseCatalog}
-          className="text-xs text-primary-600 dark:text-primary-300 hover:underline font-medium">
+          className="text-primary-600 dark:text-primary-300 hover:underline">
           {t('mcp.installed.browseCatalog')}
-        </button>
+        </Button>
       </div>
 
       {servers.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center text-center gap-3 py-8">
           <p className="text-sm text-stone-400 dark:text-neutral-500">{t('mcp.installed.empty')}</p>
-          <button
-            type="button"
-            onClick={onBrowseCatalog}
-            className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600 transition-colors">
+          <Button variant="primary" size="md" onClick={onBrowseCatalog}>
             {t('mcp.installed.browseCatalog')}
-          </button>
+          </Button>
         </div>
       ) : (
         <>
diff --git a/app/src/components/channels/mcp/McpCatalogBrowser.tsx b/app/src/components/channels/mcp/McpCatalogBrowser.tsx
index a95cc968e..dd4e0a138 100644
--- a/app/src/components/channels/mcp/McpCatalogBrowser.tsx
+++ b/app/src/components/channels/mcp/McpCatalogBrowser.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
 import McpServerCard from './McpServerCard';
 import type { SmitheryServer } from './types';
 
@@ -126,13 +127,9 @@ const McpCatalogBrowser = ({ onSelectInstall }: McpCatalogBrowserProps) => {
 
           {page < totalPages && (
             <div className="flex justify-center pt-2">
-              <button
-                type="button"
-                disabled={loading}
-                onClick={handleLoadMore}
-                className="rounded-lg border border-stone-200 dark:border-neutral-700 px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:border-stone-300 dark:hover:border-neutral-600 disabled:opacity-50">
+              <Button variant="secondary" size="md" disabled={loading} onClick={handleLoadMore}>
                 {loading ? t('common.loading') : t('mcp.catalog.loadMore')}
-              </button>
+              </Button>
             </div>
           )}
         </>
diff --git a/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx b/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
index 181c01191..b0bb62d27 100644
--- a/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
+++ b/app/src/components/channels/mcp/McpConnectionHealthToolbar.tsx
@@ -20,6 +20,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import type { ConnStatus } from './types';
 
 interface McpConnectionHealthToolbarProps {
@@ -232,18 +233,16 @@ const McpConnectionHealthToolbar = ({
               )}
             </p>
             <div className="flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setConfirmDisconnect(false)}
-                className="px-3 py-1.5 text-xs rounded-lg border border-stone-200 dark:border-neutral-700 text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800">
+              <Button variant="secondary" size="sm" onClick={() => setConfirmDisconnect(false)}>
                 {t('mcp.health.disconnectConfirm.cancel')}
-              </button>
-              <button
-                type="button"
-                onClick={() => void runDisconnectAll()}
-                className="px-3 py-1.5 text-xs rounded-lg bg-coral-500 text-white hover:bg-coral-600">
+              </Button>
+              <Button
+                variant="primary"
+                tone="danger"
+                size="sm"
+                onClick={() => void runDisconnectAll()}>
                 {t('mcp.health.disconnectConfirm.confirm')}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/app/src/components/channels/mcp/McpInventoryExportTab.tsx b/app/src/components/channels/mcp/McpInventoryExportTab.tsx
index 4c69f3df8..f571261b8 100644
--- a/app/src/components/channels/mcp/McpInventoryExportTab.tsx
+++ b/app/src/components/channels/mcp/McpInventoryExportTab.tsx
@@ -9,6 +9,7 @@
 import { useMemo, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import {
   buildManifest,
   type McpInventoryManifest,
@@ -76,22 +77,22 @@ const McpInventoryExportTab = ({ servers }: McpInventoryExportTabProps) => {
           {t('mcp.inventory.export.serverCount').replace('{count}', String(servers.length))}
         </p>
         <div className="flex items-center gap-2">
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void handleCopy()}
-            aria-label={t('mcp.inventory.export.copyAria')}
-            className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800">
+            aria-label={t('mcp.inventory.export.copyAria')}>
             {copyStatus === 'copied'
               ? t('mcp.inventory.export.copied')
               : t('mcp.inventory.export.copy')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
             onClick={handleDownload}
-            aria-label={t('mcp.inventory.export.downloadAria')}
-            className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-600">
+            aria-label={t('mcp.inventory.export.downloadAria')}>
             {t('mcp.inventory.export.download')}
-          </button>
+          </Button>
         </div>
       </div>
       <pre
diff --git a/app/src/components/channels/mcp/McpInventoryImportTab.tsx b/app/src/components/channels/mcp/McpInventoryImportTab.tsx
index 2144d83aa..a4cce43db 100644
--- a/app/src/components/channels/mcp/McpInventoryImportTab.tsx
+++ b/app/src/components/channels/mcp/McpInventoryImportTab.tsx
@@ -21,6 +21,7 @@
 import { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import {
   type ClassifiedImportEntry,
   classifyImport,
@@ -181,20 +182,17 @@ const McpInventoryImportTab = ({
 
       <div className="flex items-center justify-between gap-2 flex-wrap">
         <div className="flex items-center gap-2">
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={handleParse}
-            disabled={rawInput.trim().length === 0}
-            className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed">
+            disabled={rawInput.trim().length === 0}>
             {t('mcp.inventory.import.preview')}
-          </button>
+          </Button>
           {(manifest || parseError || rawInput.length > 0) && (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800">
+            <Button variant="secondary" size="sm" onClick={handleClear}>
               {t('mcp.inventory.import.clear')}
-            </button>
+            </Button>
           )}
         </div>
         <label className="text-xs text-primary-600 dark:text-primary-300 cursor-pointer hover:underline">
@@ -276,16 +274,17 @@ const McpInventoryImportTab = ({
                     )}
                   </div>
                   {status === 'new' ? (
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
+                      size="xs"
                       onClick={() => handleInstall(entry)}
                       aria-label={t('mcp.inventory.import.installAria').replace(
                         '{name}',
                         entry.display_name
                       )}
-                      className="shrink-0 rounded-lg bg-primary-500 px-3 py-1 text-xs font-medium text-white hover:bg-primary-600">
+                      className="shrink-0">
                       {t('mcp.inventory.import.install')}
-                    </button>
+                    </Button>
                   ) : (
                     <span className="shrink-0 text-[10px] text-stone-400 dark:text-neutral-500 italic">
                       {t('mcp.inventory.import.skipped')}
diff --git a/app/src/components/channels/mcp/McpInventoryPanel.tsx b/app/src/components/channels/mcp/McpInventoryPanel.tsx
index 7d5a15de2..66749ebc2 100644
--- a/app/src/components/channels/mcp/McpInventoryPanel.tsx
+++ b/app/src/components/channels/mcp/McpInventoryPanel.tsx
@@ -18,6 +18,7 @@
 import { useEffect, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import McpInventoryExportTab from './McpInventoryExportTab';
 import McpInventoryImportTab from './McpInventoryImportTab';
 import type { InstalledServer } from './types';
@@ -76,11 +77,13 @@ const McpInventoryPanel = ({ servers, onInstallServer, onClose }: McpInventoryPa
               {t('mcp.inventory.subtitle')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={onClose}
             aria-label={t('mcp.inventory.close')}
-            className="shrink-0 rounded-lg p-1.5 text-stone-400 hover:text-stone-700 dark:text-neutral-500 dark:hover:text-neutral-200 transition-colors">
+            className="shrink-0">
             <svg
               className="w-4 h-4"
               fill="none"
@@ -90,7 +93,7 @@ const McpInventoryPanel = ({ servers, onInstallServer, onClose }: McpInventoryPa
               aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
-          </button>
+          </Button>
         </div>
 
         {/* Tab bar */}
diff --git a/app/src/components/channels/mcp/McpServersTab.test.tsx b/app/src/components/channels/mcp/McpServersTab.test.tsx
index f27f8bc53..8f80e21f6 100644
--- a/app/src/components/channels/mcp/McpServersTab.test.tsx
+++ b/app/src/components/channels/mcp/McpServersTab.test.tsx
@@ -145,9 +145,9 @@ describe('McpServersTab', () => {
       expect(screen.queryByText('Loading MCP servers...')).not.toBeInTheDocument();
     });
 
-    expect(screen.getByRole('button', { name: 'All' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Installed/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Registry' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'All' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Installed/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Registry' })).toBeInTheDocument();
   });
 
   it('shows empty-installed state when Installed chip is active and no servers', async () => {
@@ -161,7 +161,7 @@ describe('McpServersTab', () => {
       expect(screen.queryByText('Loading MCP servers...')).not.toBeInTheDocument();
     });
 
-    fireEvent.click(screen.getByRole('button', { name: /Installed/i }));
+    fireEvent.click(screen.getByRole('tab', { name: /Installed/i }));
 
     await waitFor(() => {
       expect(screen.getByText('No MCP servers installed yet.')).toBeInTheDocument();
@@ -518,7 +518,7 @@ describe('McpServersTab', () => {
 
     await waitFor(() => screen.getByText('File Server'));
 
-    fireEvent.click(screen.getByRole('button', { name: 'Registry' }));
+    fireEvent.click(screen.getByRole('tab', { name: 'Registry' }));
 
     await waitFor(() => {
       expect(screen.queryByText('File Server')).not.toBeInTheDocument();
diff --git a/app/src/components/channels/mcp/McpServersTab.tsx b/app/src/components/channels/mcp/McpServersTab.tsx
index ccb25c195..bc42c1ee5 100644
--- a/app/src/components/channels/mcp/McpServersTab.tsx
+++ b/app/src/components/channels/mcp/McpServersTab.tsx
@@ -10,6 +10,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import ChipTabs from '../../layout/ChipTabs';
+import Button from '../../ui/Button';
 import InstallDialog from './InstallDialog';
 import InstalledServerDetail from './InstalledServerDetail';
 import McpInventoryPanel from './McpInventoryPanel';
@@ -225,20 +227,22 @@ const McpServersTab = () => {
   if (view.mode === 'detail' && selectedServer) {
     return (
       <div className="space-y-3">
-        <button
-          type="button"
+        <Button
+          variant="tertiary"
+          size="xs"
           onClick={() => setView({ mode: 'home' })}
-          className="inline-flex items-center gap-1.5 text-xs font-medium text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors">
-          <svg
-            className="w-3.5 h-3.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-          </svg>
+          leadingIcon={
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          }>
           {t('mcp.install.back')}
-        </button>
+        </Button>
         <InstalledServerDetail
           server={selectedServer}
           connStatus={selectedConnStatus}
@@ -253,20 +257,22 @@ const McpServersTab = () => {
   if (view.mode === 'install') {
     return (
       <div className="space-y-3">
-        <button
-          type="button"
+        <Button
+          variant="tertiary"
+          size="xs"
           onClick={() => setView({ mode: 'home' })}
-          className="inline-flex items-center gap-1.5 text-xs font-medium text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors">
-          <svg
-            className="w-3.5 h-3.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-          </svg>
+          leadingIcon={
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          }>
           {t('mcp.install.back')}
-        </button>
+        </Button>
         <InstallDialog
           qualifiedName={view.qualifiedName}
           prefillEnv={view.prefillEnv}
@@ -290,34 +296,33 @@ const McpServersTab = () => {
           aria-label={t('mcp.catalog.searchAria')}
           className="flex-1 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-800 dark:text-neutral-100 placeholder:text-stone-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
         />
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="md"
           onClick={() => setInventoryOpen(true)}
           aria-label={t('mcp.inventory.openAria')}
-          className="shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 px-3 py-2 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800">
+          className="shrink-0">
           {t('mcp.inventory.openButton')}
-        </button>
+        </Button>
       </div>
 
       {/* Filter chips */}
-      <div className="flex items-center gap-2">
-        {(['all', 'installed', 'registry'] as FilterChip[]).map(chip => (
-          <button
-            key={chip}
-            type="button"
-            onClick={() => setActiveChip(chip)}
-            className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
-              activeChip === chip
-                ? 'bg-primary-500 text-white'
-                : 'bg-stone-100 dark:bg-neutral-800 text-stone-600 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-700'
-            }`}>
-            {chip === 'all' && t('mcp.tab.filter.all')}
-            {chip === 'installed' &&
-              t('mcp.tab.filter.installed').replace('{count}', String(filteredInstalled.length))}
-            {chip === 'registry' && t('mcp.tab.filter.registry')}
-          </button>
-        ))}
-      </div>
+      <ChipTabs<FilterChip>
+        className="flex flex-wrap items-center gap-2"
+        value={activeChip}
+        onChange={setActiveChip}
+        items={[
+          { id: 'all', label: t('mcp.tab.filter.all') },
+          {
+            id: 'installed',
+            label: t('mcp.tab.filter.installed').replace(
+              '{count}',
+              String(filteredInstalled.length)
+            ),
+          },
+          { id: 'registry', label: t('mcp.tab.filter.registry') },
+        ]}
+      />
 
       {loadError && (
         <div className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-xs text-coral-700 dark:text-coral-300">
@@ -495,12 +500,13 @@ const McpServersTab = () => {
           catalogPage < catalogTotalPages &&
           (activeChip === 'all' || activeChip === 'registry') && (
             <div className="py-3 text-center border-t border-stone-100 dark:border-neutral-800">
-              <button
-                type="button"
+              <Button
+                variant="tertiary"
+                size="xs"
                 onClick={handleLoadMore}
-                className="text-xs font-medium text-primary-600 dark:text-primary-400 hover:underline">
+                className="text-primary-600 dark:text-primary-400 hover:underline">
                 {t('mcp.catalog.loadMore')}
-              </button>
+              </Button>
             </div>
           )}
       </div>
diff --git a/app/src/components/channels/mcp/McpToolPlayground.tsx b/app/src/components/channels/mcp/McpToolPlayground.tsx
index eda5fde10..9b7f1ef7d 100644
--- a/app/src/components/channels/mcp/McpToolPlayground.tsx
+++ b/app/src/components/channels/mcp/McpToolPlayground.tsx
@@ -36,6 +36,7 @@ import {
 
 import { useT } from '../../../lib/i18n/I18nContext';
 import { mcpClientsApi } from '../../../services/api/mcpClientsApi';
+import Button from '../../ui/Button';
 import type { McpTool } from './types';
 
 interface McpToolPlaygroundProps {
@@ -261,11 +262,13 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
               </p>
             )}
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={onClose}
             aria-label={t('mcp.playground.close')}
-            className="shrink-0 rounded-lg p-1.5 text-stone-400 hover:text-stone-700 dark:text-neutral-500 dark:hover:text-neutral-200 transition-colors">
+            className="shrink-0">
             <svg
               className="w-4 h-4"
               fill="none"
@@ -275,7 +278,7 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
               aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
-          </button>
+          </Button>
         </div>
 
         {/* Input schema (collapsible) */}
@@ -348,13 +351,9 @@ const McpToolPlayground = ({ serverId, tool, onClose }: McpToolPlaygroundProps)
 
         {/* Run button */}
         <div className="flex justify-end gap-2 mb-4">
-          <button
-            type="button"
-            onClick={() => void handleRun()}
-            disabled={isRunning}
-            className="rounded-lg bg-primary-500 px-4 py-1.5 text-xs font-semibold text-white hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed">
+          <Button variant="primary" size="sm" onClick={() => void handleRun()} disabled={isRunning}>
             {isRunning ? t('mcp.playground.running') : t('mcp.playground.run')}
-          </button>
+          </Button>
         </div>
 
         {/* Result */}
diff --git a/app/src/components/chat/ChatFilesPanel.tsx b/app/src/components/chat/ChatFilesPanel.tsx
index 482992a81..d0d279a16 100644
--- a/app/src/components/chat/ChatFilesPanel.tsx
+++ b/app/src/components/chat/ChatFilesPanel.tsx
@@ -14,6 +14,7 @@ import {
   upsertArtifactReadyForThread,
 } from '../../store/chatRuntimeSlice';
 import { useAppDispatch } from '../../store/hooks';
+import Button from '../ui/Button';
 
 /**
  * Popover panel listing every `ready` artifact for a thread (#3024).
@@ -260,12 +261,13 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
         <span className="text-xs font-semibold uppercase tracking-wide text-stone-500 dark:text-neutral-400">
           {t('chat.files.panel.title').replace('{count}', String(artifacts.length))}
         </span>
-        <button
-          type="button"
+        <Button
+          iconOnly
+          variant="tertiary"
+          size="xs"
           onClick={onClose}
           data-analytics-id="chat-files-panel-close"
-          aria-label={t('chat.files.panel.close')}
-          className="w-6 h-6 flex items-center justify-center rounded hover:bg-stone-100 dark:hover:bg-neutral-800 text-stone-500 dark:text-neutral-400">
+          aria-label={t('chat.files.panel.close')}>
           <svg
             className="w-3.5 h-3.5"
             fill="none"
@@ -274,7 +276,7 @@ export default function ChatFilesPanel({ threadId, artifacts, onClose }: ChatFil
             viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
-        </button>
+        </Button>
       </header>
 
       {artifacts.length === 0 ? (
diff --git a/app/src/components/composio/ComposioConnectModal.tsx b/app/src/components/composio/ComposioConnectModal.tsx
index 046ed6976..4c850580f 100644
--- a/app/src/components/composio/ComposioConnectModal.tsx
+++ b/app/src/components/composio/ComposioConnectModal.tsx
@@ -45,6 +45,7 @@ import {
 } from '../../lib/composio/types';
 import { useT } from '../../lib/i18n/I18nContext';
 import { openUrl } from '../../utils/openUrl';
+import Button from '../ui/Button';
 import type { ComposioToolkitMeta } from './toolkitMeta';
 import {
   getRequiredFieldsForToolkit,
@@ -592,10 +593,12 @@ export default function ComposioConnectModal({
                 {toolkit.description}
               </p>
             </div>
-            <button
-              type="button"
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="sm"
               onClick={onClose}
-              className="p-1 text-stone-400 dark:text-neutral-500 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100 dark:hover:text-neutral-100 transition-colors rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800/60 flex-shrink-0"
+              className="text-stone-400 dark:text-neutral-500 hover:text-stone-900 dark:hover:text-neutral-100 flex-shrink-0"
               aria-label={t('common.close')}>
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -605,7 +608,7 @@ export default function ComposioConnectModal({
                   d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-            </button>
+            </Button>
           </div>
         </div>
 
@@ -639,13 +642,14 @@ export default function ComposioConnectModal({
                 }}
               />
               {error && phase === 'idle' && <p className="text-[11px] text-coral-600">{error}</p>}
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                size="lg"
                 disabled={connectInFlight}
                 onClick={() => void handleConnect()}
-                className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
+                className="w-full">
                 {`${t('composio.connect.connect')} ${toolkit.name}`}
-              </button>
+              </Button>
             </>
           )}
 
@@ -670,23 +674,25 @@ export default function ComposioConnectModal({
                   }
                 }}
               />
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                size="lg"
                 disabled={connectInFlight}
                 onClick={() => void handleConnect()}
-                className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
+                className="w-full">
                 {t('composio.connect.retryConnection')}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                variant="secondary"
+                size="md"
                 onClick={() => {
                   setPhase('idle');
                   setFieldErrors({});
                   setError(null);
                 }}
-                className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 text-xs font-medium py-2 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors">
+                className="w-full">
                 {t('common.cancel')}
-              </button>
+              </Button>
             </>
           )}
 
@@ -703,12 +709,13 @@ export default function ComposioConnectModal({
                 {`${t('composio.connect.waitingFor')} ${toolkit.name} ${t('composio.connect.oauthComplete')}`}
               </div>
               {connectUrl && (
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  size="md"
                   onClick={() => void openUrl(connectUrl)}
-                  className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-700 dark:text-neutral-200 text-xs font-medium py-2 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
+                  className="w-full">
                   {t('composio.connect.reopenBrowser')}
-                </button>
+                </Button>
               )}
               <p className="text-xs text-stone-400 dark:text-neutral-500">
                 {t('composio.connect.waitingHint')}
@@ -727,13 +734,14 @@ export default function ComposioConnectModal({
                   {t('composio.expiredDescription').replace('{name}', toolkit.name)}
                 </p>
               </div>
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                size="lg"
                 disabled={connectInFlight}
                 onClick={() => void handleConnect()}
-                className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
+                className="w-full">
                 {`${t('composio.reconnect')} ${toolkit.name}`}
-              </button>
+              </Button>
             </>
           )}
 
@@ -775,12 +783,14 @@ export default function ComposioConnectModal({
                           </span>
                         )}
                       </div>
-                      <button
-                        type="button"
+                      <Button
+                        variant="tertiary"
+                        tone="danger"
+                        size="xs"
                         onClick={() => void handleDisconnect(conn)}
-                        className="text-[11px] text-coral-600 hover:text-coral-700 font-medium shrink-0">
+                        className="shrink-0">
                         {t('composio.connect.disconnectAccount')}
-                      </button>
+                      </Button>
                     </div>
                   ))}
                 </div>
@@ -809,13 +819,14 @@ export default function ComposioConnectModal({
                   connectionId={activeConnection.id}
                 />
               )}
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="lg"
                 disabled={connectInFlight}
                 onClick={() => void handleConnect()}
-                className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 text-sm font-medium py-2.5 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
+                className="w-full">
                 {t('composio.connect.addAnotherAccount')}
-              </button>
+              </Button>
               <label className="flex items-start gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
                 <input
                   type="checkbox"
@@ -833,18 +844,17 @@ export default function ComposioConnectModal({
                 </span>
               </label>
               <div className="grid grid-cols-2 gap-3">
-                <button
-                  type="button"
+                <Button
+                  variant="secondary"
+                  tone="danger"
+                  size="lg"
                   onClick={() => void handleDisconnect()}
-                  className="w-full rounded-xl border border-coral-200 bg-coral-50 text-coral-700 text-sm font-medium py-2.5 hover:bg-coral-100 transition-colors">
+                  className="w-full">
                   {t('skills.disconnect')}
-                </button>
-                <button
-                  type="button"
-                  onClick={onClose}
-                  className="w-full rounded-xl bg-primary-500 text-white text-sm font-medium py-2.5 hover:bg-primary-600 transition-colors">
+                </Button>
+                <Button variant="primary" size="lg" onClick={onClose} className="w-full">
                   {t('common.close')}
-                </button>
+                </Button>
               </div>
             </>
           )}
@@ -860,8 +870,9 @@ export default function ComposioConnectModal({
               <div className="rounded-xl border border-coral-200 bg-coral-50 p-3">
                 <p className="text-sm text-coral-700">{error ?? t('misc.somethingWentWrong')}</p>
               </div>
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="md"
                 onClick={() => {
                   setClearMemoryOnDisconnect(false);
                   setPhase(
@@ -869,9 +880,9 @@ export default function ComposioConnectModal({
                   );
                   setError(null);
                 }}
-                className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-700 dark:text-neutral-200 text-sm font-medium py-2 hover:bg-stone-50 dark:hover:bg-neutral-800/60 transition-colors">
+                className="w-full">
                 {t('common.dismiss')}
-              </button>
+              </Button>
             </>
           )}
         </div>
diff --git a/app/src/components/feedback/FeedbackComments.tsx b/app/src/components/feedback/FeedbackComments.tsx
index bb6fba917..bc6a0c241 100644
--- a/app/src/components/feedback/FeedbackComments.tsx
+++ b/app/src/components/feedback/FeedbackComments.tsx
@@ -5,6 +5,7 @@ import { useUser } from '../../hooks/useUser';
 import { useT } from '../../lib/i18n/I18nContext';
 import { feedbackApi } from '../../services/api/feedbackApi';
 import type { FeedbackComment } from '../../types/feedback';
+import Button from '../ui/Button';
 
 const log = debugFactory('feedback:comments');
 
@@ -126,13 +127,14 @@ export default function FeedbackComments({ feedbackId, onCommentAdded }: Feedbac
           rows={2}
           className="flex-1 resize-y rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 transition-all focus:border-primary-500/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:border-neutral-700 dark:bg-white/[0.03] dark:text-neutral-100 dark:placeholder:text-neutral-500"
         />
-        <button
-          type="button"
+        <Button
+          variant="primary"
+          size="md"
           onClick={handlePost}
           disabled={posting || !input.trim()}
-          className="whitespace-nowrap rounded-xl bg-primary-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-600 active:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50">
+          className="whitespace-nowrap">
           {posting ? '...' : t('feedback.comments.post')}
-        </button>
+        </Button>
       </div>
       {postError && <p className="text-xs text-coral-600 dark:text-coral-400">{postError}</p>}
     </div>
diff --git a/app/src/components/feedback/FeedbackSubmitForm.tsx b/app/src/components/feedback/FeedbackSubmitForm.tsx
index 208936a65..0eb4d2cd5 100644
--- a/app/src/components/feedback/FeedbackSubmitForm.tsx
+++ b/app/src/components/feedback/FeedbackSubmitForm.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useT } from '../../lib/i18n/I18nContext';
 import { feedbackApi } from '../../services/api/feedbackApi';
 import type { CreateFeedbackResult, FeedbackType } from '../../types/feedback';
+import Button from '../ui/Button';
 
 const log = debugFactory('feedback:submit');
 
@@ -153,12 +154,9 @@ export default function FeedbackSubmitForm({ onAccepted }: FeedbackSubmitFormPro
       />
 
       <div className="mt-3 flex items-center justify-between gap-3">
-        <button
-          onClick={handleSubmit}
-          disabled={!canSubmit}
-          className="rounded-xl bg-primary-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-primary-600 active:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50">
+        <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!canSubmit}>
           {status === 'loading' ? '...' : t('feedback.submit.action')}
-        </button>
+        </Button>
         <div className="flex items-center gap-3">
           {message && <p className={`text-xs ${messageClass}`}>{message}</p>}
           {body.length > 0 && (
diff --git a/app/src/components/intelligence/AddMemorySourceDialog.tsx b/app/src/components/intelligence/AddMemorySourceDialog.tsx
index 10578c482..d43fbf130 100644
--- a/app/src/components/intelligence/AddMemorySourceDialog.tsx
+++ b/app/src/components/intelligence/AddMemorySourceDialog.tsx
@@ -29,6 +29,7 @@ import {
   SOURCE_KIND_LABEL_KEYS,
   type SourceKind,
 } from '../../services/memorySourcesService';
+import Button from '../ui/Button';
 
 const log = debug('intelligence:add-memory-source-dialog');
 
@@ -224,13 +225,9 @@ export function AddMemorySourceDialog({ open, onClose, onAdded }: AddMemorySourc
               ))}
             </div>
             <div className="mt-4 flex justify-end">
-              <button
-                type="button"
-                onClick={handleClose}
-                className="rounded-md px-4 py-2 text-sm text-stone-600 hover:text-stone-900
-                           dark:text-neutral-400 dark:hover:text-neutral-100">
+              <Button variant="tertiary" size="md" onClick={handleClose}>
                 {t('common.cancel')}
-              </button>
+              </Button>
             </div>
           </>
         ) : (
@@ -279,32 +276,26 @@ export function AddMemorySourceDialog({ open, onClose, onAdded }: AddMemorySourc
             )}
 
             <div className="mt-5 flex items-center justify-between">
-              <button
-                type="button"
+              <Button
+                variant="tertiary"
+                size="sm"
                 onClick={() => {
                   setKind(null);
                   setError(null);
-                }}
-                className="text-sm text-stone-500 hover:text-stone-800 dark:text-neutral-400 dark:hover:text-neutral-200">
+                }}>
                 ← {t('memorySources.backToKinds')}
-              </button>
+              </Button>
               <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={handleClose}
-                  className="rounded-md px-4 py-2 text-sm text-stone-600 hover:text-stone-900
-                             dark:text-neutral-400 dark:hover:text-neutral-100">
+                <Button variant="tertiary" size="md" onClick={handleClose}>
                   {t('common.cancel')}
-                </button>
-                <button
-                  type="button"
+                </Button>
+                <Button
+                  variant="primary"
+                  size="md"
                   onClick={handleSubmit}
-                  disabled={!isValid || submitting}
-                  className="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white
-                             shadow-sm transition-colors hover:bg-primary-600
-                             disabled:cursor-not-allowed disabled:opacity-50">
+                  disabled={!isValid || submitting}>
                   {submitting ? t('memorySources.adding') : t('memorySources.add')}
-                </button>
+                </Button>
               </div>
             </div>
           </>
diff --git a/app/src/components/intelligence/AgentsLibraryPanel.tsx b/app/src/components/intelligence/AgentsLibraryPanel.tsx
index 3130672ec..75d322626 100644
--- a/app/src/components/intelligence/AgentsLibraryPanel.tsx
+++ b/app/src/components/intelligence/AgentsLibraryPanel.tsx
@@ -4,6 +4,7 @@ import { LuBot, LuClipboard, LuPlay, LuRefreshCw, LuSend } from 'react-icons/lu'
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { type AgentDefinitionDisplay, agentLibraryApi } from '../../services/api/agentLibraryApi';
+import Button from '../ui/Button';
 
 const log = debug('intelligence:agents-library');
 
@@ -124,13 +125,13 @@ export default function AgentsLibraryPanel({
             {t('intelligence.agents.subtitle')}
           </p>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={() => void loadAgents()}
-          className="inline-flex items-center gap-1.5 rounded-md border border-stone-200 px-2.5 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
-          <LuRefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
+          leadingIcon={<LuRefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />}>
           {t('intelligence.agents.refresh')}
-        </button>
+        </Button>
       </div>
 
       {loading && (
@@ -186,25 +187,25 @@ export default function AgentsLibraryPanel({
                     </div>
                   </div>
                   <div className="flex flex-none flex-wrap gap-1.5">
-                    <button
-                      type="button"
+                    <Button
+                      variant="secondary"
+                      size="sm"
                       onClick={() =>
                         void handleRun(agent, t('intelligence.agents.startChatPrompt'))
                       }
                       disabled={Boolean(runningAgentId)}
-                      className="inline-flex items-center gap-1.5 rounded-md border border-stone-200 px-2.5 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 disabled:opacity-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
-                      <LuSend className="h-3.5 w-3.5" />
+                      leadingIcon={<LuSend className="h-3.5 w-3.5" />}>
                       {t('intelligence.agents.startChat')}
-                    </button>
-                    <button
-                      type="button"
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      size="sm"
                       onClick={() => void handleCopy(agent.id)}
-                      className="inline-flex items-center gap-1.5 rounded-md border border-stone-200 px-2.5 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
-                      <LuClipboard className="h-3.5 w-3.5" />
+                      leadingIcon={<LuClipboard className="h-3.5 w-3.5" />}>
                       {copiedId === agent.id
                         ? t('intelligence.agents.copied')
                         : t('intelligence.agents.copyId')}
-                    </button>
+                    </Button>
                   </div>
                 </div>
 
diff --git a/app/src/components/intelligence/ConfirmationModal.tsx b/app/src/components/intelligence/ConfirmationModal.tsx
index b82035262..5bc02aa20 100644
--- a/app/src/components/intelligence/ConfirmationModal.tsx
+++ b/app/src/components/intelligence/ConfirmationModal.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import type { ConfirmationModal as ConfirmationModalType } from '../../types/intelligence';
+import Button from '../ui/Button';
 
 interface ConfirmationModalProps {
   modal: ConfirmationModalType;
@@ -84,23 +85,16 @@ export function ConfirmationModal({ modal, onClose }: ConfirmationModalProps) {
 
         {/* Actions */}
         <div className="flex items-center justify-end gap-3 p-6 pt-4 border-t border-stone-200 dark:border-neutral-800">
-          <button
-            onClick={handleCancel}
-            className="px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:text-stone-900 dark:hover:text-neutral-100 dark:text-neutral-100 rounded-lg hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
+          <Button variant="tertiary" size="md" onClick={handleCancel}>
             {modal.cancelText || t('common.cancel')}
-          </button>
-          <button
-            onClick={handleConfirm}
-            className={`
-              px-4 py-2 text-sm font-medium rounded-lg transition-colors
-              ${
-                modal.destructive
-                  ? 'bg-coral-500 hover:bg-coral-600 text-white'
-                  : 'bg-primary-500 hover:bg-primary-600 text-white'
-              }
-            `}>
+          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            tone={modal.destructive ? 'danger' : 'default'}
+            onClick={handleConfirm}>
             {modal.confirmText || t('common.confirm')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/components/intelligence/ConnectionPathPanel.tsx b/app/src/components/intelligence/ConnectionPathPanel.tsx
index 5009106fb..a2ff7457d 100644
--- a/app/src/components/intelligence/ConnectionPathPanel.tsx
+++ b/app/src/components/intelligence/ConnectionPathPanel.tsx
@@ -6,6 +6,7 @@ import { Fragment } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import type { ConnectionPathResult } from '../../lib/memory/connectionPath';
+import Button from '../ui/Button';
 
 interface ConnectionPathPanelProps {
   result: ConnectionPathResult | null;
@@ -62,12 +63,9 @@ const ConnectionPathPanel = ({
             {t('connectionPath.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('connectionPath.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/DiagramViewerTab.tsx b/app/src/components/intelligence/DiagramViewerTab.tsx
index f8102bcb8..ab7537f01 100644
--- a/app/src/components/intelligence/DiagramViewerTab.tsx
+++ b/app/src/components/intelligence/DiagramViewerTab.tsx
@@ -6,6 +6,7 @@ import {
   type DiagramViewerSettings,
   openhumanGetDashboardSettings,
 } from '../../utils/tauriCommands/config';
+import Button from '../ui/Button';
 
 const DEFAULT_SETTINGS: DiagramViewerSettings = {
   enabled: true,
@@ -100,14 +101,14 @@ export default function DiagramViewerTab() {
             {t('intelligence.diagram.description')}
           </p>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="md"
           onClick={refreshDiagram}
-          className="inline-flex items-center gap-2 rounded-md border border-stone-200 bg-white px-3 py-2 text-sm font-medium text-stone-700 transition-colors hover:bg-stone-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          leadingIcon={<LuRefreshCw aria-hidden="true" className="h-4 w-4" />}
           aria-label={t('intelligence.diagram.refreshAria')}>
-          <LuRefreshCw aria-hidden="true" className="h-4 w-4" />
           {t('intelligence.diagram.refresh')}
-        </button>
+        </Button>
       </div>
 
       {showEmptyState && (
diff --git a/app/src/components/intelligence/EntityAssociationsPanel.tsx b/app/src/components/intelligence/EntityAssociationsPanel.tsx
index 52eaa75ec..876359270 100644
--- a/app/src/components/intelligence/EntityAssociationsPanel.tsx
+++ b/app/src/components/intelligence/EntityAssociationsPanel.tsx
@@ -4,6 +4,7 @@
  */
 import { useT } from '../../lib/i18n/I18nContext';
 import type { AssociationReport } from '../../lib/memory/entityAssociations';
+import Button from '../ui/Button';
 
 interface EntityAssociationsPanelProps {
   report: AssociationReport | null;
@@ -68,12 +69,9 @@ const EntityAssociationsPanel = ({
             {t('entityAssociations.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('entityAssociations.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/GoalsPanel.tsx b/app/src/components/intelligence/GoalsPanel.tsx
index 041325576..5485bba03 100644
--- a/app/src/components/intelligence/GoalsPanel.tsx
+++ b/app/src/components/intelligence/GoalsPanel.tsx
@@ -246,7 +246,7 @@ export default function GoalsPanel() {
                       />
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="tertiary"
                         size="xs"
                         onClick={() => void saveEdit(goal.id)}
                         disabled={busyId === goal.id || !editText.trim()}
@@ -255,7 +255,7 @@ export default function GoalsPanel() {
                       </Button>
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="tertiary"
                         size="xs"
                         onClick={cancelEdit}
                         aria-label={t('common.cancel')}>
@@ -270,7 +270,7 @@ export default function GoalsPanel() {
                       <div className="flex shrink-0 items-center gap-1">
                         <Button
                           type="button"
-                          variant="ghost"
+                          variant="tertiary"
                           size="xs"
                           onClick={() => startEdit(goal)}
                           disabled={busyId === goal.id}
@@ -279,7 +279,8 @@ export default function GoalsPanel() {
                         </Button>
                         <Button
                           type="button"
-                          variant="danger"
+                          variant="secondary"
+                          tone="danger"
                           size="xs"
                           onClick={() => void handleDelete(goal.id)}
                           disabled={busyId === goal.id}
diff --git a/app/src/components/intelligence/GraphCentralityPanel.tsx b/app/src/components/intelligence/GraphCentralityPanel.tsx
index 7aeb6f5d7..b20ae619a 100644
--- a/app/src/components/intelligence/GraphCentralityPanel.tsx
+++ b/app/src/components/intelligence/GraphCentralityPanel.tsx
@@ -7,6 +7,7 @@ import { useMemo } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { type CentralityResult, findBridges } from '../../lib/memory/graphCentrality';
+import Button from '../ui/Button';
 
 const MAX_ROWS = 25;
 
@@ -84,12 +85,9 @@ const GraphCentralityPanel = ({ result, loading, error, onRetry }: GraphCentrali
             {t('graphCentrality.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('graphCentrality.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/GraphCohesionPanel.tsx b/app/src/components/intelligence/GraphCohesionPanel.tsx
index f0dbaef37..0c05bfd90 100644
--- a/app/src/components/intelligence/GraphCohesionPanel.tsx
+++ b/app/src/components/intelligence/GraphCohesionPanel.tsx
@@ -8,6 +8,7 @@ import { useMemo } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { type CohesionResult, findBrokers } from '../../lib/memory/graphCohesion';
+import Button from '../ui/Button';
 
 const MAX_ROWS = 25;
 
@@ -69,12 +70,9 @@ const GraphCohesionPanel = ({ result, loading, error, onRetry }: GraphCohesionPa
             {t('graphCohesion.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('graphCohesion.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/IntelligenceMemoryTab.tsx b/app/src/components/intelligence/IntelligenceMemoryTab.tsx
index a1db1b2b9..cb980f1af 100644
--- a/app/src/components/intelligence/IntelligenceMemoryTab.tsx
+++ b/app/src/components/intelligence/IntelligenceMemoryTab.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../lib/i18n/I18nContext';
 import type { ActionableItem, ActionableItemSource, TimeGroup } from '../../types/intelligence';
+import Button from '../ui/Button';
 import { ActionableCard } from './ActionableCard';
 
 interface IntelligenceMemoryTabProps {
@@ -133,12 +134,13 @@ export default function IntelligenceMemoryTab({
               <p className="text-stone-400 dark:text-neutral-500 text-sm mb-4">
                 {t('memory.noAnalysisHint')}
               </p>
-              <button
+              <Button
+                variant="primary"
+                size="md"
                 onClick={() => void handleAnalyzeNow()}
-                disabled={isRunning}
-                className="px-4 py-2 bg-primary-500 hover:bg-primary-600 disabled:opacity-40 text-white text-sm rounded-lg transition-colors">
+                disabled={isRunning}>
                 {t('memory.analyzeNow')}
-              </button>
+              </Button>
             </>
           )}
         </div>
diff --git a/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx b/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx
index 34d8644c7..98fd53326 100644
--- a/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx
+++ b/app/src/components/intelligence/IntelligenceOrchestrationTab.tsx
@@ -28,6 +28,7 @@ import {
   type WorkflowRun,
   workflowRunsApi,
 } from '../../services/api/workflowRunsApi';
+import Button from '../ui/Button';
 import { SAFETY_TIER_KEY, WorkflowRunApprovalCard } from './WorkflowRunApprovalCard';
 import WorkflowRunDetail from './WorkflowRunDetail';
 
@@ -237,15 +238,15 @@ export default function IntelligenceOrchestrationTab() {
         <div className="rounded-xl border border-coral-200 bg-coral-50 px-4 py-3 text-sm text-coral-700 dark:border-coral-500/30 dark:bg-coral-500/10 dark:text-coral-300">
           {t('orchestration.failedToLoad')}: {error}
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={() => {
             setLoading(true);
             void load();
-          }}
-          className="rounded-lg border border-stone-300 bg-white px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
+          }}>
           {t('common.retry')}
-        </button>
+        </Button>
       </div>
     );
   }
@@ -295,13 +296,14 @@ export default function IntelligenceOrchestrationTab() {
                       </p>
                     </div>
                     {!isStarting && (
-                      <button
-                        type="button"
+                      <Button
+                        variant="primary"
+                        size="sm"
                         data-testid={`orchestration-start-${def.id}`}
                         onClick={() => beginStart(def)}
-                        className="flex-none rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white shadow-soft hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                        className="flex-none shadow-soft">
                         {t('orchestration.start')}
-                      </button>
+                      </Button>
                     )}
                   </div>
 
@@ -334,23 +336,24 @@ export default function IntelligenceOrchestrationTab() {
                         />
                       ) : (
                         <div className="flex items-center gap-2">
-                          <button
-                            type="button"
+                          <Button
+                            variant="primary"
+                            size="sm"
                             data-testid="orchestration-confirm-start"
                             disabled={starting}
                             onClick={() => void doStart()}
-                            className="rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white shadow-soft hover:bg-primary-600 disabled:opacity-50">
+                            className="shadow-soft">
                             {starting
                               ? t('orchestration.starting')
                               : t('orchestration.confirmStart')}
-                          </button>
-                          <button
-                            type="button"
+                          </Button>
+                          <Button
+                            variant="secondary"
+                            size="sm"
                             onClick={cancelStart}
-                            disabled={starting}
-                            className="rounded-lg border border-stone-300 bg-white px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
+                            disabled={starting}>
                             {t('orchestration.approval.cancel')}
-                          </button>
+                          </Button>
                         </div>
                       )}
                     </div>
diff --git a/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx b/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
index 1248408a7..412be8204 100644
--- a/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
+++ b/app/src/components/intelligence/IntelligenceSubconsciousTab.tsx
@@ -5,6 +5,7 @@ import { useT } from '../../lib/i18n/I18nContext';
 import type { SubconsciousMode } from '../../utils/tauriCommands/heartbeat';
 import type { SubconsciousStatus } from '../../utils/tauriCommands/subconscious';
 import { settingsNavState } from '../settings/modal/settingsOverlay';
+import Button from '../ui/Button';
 
 interface ModeOption {
   id: SubconsciousMode;
@@ -205,11 +206,12 @@ export default function IntelligenceSubconsciousTab({
               </>
             )}
           </div>
-          <button
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void handleRunTick()}
             disabled={triggering || providerUnavailable}
-            title={providerUnavailable ? t('subconscious.providerUnavailableTitle') : undefined}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-stone-50 dark:bg-neutral-800/60 hover:bg-stone-100 dark:hover:bg-neutral-800 disabled:opacity-40 border border-stone-200 dark:border-neutral-800 rounded-lg text-stone-600 dark:text-neutral-300 transition-colors">
+            title={providerUnavailable ? t('subconscious.providerUnavailableTitle') : undefined}>
             {triggering ? (
               <div className="w-3 h-3 border border-stone-400 border-t-transparent rounded-full animate-spin" />
             ) : (
@@ -223,7 +225,7 @@ export default function IntelligenceSubconsciousTab({
               </svg>
             )}
             {t('subconscious.runNow')}
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/app/src/components/intelligence/IntelligenceTasksTab.tsx b/app/src/components/intelligence/IntelligenceTasksTab.tsx
index af730c26f..1b4c72426 100644
--- a/app/src/components/intelligence/IntelligenceTasksTab.tsx
+++ b/app/src/components/intelligence/IntelligenceTasksTab.tsx
@@ -49,6 +49,7 @@ import type { ThreadMessage } from '../../types/thread';
 import type { TaskBoard, TaskBoardCard, TaskBoardCardStatus } from '../../types/turnState';
 import { chatThreadPath } from '../../utils/chatRoutes';
 import { settingsNavState } from '../settings/modal/settingsOverlay';
+import Button from '../ui/Button';
 import { UserTaskComposer } from './UserTaskComposer';
 
 const log = debug('intelligence:tasks');
@@ -917,13 +918,15 @@ function TaskSourceRefinementDialog({
               {t('intelligence.tasks.sourcePlan.subtitle')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             aria-label={t('common.close')}
             onClick={onClose}
-            className="flex h-8 w-8 flex-none items-center justify-center rounded-md text-stone-500 hover:bg-stone-100 dark:text-neutral-300 dark:hover:bg-neutral-800">
+            className="flex-none">
             <LuX className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="max-h-[calc(90vh-8rem)] space-y-4 overflow-y-auto px-4 py-4">
@@ -995,13 +998,9 @@ function TaskSourceRefinementDialog({
         </div>
 
         <div className="flex flex-wrap items-center justify-end gap-2 border-t border-stone-100 px-4 py-3 dark:border-neutral-800">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={saving}
-            className="rounded-md border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+          <Button variant="secondary" size="sm" onClick={onClose} disabled={saving}>
             {t('common.cancel')}
-          </button>
+          </Button>
           <button
             type="button"
             onClick={() => void approve()}
diff --git a/app/src/components/intelligence/IntelligenceTeamsTab.tsx b/app/src/components/intelligence/IntelligenceTeamsTab.tsx
index deffea284..c422d53c4 100644
--- a/app/src/components/intelligence/IntelligenceTeamsTab.tsx
+++ b/app/src/components/intelligence/IntelligenceTeamsTab.tsx
@@ -32,6 +32,7 @@ import {
   type TeamMessage,
   type TeamView,
 } from '../../services/api/agentTeamApi';
+import Button from '../ui/Button';
 import { TeamActivityRail } from './TeamActivityRail';
 import { TeamHeader } from './TeamHeader';
 import { TeamTaskBoard } from './TeamTaskBoard';
@@ -282,13 +283,14 @@ export default function IntelligenceTeamsTab() {
       <div className="space-y-3">
         <div className="flex items-center justify-between gap-2">
           {teams.length > 1 ? (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="xs"
               onClick={deselect}
-              className="inline-flex items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
-              <LuArrowLeft className="h-3 w-3" />
+              leadingIcon={<LuArrowLeft className="h-3 w-3" />}
+              className="gap-1 text-[11px]">
               {t('intelligence.teams.backToList')}
-            </button>
+            </Button>
           ) : (
             <span />
           )}
@@ -377,13 +379,14 @@ function RefreshButton({
   t: (key: string) => string;
 }) {
   return (
-    <button
-      type="button"
+    <Button
+      variant="secondary"
+      size="xs"
       disabled={refreshing}
       onClick={onClick}
-      className="inline-flex items-center gap-1 rounded-md border border-stone-200 px-2 py-1 text-[11px] font-medium text-stone-600 hover:bg-stone-50 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
-      <LuRefreshCw className={`h-3 w-3 ${refreshing ? 'animate-spin' : ''}`} />
+      leadingIcon={<LuRefreshCw className={`h-3 w-3 ${refreshing ? 'animate-spin' : ''}`} />}
+      className="gap-1 text-[11px]">
       {t('intelligence.teams.refresh')}
-    </button>
+    </Button>
   );
 }
diff --git a/app/src/components/intelligence/MemoryControls.tsx b/app/src/components/intelligence/MemoryControls.tsx
index 446a129cd..51e237f33 100644
--- a/app/src/components/intelligence/MemoryControls.tsx
+++ b/app/src/components/intelligence/MemoryControls.tsx
@@ -25,6 +25,7 @@ import {
   memoryTreeResetTree,
   memoryTreeWipeAll,
 } from '../../utils/tauriCommands';
+import ChipTabs from '../layout/ChipTabs';
 import { ObsidianVaultSection } from './ObsidianVaultSection';
 
 interface MemoryControlsProps {
@@ -212,36 +213,19 @@ interface ModeToggleProps {
 
 function ModeToggle({ mode, onChange }: ModeToggleProps) {
   const { t } = useT();
-  const baseBtn =
-    'px-3.5 py-1.5 text-xs font-semibold rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-200';
-  const active = 'bg-primary-500 text-white shadow-sm';
-  const idle =
-    'text-stone-600 hover:text-stone-900 dark:text-neutral-300 dark:hover:text-neutral-100';
   return (
-    <div
-      className="inline-flex items-center gap-1 rounded-full border border-stone-200 bg-stone-50 p-1 dark:border-neutral-800 dark:bg-neutral-800/60"
-      role="tablist"
-      aria-label={t('workspace.graphViewMode')}
-      data-testid="memory-graph-mode-toggle">
-      <button
-        type="button"
-        onClick={() => onChange('tree')}
-        className={`${baseBtn} ${mode === 'tree' ? active : idle}`}
-        role="tab"
-        aria-selected={mode === 'tree'}
-        data-testid="memory-graph-mode-tree">
-        {t('workspace.trees')}
-      </button>
-      <button
-        type="button"
-        onClick={() => onChange('contacts')}
-        className={`${baseBtn} ${mode === 'contacts' ? active : idle}`}
-        role="tab"
-        aria-selected={mode === 'contacts'}
-        data-testid="memory-graph-mode-contacts">
-        {t('workspace.contacts')}
-      </button>
-    </div>
+    <ChipTabs<GraphMode>
+      items={[
+        { id: 'tree', label: t('workspace.trees'), testId: 'memory-graph-mode-tree' },
+        { id: 'contacts', label: t('workspace.contacts'), testId: 'memory-graph-mode-contacts' },
+      ]}
+      value={mode}
+      onChange={onChange}
+      as="tab"
+      ariaLabel={t('workspace.graphViewMode')}
+      testId="memory-graph-mode-toggle"
+      className="inline-flex items-center gap-1.5"
+    />
   );
 }
 
diff --git a/app/src/components/intelligence/MemoryFreshnessPanel.tsx b/app/src/components/intelligence/MemoryFreshnessPanel.tsx
index b3dbb2c3c..ccffc12b4 100644
--- a/app/src/components/intelligence/MemoryFreshnessPanel.tsx
+++ b/app/src/components/intelligence/MemoryFreshnessPanel.tsx
@@ -4,6 +4,7 @@
  */
 import { useT } from '../../lib/i18n/I18nContext';
 import type { FactFreshness, FreshnessReport } from '../../lib/memory/memoryFreshness';
+import Button from '../ui/Button';
 
 const MAX_QUEUE_ROWS = 50;
 
@@ -77,12 +78,9 @@ const MemoryFreshnessPanel = ({ report, loading, error, onRetry }: MemoryFreshne
             {t('memoryFreshness.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('memoryFreshness.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/MemoryGraph.tsx b/app/src/components/intelligence/MemoryGraph.tsx
index abc0bdc06..6d2299cb2 100644
--- a/app/src/components/intelligence/MemoryGraph.tsx
+++ b/app/src/components/intelligence/MemoryGraph.tsx
@@ -42,6 +42,7 @@ import { useAppSelector } from '../../store/hooks';
 import { resolveTheme, type ThemeMode } from '../../store/themeSlice';
 import { type GraphEdge, type GraphMode, type GraphNode } from '../../utils/tauriCommands';
 import { openWorkspacePath, previewWorkspaceText } from '../../utils/tauriCommands/workspacePaths';
+import Button from '../ui/Button';
 import {
   CONTACT_COLOR,
   LEAF_COLOR,
@@ -590,13 +591,14 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
               {item.label}
             </span>
           ))}
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="xs"
             onClick={resetView}
             data-testid="memory-graph-reset-view"
-            className="rounded-md border border-stone-200 bg-white px-2 py-1 text-[11px] font-medium text-stone-600 shadow-sm hover:bg-stone-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800">
+            className="text-[11px] shadow-sm">
             {t('graph.resetView')}
-          </button>
+          </Button>
         </div>
       </div>
       {useWebGL ? (
@@ -724,16 +726,17 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint, onReady }: MemoryGr
                   <span className="ml-3 break-all font-mono text-stone-400 dark:text-neutral-500">
                     workspace:{hoveredSummaryPath}
                   </span>
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="xs"
                     data-testid={`memory-graph-preview-${hovered.id}`}
                     disabled={previewingPath === hoveredSummaryPath}
                     onClick={() => void previewSummary(hovered)}
-                    className="ml-3 rounded-md border border-stone-200 bg-white px-2 py-1 text-[11px] font-medium text-stone-700 shadow-sm hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800">
+                    className="ml-3 text-[11px] shadow-sm">
                     {previewingPath === hoveredSummaryPath
                       ? t('migration.previewRunning')
                       : t('migration.previewAction')}
-                  </button>
+                  </Button>
                 </>
               )}
             </>
diff --git a/app/src/components/intelligence/MemorySourcesRegistry.tsx b/app/src/components/intelligence/MemorySourcesRegistry.tsx
index b12edb91d..d17d565bf 100644
--- a/app/src/components/intelligence/MemorySourcesRegistry.tsx
+++ b/app/src/components/intelligence/MemorySourcesRegistry.tsx
@@ -36,6 +36,7 @@ import {
   openhumanUpdateMemorySyncSettings,
 } from '../../utils/tauriCommands/config';
 import { memoryTreeFlushSource } from '../../utils/tauriCommands/memoryTree';
+import Button from '../ui/Button';
 import { AddMemorySourceDialog } from './AddMemorySourceDialog';
 import { ConfirmationModal } from './ConfirmationModal';
 import { SourceSettingsPanel } from './SourceSettingsPanel';
@@ -514,15 +515,13 @@ export function MemorySourcesRegistry({
             <AllInIcon />
             {t('memorySources.allIn.button')}
           </button>
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => setDialogOpen(true)}
-            className="inline-flex items-center gap-1 rounded-md bg-primary-500 px-3 py-1.5
-                       text-xs font-semibold text-white shadow-sm transition-colors
-                       hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-200">
-            <PlusIcon />
+            leadingIcon={<PlusIcon />}>
             {t('memorySources.addSource')}
-          </button>
+          </Button>
         </div>
       </header>
 
@@ -839,19 +838,16 @@ function SourceRow({
             }`}>
             <GearIcon />
           </button>
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="sm"
             onClick={() => onSync(source)}
             disabled={!source.enabled || isSyncing}
             title={t('sync.sync')}
             data-testid={`memory-source-sync-${source.toolkit ?? source.kind}`}
-            className="inline-flex items-center gap-1 rounded-md bg-primary-500 px-3 py-1.5
-                     text-xs font-semibold text-white shadow-sm transition-colors
-                     hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50
-                     focus:outline-none focus:ring-2 focus:ring-primary-200">
-            {isSyncing ? <Spinner /> : <SyncIcon />}
+            leadingIcon={isSyncing ? <Spinner /> : <SyncIcon />}>
             {isSyncing ? t('sync.syncing') : t('sync.sync')}
-          </button>
+          </Button>
           <button
             type="button"
             onClick={() => onBuild(source)}
@@ -880,15 +876,16 @@ function SourceRow({
               }`}
             />
           </button>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            tone="danger"
+            size="xs"
             onClick={() => onRemove(source)}
             title={t('memorySources.remove')}
-            className="rounded p-1 text-stone-400 transition-colors hover:bg-coral-50
-                     hover:text-coral-600 dark:text-neutral-500 dark:hover:bg-coral-500/10
-                     dark:hover:text-coral-400">
+            aria-label={t('memorySources.remove')}>
             <TrashIcon />
-          </button>
+          </Button>
         </div>
       </div>
       {settingsExpanded && (
diff --git a/app/src/components/intelligence/MemoryTimelinePanel.tsx b/app/src/components/intelligence/MemoryTimelinePanel.tsx
index bf7a028a7..2ac63a308 100644
--- a/app/src/components/intelligence/MemoryTimelinePanel.tsx
+++ b/app/src/components/intelligence/MemoryTimelinePanel.tsx
@@ -4,6 +4,7 @@
  */
 import { useT } from '../../lib/i18n/I18nContext';
 import type { TimelineReport } from '../../lib/memory/memoryTimeline';
+import Button from '../ui/Button';
 
 const MAX_BARS = 24;
 
@@ -63,12 +64,9 @@ const MemoryTimelinePanel = ({ report, loading, error, onRetry }: MemoryTimeline
             {t('memoryTimeline.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('memoryTimeline.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/MemoryTreeStatusPanel.tsx b/app/src/components/intelligence/MemoryTreeStatusPanel.tsx
index 879b61d36..e3a90b20b 100644
--- a/app/src/components/intelligence/MemoryTreeStatusPanel.tsx
+++ b/app/src/components/intelligence/MemoryTreeStatusPanel.tsx
@@ -30,6 +30,7 @@ import {
   type MemoryTreePipelineStatus,
   memoryTreeSetEnabled,
 } from '../../utils/tauriCommands';
+import Button from '../ui/Button';
 
 /** Translator function shape exposed by `useT()`. */
 type TFn = (key: string, fallback?: string) => string;
@@ -401,14 +402,15 @@ export function MemoryTreeStatusPanel({ onToast }: MemoryTreeStatusPanelProps) {
           className="flex items-center justify-between gap-3 rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-700 dark:text-coral-300"
           data-testid="memory-tree-status-error">
           <span>{t('memoryTree.status.fetchError')}</span>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="xs"
             onClick={() => {
               void refresh();
-            }}
-            className="rounded-md border border-coral-300 dark:border-coral-500/40 bg-white dark:bg-neutral-900 px-2 py-1 text-xs font-medium text-coral-700 dark:text-coral-300 hover:bg-coral-50 dark:hover:bg-coral-500/20">
+            }}>
             {t('memoryTree.status.retry')}
-          </button>
+          </Button>
         </div>
       ) : null}
 
diff --git a/app/src/components/intelligence/ModelCouncilTab.tsx b/app/src/components/intelligence/ModelCouncilTab.tsx
index e04a409ff..41ffa52d0 100644
--- a/app/src/components/intelligence/ModelCouncilTab.tsx
+++ b/app/src/components/intelligence/ModelCouncilTab.tsx
@@ -35,6 +35,7 @@ import {
 } from '../../store/agentProfileSlice';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import type { AgentProfile } from '../../types/agentProfile';
+import Button from '../ui/Button';
 
 /** Matches the server-side MAX_COUNCIL_MEMBERS cap. */
 const MAX_MEMBERS = 5;
@@ -301,12 +302,9 @@ const ModelPickerDialog = ({
               {t('modelCouncil.modelPickerHelp')}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md px-2 py-1 text-xs font-semibold text-stone-500 hover:bg-stone-100 dark:text-neutral-400 dark:hover:bg-neutral-800">
+          <Button variant="tertiary" size="xs" onClick={onClose}>
             {t('modelCouncil.closeModelPicker')}
-          </button>
+          </Button>
         </div>
 
         <div className="mt-4 space-y-2">
@@ -389,13 +387,13 @@ const ModelPickerDialog = ({
               {providersError || modelsError}
             </p>
           )}
-          <button
-            type="button"
+          <Button
+            variant="primary"
             onClick={saveProviderModel}
             disabled={selectionMode !== 'custom' || !provider.trim() || !model.trim()}
-            className="w-full rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50">
+            className="w-full">
             {t('modelCouncil.useProviderModel')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -1044,13 +1042,12 @@ const ModelCouncilTab = () => {
               {t('modelCouncil.listIntro')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            variant="primary"
             onClick={handleCreateCouncil}
-            className="inline-flex items-center gap-2 rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-600">
-            <Icon name="plus" size={16} />
+            leadingIcon={<Icon name="plus" size={16} />}>
             {t('modelCouncil.addCouncil')}
-          </button>
+          </Button>
         </div>
 
         {registryError && (
@@ -1083,26 +1080,32 @@ const ModelCouncilTab = () => {
                     </p>
                   </div>
                   <div className="flex shrink-0 items-center gap-1">
-                    <button
-                      type="button"
+                    <Button
+                      iconOnly
+                      variant="tertiary"
+                      size="sm"
                       onClick={() => {
                         applyCouncilDefinition(council);
                         setView('edit');
                       }}
-                      aria-label={t('modelCouncil.editCouncilAria').replace('{name}', council.name)}
-                      className="rounded-md p-1.5 text-stone-500 hover:bg-stone-100 hover:text-stone-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100">
+                      aria-label={t('modelCouncil.editCouncilAria').replace(
+                        '{name}',
+                        council.name
+                      )}>
                       <Icon name="settings" size={16} />
-                    </button>
-                    <button
-                      type="button"
+                    </Button>
+                    <Button
+                      iconOnly
+                      variant="tertiary"
+                      tone="danger"
+                      size="sm"
                       onClick={() => void handleDeleteCouncil(council)}
                       aria-label={t('modelCouncil.deleteCouncilAria').replace(
                         '{name}',
                         council.name
-                      )}
-                      className="rounded-md p-1.5 text-stone-500 hover:bg-coral-50 hover:text-coral-700 dark:text-neutral-400 dark:hover:bg-coral-500/10 dark:hover:text-coral-300">
+                      )}>
                       <Icon name="trash" size={16} />
-                    </button>
+                    </Button>
                   </div>
                 </div>
                 <dl className="mt-4 grid grid-cols-2 gap-2 text-xs">
@@ -1141,13 +1144,14 @@ const ModelCouncilTab = () => {
     <div className="space-y-5">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex min-w-0 items-center gap-2">
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={() => setView('list')}
-            aria-label={t('modelCouncil.backToCouncils')}
-            className="rounded-md p-1.5 text-stone-500 hover:bg-stone-100 hover:text-stone-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100">
+            aria-label={t('modelCouncil.backToCouncils')}>
             <Icon name="arrow-left" size={18} />
-          </button>
+          </Button>
           <div className="min-w-0">
             <h2 className="truncate text-lg font-semibold text-stone-900 dark:text-neutral-50">
               {view === 'edit' ? t('modelCouncil.editCouncil') : councilName}
@@ -1162,32 +1166,29 @@ const ModelCouncilTab = () => {
         <div className="flex items-center gap-2">
           {view === 'edit' ? (
             <>
-              <button
-                type="button"
+              <Button
+                variant="secondary"
                 onClick={() => {
                   if (selectedCouncil) applyCouncilDefinition(selectedCouncil);
                   setView(selectedCouncil ? 'run' : 'list');
-                }}
-                className="rounded-lg border border-stone-200 px-3 py-2 text-sm font-semibold text-stone-700 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800">
+                }}>
                 {t('modelCouncil.cancelEdit')}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                variant="primary"
                 onClick={() => void saveCouncil()}
-                disabled={registrySaving}
-                className="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50">
+                disabled={registrySaving}>
                 {registrySaving ? t('modelCouncil.savingCouncil') : t('modelCouncil.saveCouncil')}
-              </button>
+              </Button>
             </>
           ) : (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
               onClick={() => setView('edit')}
               aria-label={t('modelCouncil.editCurrentCouncil')}
-              className="inline-flex items-center gap-2 rounded-lg border border-stone-200 px-3 py-2 text-sm font-semibold text-stone-700 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800">
-              <Icon name="settings" size={16} />
+              leadingIcon={<Icon name="settings" size={16} />}>
               {t('modelCouncil.editCouncil')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -1738,13 +1739,9 @@ const ModelCouncilTab = () => {
 
       {view === 'run' && (
         <div className="flex flex-wrap items-center gap-2">
-          <button
-            type="button"
-            onClick={() => void handleRun()}
-            disabled={!canRun}
-            className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50">
+          <Button variant="primary" onClick={() => void handleRun()} disabled={!canRun}>
             {running ? t('modelCouncil.running') : t('modelCouncil.run')}
-          </button>
+          </Button>
           {running && (
             <span
               role="status"
diff --git a/app/src/components/intelligence/NamespaceOverviewPanel.tsx b/app/src/components/intelligence/NamespaceOverviewPanel.tsx
index a9a98a6a6..ff1dcbf89 100644
--- a/app/src/components/intelligence/NamespaceOverviewPanel.tsx
+++ b/app/src/components/intelligence/NamespaceOverviewPanel.tsx
@@ -5,6 +5,7 @@
  */
 import { useT } from '../../lib/i18n/I18nContext';
 import type { NamespaceOverviewReport } from '../../lib/memory/namespaceOverview';
+import Button from '../ui/Button';
 
 const MAX_ROWS = 50;
 
@@ -69,12 +70,9 @@ const NamespaceOverviewPanel = ({
             {t('namespaceOverview.errorPrefix')} {error}
           </p>
           {onRetry && (
-            <button
-              type="button"
-              onClick={onRetry}
-              className="mt-2 rounded-lg bg-primary-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-600">
+            <Button variant="primary" size="sm" onClick={onRetry} className="mt-2">
               {t('namespaceOverview.retry')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/intelligence/ObsidianVaultSection.tsx b/app/src/components/intelligence/ObsidianVaultSection.tsx
index d083c5527..fdecbe766 100644
--- a/app/src/components/intelligence/ObsidianVaultSection.tsx
+++ b/app/src/components/intelligence/ObsidianVaultSection.tsx
@@ -29,6 +29,7 @@ import {
   resolveWorkspaceAbsolutePath,
   revealWorkspacePath,
 } from '../../utils/tauriCommands/workspacePaths';
+import Button from '../ui/Button';
 import { MEMORY_CONTENT_WORKSPACE_PATH } from './memoryWorkspacePaths';
 
 /** localStorage key for the optional Obsidian config-dir override. */
@@ -193,22 +194,16 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
 
   return (
     <div className="flex flex-col items-end gap-2" data-testid="obsidian-vault-section">
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        size="sm"
         onClick={handleViewVault}
         disabled={checking}
         data-testid="memory-open-in-obsidian"
-        className="inline-flex items-center gap-1.5 rounded-lg
-                   border border-stone-200 bg-white px-3 py-1.5 text-xs font-semibold
-                   text-stone-700 shadow-sm transition-colors hover:bg-stone-50
-                   disabled:cursor-not-allowed disabled:opacity-50
-                   focus:outline-none focus:ring-2 focus:ring-stone-200
-                   dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200
-                   dark:hover:bg-neutral-800 dark:focus:ring-neutral-700"
-        title={`obsidian://open?path=${contentRootAbs}`}>
-        <ExternalLinkIcon />
+        title={`obsidian://open?path=${contentRootAbs}`}
+        leadingIcon={<ExternalLinkIcon />}>
         {checking ? t('workspace.checkingVault') : t('workspace.viewVault')}
-      </button>
+      </Button>
 
       {expanded && (
         <div
@@ -225,15 +220,9 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
           </code>
 
           <div className="mt-3 flex flex-wrap gap-2">
-            <button
-              type="button"
-              onClick={reveal}
-              data-testid="obsidian-reveal"
-              className="rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-semibold
-                         text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600
-                         dark:bg-neutral-800 dark:text-neutral-200">
+            <Button variant="secondary" size="sm" onClick={reveal} data-testid="obsidian-reveal">
               {t('workspace.revealFolder')}
-            </button>
+            </Button>
             <button
               type="button"
               onClick={openAnyway}
@@ -243,15 +232,13 @@ export function ObsidianVaultSection({ contentRootAbs, onToast }: ObsidianVaultS
                          dark:bg-neutral-800 dark:text-violet-300">
               {t('workspace.openAnyway')}
             </button>
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={installObsidian}
-              data-testid="obsidian-install"
-              className="rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-semibold
-                         text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600
-                         dark:bg-neutral-800 dark:text-neutral-200">
+              data-testid="obsidian-install">
               {t('workspace.installObsidian')}
-            </button>
+            </Button>
           </div>
 
           <button
diff --git a/app/src/components/intelligence/SourceSettingsPanel.tsx b/app/src/components/intelligence/SourceSettingsPanel.tsx
index 0a956ba56..8da349938 100644
--- a/app/src/components/intelligence/SourceSettingsPanel.tsx
+++ b/app/src/components/intelligence/SourceSettingsPanel.tsx
@@ -17,6 +17,7 @@ import {
   type SourceKind,
   updateMemorySource,
 } from '../../services/memorySourcesService';
+import Button from '../ui/Button';
 
 // Which limit fields are relevant per kind. Order determines display order.
 // Only caps that are actually enforced at sync time are surfaced — the
@@ -191,16 +192,9 @@ export function SourceSettingsPanel({
         })}
       </div>
       <div className="mt-3 flex justify-end">
-        <button
-          type="button"
-          onClick={() => void handleSave()}
-          disabled={saving}
-          className="inline-flex items-center gap-1 rounded-md bg-primary-600 px-3 py-1.5
-                     text-xs font-semibold text-white shadow-sm transition-colors
-                     hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-50
-                     focus:outline-none focus:ring-2 focus:ring-primary-200">
+        <Button variant="primary" size="sm" onClick={() => void handleSave()} disabled={saving}>
           {saving ? t('memorySources.settings.saving') : t('memorySources.settings.save')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/src/components/intelligence/SubconsciousTriggersPanel.tsx b/app/src/components/intelligence/SubconsciousTriggersPanel.tsx
index df888d8a7..a0711be7c 100644
--- a/app/src/components/intelligence/SubconsciousTriggersPanel.tsx
+++ b/app/src/components/intelligence/SubconsciousTriggersPanel.tsx
@@ -6,6 +6,7 @@ import {
   subconsciousTriggersStatus,
   type SubconsciousTriggersStatus,
 } from '../../utils/tauriCommands/subconscious';
+import Button from '../ui/Button';
 
 const cardClass =
   'rounded-lg border border-stone-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900';
@@ -79,28 +80,24 @@ export default function SubconsciousTriggersPanel() {
         </div>
         <div className="flex items-center gap-2">
           {status && (
-            <button
-              type="button"
+            <Button
+              variant={status.triggers_enabled ? 'secondary' : 'primary'}
+              size="xs"
               onClick={() => void toggle()}
               disabled={toggling}
-              data-testid="subconscious-triggers-toggle"
-              className={`rounded-md px-2.5 py-1 text-xs font-medium transition disabled:opacity-50 ${
-                status.triggers_enabled
-                  ? 'border border-stone-200 text-stone-600 hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800'
-                  : 'bg-primary-500 text-white hover:bg-primary-600'
-              }`}>
+              data-testid="subconscious-triggers-toggle">
               {status.triggers_enabled
                 ? t('subconsciousTriggers.disable')
                 : t('subconsciousTriggers.enable')}
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="xs"
             onClick={() => void refresh()}
-            data-testid="subconscious-triggers-refresh"
-            className="rounded-md border border-stone-200 px-2.5 py-1 text-xs text-stone-600 transition hover:bg-stone-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800">
+            data-testid="subconscious-triggers-refresh">
             {t('common.refresh')}
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/app/src/components/intelligence/SyncBudgetDialog.tsx b/app/src/components/intelligence/SyncBudgetDialog.tsx
index 4f8de3f91..05870020e 100644
--- a/app/src/components/intelligence/SyncBudgetDialog.tsx
+++ b/app/src/components/intelligence/SyncBudgetDialog.tsx
@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { updateMemorySource } from '../../services/memorySourcesService';
+import Button from '../ui/Button';
 
 interface SyncBudgetDialogProps {
   source: {
@@ -121,17 +122,12 @@ export default function SyncBudgetDialog({ source, onClose, onSaved }: SyncBudge
         {error && <p className="mt-3 text-xs text-coral-600">{error}</p>}
 
         <div className="flex justify-end gap-2 mt-5">
-          <button
-            onClick={onClose}
-            className="px-3 py-1.5 rounded-md text-xs font-medium text-stone-600 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800">
+          <Button variant="tertiary" size="sm" onClick={onClose}>
             {t('syncConfirm.cancel')}
-          </button>
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="px-3 py-1.5 rounded-md bg-primary-600 hover:bg-primary-500 disabled:opacity-50 text-white text-xs font-medium">
+          </Button>
+          <Button variant="primary" size="sm" onClick={handleSave} disabled={saving}>
             {saving ? t('autonomy.statusSaving') : t('common.save')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/components/intelligence/SyncConfirmDialog.tsx b/app/src/components/intelligence/SyncConfirmDialog.tsx
index aa0650a2e..e639249fa 100644
--- a/app/src/components/intelligence/SyncConfirmDialog.tsx
+++ b/app/src/components/intelligence/SyncConfirmDialog.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { callCoreRpc } from '../../services/coreRpcClient';
+import Button from '../ui/Button';
 
 interface SyncEstimate {
   item_count: number;
@@ -91,17 +92,12 @@ export default function SyncConfirmDialog({
         )}
 
         <div className="flex justify-end gap-2 mt-5">
-          <button
-            onClick={onCancel}
-            className="px-3 py-1.5 rounded-md text-xs font-medium text-stone-600 dark:text-neutral-400 hover:bg-stone-100 dark:hover:bg-neutral-800">
+          <Button variant="tertiary" size="sm" onClick={onCancel}>
             {t('syncConfirm.cancel')}
-          </button>
-          <button
-            onClick={onConfirm}
-            disabled={!estimate}
-            className="px-3 py-1.5 rounded-md bg-primary-600 hover:bg-primary-500 disabled:opacity-50 text-white text-xs font-medium">
+          </Button>
+          <Button variant="primary" size="sm" onClick={onConfirm} disabled={!estimate}>
             {t('syncConfirm.proceed')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/components/intelligence/UserTaskComposer.tsx b/app/src/components/intelligence/UserTaskComposer.tsx
index 8fbcf2370..c9a159118 100644
--- a/app/src/components/intelligence/UserTaskComposer.tsx
+++ b/app/src/components/intelligence/UserTaskComposer.tsx
@@ -14,6 +14,7 @@ import { useT } from '../../lib/i18n/I18nContext';
 import { todosApi, USER_TASKS_THREAD_ID } from '../../services/api/todosApi';
 import { useAppSelector } from '../../store/hooks';
 import type { TaskBoard, TaskBoardCardStatus } from '../../types/turnState';
+import Button from '../ui/Button';
 
 const log = debug('intelligence:task-composer');
 
@@ -210,21 +211,14 @@ export function UserTaskComposer({ onCreated, onClose }: UserTaskComposerProps)
           )}
 
           <div className="flex justify-end gap-2 pt-1">
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-md border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+            <Button variant="secondary" size="sm" onClick={onClose}>
               {t('common.cancel')}
-            </button>
-            <button
-              type="button"
-              onClick={handleSubmit}
-              disabled={!canSubmit}
-              className="rounded-md bg-ocean-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-ocean-700 disabled:opacity-50">
+            </Button>
+            <Button variant="primary" size="sm" onClick={handleSubmit} disabled={!canSubmit}>
               {submitting
                 ? t('intelligence.tasks.composer.creating')
                 : t('intelligence.tasks.composer.create')}
-            </button>
+            </Button>
           </div>
         </div>
       </section>
diff --git a/app/src/components/intelligence/VaultHealthChecklist.tsx b/app/src/components/intelligence/VaultHealthChecklist.tsx
index c89bed386..5f0c7ff0b 100644
--- a/app/src/components/intelligence/VaultHealthChecklist.tsx
+++ b/app/src/components/intelligence/VaultHealthChecklist.tsx
@@ -4,6 +4,7 @@ import { useT } from '../../lib/i18n/I18nContext';
 import type { ToastNotification } from '../../types/intelligence';
 import { openUrl, revealPath } from '../../utils/openUrl';
 import { memoryTreeVaultHealthCheck, type VaultHealthCheck } from '../../utils/tauriCommands';
+import Button from '../ui/Button';
 
 const OBSIDIAN_DOWNLOAD_URL = 'https://obsidian.md/download';
 
@@ -145,16 +146,16 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
             {t('vaultHealth.workspaceVault')} <code className="font-mono">memory_tree/content</code>
           </p>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="xs"
           onClick={() => {
             void runCheck();
           }}
           disabled={refreshing}
-          className="rounded-md border border-stone-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-2.5 py-1 text-xs font-medium text-stone-700 dark:text-neutral-200 disabled:opacity-60"
           data-testid="vault-health-refresh">
           {refreshing ? t('vaultHealth.refreshing') : t('vaultHealth.refresh')}
-        </button>
+        </Button>
       </div>
 
       {health?.content_root_abs ? (
@@ -166,14 +167,14 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
       ) : null}
 
       <div className="flex flex-wrap gap-2">
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={revealVault}
           disabled={!health?.content_root_abs}
-          className="rounded-md border border-stone-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-3 py-1.5 text-xs font-semibold text-stone-700 dark:text-neutral-200 disabled:opacity-50"
           data-testid="vault-health-reveal">
           {t('vaultHealth.revealFolder')}
-        </button>
+        </Button>
         <button
           type="button"
           onClick={openObsidian}
@@ -182,13 +183,13 @@ export function VaultHealthChecklist({ onToast, title }: VaultHealthChecklistPro
           data-testid="vault-health-open-obsidian">
           {t('vaultHealth.openInObsidian')}
         </button>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={installObsidian}
-          className="rounded-md border border-stone-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 px-3 py-1.5 text-xs font-semibold text-stone-700 dark:text-neutral-200"
           data-testid="vault-health-install-obsidian">
           {t('vaultHealth.installObsidian')}
-        </button>
+        </Button>
       </div>
 
       {loading ? (
diff --git a/app/src/components/intelligence/WhatsAppMemorySection.tsx b/app/src/components/intelligence/WhatsAppMemorySection.tsx
index e29ae21d6..e98f607ec 100644
--- a/app/src/components/intelligence/WhatsAppMemorySection.tsx
+++ b/app/src/components/intelligence/WhatsAppMemorySection.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { whatsappListChats } from '../../utils/tauriCommands/memory';
+import Button from '../ui/Button';
 
 interface WhatsAppMemorySectionProps {
   pollIntervalMs?: number;
@@ -61,18 +62,15 @@ export function WhatsAppMemorySection({ pollIntervalMs = 30000 }: WhatsAppMemory
             {lastSyncTs !== null && <> · {relativeTime(lastSyncTs, t)}</>}
           </span>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
+          className="shrink-0"
           onClick={() => void handleSync()}
           disabled={syncing}
-          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-stone-200 dark:border-neutral-800
-                     bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-semibold text-stone-700 dark:text-neutral-200 shadow-sm
-                     transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800/60
-                     disabled:cursor-not-allowed disabled:opacity-50
-                     focus:outline-none focus:ring-2 focus:ring-primary-200">
-          <RefreshIcon spinning={syncing} />
+          leadingIcon={<RefreshIcon spinning={syncing} />}>
           {syncing ? t('sync.syncing') : t('sync.sync')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/src/components/intelligence/WorkflowRunDetail.tsx b/app/src/components/intelligence/WorkflowRunDetail.tsx
index f62b96c80..8ddc15e6d 100644
--- a/app/src/components/intelligence/WorkflowRunDetail.tsx
+++ b/app/src/components/intelligence/WorkflowRunDetail.tsx
@@ -25,6 +25,7 @@ import {
   type WorkflowRun,
   type WorkflowRunStatus,
 } from '../../services/api/workflowRunsApi';
+import Button from '../ui/Button';
 
 const log = debug('intelligence:workflow-detail');
 
@@ -122,17 +123,18 @@ export const WorkflowRunDetail: React.FC<Props> = ({
 
         <div className="flex items-center gap-2">
           {isRunning && (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              tone="danger"
+              size="sm"
               data-testid="workflow-run-stop"
               disabled={busy}
               onClick={() => {
                 log('stop id=%s', run.id);
                 onStop(run.id);
-              }}
-              className="rounded-lg border border-coral-300 bg-white px-3 py-1.5 text-xs font-medium text-coral-700 hover:bg-coral-50 disabled:opacity-50 dark:border-coral-700 dark:bg-neutral-900 dark:text-coral-300 dark:hover:bg-coral-900/40">
+              }}>
               {t('orchestration.detail.stop')}
-            </button>
+            </Button>
           )}
           {canResume && (
             <button
diff --git a/app/src/components/intelligence/WorkflowsTab.tsx b/app/src/components/intelligence/WorkflowsTab.tsx
index 781e5008b..a21135a01 100644
--- a/app/src/components/intelligence/WorkflowsTab.tsx
+++ b/app/src/components/intelligence/WorkflowsTab.tsx
@@ -28,6 +28,7 @@ import CreateSkillModal from '../skills/CreateSkillModal';
 import UnifiedSkillCard from '../skills/SkillCard';
 import { BUILT_IN_SKILL_ICONS } from '../skills/skillIcons';
 import UninstallSkillConfirmDialog from '../skills/UninstallSkillConfirmDialog';
+import Button from '../ui/Button';
 import { ToastContainer } from './Toast';
 
 const log = debug('intelligence:workflows');
@@ -94,13 +95,13 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
   const isEmpty = workflows.length === 0 && !loading && !loadError;
 
   const newWorkflowButton = (
-    <button
-      type="button"
+    <Button
+      variant="primary"
+      size="sm"
       data-testid="workflows-create-btn"
-      onClick={() => setCreateModalOpen(true)}
-      className="rounded-lg bg-primary-500 px-3 py-2 text-xs font-semibold text-white shadow-soft transition-colors hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+      onClick={() => setCreateModalOpen(true)}>
       {t('workflows.createNew')}
-    </button>
+    </Button>
   );
 
   const body = (
@@ -117,15 +118,17 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
           <p className="mt-1 break-words font-mono text-[11px] text-coral-700/90 dark:text-coral-300/90">
             {loadError}
           </p>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="sm"
+            className="mt-3"
             onClick={() => {
               setLoading(true);
               void refresh();
-            }}
-            className="mt-3 rounded-lg border border-coral-300 dark:border-coral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-coral-700 dark:text-coral-300 hover:bg-coral-50 dark:hover:bg-coral-900/40">
+            }}>
             {t('common.retry')}
-          </button>
+          </Button>
         </div>
       ) : null}
 
@@ -147,12 +150,13 @@ export default function WorkflowsTab({ asSettingsPanel = false }: WorkflowsTabPr
           <p className="mt-1 text-xs text-stone-500 dark:text-neutral-400">
             {t('workflows.empty.body')}
           </p>
-          <button
-            type="button"
-            onClick={() => setCreateModalOpen(true)}
-            className="mt-4 rounded-lg bg-primary-500 px-4 py-2 text-xs font-semibold text-white shadow-soft hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
+          <Button
+            variant="primary"
+            size="md"
+            className="mt-4"
+            onClick={() => setCreateModalOpen(true)}>
             {t('workflows.createNew')}
-          </button>
+          </Button>
         </div>
       ) : null}
 
diff --git a/app/src/components/layout/TwoPaneNav.tsx b/app/src/components/layout/TwoPaneNav.tsx
index 438dbfa2e..d9d666a27 100644
--- a/app/src/components/layout/TwoPaneNav.tsx
+++ b/app/src/components/layout/TwoPaneNav.tsx
@@ -24,7 +24,7 @@ interface TwoPaneNavProps {
 /**
  * Vertical, grouped tab navigation for the sidebar pane of a
  * {@link TwoPanelLayout} — the left-rail counterpart to a horizontal
- * PillTabBar, styled to match the settings sidebar (title header, labelled
+ * ChipTabs row, styled to match the settings sidebar (title header, labelled
  * sub-groups, icon + label rows). The list scrolls independently below the
  * optional fixed header.
  */
diff --git a/app/src/components/notifications/CoreNotificationCard.tsx b/app/src/components/notifications/CoreNotificationCard.tsx
index 436ade2db..176c8aa4d 100644
--- a/app/src/components/notifications/CoreNotificationCard.tsx
+++ b/app/src/components/notifications/CoreNotificationCard.tsx
@@ -9,6 +9,7 @@ import {
   markRead,
   type NotificationItem,
 } from '../../store/notificationSlice';
+import Button from '../ui/Button';
 import NotificationBody from './NotificationBody';
 
 // Namespaced debug per project logging rules (mirrors nativeNotifications).
@@ -128,20 +129,16 @@ const CoreNotificationCard = ({ notification: n }: Props) => {
                 const label = labelKey ? t(labelKey) : action.label;
                 const primary = isPrimaryAction(action.actionId);
                 return (
-                  <button
+                  <Button
                     key={action.actionId}
-                    type="button"
+                    variant={primary ? 'primary' : 'secondary'}
+                    size="xs"
                     disabled={pendingActionId !== null}
                     onClick={() => {
                       void handleAction(action.actionId, action.payload);
-                    }}
-                    className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
-                      primary
-                        ? 'bg-primary-500 text-white hover:bg-primary-600'
-                        : 'bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-200 hover:bg-stone-200 dark:hover:bg-neutral-800/60'
-                    }`}>
+                    }}>
                     {label}
-                  </button>
+                  </Button>
                 );
               })}
             </div>
diff --git a/app/src/components/notifications/NotificationCard.tsx b/app/src/components/notifications/NotificationCard.tsx
index 2873079d8..714fa2229 100644
--- a/app/src/components/notifications/NotificationCard.tsx
+++ b/app/src/components/notifications/NotificationCard.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../lib/i18n/I18nContext';
 import type { IntegrationNotification } from '../../types/notifications';
+import Button from '../ui/Button';
 import NotificationBody from './NotificationBody';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -144,9 +145,12 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
           )}
         </div>
         {onDismiss && (
-          <button
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="xs"
             onClick={() => onDismiss(n.id)}
-            className="mt-0.5 ml-1 flex-shrink-0 p-0.5 rounded hover:bg-stone-200 dark:hover:bg-neutral-800/60 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors"
+            className="mt-0.5 ml-1 flex-shrink-0 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300"
             aria-label={t('notifications.card.dismiss')}>
             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -156,7 +160,7 @@ const NotificationCard = ({ notification: n, onMarkRead, onNavigate, onDismiss }
                 d="M6 18L18 6M6 6l12 12"
               />
             </svg>
-          </button>
+          </Button>
         )}
       </div>
     </div>
diff --git a/app/src/components/notifications/NotificationCenter.tsx b/app/src/components/notifications/NotificationCenter.tsx
index a033e7e38..8adbb6c8b 100644
--- a/app/src/components/notifications/NotificationCenter.tsx
+++ b/app/src/components/notifications/NotificationCenter.tsx
@@ -18,6 +18,7 @@ import {
   setIntegrationLoading,
   setIntegrationNotifications,
 } from '../../store/notificationSlice';
+import Button from '../ui/Button';
 import CoreNotificationCard from './CoreNotificationCard';
 import NotificationCard from './NotificationCard';
 
@@ -139,13 +140,15 @@ const NotificationCenter = () => {
           )}
         </div>
         {filteredUnreadCount > 0 && (
-          <button
+          <Button
+            variant="tertiary"
+            size="xs"
             onClick={() => {
               void handleMarkAllRead();
             }}
-            className="text-xs text-primary-600 hover:text-primary-700 font-medium transition-colors">
+            className="text-primary-600 hover:text-primary-700">
             {t('notifications.center.markAllRead')}
-          </button>
+          </Button>
         )}
       </div>
 
diff --git a/app/src/components/rewards/ReferralRewardsSection.tsx b/app/src/components/rewards/ReferralRewardsSection.tsx
index 1ff1e2d0d..2ea6ab2cd 100644
--- a/app/src/components/rewards/ReferralRewardsSection.tsx
+++ b/app/src/components/rewards/ReferralRewardsSection.tsx
@@ -6,6 +6,7 @@ import { useCoreState } from '../../providers/CoreStateProvider';
 import { referralApi } from '../../services/api/referralApi';
 import type { ReferralRelationshipStatus, ReferralStats } from '../../types/referral';
 import { LATEST_APP_DOWNLOAD_URL } from '../../utils/config';
+import Button from '../ui/Button';
 
 function formatUsd(n: number): string {
   return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
@@ -183,12 +184,13 @@ const ReferralRewardsSection = () => {
         {loadError ? (
           <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-800 dark:text-coral-200">
             {loadError}
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() => void loadStats()}
-              className="ml-2 underline font-medium">
+              className="ml-2 underline">
               {t('rewards.referralSection.retry')}
-            </button>
+            </Button>
           </div>
         ) : null}
 
@@ -272,15 +274,15 @@ const ReferralRewardsSection = () => {
               disabled={applyLoading}
               className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
             />
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="md"
               onClick={() => void handleApply()}
-              disabled={applyLoading || !applyCode.trim()}
-              className="rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50">
+              disabled={applyLoading || !applyCode.trim()}>
               {applyLoading
                 ? t('rewards.referralSection.applying')
                 : t('rewards.referralSection.apply')}
-            </button>
+            </Button>
           </div>
           {applyError ? (
             <p className="text-xs text-coral-600 dark:text-coral-300">{applyError}</p>
diff --git a/app/src/components/rewards/RewardsCommunityTab.tsx b/app/src/components/rewards/RewardsCommunityTab.tsx
index 713d03654..538ecad0c 100644
--- a/app/src/components/rewards/RewardsCommunityTab.tsx
+++ b/app/src/components/rewards/RewardsCommunityTab.tsx
@@ -8,6 +8,7 @@ import type { RewardsAchievement, RewardsSnapshot } from '../../types/rewards';
 import { DISCORD_INVITE_URL } from '../../utils/links';
 import { setOAuthReturnRoute } from '../../utils/oauthReturnRoute';
 import { openUrl } from '../../utils/openUrl';
+import Button from '../ui/Button';
 
 const log = createDebug('rewards:discord');
 
@@ -360,15 +361,16 @@ export default function RewardsCommunityTab({
                   {t('rewards.community.roleClaimDesc')}
                 </p>
               </div>
-              <button
-                type="button"
+              <Button
+                variant="primary"
+                size="md"
                 data-testid="rewards-claim-roles-join"
                 onClick={() => {
                   void openUrl(inviteUrl);
                 }}
-                className="inline-flex flex-shrink-0 items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-primary-700">
+                className="flex-shrink-0">
                 {t('rewards.community.joinDiscord')}
-              </button>
+              </Button>
             </div>
           ) : null}
           {isLoading ? (
diff --git a/app/src/components/rewards/RewardsCouponSection.tsx b/app/src/components/rewards/RewardsCouponSection.tsx
index 7029313bf..2ff2da5fa 100644
--- a/app/src/components/rewards/RewardsCouponSection.tsx
+++ b/app/src/components/rewards/RewardsCouponSection.tsx
@@ -5,6 +5,7 @@ import { useUser } from '../../hooks/useUser';
 import { useT } from '../../lib/i18n/I18nContext';
 import { useCoreState } from '../../providers/CoreStateProvider';
 import { type CreditBalance, creditsApi, type RedeemedCoupon } from '../../services/api/creditsApi';
+import Button from '../ui/Button';
 
 const log = createDebug('openhuman:rewards-coupons');
 
@@ -188,13 +189,13 @@ const RewardsCouponSection = () => {
               disabled={submitLoading}
               className="flex-1 px-4 py-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 font-mono text-stone-900 dark:text-neutral-100 placeholder:text-stone-400 dark:text-neutral-500 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary-500/40"
             />
-            <button
-              type="button"
+            <Button
+              variant="primary"
+              size="md"
               onClick={() => void handleRedeem()}
-              disabled={submitLoading || !couponCode.trim()}
-              className="rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-700 disabled:opacity-50">
+              disabled={submitLoading || !couponCode.trim()}>
               {submitLoading ? t('rewards.coupon.redeeming') : t('rewards.coupon.redeemButton')}
-            </button>
+            </Button>
           </div>
           {submitSuccess ? (
             <div className="rounded-xl border border-sage-200 dark:border-sage-500/30 bg-sage-50 dark:bg-sage-500/10 px-3 py-2 text-sm text-sage-800 dark:text-sage-200">
@@ -209,12 +210,13 @@ const RewardsCouponSection = () => {
           {loadError ? (
             <div className="rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-3 py-2 text-sm text-coral-800 dark:text-coral-200">
               {loadError}
-              <button
-                type="button"
+              <Button
+                variant="tertiary"
+                size="xs"
                 onClick={() => void loadCouponState()}
-                className="ml-2 font-medium underline">
+                className="ml-2 underline">
                 {t('common.retry')}
-              </button>
+              </Button>
             </div>
           ) : null}
         </div>
@@ -225,13 +227,14 @@ const RewardsCouponSection = () => {
             <h3 className="text-sm font-semibold text-stone-900 dark:text-neutral-100">
               {t('rewards.coupon.recentRedemptions')}
             </h3>
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() => void loadCouponState()}
               disabled={loading}
-              className="text-xs font-medium text-stone-500 dark:text-neutral-400 transition-colors hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 dark:hover:text-neutral-200 dark:text-neutral-200 disabled:opacity-50">
+              className="text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200">
               {t('common.refresh')}
-            </button>
+            </Button>
           </div>
 
           {loading && redeemedCoupons.length === 0 ? (
diff --git a/app/src/components/settings/LogoutAndClearActions.tsx b/app/src/components/settings/LogoutAndClearActions.tsx
index 827741bb9..4986ee3c8 100644
--- a/app/src/components/settings/LogoutAndClearActions.tsx
+++ b/app/src/components/settings/LogoutAndClearActions.tsx
@@ -4,6 +4,7 @@ import { useId, useState } from 'react';
 import { useT } from '../../lib/i18n/I18nContext';
 import { useCoreState } from '../../providers/CoreStateProvider';
 import { clearAllAppData } from '../../utils/clearAllAppData';
+import Button from '../ui/Button';
 import SettingsMenuItem from './components/SettingsMenuItem';
 
 const warnLog = debug('settings:account:warn');
@@ -145,15 +146,16 @@ const LogoutAndClearActions = () => {
             </div>
 
             <div className="flex gap-3">
-              <button
+              <Button
+                variant="secondary"
                 onClick={() => {
                   setShowLogoutAndClearModal(false);
                   setError(null);
                 }}
                 disabled={isLoading}
-                className="flex-1 px-4 py-2 rounded-lg border border-stone-200 dark:border-neutral-800 text-stone-700 dark:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 dark:hover:bg-neutral-800 transition-colors disabled:opacity-50">
+                className="flex-1">
                 {t('common.cancel')}
-              </button>
+              </Button>
               <button
                 onClick={handleLogoutAndClearData}
                 disabled={isLoading}
diff --git a/app/src/components/settings/controls/SettingsListItem.tsx b/app/src/components/settings/controls/SettingsListItem.tsx
index a015bf49f..475ff06cc 100644
--- a/app/src/components/settings/controls/SettingsListItem.tsx
+++ b/app/src/components/settings/controls/SettingsListItem.tsx
@@ -35,7 +35,7 @@ const SettingsListItem = ({
       {onRemove && (
         <Button
           type="button"
-          variant="ghost"
+          variant="tertiary"
           size="xs"
           onClick={onRemove}
           aria-label={removeLabel}
diff --git a/app/src/components/settings/modal/SettingsModalFrame.tsx b/app/src/components/settings/modal/SettingsModalFrame.tsx
index bf223a05c..1d946358f 100644
--- a/app/src/components/settings/modal/SettingsModalFrame.tsx
+++ b/app/src/components/settings/modal/SettingsModalFrame.tsx
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 
 import { useEscapeKey } from '../../../hooks/useEscapeKey';
 import { useT } from '../../../lib/i18n/I18nContext';
+import Button from '../../ui/Button';
 import { CloseIcon } from '../../ui/icons';
 
 interface SettingsModalFrameProps {
@@ -53,14 +54,16 @@ export function SettingsModalFrame({ onClose, children, labelledBy }: SettingsMo
       <div
         className="relative mx-4 flex h-[80vh] w-full max-w-5xl"
         onClick={event => event.stopPropagation()}>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          iconOnly
+          size="sm"
           aria-label={t('common.close')}
           data-testid="settings-modal-close"
           onClick={onClose}
-          className="absolute bottom-full right-0 mb-2 flex h-8 w-8 items-center justify-center rounded-full border border-stone-200 bg-white text-stone-500 shadow-md transition-colors hover:bg-stone-100 hover:text-stone-700 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
+          className="absolute bottom-full right-0 mb-2 h-8 w-8 rounded-full text-stone-500 shadow-md hover:text-stone-700 dark:text-neutral-400 dark:hover:text-neutral-200">
           <CloseIcon className="h-4 w-4" />
-        </button>
+        </Button>
         <div
           ref={dialogRef}
           role="dialog"
diff --git a/app/src/components/settings/panels/AIPanel.tsx b/app/src/components/settings/panels/AIPanel.tsx
index d531f408d..b137c3fdc 100644
--- a/app/src/components/settings/panels/AIPanel.tsx
+++ b/app/src/components/settings/panels/AIPanel.tsx
@@ -2210,7 +2210,7 @@ const CustomRoutingDialog = ({
           </div>
           <Button
             type="button"
-            variant="ghost"
+            variant="tertiary"
             size="xs"
             onClick={onClose}
             aria-label={t('common.close')}>
@@ -2317,12 +2317,13 @@ const CustomRoutingDialog = ({
                     {cloudModelsError}
                   </div>
                   <div className="flex items-center gap-2">
-                    <button
+                    <Button
                       type="button"
-                      onClick={() => setModelsKey(k => k + 1)}
-                      className="text-xs text-primary-600 dark:text-primary-400 hover:underline">
+                      variant="tertiary"
+                      size="xs"
+                      onClick={() => setModelsKey(k => k + 1)}>
                       {t('common.retry')}
-                    </button>
+                    </Button>
                     <span className="text-xs text-neutral-400 dark:text-neutral-500">
                       {t('settings.ai.enterModelIdManually')}
                     </span>
@@ -3251,17 +3252,19 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
                     className={`inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-medium ring-1 transition-colors ${tone}`}>
                     <span>{label}</span>
                     {enabled && (
-                      <button
+                      <Button
                         type="button"
+                        iconOnly
+                        variant="tertiary"
+                        size="xs"
                         aria-label={t('settings.ai.editEndpoint')}
                         title={t('settings.ai.editEndpoint')}
                         onClick={() => {
                           setKeyDialogFor(localKind);
                           setPendingLocalLabel(label);
-                        }}
-                        className="rounded p-0.5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
+                        }}>
                         <LuPencil className="h-3 w-3" />
-                      </button>
+                      </Button>
                     )}
                     <SettingsSwitch
                       id={`local-runtime-toggle-${localKind}`}
@@ -3830,11 +3833,14 @@ const CloudProviderEditor = ({
             <label className="flex items-center justify-between text-[10px] font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
               <span>{t('settings.ai.apiKeyFieldLabel')}</span>
               {hasExistingKey && (
-                <button
-                  onClick={() => void onClearKey(slug)}
-                  className="text-[10px] font-medium normal-case text-coral-600 dark:text-coral-300 hover:text-coral-700">
+                <Button
+                  variant="tertiary"
+                  tone="danger"
+                  size="xs"
+                  className="text-[10px] font-medium normal-case"
+                  onClick={() => void onClearKey(slug)}>
                   {t('settings.ai.clearStoredKey')}
-                </button>
+                </Button>
               )}
             </label>
             <SettingsTextField
diff --git a/app/src/components/settings/panels/AgentEditorPage.tsx b/app/src/components/settings/panels/AgentEditorPage.tsx
index 5d6d805e4..7e429ce1d 100644
--- a/app/src/components/settings/panels/AgentEditorPage.tsx
+++ b/app/src/components/settings/panels/AgentEditorPage.tsx
@@ -534,13 +534,15 @@ function ToolsPickerModal({
               )}
             </p>
           </div>
-          <button
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="xs"
             type="button"
             aria-label={t('common.close')}
-            onClick={onClose}
-            className="rounded-full p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-neutral-300">
+            onClick={onClose}>
             <LuX className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="border-b border-neutral-200 px-4 py-3 dark:border-neutral-800">
diff --git a/app/src/components/settings/panels/AgentsPanel.tsx b/app/src/components/settings/panels/AgentsPanel.tsx
index 20b736b2f..a37ff749b 100644
--- a/app/src/components/settings/panels/AgentsPanel.tsx
+++ b/app/src/components/settings/panels/AgentsPanel.tsx
@@ -198,12 +198,18 @@ function AgentRow({
         {/* Built-in agents can't be edited — only custom agents expose Edit.
             Built-ins keep the toggle (enable/disable) and Reset (clear override). */}
         {isCustom && (
-          <Button type="button" variant="ghost" size="xs" onClick={onEdit}>
+          <Button type="button" variant="tertiary" size="xs" onClick={onEdit}>
             <LuPencil className="h-3 w-3 mr-1" />
             {t('settings.agents.edit')}
           </Button>
         )}
-        <Button type="button" variant="danger" size="xs" disabled={busy} onClick={onRemove}>
+        <Button
+          type="button"
+          variant="secondary"
+          tone="danger"
+          size="xs"
+          disabled={busy}
+          onClick={onRemove}>
           {isCustom ? (
             <LuTrash2 className="h-3 w-3 mr-1" />
           ) : (
diff --git a/app/src/components/settings/panels/AnalysisViewsPanel.tsx b/app/src/components/settings/panels/AnalysisViewsPanel.tsx
index cd5f062e1..7b3293812 100644
--- a/app/src/components/settings/panels/AnalysisViewsPanel.tsx
+++ b/app/src/components/settings/panels/AnalysisViewsPanel.tsx
@@ -9,8 +9,8 @@ import GraphCohesionTab from '../../intelligence/GraphCohesionTab';
 import MemoryFreshnessTab from '../../intelligence/MemoryFreshnessTab';
 import MemoryTimelineTab from '../../intelligence/MemoryTimelineTab';
 import NamespaceOverviewTab from '../../intelligence/NamespaceOverviewTab';
+import ChipTabs from '../../layout/ChipTabs';
 import PanelPage from '../../layout/PanelPage';
-import PillTabBar from '../../PillTabBar';
 import SettingsBackButton from '../components/SettingsBackButton';
 import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
 
@@ -55,11 +55,11 @@ const AnalysisViewsPanel = () => {
       description={t('settings.analysisViews.menuDesc')}
       leading={<SettingsBackButton onBack={navigateBack} />}>
       <div className="p-4 space-y-4">
-        <PillTabBar
-          items={views.map(view => ({ label: view.label, value: view.id }))}
-          selected={activeView}
+        <ChipTabs<AnalysisView>
+          items={views.map(view => ({ id: view.id, label: view.label }))}
+          value={activeView}
           onChange={setActiveView}
-          containerClassName="flex flex-wrap gap-2 pb-1"
+          className="flex flex-wrap gap-2 pb-1"
         />
 
         {activeView === 'diagram' && <DiagramViewerTab />}
diff --git a/app/src/components/settings/panels/ApprovalHistoryPanel.tsx b/app/src/components/settings/panels/ApprovalHistoryPanel.tsx
index 341867a20..b001dd267 100644
--- a/app/src/components/settings/panels/ApprovalHistoryPanel.tsx
+++ b/app/src/components/settings/panels/ApprovalHistoryPanel.tsx
@@ -114,7 +114,7 @@ const ApprovalHistoryPanel = () => {
             <SettingsStatusLine saving={false} error={error} savingLabel="" />
             <Button
               type="button"
-              variant="ghost"
+              variant="tertiary"
               size="xs"
               onClick={handleRefresh}
               className="text-primary-600 dark:text-primary-400">
diff --git a/app/src/components/settings/panels/AutocompleteDebugPanel.tsx b/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
index 520a06206..7b10d7220 100644
--- a/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
+++ b/app/src/components/settings/panels/AutocompleteDebugPanel.tsx
@@ -540,7 +540,8 @@ const AutocompleteDebugPanel = () => {
             </Button>
             <Button
               type="button"
-              variant="danger"
+              variant="secondary"
+              tone="danger"
               size="sm"
               onClick={() => void stop()}
               disabled={!status?.running}>
@@ -700,7 +701,8 @@ const AutocompleteDebugPanel = () => {
           <div className="flex justify-end">
             <Button
               type="button"
-              variant="danger"
+              variant="secondary"
+              tone="danger"
               size="xs"
               onClick={() => void clearHistory()}
               disabled={isClearingHistory || historyEntries.length === 0}>
diff --git a/app/src/components/settings/panels/AutocompletePanel.tsx b/app/src/components/settings/panels/AutocompletePanel.tsx
index 87d74283a..1bf7ff2c7 100644
--- a/app/src/components/settings/panels/AutocompletePanel.tsx
+++ b/app/src/components/settings/panels/AutocompletePanel.tsx
@@ -358,7 +358,8 @@ const AutocompletePanel = () => {
           </Button>
           <Button
             type="button"
-            variant="danger"
+            variant="secondary"
+            tone="danger"
             size="sm"
             onClick={() => void stop()}
             disabled={!status?.running}>
@@ -376,15 +377,18 @@ const AutocompletePanel = () => {
       />
 
       {/* ── Advanced link ────────────────────────────────────────────── */}
-      <button
+      <Button
         type="button"
+        variant="tertiary"
+        size="xs"
         onClick={() => navigateToSettings('autocomplete-debug')}
-        className="flex items-center gap-1.5 text-xs text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors">
+        trailingIcon={
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        }>
         {t('autocomplete.advancedSettings')}
-        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-        </svg>
-      </button>
+      </Button>
     </SettingsPanel>
   );
 };
diff --git a/app/src/components/settings/panels/AutonomyPanel.tsx b/app/src/components/settings/panels/AutonomyPanel.tsx
index 14a06bebf..0b4de9cdf 100644
--- a/app/src/components/settings/panels/AutonomyPanel.tsx
+++ b/app/src/components/settings/panels/AutonomyPanel.tsx
@@ -139,7 +139,7 @@ const AutonomyRateLimitSection = () => {
                 <Button
                   key={p.value}
                   type="button"
-                  variant="ghost"
+                  variant="tertiary"
                   size="xs"
                   onClick={() => applyPreset(p.value)}>
                   {p.labelKey ? t(p.labelKey) : p.label}
diff --git a/app/src/components/settings/panels/CompanionPanel.tsx b/app/src/components/settings/panels/CompanionPanel.tsx
index d8c1298fe..d608050ab 100644
--- a/app/src/components/settings/panels/CompanionPanel.tsx
+++ b/app/src/components/settings/panels/CompanionPanel.tsx
@@ -113,7 +113,8 @@ const CompanionPanel = () => {
             sessionActive ? (
               <Button
                 type="button"
-                variant="danger"
+                variant="secondary"
+                tone="danger"
                 size="sm"
                 onClick={handleStop}
                 disabled={isStopping}>
diff --git a/app/src/components/settings/panels/DesktopAgentPanel.tsx b/app/src/components/settings/panels/DesktopAgentPanel.tsx
index 4991358b9..be756865d 100644
--- a/app/src/components/settings/panels/DesktopAgentPanel.tsx
+++ b/app/src/components/settings/panels/DesktopAgentPanel.tsx
@@ -16,6 +16,7 @@ import {
   openhumanUpdateVoiceServerSettings,
   syncNotchVisibility,
 } from '../../../utils/tauriCommands';
+import Button from '../../ui/Button';
 import {
   SettingsBadge,
   type SettingsBadgeVariant,
@@ -267,16 +268,16 @@ const DesktopAgentPanel = () => {
                       {t('settings.desktopAgent.notRequiredOnOs')}
                     </span>
                   ) : canGrant ? (
-                    <button
-                      type="button"
+                    <Button
+                      variant="secondary"
+                      size="sm"
                       data-testid={`desktop-agent-grant-${kind}`}
                       onClick={() => void grant(kind)}
-                      disabled={busy}
-                      className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-1.5 text-xs text-primary-700 dark:text-primary-300 disabled:opacity-50">
+                      disabled={busy}>
                       {requestingKind === kind
                         ? t('settings.screenIntel.permissions.requesting')
                         : t('settings.desktopAgent.grant')}
-                    </button>
+                    </Button>
                   ) : null}
                 </div>
               }
@@ -380,16 +381,16 @@ const DesktopAgentPanel = () => {
       ) : null}
 
       <div className="flex flex-wrap gap-2">
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="md"
           data-testid="desktop-agent-recheck"
           onClick={() => void refresh()}
-          disabled={busy}
-          className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2 text-sm text-stone-700 dark:text-neutral-200 disabled:opacity-50">
+          disabled={busy}>
           {isLoading
             ? t('settings.screenIntel.permissions.refreshing')
             : t('settings.desktopAgent.recheck')}
-        </button>
+        </Button>
         {actionable.length > 0 ? (
           <button
             type="button"
diff --git a/app/src/components/settings/panels/DevWorkflowPanel.tsx b/app/src/components/settings/panels/DevWorkflowPanel.tsx
index 046f30352..35264cca3 100644
--- a/app/src/components/settings/panels/DevWorkflowPanel.tsx
+++ b/app/src/components/settings/panels/DevWorkflowPanel.tsx
@@ -596,7 +596,12 @@ const DevWorkflowPanel = () => {
                 disabled={running}>
                 {running ? t('settings.devWorkflow.running') : t('settings.devWorkflow.runNow')}
               </Button>
-              <Button type="button" variant="danger" size="xs" onClick={() => void handleRemove()}>
+              <Button
+                type="button"
+                variant="secondary"
+                tone="danger"
+                size="xs"
+                onClick={() => void handleRemove()}>
                 {t('settings.devWorkflow.remove')}
               </Button>
             </div>
diff --git a/app/src/components/settings/panels/DevicesPanel.tsx b/app/src/components/settings/panels/DevicesPanel.tsx
index 3234e64e1..73378dfe8 100644
--- a/app/src/components/settings/panels/DevicesPanel.tsx
+++ b/app/src/components/settings/panels/DevicesPanel.tsx
@@ -144,7 +144,8 @@ function ConfirmRevokeDialog({
           </Button>
           <Button
             type="button"
-            variant="danger"
+            variant="primary"
+            tone="danger"
             size="md"
             onClick={onConfirm}
             className="flex-1"
diff --git a/app/src/components/settings/panels/EmbeddingsPanel.tsx b/app/src/components/settings/panels/EmbeddingsPanel.tsx
index a0d09b1cb..b275bf90f 100644
--- a/app/src/components/settings/panels/EmbeddingsPanel.tsx
+++ b/app/src/components/settings/panels/EmbeddingsPanel.tsx
@@ -545,7 +545,8 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
                 {currentEntry?.requires_api_key && currentEntry.has_api_key && (
                   <Button
                     type="button"
-                    variant="danger"
+                    variant="secondary"
+                    tone="danger"
                     size="xs"
                     onClick={() => void handleClearKey()}>
                     {t('settings.embeddings.clearKey')}
@@ -734,7 +735,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
               <div className="flex gap-2">
                 <Button
                   type="button"
-                  variant="ghost"
+                  variant="tertiary"
                   size="xs"
                   onClick={() => setSetupProvider(null)}>
                   {t('settings.embeddings.cancel')}
@@ -778,10 +779,19 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
               {t('settings.embeddings.wipeBody')}
             </p>
             <div className="flex justify-end gap-2">
-              <Button type="button" variant="ghost" size="xs" onClick={() => setPendingWipe(null)}>
+              <Button
+                type="button"
+                variant="tertiary"
+                size="xs"
+                onClick={() => setPendingWipe(null)}>
                 {t('settings.embeddings.cancel')}
               </Button>
-              <Button type="button" variant="danger" size="xs" onClick={() => void confirmWipe()}>
+              <Button
+                type="button"
+                variant="primary"
+                tone="danger"
+                size="xs"
+                onClick={() => void confirmWipe()}>
                 {t('settings.embeddings.confirmWipe')}
               </Button>
             </div>
diff --git a/app/src/components/settings/panels/EventLogPanel.tsx b/app/src/components/settings/panels/EventLogPanel.tsx
index ee99db0ae..b66bdc747 100644
--- a/app/src/components/settings/panels/EventLogPanel.tsx
+++ b/app/src/components/settings/panels/EventLogPanel.tsx
@@ -257,7 +257,7 @@ const EventLogPanel = () => {
       {!autoScroll && (
         <Button
           type="button"
-          variant="ghost"
+          variant="tertiary"
           size="xs"
           onClick={() => {
             setAutoScroll(true);
diff --git a/app/src/components/settings/panels/McpServerPanel.tsx b/app/src/components/settings/panels/McpServerPanel.tsx
index 5035a63ab..d44fe11f5 100644
--- a/app/src/components/settings/panels/McpServerPanel.tsx
+++ b/app/src/components/settings/panels/McpServerPanel.tsx
@@ -242,7 +242,7 @@ const McpServerPanel = ({ embedded = false }: McpServerPanelProps = {}) => {
             {isTauri() && (
               <Button
                 type="button"
-                variant="ghost"
+                variant="tertiary"
                 size="xs"
                 onClick={() => void handleOpenConfig()}>
                 {t('settings.mcpServer.openConfigFile')}
diff --git a/app/src/components/settings/panels/MemoryDebugPanel.tsx b/app/src/components/settings/panels/MemoryDebugPanel.tsx
index d3a87cdd3..814a41088 100644
--- a/app/src/components/settings/panels/MemoryDebugPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDebugPanel.tsx
@@ -249,7 +249,7 @@ const MemoryDebugPanel = () => {
                     </div>
                     <Button
                       type="button"
-                      variant="ghost"
+                      variant="tertiary"
                       size="xs"
                       disabled={Boolean(deleteLoadingId)}
                       onClick={() => void handleDelete(doc)}>
@@ -421,7 +421,8 @@ const MemoryDebugPanel = () => {
               )}
               <Button
                 type="button"
-                variant="danger"
+                variant="secondary"
+                tone="danger"
                 size="xs"
                 onClick={() => void handleClearNamespace()}
                 disabled={clearLoading || !clearNamespaceInput.trim()}>
diff --git a/app/src/components/settings/panels/MigrationPanel.tsx b/app/src/components/settings/panels/MigrationPanel.tsx
index fe5612323..96c97ffe5 100644
--- a/app/src/components/settings/panels/MigrationPanel.tsx
+++ b/app/src/components/settings/panels/MigrationPanel.tsx
@@ -188,7 +188,7 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
             </Button>
             <Button
               type="button"
-              variant="ghost"
+              variant="tertiary"
               size="sm"
               data-testid="migration-apply-button"
               onClick={() => void runApply()}
diff --git a/app/src/components/settings/panels/ModelHealthPanel.tsx b/app/src/components/settings/panels/ModelHealthPanel.tsx
index 6e2ceaa22..0c54b399e 100644
--- a/app/src/components/settings/panels/ModelHealthPanel.tsx
+++ b/app/src/components/settings/panels/ModelHealthPanel.tsx
@@ -271,7 +271,7 @@ const ModelHealthPanel = () => {
                         {isReplace && candidates.length > 0 && (
                           <Button
                             type="button"
-                            variant="ghost"
+                            variant="tertiary"
                             size="xs"
                             className="ml-1 text-amber-400 hover:text-amber-300"
                             onClick={() => setSwapTarget(m)}>
diff --git a/app/src/components/settings/panels/PermissionsPanel.tsx b/app/src/components/settings/panels/PermissionsPanel.tsx
index 52ea10e0f..83ff9fce6 100644
--- a/app/src/components/settings/panels/PermissionsPanel.tsx
+++ b/app/src/components/settings/panels/PermissionsPanel.tsx
@@ -317,13 +317,14 @@ const PermissionsPanel = () => {
                       {agentPaths?.action_dir ?? '~/OpenHuman/projects'}
                     </p>
                     {!actionDirEnvLocked && (
-                      <button
-                        type="button"
-                        className="text-xs font-medium text-ocean hover:underline"
+                      <Button
+                        variant="tertiary"
+                        size="xs"
+                        className="text-ocean hover:underline"
                         onClick={startEditActionDir}
                         data-testid="permissions-action-dir-edit">
                         {t('settings.agentAccess.actionDir.edit')}
-                      </button>
+                      </Button>
                     )}
                   </div>
                 )}
diff --git a/app/src/components/settings/panels/ProfilesPanel.tsx b/app/src/components/settings/panels/ProfilesPanel.tsx
index 05209e7c7..87c59107a 100644
--- a/app/src/components/settings/panels/ProfilesPanel.tsx
+++ b/app/src/components/settings/panels/ProfilesPanel.tsx
@@ -153,7 +153,7 @@ const ProfilesPanel = () => {
                       {!profile.builtIn && (
                         <Button
                           type="button"
-                          variant="ghost"
+                          variant="tertiary"
                           size="sm"
                           onClick={() => void remove(profile.id)}>
                           {t('common.delete')}
diff --git a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
index 7e17a47d2..4f0f957ce 100644
--- a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
+++ b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
@@ -567,15 +567,16 @@ const RecoveryPhrasePanel = () => {
                   </>
                 )}
               </Button>
-              <button
+              <Button
                 type="button"
+                variant="tertiary"
                 onClick={() => {
                   setViewMnemonic(null);
                   setViewRevealed(false);
                 }}
-                className="w-full text-center text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
+                className="w-full">
                 {t('mnemonic.hidePhrase')}
-              </button>
+              </Button>
             </div>
           ) : (
             <>
@@ -679,20 +680,14 @@ const RecoveryPhrasePanel = () => {
       </Button>
 
       {/* Import instead */}
-      <button
-        type="button"
-        onClick={handleImportReplace}
-        className="w-full text-center text-sm text-primary-400 hover:text-primary-600 dark:text-primary-300 transition-colors">
+      <Button type="button" variant="tertiary" onClick={handleImportReplace} className="w-full">
         {t('mnemonic.alreadyHavePhrase')}
-      </button>
+      </Button>
 
       {/* Cancel */}
-      <button
-        type="button"
-        onClick={() => setMode('view')}
-        className="w-full text-center text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors">
+      <Button type="button" variant="tertiary" onClick={() => setMode('view')} className="w-full">
         {t('common.cancel')}
-      </button>
+      </Button>
     </div>
   );
 
@@ -801,12 +796,13 @@ const RecoveryPhrasePanel = () => {
         )}
       </Button>
 
-      <button
+      <Button
         type="button"
+        variant="tertiary"
         onClick={() => switchMode('import')}
-        className="w-full text-center text-sm text-primary-400 hover:text-primary-600 dark:text-primary-300 transition-colors mb-3">
+        className="w-full mb-3">
         {t('mnemonic.alreadyHavePhrase')}
-      </button>
+      </Button>
 
       <label className="flex items-start gap-3 cursor-pointer mb-4">
         <SettingsCheckbox
@@ -893,12 +889,13 @@ const RecoveryPhrasePanel = () => {
         </div>
       )}
 
-      <button
+      <Button
         type="button"
+        variant="tertiary"
         onClick={() => switchMode('generate')}
-        className="w-full text-center text-sm text-primary-400 hover:text-primary-600 dark:text-primary-300 transition-colors mb-3">
+        className="w-full mb-3">
         {t('mnemonic.generateNewPhrase')}
-      </button>
+      </Button>
     </>
   );
 
diff --git a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
index 395363069..c1d37dfc7 100644
--- a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
+++ b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
@@ -236,7 +236,8 @@ const ScreenIntelligencePanel = () => {
               </Button>
               <Button
                 type="button"
-                variant="danger"
+                variant="secondary"
+                tone="danger"
                 size="sm"
                 onClick={() => void stopSession('manual_stop')}
                 disabled={stopDisabled}>
diff --git a/app/src/components/settings/panels/SearchPanel.tsx b/app/src/components/settings/panels/SearchPanel.tsx
index 41dce4706..c67752846 100644
--- a/app/src/components/settings/panels/SearchPanel.tsx
+++ b/app/src/components/settings/panels/SearchPanel.tsx
@@ -534,7 +534,7 @@ const KeyEditor = ({
           {t('settings.search.save')}
         </Button>
         {configured && (
-          <Button type="button" variant="danger" size="xs" onClick={onClear}>
+          <Button type="button" variant="secondary" tone="danger" size="xs" onClick={onClear}>
             {t('settings.search.clear')}
           </Button>
         )}
diff --git a/app/src/components/settings/panels/TaskSourcesPanel.tsx b/app/src/components/settings/panels/TaskSourcesPanel.tsx
index b8e9fe9d7..19675faaf 100644
--- a/app/src/components/settings/panels/TaskSourcesPanel.tsx
+++ b/app/src/components/settings/panels/TaskSourcesPanel.tsx
@@ -559,7 +559,8 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
                   </Button>
                   <Button
                     type="button"
-                    variant="danger"
+                    variant="secondary"
+                    tone="danger"
                     size="xs"
                     disabled={busyKey !== null}
                     onClick={() => void removeSource(source)}>
@@ -574,7 +575,7 @@ const TaskSourcesPanel = ({ embedded = false }: TaskSourcesPanelProps) => {
         <div className="px-4 py-3 border-t border-neutral-100 dark:border-neutral-800">
           <Button
             type="button"
-            variant="ghost"
+            variant="tertiary"
             size="xs"
             disabled={loading || busyKey !== null}
             onClick={() => void load()}>
diff --git a/app/src/components/settings/panels/TeamInvitesPanel.tsx b/app/src/components/settings/panels/TeamInvitesPanel.tsx
index d0b819332..75614734d 100644
--- a/app/src/components/settings/panels/TeamInvitesPanel.tsx
+++ b/app/src/components/settings/panels/TeamInvitesPanel.tsx
@@ -197,7 +197,7 @@ const TeamInvitesPanel = () => {
                         {/* Copy */}
                         <Button
                           type="button"
-                          variant="ghost"
+                          variant="tertiary"
                           size="xs"
                           onClick={() => void handleCopy(invite.code, invite._id)}
                           disabled={status !== 'active'}
@@ -234,7 +234,7 @@ const TeamInvitesPanel = () => {
                         {isAdmin && status === 'active' && (
                           <Button
                             type="button"
-                            variant="ghost"
+                            variant="tertiary"
                             size="xs"
                             onClick={() => handleRevoke(invite._id, invite.code)}
                             disabled={revokingId === invite._id}
@@ -320,9 +320,10 @@ const TeamInvitesPanel = () => {
                   </Button>
                   <Button
                     type="button"
-                    variant="danger"
+                    variant="primary"
+                    tone="danger"
                     size="md"
-                    className="flex-1 bg-coral-500 hover:bg-coral-600 text-white border-0 dark:bg-coral-500 dark:hover:bg-coral-600"
+                    className="flex-1"
                     onClick={() => void confirmRevokeInvite()}
                     disabled={revokingId === inviteToRevoke.id}>
                     {revokingId === inviteToRevoke.id
diff --git a/app/src/components/settings/panels/TeamManagementPanel.tsx b/app/src/components/settings/panels/TeamManagementPanel.tsx
index 621ddad68..9a1593362 100644
--- a/app/src/components/settings/panels/TeamManagementPanel.tsx
+++ b/app/src/components/settings/panels/TeamManagementPanel.tsx
@@ -320,9 +320,10 @@ const TeamManagementPanel = () => {
                   </Button>
                   <Button
                     type="button"
-                    variant="danger"
+                    variant="primary"
+                    tone="danger"
                     size="md"
-                    className="flex-1 bg-coral-500 hover:bg-coral-600 text-white border-0 dark:bg-coral-500 dark:hover:bg-coral-600"
+                    className="flex-1"
                     onClick={() => void handleDeleteTeam()}
                     disabled={isDeleting}>
                     {isDeleting ? t('team.deleting') : t('team.delete')}
diff --git a/app/src/components/settings/panels/TeamMembersPanel.tsx b/app/src/components/settings/panels/TeamMembersPanel.tsx
index e848cc3d5..b054fc0bf 100644
--- a/app/src/components/settings/panels/TeamMembersPanel.tsx
+++ b/app/src/components/settings/panels/TeamMembersPanel.tsx
@@ -210,7 +210,7 @@ const TeamMembersPanel = () => {
                     {isAdmin && !isCurrentUser(member) && (
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="tertiary"
                         size="xs"
                         onClick={() => handleRemoveMember(member)}
                         disabled={removingId === member._id}
@@ -276,9 +276,10 @@ const TeamMembersPanel = () => {
                 </Button>
                 <Button
                   type="button"
-                  variant="danger"
+                  variant="primary"
+                  tone="danger"
                   size="md"
-                  className="flex-1 bg-coral-500 hover:bg-coral-600 text-white border-0 dark:bg-coral-500 dark:hover:bg-coral-600"
+                  className="flex-1"
                   onClick={() => void confirmRemoveMember()}
                   disabled={removingId === memberToRemove._id}>
                   {removingId === memberToRemove._id ? t('team.removing') : t('team.removeAction')}
diff --git a/app/src/components/settings/panels/TeamPanel.tsx b/app/src/components/settings/panels/TeamPanel.tsx
index 880666739..f6d128399 100644
--- a/app/src/components/settings/panels/TeamPanel.tsx
+++ b/app/src/components/settings/panels/TeamPanel.tsx
@@ -235,7 +235,7 @@ const TeamPanel = () => {
           {canLeave && (
             <Button
               type="button"
-              variant="ghost"
+              variant="tertiary"
               size="xs"
               onClick={() => handleLeaveTeam(entry)}
               disabled={isLeaving === team._id}
@@ -346,7 +346,7 @@ const TeamPanel = () => {
                 </Button>
                 <Button
                   type="button"
-                  variant="ghost"
+                  variant="tertiary"
                   size="md"
                   className="flex-1 bg-amber-500 hover:bg-amber-600 text-white border-0 dark:bg-amber-500 dark:hover:bg-amber-600"
                   onClick={() => void confirmLeaveTeam()}
diff --git a/app/src/components/settings/panels/VoiceDebugPanel.tsx b/app/src/components/settings/panels/VoiceDebugPanel.tsx
index 9645ec582..abbc50bd2 100644
--- a/app/src/components/settings/panels/VoiceDebugPanel.tsx
+++ b/app/src/components/settings/panels/VoiceDebugPanel.tsx
@@ -124,7 +124,7 @@ const VoiceDebugPanel = () => {
           control={
             <div className="space-y-3">
               <div className="flex items-center justify-end">
-                <Button type="button" variant="ghost" size="xs" onClick={() => void loadData()}>
+                <Button type="button" variant="tertiary" size="xs" onClick={() => void loadData()}>
                   {t('common.refresh')}
                 </Button>
               </div>
diff --git a/app/src/components/settings/panels/WalletBalancesPanel.tsx b/app/src/components/settings/panels/WalletBalancesPanel.tsx
index 6ea0cca30..9fc27550c 100644
--- a/app/src/components/settings/panels/WalletBalancesPanel.tsx
+++ b/app/src/components/settings/panels/WalletBalancesPanel.tsx
@@ -129,11 +129,14 @@ const BalanceRow = ({ balance, onSend, onReceive }: BalanceRowProps) => {
             <span className="font-mono text-[11px] text-neutral-500 dark:text-neutral-400 truncate">
               {truncateAddress(balance.address)}
             </span>
-            <button
+            <Button
               type="button"
+              iconOnly
+              variant="tertiary"
+              size="sm"
               onClick={() => void handleCopyAddress()}
               aria-label={t('walletBalances.copyAddress')}
-              className="shrink-0 text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors">
+              className="shrink-0 text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300">
               {copied ? (
                 <svg
                   className="w-3.5 h-3.5 text-sage-500"
@@ -157,7 +160,7 @@ const BalanceRow = ({ balance, onSend, onReceive }: BalanceRowProps) => {
                   />
                 </svg>
               )}
-            </button>
+            </Button>
           </div>
         </div>
 
@@ -388,12 +391,13 @@ const WalletBalancesPanel = () => {
                 <p className="text-xs text-amber-700 dark:text-amber-300 leading-relaxed">
                   {t('walletBalances.setupHint')}
                 </p>
-                <button
+                <Button
                   type="button"
+                  variant="tertiary"
                   onClick={() => navigateToSettings('recovery-phrase')}
-                  className="mt-2 text-xs font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
+                  className="mt-2 text-xs font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
                   {t('walletBalances.setupCta')}
-                </button>
+                </Button>
               </div>
             </div>
           </div>
@@ -457,7 +461,7 @@ const WalletBalancesPanel = () => {
       action={
         <Button
           type="button"
-          variant="ghost"
+          variant="tertiary"
           size="sm"
           onClick={() => void loadBalances()}
           disabled={loading}
diff --git a/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx b/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx
index e89fe6a7d..2114790b7 100644
--- a/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx
+++ b/app/src/components/settings/panels/ai/ClaudeCodeStatusCard.tsx
@@ -9,6 +9,7 @@ import {
   openhumanClaudeCodeSetFullAccess,
   openhumanClaudeCodeSettings,
 } from '../../../../utils/tauriCommands/config';
+import Button from '../../../ui/Button';
 
 /**
  * Claude Code CLI connect control — the peer of the Codex connect button.
@@ -83,13 +84,13 @@ export function ClaudeCodeConnect({
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        size="sm"
         onClick={() => setOpen(true)}
-        className="inline-flex items-center gap-2 rounded-lg border border-stone-200 bg-white px-3 py-2 text-xs font-medium text-stone-900 transition-colors hover:bg-stone-50 disabled:cursor-wait disabled:opacity-60 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800">
-        <LuKeyRound className="h-3.5 w-3.5" />
+        leadingIcon={<LuKeyRound className="h-3.5 w-3.5" />}>
         {t('settings.ai.claudeCode.button')}
-      </button>
+      </Button>
       <span className="text-xs text-stone-500 dark:text-neutral-400">
         <InlineSummary connected={connected} auth={shownAuth} loading={authLoading} />
       </span>
@@ -275,13 +276,14 @@ function ClaudeCodeModal({
               {t('settings.ai.claudeCode.modalDescription')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="xs"
             onClick={onClose}
-            aria-label={t('settings.ai.claudeCode.close')}
-            className="rounded-md p-1 text-stone-400 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
+            aria-label={t('settings.ai.claudeCode.close')}>
             <LuX className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         {/* Connection */}
@@ -302,15 +304,16 @@ function ClaudeCodeModal({
             </div>
           </div>
           {connected ? (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              tone="danger"
+              size="sm"
               onClick={() => void onDisconnect()}
-              disabled={busy}
-              className="rounded-md border border-rose-300 px-2.5 py-1 text-xs font-medium text-rose-600 hover:bg-rose-50 disabled:opacity-50 dark:border-rose-500/40 dark:text-rose-400 dark:hover:bg-rose-500/10">
+              disabled={busy}>
               {busy
                 ? t('settings.ai.claudeCode.disconnecting')
                 : t('settings.ai.claudeCode.disconnect')}
-            </button>
+            </Button>
           ) : (
             <button
               type="button"
@@ -328,29 +331,29 @@ function ClaudeCodeModal({
             <span className="text-xs font-medium text-stone-900 dark:text-neutral-100">
               {t('settings.ai.claudeCode.authentication')}
             </span>
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() => void onRecheck()}
-              disabled={authLoading}
-              className="text-xs text-neutral-500 hover:text-neutral-900 disabled:opacity-50 dark:text-neutral-400 dark:hover:text-neutral-100">
+              disabled={authLoading}>
               {authLoading
                 ? t('settings.ai.claudeCode.checking')
                 : t('settings.ai.claudeCode.recheck')}
-            </button>
+            </Button>
           </div>
           <AuthDetail auth={auth} loading={authLoading} />
           <div className="mt-2">
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={() => void launchLogin()}
-              disabled={launching}
-              className="rounded-md border border-neutral-300 px-2.5 py-1 text-xs font-medium text-neutral-700 hover:bg-neutral-100 disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800">
+              disabled={launching}>
               {launching
                 ? t('settings.ai.claudeCode.openingTerminal')
                 : auth?.source === 'none'
                   ? t('settings.ai.claudeCode.signIn')
                   : t('settings.ai.claudeCode.reconnect')}
-            </button>
+            </Button>
             <p className="mt-1.5 text-[11px] text-stone-500 dark:text-neutral-400">
               {t('settings.ai.claudeCode.loginHint')}
             </p>
diff --git a/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx b/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
index f4c9b5627..8f86b3c2b 100644
--- a/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
+++ b/app/src/components/settings/panels/autocomplete/AppFilterSection.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../../../lib/i18n/I18nContext';
 import type { AutocompleteStatus } from '../../../../utils/tauriCommands';
+import Button from '../../../ui/Button';
 
 interface AppFilterSectionProps {
   status: AutocompleteStatus | null;
@@ -82,15 +83,11 @@ const AppFilterSection = ({
           </div>
         </div>
         <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={onRefreshStatus}
-            disabled={isLoading}
-            className="rounded-lg border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 px-3 py-2 text-sm text-neutral-800 dark:text-neutral-200 disabled:opacity-50">
+          <Button variant="secondary" size="md" onClick={onRefreshStatus} disabled={isLoading}>
             {isLoading
               ? t('settings.autocomplete.appFilter.refreshing')
               : t('settings.autocomplete.appFilter.refreshStatus')}
-          </button>
+          </Button>
           <button
             type="button"
             onClick={onStart}
@@ -98,13 +95,14 @@ const AppFilterSection = ({
             className="rounded-lg border border-green-500/60 bg-green-50 dark:bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-300 disabled:opacity-50">
             {t('autocomplete.start')}
           </button>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="md"
             onClick={onStop}
-            disabled={!status?.running}
-            className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300 disabled:opacity-50">
+            disabled={!status?.running}>
             {t('autocomplete.stop')}
-          </button>
+          </Button>
         </div>
       </section>
 
@@ -124,12 +122,9 @@ const AppFilterSection = ({
           />
         </div>
         <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={onTestCurrent}
-            className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300">
+          <Button variant="primary" size="md" onClick={onTestCurrent}>
             {t('settings.autocomplete.appFilter.getSuggestion')}
-          </button>
+          </Button>
           <button
             type="button"
             onClick={onAcceptSuggestion}
@@ -155,12 +150,9 @@ const AppFilterSection = ({
           <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
             {t('settings.autocomplete.appFilter.liveLogs')}
           </h3>
-          <button
-            type="button"
-            onClick={onClearLogs}
-            className="rounded-lg border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 text-xs text-neutral-800 dark:text-neutral-200">
+          <Button variant="secondary" size="sm" onClick={onClearLogs}>
             {t('common.clear')}
-          </button>
+          </Button>
         </div>
         <pre className="max-h-56 overflow-auto rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200">
           {logs.length > 0 ? logs.join('\n') : t('settings.autocomplete.appFilter.noLogs')}
diff --git a/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx b/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
index 34e5ff4dd..2eef3c85b 100644
--- a/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
+++ b/app/src/components/settings/panels/autocomplete/CompletionStyleSection.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../../../lib/i18n/I18nContext';
 import type { AcceptedCompletion } from '../../../../utils/tauriCommands';
+import Button from '../../../ui/Button';
 
 interface CompletionStyleSectionProps {
   enabled: boolean;
@@ -171,13 +172,9 @@ const CompletionStyleSection = ({
             className="w-full rounded border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 p-2 text-xs text-neutral-800 dark:text-neutral-200"
           />
         </div>
-        <button
-          type="button"
-          onClick={onSaveConfig}
-          disabled={isSaving}
-          className="rounded-lg border border-primary-500/60 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-600 dark:text-primary-300 disabled:opacity-50">
+        <Button variant="primary" size="sm" onClick={onSaveConfig} disabled={isSaving}>
           {isSaving ? t('autocomplete.saving') : t('autocomplete.saveSettings')}
-        </button>
+        </Button>
       </section>
 
       <section className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 space-y-3">
@@ -185,15 +182,16 @@ const CompletionStyleSection = ({
           <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
             {t('settings.autocomplete.completionStyle.personalizationHistory')}
           </h3>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="sm"
             onClick={onClearHistory}
-            disabled={isClearingHistory || historyEntries.length === 0}
-            className="rounded-lg border border-red-500/60 bg-red-50 dark:bg-red-500/10 px-3 py-1.5 text-xs text-red-600 dark:text-red-300 disabled:opacity-40">
+            disabled={isClearingHistory || historyEntries.length === 0}>
             {isClearingHistory
               ? t('settings.autocomplete.completionStyle.clearing')
               : t('settings.autocomplete.completionStyle.clearHistory')}
-          </button>
+          </Button>
         </div>
         <p className="text-xs text-neutral-500 dark:text-neutral-400">
           {isHistoryLoading
diff --git a/app/src/components/settings/panels/billing/AutoRechargeSection.tsx b/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
index 39bb124b4..d42706f48 100644
--- a/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
+++ b/app/src/components/settings/panels/billing/AutoRechargeSection.tsx
@@ -281,7 +281,7 @@ const AutoRechargeSection = ({
           </p>
           <Button
             type="button"
-            variant="ghost"
+            variant="tertiary"
             size="xs"
             onClick={onAddCard}
             className="text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300">
@@ -366,7 +366,7 @@ const AutoRechargeSection = ({
                     {!card.isDefault && (
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="tertiary"
                         size="xs"
                         onClick={() => onSetDefault(card.id)}
                         disabled={!!settingDefaultId || !!deletingCardId}>
@@ -378,7 +378,8 @@ const AutoRechargeSection = ({
                       <div className="flex items-center gap-1">
                         <Button
                           type="button"
-                          variant="danger"
+                          variant="primary"
+                          tone="danger"
                           size="xs"
                           onClick={() => onDeleteCard(card.id)}
                           disabled={isDeleting}>
@@ -386,7 +387,7 @@ const AutoRechargeSection = ({
                         </Button>
                         <Button
                           type="button"
-                          variant="ghost"
+                          variant="tertiary"
                           size="xs"
                           onClick={() => setConfirmDeleteId(null)}>
                           {t('common.cancel')}
@@ -395,7 +396,7 @@ const AutoRechargeSection = ({
                     ) : (
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="tertiary"
                         size="xs"
                         onClick={() => setConfirmDeleteId(card.id)}
                         disabled={isDeleting || !!settingDefaultId}
diff --git a/app/src/components/settings/panels/billing/BillingHistoryTab.tsx b/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
index 4d8800a38..90c9aa491 100644
--- a/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
+++ b/app/src/components/settings/panels/billing/BillingHistoryTab.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../../../lib/i18n/I18nContext';
 import type { CreditTransaction } from '../../../../services/api/creditsApi';
+import Button from '../../../ui/Button';
 
 interface BillingHistoryTabProps {
   hasActive: boolean;
@@ -24,11 +25,13 @@ export default function BillingHistoryTab({
         </p>
         <div className="flex items-center justify-between gap-3">
           {hasActive && (
-            <button
+            <Button
+              variant="tertiary"
+              size="sm"
               onClick={onManageSubscription}
-              className="text-sm font-semibold text-primary-600 dark:text-primary-300 transition-colors hover:text-primary-700 dark:text-primary-300">
+              className="px-0 font-semibold text-primary-600 hover:bg-transparent hover:text-primary-700 dark:text-primary-300">
               {t('settings.billing.history.openPortal')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/app/src/components/settings/panels/cron/CoreJobList.tsx b/app/src/components/settings/panels/cron/CoreJobList.tsx
index 49214255c..8adc3fafb 100644
--- a/app/src/components/settings/panels/cron/CoreJobList.tsx
+++ b/app/src/components/settings/panels/cron/CoreJobList.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../../../lib/i18n/I18nContext';
 import type { CoreCronJob, CoreCronRun } from '../../../../utils/tauriCommands';
+import Button from '../../../ui/Button';
 
 interface CoreJobListProps {
   loading: boolean;
@@ -26,10 +27,6 @@ const CoreJobList = ({
   onEditCoreJob,
 }: CoreJobListProps) => {
   const { t } = useT();
-  const neutralButtonClassName =
-    'inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-lg border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 px-3 py-1.5 text-[13px] font-medium leading-5 text-stone-700 dark:text-stone-200 shadow-sm transition-colors hover:bg-stone-100 hover:text-stone-900 dark:hover:bg-stone-800 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-70 disabled:text-stone-500 dark:disabled:text-stone-400';
-  const removeButtonClassName =
-    'inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-lg border border-red-700/40 bg-red-600 px-3 py-1.5 text-[13px] font-medium leading-5 text-white shadow-sm transition-colors hover:bg-red-700 hover:text-white active:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500/30 disabled:cursor-not-allowed disabled:opacity-70';
 
   const toggleButtonLabel = (job: CoreCronJob) => {
     if (coreBusyKey === `core-toggle:${job.id}`) {
@@ -127,47 +124,58 @@ const CoreJobList = ({
               </div>
 
               <div className="flex flex-wrap gap-2">
-                <button
+                <Button
                   type="button"
+                  variant="secondary"
+                  size="sm"
                   data-testid={`cron-job-toggle-${job.id}`}
-                  className={neutralButtonClassName}
+                  className="whitespace-nowrap"
                   disabled={coreBusyKey === `core-toggle:${job.id}`}
                   onClick={() => onToggleCoreJob(job)}>
                   {toggleButtonLabel(job)}
-                </button>
-                <button
+                </Button>
+                <Button
                   type="button"
+                  variant="secondary"
+                  size="sm"
                   data-testid={`cron-job-run-${job.id}`}
-                  className={neutralButtonClassName}
+                  className="whitespace-nowrap"
                   disabled={coreBusyKey === `core-run:${job.id}`}
                   onClick={() => onRunCoreJob(job.id)}>
                   {runButtonLabel(job.id)}
-                </button>
-                <button
+                </Button>
+                <Button
                   type="button"
+                  variant="secondary"
+                  size="sm"
                   data-testid={`cron-job-view-runs-${job.id}`}
-                  className={neutralButtonClassName}
+                  className="whitespace-nowrap"
                   disabled={coreBusyKey === `core-runs:${job.id}`}
                   onClick={() => onLoadCoreRuns(job.id)}>
                   {viewRunsButtonLabel(job.id)}
-                </button>
+                </Button>
                 {onEditCoreJob && (
-                  <button
+                  <Button
                     type="button"
+                    variant="secondary"
+                    size="sm"
                     data-testid={`cron-job-edit-${job.id}`}
-                    className={neutralButtonClassName}
+                    className="whitespace-nowrap"
                     onClick={() => onEditCoreJob(job)}>
                     {t('settings.cron.jobs.edit')}
-                  </button>
+                  </Button>
                 )}
-                <button
+                <Button
                   type="button"
+                  variant="primary"
+                  tone="danger"
+                  size="sm"
                   data-testid={`cron-job-remove-${job.id}`}
-                  className={removeButtonClassName}
+                  className="whitespace-nowrap"
                   disabled={coreBusyKey === `core-remove:${job.id}`}
                   onClick={() => onRemoveCoreJob(job.id)}>
                   {removeButtonLabel(job.id)}
-                </button>
+                </Button>
               </div>
 
               {runs.length > 0 && (
diff --git a/app/src/components/settings/panels/cron/CronJobFormModal.tsx b/app/src/components/settings/panels/cron/CronJobFormModal.tsx
index dc3d52c71..b8fad8e92 100644
--- a/app/src/components/settings/panels/cron/CronJobFormModal.tsx
+++ b/app/src/components/settings/panels/cron/CronJobFormModal.tsx
@@ -15,6 +15,7 @@ import type {
   CoreCronSchedule,
   CronAddParams,
 } from '../../../../utils/tauriCommands/cron';
+import Button from '../../../ui/Button';
 
 const log = createDebug('app:settings:CronJobFormModal');
 
@@ -294,13 +295,17 @@ const CronJobFormModal = ({
         {/* Header */}
         <div className="px-6 py-4 border-b border-stone-200 dark:border-neutral-800 flex items-center justify-between">
           <h2 className="text-base font-semibold text-stone-900 dark:text-neutral-100">{title}</h2>
-          <button
+          <Button
             type="button"
+            variant="tertiary"
+            iconOnly
+            size="sm"
+            aria-label={t('settings.cron.jobs.formCancel')}
             data-testid="cron-form-cancel"
             onClick={onClose}
-            className="text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors text-xl leading-none">
+            className="text-xl leading-none text-stone-400 hover:text-stone-600 dark:text-neutral-500 dark:hover:text-neutral-300">
             &times;
-          </button>
+          </Button>
         </div>
 
         {/* Scrollable body */}
@@ -611,22 +616,21 @@ const CronJobFormModal = ({
 
         {/* Footer */}
         <div className="px-6 py-4 border-t border-stone-200 dark:border-neutral-800 flex items-center justify-end gap-3">
-          <button
+          <Button
             type="button"
+            variant="secondary"
             data-testid="cron-form-cancel"
             onClick={onClose}
-            disabled={saving}
-            className="px-4 py-2 rounded-md border border-stone-300 dark:border-neutral-700 text-sm text-stone-700 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800 transition-colors disabled:opacity-50">
+            disabled={saving}>
             {t('settings.cron.jobs.formCancel')}
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
             data-testid="cron-form-submit"
             onClick={() => void handleSubmit()}
-            disabled={!canSubmit}
-            className="px-4 py-2 rounded-md bg-primary-600 hover:bg-primary-500 text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+            disabled={!canSubmit}>
             {submitLabel}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/components/settings/panels/devices/PairPhoneModal.tsx b/app/src/components/settings/panels/devices/PairPhoneModal.tsx
index 7ad36c0dc..75bb4cfc3 100644
--- a/app/src/components/settings/panels/devices/PairPhoneModal.tsx
+++ b/app/src/components/settings/panels/devices/PairPhoneModal.tsx
@@ -192,7 +192,7 @@ const PairPhoneModal = ({ onClose, onPaired }: PairPhoneModalProps) => {
           </h3>
           <Button
             type="button"
-            variant="ghost"
+            variant="tertiary"
             size="xs"
             onClick={onClose}
             aria-label={t('common.close')}
@@ -246,7 +246,7 @@ const PairPhoneModal = ({ onClose, onPaired }: PairPhoneModalProps) => {
         {/* Footer */}
         {(state.kind === 'qr' || state.kind === 'error') && (
           <div className="px-5 pb-5">
-            <Button type="button" variant="ghost" size="md" onClick={onClose} className="w-full">
+            <Button type="button" variant="tertiary" size="md" onClick={onClose} className="w-full">
               {t('common.cancel')}
             </Button>
           </div>
@@ -321,7 +321,7 @@ function QrBody({
       {/* Details toggle */}
       <Button
         type="button"
-        variant="ghost"
+        variant="tertiary"
         size="xs"
         onClick={onToggleDetails}
         className="text-primary-500 hover:text-primary-600">
@@ -348,7 +348,7 @@ function QrBody({
               </p>
               <Button
                 type="button"
-                variant="ghost"
+                variant="tertiary"
                 size="xs"
                 onClick={() => {
                   void navigator.clipboard.writeText(qrUrl);
diff --git a/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx b/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
index 699811316..fe06d7f85 100644
--- a/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
+++ b/app/src/components/settings/panels/local-model/DeviceCapabilitySection.tsx
@@ -6,6 +6,7 @@ import {
   openhumanLocalAiApplyPreset,
   type PresetsResponse,
 } from '../../../../utils/tauriCommands';
+import Button from '../../../ui/Button';
 
 interface DeviceCapabilitySectionProps {
   presetsData: PresetsResponse | null;
@@ -175,15 +176,16 @@ const DeviceCapabilitySection = ({
               )}
               <div className="flex items-center gap-2 pt-1">
                 {onTriggerOllamaInstall && (
-                  <button
-                    type="button"
+                  <Button
+                    variant="primary"
+                    tone="danger"
+                    size="sm"
                     onClick={onTriggerOllamaInstall}
-                    disabled={isTriggeringInstall}
-                    className="px-3 py-1.5 text-xs rounded-md bg-red-600 hover:bg-red-700 disabled:opacity-60 text-white font-medium">
+                    disabled={isTriggeringInstall}>
                     {isTriggeringInstall
                       ? t('settings.localModel.deviceCapability.retrying')
                       : t('settings.localModel.deviceCapability.retryInstall')}
-                  </button>
+                  </Button>
                 )}
                 <a
                   href="https://ollama.com"
diff --git a/app/src/components/settings/panels/local-model/ModelStatusSection.tsx b/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
index 8b37532ea..e93f282fe 100644
--- a/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
+++ b/app/src/components/settings/panels/local-model/ModelStatusSection.tsx
@@ -205,14 +205,16 @@ const ModelStatusSection = ({
 
         {isInstallError && status?.error_detail && (
           <div className="space-y-1 pt-2 border-t border-amber-200 dark:border-amber-500/30">
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              tone="danger"
+              size="xs"
               onClick={onToggleErrorDetail}
-              className="text-xs text-red-700 dark:text-red-300 hover:text-red-600 dark:text-red-300 underline">
+              className="underline">
               {showErrorDetail
                 ? t('settings.localModel.status.hideErrorDetails')
                 : t('settings.localModel.status.showInstallErrorDetails')}
-            </button>
+            </Button>
             {showErrorDetail && (
               <pre className="max-h-40 overflow-auto rounded bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 p-2 text-[10px] text-red-700 dark:text-red-300 leading-tight whitespace-pre-wrap break-words">
                 {status.error_detail}
@@ -281,12 +283,13 @@ const ModelStatusSection = ({
               disabled={!canSave}>
               {t('localModel.ollamaServer.saveButton')}
             </Button>
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={onResetOllamaBaseUrl}
-              className="text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 underline">
+              className="underline">
               {t('localModel.ollamaServer.resetButton')}
-            </button>
+            </Button>
           </div>
         </div>
       </SettingsSection>
@@ -294,7 +297,7 @@ const ModelStatusSection = ({
       <SettingsSection title={t('settings.localModel.status.runtimeStatus')}>
         <div className="px-4 py-3 space-y-3">
           <div className="flex justify-end">
-            <Button type="button" variant="ghost" size="xs" onClick={onRefreshStatus}>
+            <Button type="button" variant="tertiary" size="xs" onClick={onRefreshStatus}>
               {t('common.refresh')}
             </Button>
           </div>
@@ -406,13 +409,16 @@ const ModelStatusSection = ({
 
           {status?.error_detail && (
             <div className="space-y-1">
-              <button
+              <Button
+                variant="tertiary"
+                tone="danger"
+                size="xs"
                 onClick={onToggleErrorDetail}
-                className="text-xs text-red-600 dark:text-red-300 hover:text-red-500 underline">
+                className="underline">
                 {showErrorDetail
                   ? t('settings.localModel.status.hideErrorDetails')
                   : t('settings.localModel.status.showErrorDetails')}
-              </button>
+              </Button>
               {showErrorDetail && (
                 <pre className="max-h-40 overflow-auto rounded bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 p-2 text-[10px] text-red-600 dark:text-red-300 leading-tight whitespace-pre-wrap break-words">
                   {status.error_detail}
diff --git a/app/src/components/settings/panels/wallet/ReceiveModal.tsx b/app/src/components/settings/panels/wallet/ReceiveModal.tsx
index cc40147ff..bbbc3c495 100644
--- a/app/src/components/settings/panels/wallet/ReceiveModal.tsx
+++ b/app/src/components/settings/panels/wallet/ReceiveModal.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { balanceNetworkLabel } from '../../../../features/wallet/walletDisplay';
 import { useT } from '../../../../lib/i18n/I18nContext';
 import type { BalanceInfo } from '../../../../services/walletApi';
+import Button from '../../../ui/Button';
 import { ModalShell } from '../../../ui/ModalShell';
 
 interface ReceiveModalProps {
@@ -70,12 +71,13 @@ const ReceiveModal = ({ balance, onClose }: ReceiveModalProps) => {
               data-testid="receive-address">
               {balance.address}
             </span>
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() => void handleCopy()}
-              className="shrink-0 text-xs font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
+              className="shrink-0 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
               {copied ? t('common.copied') : t('walletBalances.copyAddress')}
-            </button>
+            </Button>
           </div>
         </div>
         <div className="w-full rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 p-3">
diff --git a/app/src/components/settings/panels/wallet/SendCryptoModal.tsx b/app/src/components/settings/panels/wallet/SendCryptoModal.tsx
index 9ddf2a5b8..692d96425 100644
--- a/app/src/components/settings/panels/wallet/SendCryptoModal.tsx
+++ b/app/src/components/settings/panels/wallet/SendCryptoModal.tsx
@@ -13,6 +13,7 @@ import {
   type PreparedTransaction,
   prepareTransfer,
 } from '../../../../services/walletApi';
+import Button from '../../../ui/Button';
 import { ModalShell } from '../../../ui/ModalShell';
 
 interface SendCryptoModalProps {
@@ -175,14 +176,14 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
               </span>
             </div>
           </label>
-          <button
+          <Button
             type="button"
             onClick={() => void handleReview()}
             disabled={busy}
-            className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl disabled:opacity-60"
+            className="w-full"
             data-testid="send-review">
             {busy ? t('walletSend.preparing') : t('walletSend.review')}
-          </button>
+          </Button>
         </div>
       )}
 
@@ -221,24 +222,25 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
             </ul>
           )}
           <div className="flex gap-2">
-            <button
+            <Button
               type="button"
+              variant="secondary"
               onClick={() => {
                 setStep('form');
                 setPrepared(null);
               }}
               disabled={busy}
-              className="flex-1 py-2.5 text-sm font-medium rounded-xl border border-stone-300 dark:border-neutral-700 text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:opacity-60">
+              className="flex-1">
               {t('common.back')}
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
               onClick={() => void handleConfirm()}
               disabled={busy}
-              className="btn-primary flex-1 py-2.5 text-sm font-medium rounded-xl disabled:opacity-60"
+              className="flex-1"
               data-testid="send-confirm">
               {t('walletSend.confirmSend')}
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -298,12 +300,9 @@ const SendCryptoModal = ({ balance, onClose, onSuccess }: SendCryptoModalProps)
               {t('walletSend.viewExplorer')}
             </a>
           )}
-          <button
-            type="button"
-            onClick={handleDone}
-            className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl mt-1">
+          <Button type="button" onClick={handleDone} className="mt-1 w-full">
             {t('walletSend.done')}
-          </button>
+          </Button>
         </div>
       )}
     </ModalShell>
diff --git a/app/src/components/skills/AutocompleteSetupModal.tsx b/app/src/components/skills/AutocompleteSetupModal.tsx
index 4a6922091..ee41a4a86 100644
--- a/app/src/components/skills/AutocompleteSetupModal.tsx
+++ b/app/src/components/skills/AutocompleteSetupModal.tsx
@@ -15,6 +15,7 @@ import {
   openhumanAutocompleteStart,
 } from '../../utils/tauriCommands/autocomplete';
 import { settingsNavState } from '../settings/modal/settingsOverlay';
+import Button from '../ui/Button';
 import {
   SetupNotice,
   SetupSettingRow,
@@ -109,15 +110,16 @@ export default function AutocompleteSetupModal({ onClose }: Props) {
 
           {enableError && <SetupNotice tone="coral">{enableError}</SetupNotice>}
 
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="lg"
             onClick={() => void handleEnable()}
             disabled={isEnabling || (status !== null && !status.platform_supported)}
-            className="w-full rounded-xl bg-primary-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+            className="w-full">
             {isEnabling
               ? t('skills.setup.autocomplete.enabling')
               : t('skills.setup.autocomplete.enableBtn')}
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/app/src/components/skills/CreateSkillModal.tsx b/app/src/components/skills/CreateSkillModal.tsx
index 36dbb9936..95d20f4dc 100644
--- a/app/src/components/skills/CreateSkillModal.tsx
+++ b/app/src/components/skills/CreateSkillModal.tsx
@@ -21,6 +21,7 @@ import { createPortal } from 'react-dom';
 
 import { useT } from '../../lib/i18n/I18nContext';
 import { type WorkflowSummary } from '../../services/api/workflowsApi';
+import Button from '../ui/Button';
 import CreateWorkflowForm from './CreateWorkflowForm';
 
 const log = debug('skills:create-modal');
@@ -60,24 +61,20 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
     return () => document.removeEventListener('keydown', handler);
   }, [onClose, submitting]);
 
-  const handleStateChange = useCallback(
-    (state: { valid: boolean; submitting: boolean }) => {
-      setFormValid(state.valid);
-      setSubmitting(state.submitting);
-    },
-    []
-  );
+  const handleStateChange = useCallback((state: { valid: boolean; submitting: boolean }) => {
+    setFormValid(state.valid);
+    setSubmitting(state.submitting);
+  }, []);
 
   return createPortal(
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4"
-      onClick={(e) => {
+      onClick={e => {
         if (e.target === e.currentTarget && !submitting) {
           log('backdrop-click close');
           onClose();
         }
-      }}
-    >
+      }}>
       <div
         aria-hidden="true"
         className="absolute inset-0 bg-black/50 backdrop-blur-sm animate-fade-in"
@@ -93,23 +90,23 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
         role="dialog"
         aria-modal="true"
         aria-labelledby="create-skill-title"
-        className="relative w-full max-w-[520px] rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl animate-fade-in"
-      >
+        className="relative w-full max-w-[520px] rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl animate-fade-in">
         {/* Header */}
         <div className="flex items-start justify-between gap-3 border-b border-stone-100 dark:border-neutral-800 px-5 py-4">
           <div className="min-w-0 flex-1">
             <h2
               id="create-skill-title"
-              className="text-base font-semibold text-stone-900 dark:text-neutral-100 font-sans"
-            >
+              className="text-base font-semibold text-stone-900 dark:text-neutral-100 font-sans">
               {editing ? t('common.edit') : t('workflows.create.title')}
             </h2>
             <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
               {t('workflows.create.subtitle')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="md"
             onClick={() => {
               if (!submitting) {
                 log('close-button');
@@ -118,8 +115,7 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
             }}
             disabled={submitting}
             aria-label={t('common.close')}
-            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-600 dark:hover:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40"
-          >
+            className="h-8 w-8 flex-shrink-0 text-stone-400 dark:text-neutral-500">
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -128,7 +124,7 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
                 d="M6 18L18 6M6 6l12 12"
               />
             </svg>
-          </button>
+          </Button>
         </div>
 
         {/* Body — shared form component */}
@@ -144,26 +140,20 @@ export default function CreateSkillModal({ onClose, onCreated, editing }: Props)
 
         {/* Footer */}
         <div className="flex items-center justify-end gap-2 border-t border-stone-100 dark:border-neutral-800 px-5 py-3">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={submitting}
-            className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40"
-          >
+          <Button variant="tertiary" onClick={onClose} disabled={submitting}>
             {t('common.cancel')}
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
+            variant="primary"
             form={CREATE_FORM_ID}
-            disabled={!formValid || submitting}
-            className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
-          >
+            disabled={!formValid || submitting}>
             {submitting
               ? t('workflows.create.creating')
               : editing
                 ? t('common.save')
                 : t('workflows.create.createBtn')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>,
diff --git a/app/src/components/skills/CreateWorkflowForm.tsx b/app/src/components/skills/CreateWorkflowForm.tsx
index 2633da787..855fe74f9 100644
--- a/app/src/components/skills/CreateWorkflowForm.tsx
+++ b/app/src/components/skills/CreateWorkflowForm.tsx
@@ -43,10 +43,11 @@ import { useT } from '../../lib/i18n/I18nContext';
 import {
   type CreateWorkflowInput,
   type CreateWorkflowInputDef,
+  workflowsApi,
   type WorkflowScope,
   type WorkflowSummary,
-  workflowsApi,
 } from '../../services/api/workflowsApi';
+import Button from '../ui/Button';
 
 /** Mirrors `SkillCreateInputDef` shape used as wire payload, with one
  *  extra `localId` for stable React keys across re-renders (the wire
@@ -173,18 +174,18 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
     // undocumented [[inputs]] entry. The description is what the agent (and
     // the run form) shows to explain the input, so it's mandatory per row.
     const inputsValid = inputs.every(
-      (r) => NAME_RE.test(r.name.trim()) && r.description.trim().length > 0
+      r => NAME_RE.test(r.name.trim()) && r.description.trim().length > 0
     );
     const formValid = nameValid && descriptionValid && inputsValid && !submitting;
 
     const addRow = useCallback(() => {
-      setInputs((cur) => [...cur, newRow()]);
+      setInputs(cur => [...cur, newRow()]);
     }, []);
     const removeRow = useCallback((localId: string) => {
-      setInputs((cur) => cur.filter((r) => r.localId !== localId));
+      setInputs(cur => cur.filter(r => r.localId !== localId));
     }, []);
     const updateRow = useCallback((localId: string, patch: Partial<InputRow>) => {
-      setInputs((cur) => cur.map((r) => (r.localId === localId ? { ...r, ...patch } : r)));
+      setInputs(cur => cur.map(r => (r.localId === localId ? { ...r, ...patch } : r)));
     }, []);
 
     // Surface state to the wrapper for its submit button's disabled prop.
@@ -221,7 +222,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
           if (cancelled) return;
           if (desc.when_to_use) setWhenToUse(desc.when_to_use);
           setInputs(
-            desc.inputs.map((i) => {
+            desc.inputs.map(i => {
               nextLocalId += 1;
               return {
                 localId: `row-${nextLocalId}`,
@@ -264,11 +265,8 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         }
       }
       if (inputs.length > 0) {
-        payload.inputs = inputs.map<CreateWorkflowInputDef>((r) => {
-          const def: CreateWorkflowInputDef = {
-            name: r.name.trim(),
-            required: r.required,
-          };
+        payload.inputs = inputs.map<CreateWorkflowInputDef>(r => {
+          const def: CreateWorkflowInputDef = { name: r.name.trim(), required: r.required };
           const desc = r.description.trim();
           if (desc) def.description = desc;
           // Default 'string' on the Rust side, omit to keep payload tidy.
@@ -297,11 +295,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
 
     useImperativeHandle(
       ref,
-      () => ({
-        isValid: () => formValid,
-        isSubmitting: () => submitting,
-        submit,
-      }),
+      () => ({ isValid: () => formValid, isSubmitting: () => submitting, submit }),
       [formValid, submitting, submit]
     );
 
@@ -316,8 +310,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         <div>
           <label
             htmlFor="create-skill-name"
-            className="block text-xs font-medium text-stone-600 dark:text-neutral-300"
-          >
+            className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
             {t('skills.create.name')}
             <span className="text-coral-500"> *</span>
           </label>
@@ -326,7 +319,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
             ref={firstFieldRef}
             type="text"
             value={name}
-            onChange={(e) => setName(e.target.value)}
+            onChange={e => setName(e.target.value)}
             required
             readOnly={isEdit}
             maxLength={128}
@@ -349,15 +342,14 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         <div>
           <label
             htmlFor="create-skill-description"
-            className="block text-xs font-medium text-stone-600 dark:text-neutral-300"
-          >
+            className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
             {t('skills.create.description')}
             <span className="text-coral-500"> *</span>
           </label>
           <textarea
             id="create-skill-description"
             value={description}
-            onChange={(e) => setDescription(e.target.value)}
+            onChange={e => setDescription(e.target.value)}
             required
             rows={3}
             maxLength={500}
@@ -372,8 +364,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         <div>
           <label
             htmlFor="create-skill-when-to-use"
-            className="block text-xs font-medium text-stone-600 dark:text-neutral-300"
-          >
+            className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
             {t('skills.create.whenToUse')}
             <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">
               {t('skills.create.optional')}
@@ -382,7 +373,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
           <textarea
             id="create-skill-when-to-use"
             value={whenToUse}
-            onChange={(e) => setWhenToUse(e.target.value)}
+            onChange={e => setWhenToUse(e.target.value)}
             rows={2}
             maxLength={500}
             className="mt-1 w-full rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-sm text-stone-900 dark:text-neutral-100 shadow-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
@@ -408,21 +399,21 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                 {t('skills.create.optional')}
               </span>
             </label>
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               data-testid="create-skill-add-input"
               onClick={addRow}
-              className="text-xs font-medium text-primary-600 hover:text-primary-700"
-            >
+              className="px-0 text-primary-600 hover:bg-transparent hover:text-primary-700">
               + {t('skills.create.inputs.add')}
-            </button>
+            </Button>
           </div>
           <p className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">
             {t('skills.create.inputs.help')}
           </p>
           {inputs.length > 0 && (
             <div className="mt-2 space-y-2">
-              {inputs.map((row) => {
+              {inputs.map(row => {
                 const trimmed = row.name.trim();
                 const showNameErr = row.name.length > 0 && !NAME_RE.test(trimmed);
                 // A row is "in use" once it has a name; at that point its
@@ -433,14 +424,13 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                   <div
                     key={row.localId}
                     data-testid={`create-skill-input-row-${row.localId}`}
-                    className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-950/40 p-3"
-                  >
+                    className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-950/40 p-3">
                     <div className="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_1fr_auto]">
                       <div>
                         <input
                           type="text"
                           value={row.name}
-                          onChange={(e) => updateRow(row.localId, { name: e.target.value })}
+                          onChange={e => updateRow(row.localId, { name: e.target.value })}
                           maxLength={64}
                           placeholder={t('skills.create.inputs.row.namePlaceholder')}
                           aria-label={t('skills.create.inputs.row.name')}
@@ -456,9 +446,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                         <input
                           type="text"
                           value={row.description}
-                          onChange={(e) =>
-                            updateRow(row.localId, { description: e.target.value })
-                          }
+                          onChange={e => updateRow(row.localId, { description: e.target.value })}
                           maxLength={256}
                           placeholder={t('skills.create.inputs.row.descriptionPlaceholder')}
                           aria-label={t('skills.create.inputs.row.description')}
@@ -470,15 +458,17 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                           </p>
                         )}
                       </div>
-                      <button
-                        type="button"
+                      <Button
+                        iconOnly
+                        variant="tertiary"
+                        tone="danger"
+                        size="sm"
                         data-testid={`create-skill-remove-input-${row.localId}`}
                         onClick={() => removeRow(row.localId)}
                         aria-label={t('skills.create.inputs.row.remove')}
-                        className="self-center rounded-md px-2 py-1.5 text-xs text-stone-500 hover:bg-coral-100 hover:text-coral-700"
-                      >
+                        className="self-center">
                         🗑
-                      </button>
+                      </Button>
                     </div>
                     <div className="mt-2 flex items-center gap-3 text-[11px]">
                       <label className="flex items-center gap-1">
@@ -487,30 +477,21 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
                         </span>
                         <select
                           value={row.type}
-                          onChange={(e) =>
-                            updateRow(row.localId, {
-                              type: e.target.value as InputRow['type'],
-                            })
+                          onChange={e =>
+                            updateRow(row.localId, { type: e.target.value as InputRow['type'] })
                           }
                           aria-label={t('skills.create.inputs.row.type')}
-                          className="rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-1 py-0.5 text-[11px] text-stone-900 dark:text-neutral-100"
-                        >
+                          className="rounded border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-1 py-0.5 text-[11px] text-stone-900 dark:text-neutral-100">
                           <option value="string">{t('skills.create.inputs.type.string')}</option>
-                          <option value="integer">
-                            {t('skills.create.inputs.type.integer')}
-                          </option>
-                          <option value="boolean">
-                            {t('skills.create.inputs.type.boolean')}
-                          </option>
+                          <option value="integer">{t('skills.create.inputs.type.integer')}</option>
+                          <option value="boolean">{t('skills.create.inputs.type.boolean')}</option>
                         </select>
                       </label>
                       <label className="flex items-center gap-1">
                         <input
                           type="checkbox"
                           checked={row.required}
-                          onChange={(e) =>
-                            updateRow(row.localId, { required: e.target.checked })
-                          }
+                          onChange={e => updateRow(row.localId, { required: e.target.checked })}
                           className="h-3 w-3 accent-primary-500"
                         />
                         <span className="text-stone-500 dark:text-neutral-400">
@@ -529,8 +510,7 @@ const CreateWorkflowForm = forwardRef<CreateSkillFormHandle, CreateSkillFormProp
         {error ? (
           <div
             role="alert"
-            className="rounded-xl border border-coral-200 bg-coral-50 p-3 text-xs text-coral-900"
-          >
+            className="rounded-xl border border-coral-200 bg-coral-50 p-3 text-xs text-coral-900">
             <p className="font-semibold">{t('workflows.create.createError')}</p>
             <p className="mt-1 whitespace-pre-wrap font-mono">{error}</p>
           </div>
diff --git a/app/src/components/skills/InstallSkillDialog.tsx b/app/src/components/skills/InstallSkillDialog.tsx
index d207fc5cc..3313b350e 100644
--- a/app/src/components/skills/InstallSkillDialog.tsx
+++ b/app/src/components/skills/InstallSkillDialog.tsx
@@ -28,17 +28,18 @@
  *
  * Design mirrors `CreateSkillModal` — see `.claude/rules/15-settings-modal-system.md`.
  */
+import debug from 'debug';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import debug from 'debug';
 
 import { useT } from '../../lib/i18n/I18nContext';
+import { trackEvent } from '../../services/analytics';
 import {
-  workflowsApi,
   type InstallWorkflowFromUrlResult,
+  workflowsApi,
   type WorkflowSummary,
 } from '../../services/api/workflowsApi';
-import { trackEvent } from '../../services/analytics';
+import Button from '../ui/Button';
 
 const log = debug('skills:install-dialog');
 
@@ -259,14 +260,16 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 {t('skills.install.title')}
               </h2>
               <p className="mt-0.5 text-xs text-stone-500 dark:text-neutral-400">
-                {t('skills.install.subtitlePrefix')}{' '}
-                <code className="font-mono">SKILL.md</code> {t('skills.install.subtitleMiddle')}{' '}
+                {t('skills.install.subtitlePrefix')} <code className="font-mono">SKILL.md</code>{' '}
+                {t('skills.install.subtitleMiddle')}{' '}
                 <code className="font-mono">.openhuman/skills/</code>.{' '}
                 {t('skills.install.subtitleSuffix')}
               </p>
             </div>
-            <button
-              type="button"
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="md"
               onClick={() => {
                 if (!submitting) {
                   log('close-button');
@@ -275,7 +278,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
               }}
               disabled={submitting}
               aria-label={t('common.close')}
-              className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-600 dark:hover:text-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+              className="h-8 w-8 flex-shrink-0 text-stone-400 dark:text-neutral-500">
               <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -284,7 +287,7 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                   d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-            </button>
+            </Button>
           </div>
 
           {/* Body */}
@@ -294,7 +297,8 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
               <label
                 htmlFor="install-skill-url"
                 className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
-                {t('skills.install.urlLabel')}<span className="text-coral-500"> *</span>
+                {t('skills.install.urlLabel')}
+                <span className="text-coral-500"> *</span>
               </label>
               <input
                 id="install-skill-url"
@@ -312,13 +316,13 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
               />
               {url.trim() && !urlValid ? (
                 <p className="mt-1 text-[11px] text-coral-600">
-                  {t('skills.install.urlInvalidPrefix')}{' '}
-                  <code className="font-mono">https://</code> {t('skills.install.urlInvalidSuffix')}
+                  {t('skills.install.urlInvalidPrefix')} <code className="font-mono">https://</code>{' '}
+                  {t('skills.install.urlInvalidSuffix')}
                 </p>
               ) : (
                 <p className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">
-                  {t('skills.install.urlHelpPrefix')}{' '}
-                  <code className="font-mono">.md</code> {t('skills.install.urlHelpMiddle')}{' '}
+                  {t('skills.install.urlHelpPrefix')} <code className="font-mono">.md</code>{' '}
+                  {t('skills.install.urlHelpMiddle')}{' '}
                   <code className="font-mono">github.com/…/blob/…</code>{' '}
                   {t('skills.install.urlHelpSuffix')}
                   <code className="font-mono"> raw.githubusercontent.com</code>.
@@ -332,7 +336,9 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 htmlFor="install-skill-timeout"
                 className="block text-xs font-medium text-stone-600 dark:text-neutral-300">
                 {t('skills.install.timeoutLabel')}
-                <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">{t('skills.install.timeoutHint')}</span>
+                <span className="ml-1 font-normal text-stone-400 dark:text-neutral-500">
+                  {t('skills.install.timeoutHint')}
+                </span>
               </label>
               <input
                 id="install-skill-timeout"
@@ -368,8 +374,8 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                   className="h-3 w-3 flex-shrink-0 animate-spin rounded-full border-2 border-primary-300 border-t-primary-600"
                 />
                 <span>
-                  {t('skills.install.fetchingPrefix')}{' '}
-                  <code className="font-mono">SKILL.md</code>… {t('skills.install.fetchingSuffix')}
+                  {t('skills.install.fetchingPrefix')} <code className="font-mono">SKILL.md</code>…{' '}
+                  {t('skills.install.fetchingSuffix')}
                 </span>
               </div>
             ) : null}
@@ -400,7 +406,9 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 </div>
                 {result.stdout ? (
                   <details>
-                    <summary className="cursor-pointer font-semibold">{t('skills.install.fetchLog')}</summary>
+                    <summary className="cursor-pointer font-semibold">
+                      {t('skills.install.fetchLog')}
+                    </summary>
                     <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
                       {result.stdout}
                     </pre>
@@ -408,7 +416,9 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                 ) : null}
                 {result.stderr ? (
                   <details>
-                    <summary className="cursor-pointer font-semibold">{t('skills.install.parseWarnings')}</summary>
+                    <summary className="cursor-pointer font-semibold">
+                      {t('skills.install.parseWarnings')}
+                    </summary>
                     <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-sage-100 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
                       {result.stderr}
                     </pre>
@@ -429,7 +439,9 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
                       <p className="font-semibold">{cat.title}</p>
                       <p>{cat.hint}</p>
                       <details>
-                        <summary className="cursor-pointer font-semibold">{t('skills.install.rawError')}</summary>
+                        <summary className="cursor-pointer font-semibold">
+                          {t('skills.install.rawError')}
+                        </summary>
                         <pre className="mt-1 whitespace-pre-wrap rounded border border-coral-200 bg-white dark:bg-neutral-900 p-2 font-mono text-[11px] text-stone-800 dark:text-neutral-100">
                           {error}
                         </pre>
@@ -443,20 +455,13 @@ export default function InstallSkillDialog({ onClose, onInstalled }: Props) {
 
           {/* Footer */}
           <div className="flex items-center justify-end gap-2 border-t border-stone-100 dark:border-neutral-800 px-5 py-3">
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={submitting}
-              className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+            <Button variant="tertiary" onClick={onClose} disabled={submitting}>
               {result ? t('common.finish') : t('common.cancel')}
-            </button>
+            </Button>
             {result ? null : (
-              <button
-                type="submit"
-                disabled={!formValid}
-                className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50">
+              <Button type="submit" variant="primary" disabled={!formValid}>
                 {submitting ? t('skills.install.installing') : t('skills.install.installBtn')}
-              </button>
+              </Button>
             )}
           </div>
         </form>
diff --git a/app/src/components/skills/MeetingBotsCard.tsx b/app/src/components/skills/MeetingBotsCard.tsx
index ca579baaf..77669db1c 100644
--- a/app/src/components/skills/MeetingBotsCard.tsx
+++ b/app/src/components/skills/MeetingBotsCard.tsx
@@ -29,6 +29,7 @@ import {
   selectSelectedMascotId,
 } from '../../store/mascotSlice';
 import { selectPersonaDescription, selectPersonaDisplayName } from '../../store/personaSlice';
+import Button from '../ui/Button';
 import { RecentCallsSection } from './RecentCallsSection';
 
 type Toast = { type: 'success' | 'error' | 'info'; title: string; message?: string };
@@ -157,21 +158,14 @@ function ActiveMeetingView({ onToast }: Props) {
           {t('skills.meetingBots.liveBadge')}
         </span>
         {canLeave && (
-          <button
-            type="button"
-            onClick={handleLeave}
-            disabled={leaving}
-            className="rounded-xl px-3 py-1.5 text-xs font-medium bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed">
+          <Button variant="secondary" size="sm" onClick={handleLeave} disabled={leaving}>
             {t('skills.meetingBots.leaveButton')}
-          </button>
+          </Button>
         )}
         {isDone && (
-          <button
-            type="button"
-            onClick={() => dispatch(resetBackendMeet())}
-            className="rounded-xl px-3 py-1.5 text-xs font-medium bg-stone-100 dark:bg-neutral-800 text-stone-700 dark:text-neutral-300 hover:bg-stone-200 dark:hover:bg-neutral-700">
+          <Button variant="secondary" size="sm" onClick={() => dispatch(resetBackendMeet())}>
             {t('common.close')}
-          </button>
+          </Button>
         )}
       </div>
       <div className="flex items-center gap-4">
@@ -245,9 +239,7 @@ function MeetingBotsInline({ onToast, hasSubmittedRef }: MeetingBotsInlineProps)
     // so the mount-time fetch can race ahead of that write and miss the just-
     // ended call. A couple of short delayed re-fetches reliably reflect it
     // without the user having to reopen the tab. Cheap (a ~2ms RPC each).
-    const retries = [1200, 3000].map(delay =>
-      setTimeout(() => void refreshRecentCalls(), delay)
-    );
+    const retries = [1200, 3000].map(delay => setTimeout(() => void refreshRecentCalls(), delay));
     return () => retries.forEach(clearTimeout);
   }, [refreshRecentCalls]);
 
@@ -381,14 +373,14 @@ function MeetingBotsInline({ onToast, hasSubmittedRef }: MeetingBotsInlineProps)
         )}
 
         <div className="flex items-center justify-end gap-2 pt-1">
-          <button
+          <Button
             type="submit"
-            disabled={submitting || !meetUrl.trim() || !respondTo.trim()}
-            className="rounded-xl bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:cursor-not-allowed disabled:bg-stone-200 dark:disabled:bg-neutral-700 disabled:text-stone-400 dark:disabled:text-neutral-500">
+            variant="primary"
+            disabled={submitting || !meetUrl.trim() || !respondTo.trim()}>
             {submitting
               ? t('skills.meetingBots.starting')
               : t('skills.meetingBots.sendTo').replace('{label}', selectedLabel)}
-          </button>
+          </Button>
         </div>
       </form>
 
@@ -396,4 +388,3 @@ function MeetingBotsInline({ onToast, hasSubmittedRef }: MeetingBotsInlineProps)
     </div>
   );
 }
-
diff --git a/app/src/components/skills/RecentCallsSection.tsx b/app/src/components/skills/RecentCallsSection.tsx
index 19a3915c0..22e85bffe 100644
--- a/app/src/components/skills/RecentCallsSection.tsx
+++ b/app/src/components/skills/RecentCallsSection.tsx
@@ -90,7 +90,10 @@ function RecentCallRow({ call }: { call: MeetCallRecord }) {
       </div>
       {participants.length > 0 && (
         <div className="mt-0.5 truncate text-[10px] text-stone-500 dark:text-neutral-400">
-          {t('skills.meetingBots.recentCallParticipants').replace('{names}', participants.join(', '))}
+          {t('skills.meetingBots.recentCallParticipants').replace(
+            '{names}',
+            participants.join(', ')
+          )}
         </div>
       )}
     </li>
diff --git a/app/src/components/skills/ScheduledCronCard.test.tsx b/app/src/components/skills/ScheduledCronCard.test.tsx
index eb008ba65..8bf872c12 100644
--- a/app/src/components/skills/ScheduledCronCard.test.tsx
+++ b/app/src/components/skills/ScheduledCronCard.test.tsx
@@ -19,13 +19,12 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
+import type { CoreCronJob } from '../../utils/tauriCommands/cron';
+import ScheduledCronCard from './ScheduledCronCard';
+
 const stableT = (key: string) => key;
 vi.mock('../../lib/i18n/I18nContext', () => ({ useT: () => ({ t: stableT }) }));
 
-import type { CoreCronJob } from '../../utils/tauriCommands/cron';
-
-import ScheduledCronCard from './ScheduledCronCard';
-
 function makeJob(overrides: Partial<CoreCronJob> = {}): CoreCronJob {
   return {
     id: 'job-1',
@@ -50,13 +49,7 @@ function makeJob(overrides: Partial<CoreCronJob> = {}): CoreCronJob {
 
 describe('ScheduledCronCard', () => {
   it('renders the title, cronToHuman schedule, and meta row', () => {
-    render(
-      <ScheduledCronCard
-        job={makeJob()}
-        title="dev-workflow"
-        onToggle={() => undefined}
-      />
-    );
+    render(<ScheduledCronCard job={makeJob()} title="dev-workflow" onToggle={() => undefined} />);
     expect(screen.getByTestId('scheduled-cron-job-1-title')).toHaveTextContent('dev-workflow');
     // `*/30 * * * *` → "Every 30 minutes" per cronToHuman.
     expect(screen.getByTestId('scheduled-cron-job-1-schedule')).toHaveTextContent(
@@ -132,31 +125,19 @@ describe('ScheduledCronCard', () => {
   });
 
   it('renders the ×N count badge when badgeCount > 1', () => {
-    render(
-      <ScheduledCronCard
-        job={makeJob()}
-        badgeCount={3}
-        onToggle={() => undefined}
-      />
-    );
+    render(<ScheduledCronCard job={makeJob()} badgeCount={3} onToggle={() => undefined} />);
     expect(screen.getByTestId('scheduled-cron-job-1-count-badge')).toHaveTextContent('×3');
   });
 
   it('omits the count badge when badgeCount is 1 or absent', () => {
-    const { rerender } = render(
-      <ScheduledCronCard job={makeJob()} onToggle={() => undefined} />
-    );
+    const { rerender } = render(<ScheduledCronCard job={makeJob()} onToggle={() => undefined} />);
     expect(screen.queryByTestId('scheduled-cron-job-1-count-badge')).not.toBeInTheDocument();
-    rerender(
-      <ScheduledCronCard job={makeJob()} badgeCount={1} onToggle={() => undefined} />
-    );
+    rerender(<ScheduledCronCard job={makeJob()} badgeCount={1} onToggle={() => undefined} />);
     expect(screen.queryByTestId('scheduled-cron-job-1-count-badge')).not.toBeInTheDocument();
   });
 
   it('renders the ★ Active badge when activeBadge is true', () => {
-    render(
-      <ScheduledCronCard job={makeJob()} activeBadge onToggle={() => undefined} />
-    );
+    render(<ScheduledCronCard job={makeJob()} activeBadge onToggle={() => undefined} />);
     expect(screen.getByTestId('scheduled-cron-job-1-active-badge')).toBeInTheDocument();
   });
 
@@ -250,9 +231,7 @@ describe('ScheduledCronCard', () => {
       <ScheduledCronCard job={makeJob({ enabled: true })} onToggle={() => undefined} />
     );
     expect(screen.getByTestId('scheduled-cron-job-1')).toHaveAttribute('data-active', 'true');
-    rerender(
-      <ScheduledCronCard job={makeJob({ enabled: false })} onToggle={() => undefined} />
-    );
+    rerender(<ScheduledCronCard job={makeJob({ enabled: false })} onToggle={() => undefined} />);
     expect(screen.getByTestId('scheduled-cron-job-1')).toHaveAttribute('data-active', 'false');
   });
 });
diff --git a/app/src/components/skills/ScheduledCronCard.tsx b/app/src/components/skills/ScheduledCronCard.tsx
index b63954fea..78c064c2f 100644
--- a/app/src/components/skills/ScheduledCronCard.tsx
+++ b/app/src/components/skills/ScheduledCronCard.tsx
@@ -39,7 +39,6 @@
  */
 import { useT } from '../../lib/i18n/I18nContext';
 import type { CoreCronJob } from '../../utils/tauriCommands/cron';
-
 import { formatSchedule } from './scheduledCronFormat';
 
 export interface ScheduledCronCardProps {
@@ -117,34 +116,28 @@ export default function ScheduledCronCard({
         {activeBadge && (
           <span
             data-testid={`${rootId}-active-badge`}
-            className="px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-sage-200 dark:bg-sage-500/30 text-sage-800 dark:text-sage-200 shrink-0"
-          >
+            className="px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-sage-200 dark:bg-sage-500/30 text-sage-800 dark:text-sage-200 shrink-0">
             {`★ ${t('settings.skillsRunner.schedule.active')}`}
           </span>
         )}
         <span
           data-testid={`${rootId}-title`}
           className={`font-mono text-sm font-semibold truncate ${
-            isActive
-              ? 'text-sage-900 dark:text-sage-100'
-              : 'text-stone-700 dark:text-neutral-200'
-          }`}
-        >
+            isActive ? 'text-sage-900 dark:text-sage-100' : 'text-stone-700 dark:text-neutral-200'
+          }`}>
           {heading}
         </span>
         {badgeCount && badgeCount > 1 ? (
           <span
             data-testid={`${rootId}-count-badge`}
-            className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-stone-200 dark:bg-neutral-700 text-stone-700 dark:text-neutral-300 shrink-0"
-          >
+            className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-stone-200 dark:bg-neutral-700 text-stone-700 dark:text-neutral-300 shrink-0">
             ×{badgeCount}
           </span>
         ) : null}
       </div>
       <div
         data-testid={`${rootId}-schedule`}
-        className="mt-0.5 text-xs text-stone-600 dark:text-neutral-400"
-      >
+        className="mt-0.5 text-xs text-stone-600 dark:text-neutral-400">
         {formatSchedule(job)}
       </div>
       <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-500">
@@ -158,8 +151,7 @@ export default function ScheduledCronCard({
                   job.last_status === 'ok'
                     ? 'bg-sage-100 dark:bg-sage-500/20 text-sage-700 dark:text-sage-300'
                     : 'bg-coral-100 dark:bg-coral-500/20 text-coral-700 dark:text-coral-300'
-                }`}
-              >
+                }`}>
                 {job.last_status}
               </span>
             )}
@@ -179,24 +171,18 @@ export default function ScheduledCronCard({
   // We wrap it in a stopPropagation span so toggling never bubbles up to
   // a parent card-click handler.
   const toggleBlock = (
-    <span
-      className="flex items-center gap-1.5 shrink-0"
-      onClick={(e) => e.stopPropagation()}
-    >
+    <span className="flex items-center gap-1.5 shrink-0" onClick={e => e.stopPropagation()}>
       <button
         type="button"
         role="switch"
         aria-checked={job.enabled}
-        aria-label={
-          job.enabled ? t('skills.dashboard.disable') : t('skills.dashboard.enable')
-        }
+        aria-label={job.enabled ? t('skills.dashboard.disable') : t('skills.dashboard.enable')}
         data-testid={`${rootId}-toggle`}
         disabled={busy}
         onClick={() => onToggle(!job.enabled)}
         className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors disabled:opacity-50 ${
           job.enabled ? 'bg-sage-500' : 'bg-neutral-300 dark:bg-neutral-600'
-        }`}
-      >
+        }`}>
         <span
           className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform mt-0.5 ${
             job.enabled ? 'translate-x-4' : 'translate-x-0.5'
@@ -215,10 +201,7 @@ export default function ScheduledCronCard({
   const rightCluster = (
     <div className="flex items-center gap-1.5 shrink-0">
       {actions && (
-        <span
-          className="flex items-center gap-1.5"
-          onClick={(e) => e.stopPropagation()}
-        >
+        <span className="flex items-center gap-1.5" onClick={e => e.stopPropagation()}>
           {actions}
         </span>
       )}
@@ -239,22 +222,20 @@ export default function ScheduledCronCard({
       data-testid={`${rootId}-open`}
       aria-label={t('skills.dashboard.cardOpenRunner')}
       onClick={onClick}
-      onKeyDown={(e) => {
+      onKeyDown={e => {
         if (e.key === 'Enter' || e.key === ' ') {
           if (e.key === ' ') e.preventDefault();
           onClick();
         }
       }}
-      className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 cursor-pointer rounded-2xl transition-colors hover:bg-stone-100/80 dark:hover:bg-neutral-800/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
-    >
+      className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 cursor-pointer rounded-2xl transition-colors hover:bg-stone-100/80 dark:hover:bg-neutral-800/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40">
       {headingRow}
       {rightCluster}
     </div>
   ) : (
     <div
       data-testid={`${rootId}-row`}
-      className="w-full px-4 py-3 flex items-center justify-between gap-3"
-    >
+      className="w-full px-4 py-3 flex items-center justify-between gap-3">
       {headingRow}
       {rightCluster}
     </div>
@@ -265,8 +246,7 @@ export default function ScheduledCronCard({
       key={job.id}
       data-testid={rootId}
       data-active={isActive ? 'true' : 'false'}
-      className={containerClass}
-    >
+      className={containerClass}>
       {upperRow}
       {children}
     </div>
diff --git a/app/src/components/skills/ScreenIntelligenceSetupModal.tsx b/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
index f1d7077f9..0207a0312 100644
--- a/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
+++ b/app/src/components/skills/ScreenIntelligenceSetupModal.tsx
@@ -13,6 +13,7 @@ import { useT } from '../../lib/i18n/I18nContext';
 import { openhumanUpdateScreenIntelligenceSettings } from '../../utils/tauriCommands';
 import { settingsNavState } from '../settings/modal/settingsOverlay';
 import { CheckIcon } from '../ui';
+import Button from '../ui/Button';
 import {
   SetupNotice,
   SetupSettingRow,
@@ -73,15 +74,11 @@ const PermissionRow = ({
           {t('skills.setup.screenIntel.granted')}
         </span>
       ) : (
-        <button
-          type="button"
-          disabled={isRequesting}
-          onClick={onRequest}
-          className="rounded-lg border border-primary-300 bg-primary-50 px-2.5 py-1 text-[11px] font-medium text-primary-700 hover:bg-primary-100 disabled:opacity-50 transition-colors">
+        <Button variant="secondary" size="xs" disabled={isRequesting} onClick={onRequest}>
           {isRequesting
             ? t('skills.setup.screenIntel.opening')
             : t('skills.setup.screenIntel.grant')}
-        </button>
+        </Button>
       )}
     </div>
   );
@@ -176,12 +173,9 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
           <p className="text-sm text-stone-600 dark:text-neutral-300 leading-relaxed">
             {t('skills.setup.screenIntel.macosOnly')}
           </p>
-          <button
-            type="button"
-            onClick={onClose}
-            className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
+          <Button variant="secondary" size="lg" onClick={onClose} className="w-full">
             {t('common.close')}
-          </button>
+          </Button>
         </div>
       </SkillSetupModalShell>
     );
@@ -267,13 +261,14 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
                   : t('skills.setup.screenIntel.restartRefresh')}
               </button>
             ) : (
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="lg"
                 onClick={() => void refreshStatus()}
                 disabled={isRestartingCore}
-                className="flex-1 rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-3 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 disabled:opacity-50 transition-colors">
+                className="flex-1">
                 {t('skills.setup.screenIntel.refreshStatus')}
-              </button>
+              </Button>
             )}
           </div>
         </div>
@@ -308,15 +303,16 @@ export default function ScreenIntelligenceSetupModal({ onClose, initialStep }: P
 
           {enableError && <SetupNotice tone="coral">{enableError}</SetupNotice>}
 
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="lg"
             onClick={() => void handleEnable()}
             disabled={isEnabling}
-            className="w-full rounded-xl bg-primary-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+            className="w-full">
             {isEnabling
               ? t('skills.setup.screenIntel.enabling')
               : t('skills.setup.screenIntel.enableBtn')}
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/app/src/components/skills/SkillCard.test.tsx b/app/src/components/skills/SkillCard.test.tsx
index 6bf4963cf..51bc6c944 100644
--- a/app/src/components/skills/SkillCard.test.tsx
+++ b/app/src/components/skills/SkillCard.test.tsx
@@ -3,9 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import UnifiedSkillCard from './SkillCard';
 
-vi.mock('../../lib/i18n/I18nContext', () => ({
-  useT: () => ({ t: (key: string) => key }),
-}));
+vi.mock('../../lib/i18n/I18nContext', () => ({ useT: () => ({ t: (key: string) => key }) }));
 
 describe('UnifiedSkillCard stable test hooks', () => {
   it('renders row and primary action test ids', () => {
diff --git a/app/src/components/skills/SkillCard.tsx b/app/src/components/skills/SkillCard.tsx
index 6679e33eb..ba92dbe74 100644
--- a/app/src/components/skills/SkillCard.tsx
+++ b/app/src/components/skills/SkillCard.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
+import Button from '../ui/Button';
 
 export interface UnifiedSkillCardProps {
   icon: ReactNode;
@@ -22,12 +23,7 @@ export interface UnifiedSkillCardProps {
     disabled?: boolean;
     testId?: string;
   }>;
-  syncProgress?: {
-    active: boolean;
-    percent?: number;
-    message?: string;
-    metricsText?: string;
-  };
+  syncProgress?: { active: boolean; percent?: number; message?: string; metricsText?: string };
   syncSummaryText?: string;
   ctaDisabled?: boolean;
 }
@@ -82,19 +78,26 @@ export function UnifiedSkillCard({
 
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">{title}</span>
+          <span className="truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
+            {title}
+          </span>
           {statusDot && <div className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${statusDot}`} />}
           {statusLabel && (
-            <span className={`flex-shrink-0 text-xs ${statusColor ?? 'text-stone-400 dark:text-neutral-500'}`}>
+            <span
+              className={`flex-shrink-0 text-xs ${statusColor ?? 'text-stone-400 dark:text-neutral-500'}`}>
               {statusLabel}
             </span>
           )}
         </div>
         {description && (
-          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">{description}</p>
+          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
+            {description}
+          </p>
         )}
         {syncSummaryText && !syncProgress?.active && (
-          <p className="mt-1 truncate text-[11px] text-stone-500 dark:text-neutral-400">{syncSummaryText}</p>
+          <p className="mt-1 truncate text-[11px] text-stone-500 dark:text-neutral-400">
+            {syncSummaryText}
+          </p>
         )}
         {syncProgress?.active && (
           <div className="mt-1.5">
@@ -123,20 +126,23 @@ export function UnifiedSkillCard({
       <div className="flex flex-shrink-0 items-center gap-1">
         {secondaryActions && secondaryActions.length > 0 && (
           <div className="relative" ref={menuRef}>
-            <button
-              type="button"
+            <Button
+              iconOnly
+              variant="tertiary"
+              size="sm"
               onClick={e => {
                 e.stopPropagation();
                 setMenuOpen(prev => !prev);
               }}
-              className="flex h-7 w-7 items-center justify-center rounded-lg text-stone-400 dark:text-neutral-500 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200"
-              title={t('skills.card.moreActions')}>
+              title={t('skills.card.moreActions')}
+              aria-label={t('skills.card.moreActions')}
+              className="h-7 w-7 text-stone-400 dark:text-neutral-500">
               <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
                 <circle cx="5" cy="12" r="2" />
                 <circle cx="12" cy="12" r="2" />
                 <circle cx="19" cy="12" r="2" />
               </svg>
-            </button>
+            </Button>
             {menuOpen && (
               <div className="absolute right-0 top-8 z-10 w-36 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 py-1 shadow-md">
                 {secondaryActions.map(action => (
diff --git a/app/src/components/skills/SkillCategoryFilter.tsx b/app/src/components/skills/SkillCategoryFilter.tsx
index 72772e521..70c8e34c0 100644
--- a/app/src/components/skills/SkillCategoryFilter.tsx
+++ b/app/src/components/skills/SkillCategoryFilter.tsx
@@ -1,4 +1,4 @@
-import PillTabBar from '../PillTabBar';
+import ChipTabs from '../layout/ChipTabs';
 import type { SkillCategory } from './skillCategories';
 import {
   skillCategoryChipClassName,
@@ -14,24 +14,36 @@ interface SkillCategoryFilterProps {
 
 const SkillCategoryFilter = ({ categories, selected, onChange }: SkillCategoryFilterProps) => {
   return (
-    <PillTabBar
-      items={categories.map(category => ({ label: category, value: category }))}
-      selected={selected}
+    <ChipTabs<SkillCategory>
+      items={categories.map(category => {
+        const active = category === selected;
+        return {
+          id: category,
+          label: (
+            <span className="flex items-center gap-1.5">
+              <span
+                className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${
+                  active
+                    ? skillCategoryChipClassName(category)
+                    : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400'
+                }`}>
+                <SkillCategoryIcon
+                  category={category}
+                  className={
+                    active
+                      ? skillCategoryIconClassName(category)
+                      : 'text-stone-500 dark:text-neutral-400'
+                  }
+                />
+              </span>
+              {category}
+            </span>
+          ),
+        };
+      })}
+      value={selected}
       onChange={onChange}
-      renderItem={(item, active) => (
-        <span className="flex items-center gap-1.5">
-          <span
-            className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${
-              active ? skillCategoryChipClassName(item.value) : 'bg-stone-100 dark:bg-neutral-800 text-stone-500 dark:text-neutral-400'
-            }`}>
-            <SkillCategoryIcon
-              category={item.value}
-              className={active ? skillCategoryIconClassName(item.value) : 'text-stone-500 dark:text-neutral-400'}
-            />
-          </span>
-          {item.label}
-        </span>
-      )}
+      className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide"
     />
   );
 };
diff --git a/app/src/components/skills/SkillResourceTree.tsx b/app/src/components/skills/SkillResourceTree.tsx
index a8be61344..d79b29afc 100644
--- a/app/src/components/skills/SkillResourceTree.tsx
+++ b/app/src/components/skills/SkillResourceTree.tsx
@@ -7,8 +7,8 @@
  * anything unexpected still renders. Items are rendered as clickable rows in
  * JetBrains Mono for path clarity. Selected item uses primary-50 background.
  */
-import { useMemo } from 'react';
 import debug from 'debug';
+import { useMemo } from 'react';
 
 import { useT } from '../../lib/i18n/I18nContext';
 
@@ -88,7 +88,11 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
   const groups = useMemo(() => groupResources(resources), [resources]);
 
   if (groups.length === 0) {
-    return <p className="text-xs text-stone-400 dark:text-neutral-500 italic">{t('skills.resource.tree.empty')}</p>;
+    return (
+      <p className="text-xs text-stone-400 dark:text-neutral-500 italic">
+        {t('skills.resource.tree.empty')}
+      </p>
+    );
   }
 
   return (
@@ -101,7 +105,9 @@ export default function SkillResourceTree({ resources, selectedPath, onSelect }:
             <h4 className="text-[11px] font-semibold uppercase tracking-wide text-stone-600 dark:text-neutral-300">
               {t(GROUP_LABEL_KEYS[group.key] ?? group.key)}
             </h4>
-            <span className="text-[10px] text-stone-400 dark:text-neutral-500 font-mono">{group.items.length}</span>
+            <span className="text-[10px] text-stone-400 dark:text-neutral-500 font-mono">
+              {group.items.length}
+            </span>
           </div>
           <ul className="divide-y divide-stone-100 dark:divide-neutral-800">
             {group.items.map(path => {
diff --git a/app/src/components/skills/SkillSearchBar.tsx b/app/src/components/skills/SkillSearchBar.tsx
index c0c2ed15b..b4af2cd7a 100644
--- a/app/src/components/skills/SkillSearchBar.tsx
+++ b/app/src/components/skills/SkillSearchBar.tsx
@@ -6,11 +6,7 @@ interface SkillSearchBarProps {
   placeholder?: string;
 }
 
-export default function SkillSearchBar({
-  value,
-  onChange,
-  placeholder,
-}: SkillSearchBarProps) {
+export default function SkillSearchBar({ value, onChange, placeholder }: SkillSearchBarProps) {
   const { t } = useT();
   const effectivePlaceholder = placeholder ?? t('skills.search.placeholder');
   return (
diff --git a/app/src/components/skills/SkillsExplorerTab.tsx b/app/src/components/skills/SkillsExplorerTab.tsx
index bae852206..2b15d68a6 100644
--- a/app/src/components/skills/SkillsExplorerTab.tsx
+++ b/app/src/components/skills/SkillsExplorerTab.tsx
@@ -9,6 +9,8 @@ import {
   type WorkflowSummary,
 } from '../../services/api/workflowsApi';
 import EmptyStateCard from '../EmptyStateCard';
+import ChipTabs from '../layout/ChipTabs';
+import Button from '../ui/Button';
 import InstallSkillDialog from './InstallSkillDialog';
 import UninstallSkillConfirmDialog from './UninstallSkillConfirmDialog';
 
@@ -45,7 +47,7 @@ function parentPathSegment(value: string | null | undefined): string | null {
   const raw = value?.trim();
   if (!raw) return null;
   const parts = raw.split(/[\\/]+/).filter(Boolean);
-  return parts.length >= 2 ? parts.at(-2) ?? null : null;
+  return parts.length >= 2 ? (parts.at(-2) ?? null) : null;
 }
 
 function catalogInstallKeys(entry: CatalogEntry): string[] {
@@ -58,10 +60,9 @@ function catalogInstallKeys(entry: CatalogEntry): string[] {
 }
 
 function workflowInstallKeys(skill: WorkflowSummary): string[] {
-  return [
-    slugifyInstallKey(skill.id),
-    slugifyInstallKey(parentPathSegment(skill.location)),
-  ].filter((key): key is string => Boolean(key));
+  return [slugifyInstallKey(skill.id), slugifyInstallKey(parentPathSegment(skill.location))].filter(
+    (key): key is string => Boolean(key)
+  );
 }
 
 function isCatalogEntryInstalled(entry: CatalogEntry, installedKeys: Set<string>): boolean {
@@ -230,16 +231,18 @@ function SkillTile({ skill, onUninstall, onClick }: SkillTileProps) {
         )}
         {!skill.version && <span />}
         {canUninstall && (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="xs"
             data-testid={`skill-uninstall-${skill.id}`}
             onClick={e => {
               e.stopPropagation();
               onUninstall();
             }}
-            className="rounded-lg border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 px-2 py-1 text-[10px] font-medium text-coral-700 dark:text-coral-300 opacity-0 transition-all group-hover:opacity-100 hover:bg-coral-100 dark:hover:bg-coral-500/20">
+            className="opacity-0 group-hover:opacity-100">
             {t('skills.disconnect')}
-          </button>
+          </Button>
         )}
       </div>
 
@@ -339,17 +342,17 @@ function CatalogTile({ entry, installed, installing, onInstall, onClick }: Catal
             {t('skills.explorer.installed')}
           </span>
         ) : (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="xs"
             data-testid={`registry-install-${entry.id}`}
             disabled={installing}
             onClick={e => {
               e.stopPropagation();
               onInstall();
-            }}
-            className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-[10px] font-medium text-primary-700 dark:text-primary-300 transition-colors hover:bg-primary-100 dark:hover:bg-primary-500/20 disabled:opacity-50">
+            }}>
             {installing ? t('skills.explorer.installing') : t('skills.explorer.install')}
-          </button>
+          </Button>
         )}
       </div>
     </div>
@@ -412,10 +415,13 @@ function SkillDetailDialog({
               )}
             </div>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
+            aria-label={t('common.close')}
             onClick={onClose}
-            className="flex-shrink-0 rounded-lg p-1 text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 transition-colors">
+            className="flex-shrink-0 text-stone-400 dark:text-neutral-500">
             <svg
               className="h-5 w-5"
               fill="none"
@@ -424,7 +430,7 @@ function SkillDetailDialog({
               strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
             </svg>
-          </button>
+          </Button>
         </div>
 
         <div className="p-5 space-y-4">
@@ -497,13 +503,9 @@ function SkillDetailDialog({
 
         {!installed && onInstall && (
           <div className="border-t border-stone-100 dark:border-neutral-800 p-4 flex justify-end">
-            <button
-              type="button"
-              disabled={installing}
-              onClick={onInstall}
-              className="rounded-lg border border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 px-4 py-2 text-xs font-medium text-primary-700 dark:text-primary-300 transition-colors hover:bg-primary-100 dark:hover:bg-primary-500/20 disabled:opacity-50">
+            <Button variant="secondary" size="sm" disabled={installing} onClick={onInstall}>
               {installing ? t('skills.explorer.installing') : t('skills.explorer.install')}
-            </button>
+            </Button>
           </div>
         )}
       </div>
@@ -735,45 +737,50 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
               {t('skills.explorer.subtitle')}
             </p>
           </div>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             data-testid="skill-install-from-url-btn"
             onClick={() => setInstallDialogOpen(true)}
-            className="flex-shrink-0 rounded-lg border border-stone-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 shadow-sm transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1">
+            className="flex-shrink-0">
             {t('skills.explorer.installFromUrl')}
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* View toggle */}
-      <div className="flex gap-2 px-1 pb-3">
-        <button
-          type="button"
-          onClick={() => setView('registry')}
-          className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
-            view === 'registry'
-              ? 'border-primary-200 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300'
-              : 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
-          }`}>
-          {t('skills.explorer.registryTab')}
-          {catalogTotal > 0 && (
-            <span className="ml-1.5 text-[10px] opacity-70">{catalogTotal.toLocaleString()}</span>
-          )}
-        </button>
-        <button
-          type="button"
-          onClick={() => setView('installed')}
-          className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
-            view === 'installed'
-              ? 'border-primary-200 dark:border-primary-500/40 bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300'
-              : 'border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-600 dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800/60'
-          }`}>
-          {t('skills.explorer.installedTab')}
-          {skills.length > 0 && (
-            <span className="ml-1.5 text-[10px] opacity-70">{skills.length}</span>
-          )}
-        </button>
-      </div>
+      <ChipTabs<ExplorerView>
+        className="flex gap-2 px-1 pb-3"
+        ariaLabel={t('skills.explorer.title')}
+        value={view}
+        onChange={setView}
+        items={[
+          {
+            id: 'registry',
+            label: (
+              <>
+                {t('skills.explorer.registryTab')}
+                {catalogTotal > 0 && (
+                  <span className="ml-1.5 text-[10px] opacity-70">
+                    {catalogTotal.toLocaleString()}
+                  </span>
+                )}
+              </>
+            ),
+          },
+          {
+            id: 'installed',
+            label: (
+              <>
+                {t('skills.explorer.installedTab')}
+                {skills.length > 0 && (
+                  <span className="ml-1.5 text-[10px] opacity-70">{skills.length}</span>
+                )}
+              </>
+            ),
+          },
+        ]}
+      />
 
       {/* Source toggles */}
       {view === 'registry' && sources.length > 0 && (
@@ -829,12 +836,15 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
           />
         </div>
         {view === 'registry' && (
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="secondary"
+            size="md"
             onClick={() => void fetchCatalog(debouncedQuery, activeSourceFilter, true)}
             disabled={catalogLoading}
             title={t('skills.explorer.refreshRegistry')}
-            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-stone-500 dark:text-neutral-400 shadow-sm transition-colors hover:bg-stone-50 dark:hover:bg-neutral-800 disabled:opacity-50">
+            aria-label={t('skills.explorer.refreshRegistry')}
+            className="flex-shrink-0 text-stone-500 dark:text-neutral-400 shadow-sm">
             <svg
               className={`h-4 w-4 ${catalogLoading ? 'animate-spin' : ''}`}
               fill="none"
@@ -847,7 +857,7 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
                 d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"
               />
             </svg>
-          </button>
+          </Button>
         )}
       </div>
 
@@ -862,16 +872,18 @@ export default function SkillsExplorerTab({ onToast }: SkillsExplorerTabProps) {
       {!loading && error && (
         <div className="mx-1 mb-3 rounded-xl border border-coral-200 dark:border-coral-500/30 bg-coral-50 dark:bg-coral-500/10 p-3">
           <p className="text-xs font-medium text-coral-700 dark:text-coral-300">{error}</p>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="xs"
             onClick={() =>
               void (view === 'installed'
                 ? fetchSkills()
                 : fetchCatalog(debouncedQuery, activeSourceFilter, true))
             }
-            className="mt-2 rounded-lg border border-coral-200 dark:border-coral-500/30 px-3 py-1 text-[11px] font-medium text-coral-700 dark:text-coral-300 hover:bg-coral-100 dark:hover:bg-coral-500/20">
+            className="mt-2">
             {t('common.retry')}
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/app/src/components/skills/SmartIssuePicker.test.tsx b/app/src/components/skills/SmartIssuePicker.test.tsx
index 01ff17aaf..317b8dc76 100644
--- a/app/src/components/skills/SmartIssuePicker.test.tsx
+++ b/app/src/components/skills/SmartIssuePicker.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import SmartIssuePicker from './SmartIssuePicker';
@@ -80,4 +80,48 @@ describe('SmartIssuePicker', () => {
       expect(screen.getByRole('combobox')).toBeInTheDocument();
     });
   });
+
+  it('loads branches and patches target_branch after selecting a repo', async () => {
+    mockListConnections.mockResolvedValue({
+      connections: [{ toolkit: 'github', status: 'ACTIVE', username: 'testuser' }],
+    });
+    // Key responses by the composio tool name so extra/initial calls don't
+    // desync a strict once-sequence.
+    mockExecute.mockImplementation((tool: string) => {
+      if (tool === 'GITHUB_LIST_REPOSITORIES_FOR_THE_AUTHENTICATED_USER') {
+        return Promise.resolve({
+          successful: true,
+          data: [
+            {
+              full_name: 'testuser/myrepo',
+              name: 'myrepo',
+              owner: { login: 'testuser' },
+              private: false,
+              default_branch: 'main',
+            },
+          ],
+        });
+      }
+      if (tool === 'GITHUB_GET_A_REPOSITORY') {
+        return Promise.resolve({ successful: true, data: { fork: false, default_branch: 'main' } });
+      }
+      if (tool === 'GITHUB_LIST_BRANCHES') {
+        return Promise.resolve({ successful: true, data: [{ name: 'main' }, { name: 'dev' }] });
+      }
+      return Promise.resolve({ successful: true, data: [] });
+    });
+
+    const onPatchInputs = vi.fn();
+    render(<SmartIssuePicker values={{}} onPatchInputs={onPatchInputs} />);
+
+    const repoSelect = await screen.findByRole('combobox');
+    await waitFor(() => expect(mockExecute).toHaveBeenCalled());
+
+    fireEvent.change(repoSelect, { target: { value: 'testuser/myrepo' } });
+
+    // Branch load resolves and patches the default branch.
+    await waitFor(() =>
+      expect(onPatchInputs).toHaveBeenCalledWith(expect.objectContaining({ target_branch: 'main' }))
+    );
+  });
 });
diff --git a/app/src/components/skills/SmartIssuePicker.tsx b/app/src/components/skills/SmartIssuePicker.tsx
index 06389c184..fd1c33351 100644
--- a/app/src/components/skills/SmartIssuePicker.tsx
+++ b/app/src/components/skills/SmartIssuePicker.tsx
@@ -22,7 +22,6 @@
 // path is to extend `skill.toml`'s `[[inputs]]` with an optional
 // `picker = "github-issue"` discriminator and route here from that;
 // see docs/skills-runner-unification.md open question 1.
-
 import createDebug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -55,12 +54,7 @@ export interface SmartIssuePickerProps {
   values: { repo?: string; upstream?: string; target_branch?: string; fork_owner?: string };
   /** Patch the parent's form-values map with the picker's resolutions. */
   onPatchInputs: (
-    patch: Partial<{
-      repo: string;
-      upstream: string;
-      target_branch: string;
-      fork_owner: string;
-    }>
+    patch: Partial<{ repo: string; upstream: string; target_branch: string; fork_owner: string }>
   ) => void;
 }
 
@@ -90,7 +84,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
     try {
       const connections = await listConnections();
       const ghConn = connections.connections?.find(
-        (c) =>
+        c =>
           c.toolkit.toLowerCase().includes('github') &&
           (c.status === 'ACTIVE' || c.status === 'CONNECTED')
       );
@@ -105,7 +99,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
         ? raw
         : ((raw as Record<string, unknown>)?.repositories ?? []);
       if (Array.isArray(items)) {
-        repoList = (items as Record<string, unknown>[]).map((r) => ({
+        repoList = (items as Record<string, unknown>[]).map(r => ({
           owner: String((r.owner as Record<string, unknown>)?.login ?? r.owner ?? ''),
           repo: String(r.name ?? ''),
           fullName: String(
@@ -185,7 +179,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
           }
           defaultBranch = data.default_branch ?? 'main';
         } else {
-          const fromList = repos.find((r) => r.fullName === repoFullName);
+          const fromList = repos.find(r => r.fullName === repoFullName);
           defaultBranch = fromList?.defaultBranch ?? 'main';
         }
 
@@ -216,16 +210,16 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
           }
           if (list.length > 0) {
             setBranches(list);
-            const hasDefault = list.some((b) => b.name === defaultBranch);
+            const hasDefault = list.some(b => b.name === defaultBranch);
             onPatchInputs({ target_branch: hasDefault ? defaultBranch : list[0].name });
           } else {
             const fallback = [...new Set([defaultBranch, 'main', 'master'])];
-            setBranches(fallback.map((name) => ({ name })));
+            setBranches(fallback.map(name => ({ name })));
             onPatchInputs({ target_branch: defaultBranch });
           }
         } else {
           const fallback = [...new Set([defaultBranch, 'main', 'master'])];
-          setBranches(fallback.map((name) => ({ name })));
+          setBranches(fallback.map(name => ({ name })));
           onPatchInputs({ target_branch: defaultBranch });
         }
       } catch (err) {
@@ -249,8 +243,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
       <div>
         <label
           htmlFor="smart-issue-picker-repo"
-          className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"
-        >
+          className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
           {t('settings.devWorkflow.githubRepository')}
         </label>
         {reposError && (
@@ -261,16 +254,15 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
         <select
           id="smart-issue-picker-repo"
           value={values.repo ?? ''}
-          onChange={(e) => void onRepoSelect(e.target.value)}
+          onChange={e => void onRepoSelect(e.target.value)}
           disabled={reposLoading}
-          className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100"
-        >
+          className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100">
           <option value="">
             {reposLoading
               ? t('settings.devWorkflow.loadingRepositories')
               : t('settings.devWorkflow.selectRepository')}
           </option>
-          {repos.map((r) => (
+          {repos.map(r => (
             <option key={r.fullName} value={r.fullName}>
               {r.fullName} {r.private ? t('settings.devWorkflow.privateTag') : ''}
             </option>
@@ -286,8 +278,7 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
       {forkInfo && (
         <div
           data-testid="smart-issue-picker-fork-banner"
-          className="px-3 py-2 rounded-md bg-primary-50 dark:bg-primary-500/10 border border-primary-200 dark:border-primary-500/30"
-        >
+          className="px-3 py-2 rounded-md bg-primary-50 dark:bg-primary-500/10 border border-primary-200 dark:border-primary-500/30">
           <div className="text-xs font-medium text-primary-800 dark:text-primary-300">
             {t('settings.devWorkflow.forkDetected')}
           </div>
@@ -302,18 +293,16 @@ const SmartIssuePicker = ({ values, onPatchInputs }: SmartIssuePickerProps) => {
         <div>
           <label
             htmlFor="smart-issue-picker-branch"
-            className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"
-          >
+            className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">
             {t('settings.devWorkflow.targetBranch')}
           </label>
           <select
             id="smart-issue-picker-branch"
             value={values.target_branch ?? ''}
-            onChange={(e) => onPatchInputs({ target_branch: e.target.value })}
+            onChange={e => onPatchInputs({ target_branch: e.target.value })}
             disabled={branchesLoading}
-            className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100"
-          >
-            {branches.map((b) => (
+            className="w-full rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm text-stone-900 dark:text-stone-100">
+            {branches.map(b => (
               <option key={b.name} value={b.name}>
                 {b.name}
               </option>
diff --git a/app/src/components/skills/UninstallSkillConfirmDialog.tsx b/app/src/components/skills/UninstallSkillConfirmDialog.tsx
index 7d50264d1..869b9f300 100644
--- a/app/src/components/skills/UninstallSkillConfirmDialog.tsx
+++ b/app/src/components/skills/UninstallSkillConfirmDialog.tsx
@@ -23,17 +23,18 @@
  * Design mirrors `InstallSkillDialog` — see
  * `.claude/rules/15-settings-modal-system.md`.
  */
+import debug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import debug from 'debug';
 
 import { useT } from '../../lib/i18n/I18nContext';
+import { trackEvent } from '../../services/analytics';
 import {
+  type UninstallWorkflowResult,
   workflowsApi,
   type WorkflowSummary,
-  type UninstallWorkflowResult,
 } from '../../services/api/workflowsApi';
-import { trackEvent } from '../../services/analytics';
+import Button from '../ui/Button';
 
 const log = debug('skills:uninstall-dialog');
 
@@ -105,7 +106,9 @@ export default function UninstallSkillConfirmDialog({ skill, onClose, onUninstal
         if (e.target === e.currentTarget && !submitting) onClose();
       }}>
       <div className="w-[420px] max-w-[90vw] rounded-2xl bg-white dark:bg-neutral-900 p-5 shadow-2xl">
-        <h2 id="uninstall-skill-title" className="text-base font-semibold text-stone-900 dark:text-neutral-100">
+        <h2
+          id="uninstall-skill-title"
+          className="text-base font-semibold text-stone-900 dark:text-neutral-100">
           {t('common.delete')} {skill.name}?
         </h2>
         <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
@@ -123,22 +126,23 @@ export default function UninstallSkillConfirmDialog({ skill, onClose, onUninstal
           </div>
         )}
         <div className="mt-5 flex items-center justify-end gap-2">
-          <button
+          <Button
             ref={cancelBtnRef}
-            type="button"
+            variant="secondary"
+            size="sm"
             disabled={submitting}
-            onClick={onClose}
-            className="rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-1.5 text-xs font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 disabled:cursor-not-allowed disabled:opacity-50">
+            onClick={onClose}>
             {t('common.cancel')}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="sm"
             disabled={submitting}
             onClick={handleConfirm}
-            data-testid="uninstall-skill-confirm"
-            className="rounded-lg border border-coral-300 bg-coral-50 px-3 py-1.5 text-xs font-medium text-coral-700 hover:bg-coral-100 disabled:cursor-not-allowed disabled:opacity-50">
+            data-testid="uninstall-skill-confirm">
             {submitting ? t('team.deleting') : t('common.delete')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>,
diff --git a/app/src/components/skills/VoiceSetupModal.tsx b/app/src/components/skills/VoiceSetupModal.tsx
index 04f0adef0..a434c40cc 100644
--- a/app/src/components/skills/VoiceSetupModal.tsx
+++ b/app/src/components/skills/VoiceSetupModal.tsx
@@ -15,6 +15,7 @@ import {
 } from '../../utils/tauriCommands/voice';
 import { settingsNavState } from '../settings/modal/settingsOverlay';
 import { CheckIcon, WarningIcon } from '../ui';
+import Button from '../ui/Button';
 import {
   SetupNotice,
   SetupSettingRow,
@@ -104,18 +105,12 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
           </p>
 
           <div className="flex flex-col gap-2">
-            <button
-              type="button"
-              onClick={handleGoToLocalModel}
-              className="w-full rounded-xl bg-primary-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-600 transition-colors">
+            <Button variant="primary" size="lg" onClick={handleGoToLocalModel} className="w-full">
               {t('skills.setup.voice.downloadSttBtn')}
-            </button>
-            <button
-              type="button"
-              onClick={onClose}
-              className="w-full rounded-xl border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-4 py-2.5 text-sm font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
+            </Button>
+            <Button variant="secondary" size="lg" onClick={onClose} className="w-full">
               {t('common.cancel')}
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -149,13 +144,14 @@ export default function VoiceSetupModal({ onClose, skillStatus }: Props) {
 
           {enableError && <SetupNotice tone="coral">{enableError}</SetupNotice>}
 
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            size="lg"
             onClick={() => void handleEnable()}
             disabled={isEnabling}
-            className="w-full rounded-xl bg-primary-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-600 disabled:opacity-50 transition-colors">
+            className="w-full">
             {isEnabling ? t('skills.setup.voice.starting') : t('skills.setup.voice.startBtn')}
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/app/src/components/skills/WorkflowRunnerBody.tsx b/app/src/components/skills/WorkflowRunnerBody.tsx
index 63757c3a1..8611d1bc6 100644
--- a/app/src/components/skills/WorkflowRunnerBody.tsx
+++ b/app/src/components/skills/WorkflowRunnerBody.tsx
@@ -34,6 +34,7 @@ import {
   openhumanCronRuns,
   openhumanCronUpdate,
 } from '../../utils/tauriCommands/cron';
+import Button from '../ui/Button';
 import CreateSkillModal from './CreateSkillModal';
 import BranchPicker from './inputs/BranchPicker';
 import RepoPicker from './inputs/RepoPicker';
@@ -1171,27 +1172,26 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                 {/* Run now + Edit — act on this workflow with the inputs above. */}
                 <div className="flex flex-col gap-2">
                   <div className="flex flex-wrap items-center gap-2">
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
                       onClick={() => void handleRun()}
                       disabled={
                         run.status === 'submitting' || runBusy || missingRequired.length > 0
-                      }
-                      className="rounded bg-primary-600 hover:bg-primary-700 disabled:opacity-50 px-4 py-2 text-sm font-medium text-white">
+                      }>
                       {run.status === 'submitting'
                         ? t('settings.skillsRunner.starting')
                         : t('settings.skillsRunner.runNow')}
-                    </button>
+                    </Button>
                     {selectedWorkflow &&
                       selectedWorkflow.scope === 'user' &&
                       !selectedWorkflow.legacy && (
-                        <button
-                          type="button"
+                        <Button
+                          variant="secondary"
                           data-testid="skills-runner-edit"
                           onClick={() => setEditOpen(true)}
-                          className="inline-flex items-center gap-1 rounded border border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 px-3 py-2 text-sm font-medium text-stone-700 dark:text-stone-200 hover:bg-stone-50 dark:hover:bg-stone-700">
-                          <span aria-hidden="true">✎</span> {t('common.edit')}
-                        </button>
+                          leadingIcon={<span aria-hidden="true">✎</span>}>
+                          {t('common.edit')}
+                        </Button>
                       )}
                   </div>
 
@@ -1266,15 +1266,15 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                         ))}
                       </select>
                     </div>
-                    <button
-                      type="button"
+                    <Button
+                      variant="primary"
                       onClick={() => void handleSaveSchedule()}
                       disabled={savingSchedule || missingRequired.length > 0}
-                      className="rounded-xl border border-primary-700/30 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:bg-stone-300 disabled:border-stone-300 dark:disabled:bg-stone-700 dark:disabled:border-stone-700 disabled:text-stone-600 dark:disabled:text-stone-300 px-4 py-2 text-sm font-semibold text-white shadow-soft transition-colors">
+                      className="shadow-soft">
                       {savingSchedule
                         ? t('settings.skillsRunner.schedule.saving')
                         : t('settings.skillsRunner.schedule.save')}
-                    </button>
+                    </Button>
                   </div>
 
                   {scheduleSaved && (
@@ -1333,19 +1333,20 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
                           testIdRoot={`scheduled-job-${job.id}`}
                           actions={
                             <>
-                              <button
-                                type="button"
+                              <Button
+                                variant="primary"
+                                size="sm"
                                 disabled={runBusy}
-                                onClick={() => void handleRunJobNow(job)}
-                                className="rounded-lg border border-primary-700/30 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:opacity-50 px-2.5 py-1 text-xs font-semibold text-white transition-colors">
+                                onClick={() => void handleRunJobNow(job)}>
                                 {t('settings.skillsRunner.schedule.runNow')}
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => void handleRemoveJob(job.id)}
-                                className="rounded-lg border border-red-700/40 bg-red-600 hover:bg-red-700 active:bg-red-800 px-2.5 py-1 text-xs font-semibold text-white transition-colors">
+                              </Button>
+                              <Button
+                                variant="primary"
+                                tone="danger"
+                                size="sm"
+                                onClick={() => void handleRemoveJob(job.id)}>
                                 {t('settings.skillsRunner.schedule.remove')}
-                              </button>
+                              </Button>
                             </>
                           }>
                           {/* The inputs this schedule was created with —
@@ -1470,12 +1471,13 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
               ? t('settings.skillsRunner.recentRuns.headingForSkill')
               : t('settings.skillsRunner.recentRuns.headingAll')}
           </h3>
-          <button
-            type="button"
+          <Button
+            variant="tertiary"
+            size="xs"
             onClick={() => setRecentRunsRefreshNonce(n => n + 1)}
-            className="text-xs text-stone-600 dark:text-stone-400 hover:underline">
+            className="px-0 text-stone-600 hover:bg-transparent hover:underline dark:text-stone-400">
             {t('settings.skillsRunner.recentRuns.refresh')}
-          </button>
+          </Button>
         </div>
         {recentRunsLoading ? (
           <p className="text-xs text-stone-500 dark:text-stone-400">
@@ -1532,13 +1534,15 @@ export const WorkflowRunnerBody = ({ headerText, className }: SkillsRunnerBodyPr
 
                   {r.status === 'RUNNING' && (
                     <div className="px-3 pb-2 pl-8">
-                      <button
-                        type="button"
+                      <Button
+                        variant="secondary"
+                        tone="danger"
+                        size="xs"
                         data-testid={`run-stop-${r.run_id}`}
                         onClick={() => void handleStopRun(r.run_id)}
-                        className="inline-flex items-center gap-1 rounded border border-coral-300 bg-coral-50 px-2 py-0.5 text-[11px] font-medium text-coral-700 hover:bg-coral-100">
-                        <span aria-hidden="true">◼</span> {t('autocomplete.stop')}
-                      </button>
+                        leadingIcon={<span aria-hidden="true">◼</span>}>
+                        {t('autocomplete.stop')}
+                      </Button>
                     </div>
                   )}
 
diff --git a/app/src/components/skills/__tests__/CreateSkillModal.test.tsx b/app/src/components/skills/__tests__/CreateSkillModal.test.tsx
index e8caf1f64..8dd1bce04 100644
--- a/app/src/components/skills/__tests__/CreateSkillModal.test.tsx
+++ b/app/src/components/skills/__tests__/CreateSkillModal.test.tsx
@@ -21,7 +21,9 @@ vi.mock('../../../services/api/workflowsApi', () => ({
   workflowsApi: {
     createWorkflow: vi.fn(),
     updateWorkflow: vi.fn(),
-    describeWorkflow: vi.fn().mockResolvedValue({ id: 'e', name: 'e', when_to_use: '', inputs: [] }),
+    describeWorkflow: vi
+      .fn()
+      .mockResolvedValue({ id: 'e', name: 'e', when_to_use: '', inputs: [] }),
   },
 }));
 
@@ -115,11 +117,7 @@ describe('CreateSkillModal', () => {
     });
 
     expect(vi.mocked(workflowsApi.createWorkflow)).toHaveBeenCalledWith(
-      expect.objectContaining({
-        name: 'My Skill',
-        description: 'does stuff',
-        scope: 'user',
-      })
+      expect.objectContaining({ name: 'My Skill', description: 'does stuff', scope: 'user' })
     );
     expect(onCreated).toHaveBeenCalledWith(created);
   });
diff --git a/app/src/components/skills/__tests__/CreateWorkflowForm.test.tsx b/app/src/components/skills/__tests__/CreateWorkflowForm.test.tsx
index 9d195de1b..a8d882c3d 100644
--- a/app/src/components/skills/__tests__/CreateWorkflowForm.test.tsx
+++ b/app/src/components/skills/__tests__/CreateWorkflowForm.test.tsx
@@ -16,6 +16,8 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import CreateWorkflowForm, { previewSlug } from '../CreateWorkflowForm';
+
 const stableT = (key: string) => key;
 vi.mock('../../../lib/i18n/I18nContext', () => ({ useT: () => ({ t: stableT }) }));
 
@@ -33,8 +35,6 @@ vi.mock('../../../services/api/workflowsApi', () => ({
   },
 }));
 
-import CreateWorkflowForm, { previewSlug } from '../CreateWorkflowForm';
-
 const FORM_ID = 'create-skill-test-form';
 
 describe('previewSlug', () => {
@@ -61,9 +61,7 @@ describe('CreateWorkflowForm', () => {
   });
 
   it('renders required fields and the slug preview updates as the name changes', () => {
-    render(
-      <CreateWorkflowForm formId={FORM_ID} onCreated={vi.fn()} />
-    );
+    render(<CreateWorkflowForm formId={FORM_ID} onCreated={vi.fn()} />);
 
     const nameInput = screen.getByLabelText(/skills.create.name/i) as HTMLInputElement;
     fireEvent.change(nameInput, { target: { value: 'My Cool Skill' } });
@@ -126,12 +124,15 @@ describe('CreateWorkflowForm', () => {
   });
 
   it('includes whenToUse in the payload when the trigger field is filled', async () => {
-    hoisted.createWorkflow.mockResolvedValue({ id: 'wf', name: 'wf', scope: 'user', legacy: false });
+    hoisted.createWorkflow.mockResolvedValue({
+      id: 'wf',
+      name: 'wf',
+      scope: 'user',
+      legacy: false,
+    });
     render(<CreateWorkflowForm formId={FORM_ID} onCreated={vi.fn()} />);
 
-    fireEvent.change(screen.getByLabelText(/skills.create.name/i), {
-      target: { value: 'Triage' },
-    });
+    fireEvent.change(screen.getByLabelText(/skills.create.name/i), { target: { value: 'Triage' } });
     fireEvent.change(screen.getByLabelText(/skills.create.description/i), {
       target: { value: 'Summarise the inbox.' },
     });
@@ -154,9 +155,7 @@ describe('CreateWorkflowForm', () => {
     hoisted.createWorkflow.mockRejectedValue(new Error('slug already exists'));
     render(<CreateWorkflowForm formId={FORM_ID} onCreated={vi.fn()} />);
 
-    fireEvent.change(screen.getByLabelText(/skills.create.name/i), {
-      target: { value: 'Dupe' },
-    });
+    fireEvent.change(screen.getByLabelText(/skills.create.name/i), { target: { value: 'Dupe' } });
     fireEvent.change(screen.getByLabelText(/skills.create.description/i), {
       target: { value: 'whatever' },
     });
@@ -350,7 +349,12 @@ describe('CreateWorkflowForm', () => {
       expect(hoisted.createWorkflow).toHaveBeenCalledWith(
         expect.objectContaining({
           inputs: [
-            { name: 'issue', required: false, type: 'integer', description: 'Issue number to work on' },
+            {
+              name: 'issue',
+              required: false,
+              type: 'integer',
+              description: 'Issue number to work on',
+            },
           ],
         })
       );
diff --git a/app/src/components/skills/__tests__/InstallSkillDialog.test.tsx b/app/src/components/skills/__tests__/InstallSkillDialog.test.tsx
index a66e2c5df..2d1807235 100644
--- a/app/src/components/skills/__tests__/InstallSkillDialog.test.tsx
+++ b/app/src/components/skills/__tests__/InstallSkillDialog.test.tsx
@@ -17,9 +17,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import InstallSkillDialog from '../InstallSkillDialog';
 
 vi.mock('../../../services/api/workflowsApi', () => ({
-  workflowsApi: {
-    installWorkflowFromUrl: vi.fn(),
-  },
+  workflowsApi: { installWorkflowFromUrl: vi.fn() },
 }));
 
 describe('InstallSkillDialog', () => {
@@ -148,9 +146,7 @@ describe('InstallSkillDialog', () => {
     await waitFor(() => {
       expect(screen.getByRole('alert')).toHaveTextContent('Could not install skill');
     });
-    expect(screen.getByRole('alert')).toHaveTextContent(
-      'unexpected: something weird happened'
-    );
+    expect(screen.getByRole('alert')).toHaveTextContent('unexpected: something weird happened');
     expect(submit.disabled).toBe(false);
   });
 
diff --git a/app/src/components/skills/__tests__/MeetingBotsCard.test.tsx b/app/src/components/skills/__tests__/MeetingBotsCard.test.tsx
index cf9a1dde8..2d12f0575 100644
--- a/app/src/components/skills/__tests__/MeetingBotsCard.test.tsx
+++ b/app/src/components/skills/__tests__/MeetingBotsCard.test.tsx
@@ -2,10 +2,7 @@ import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { MeetCallRecord } from '../../../services/meetCallService';
-import {
-  setBackendMeetError,
-  setBackendMeetJoined,
-} from '../../../store/backendMeetSlice';
+import { setBackendMeetError, setBackendMeetJoined } from '../../../store/backendMeetSlice';
 import { renderWithProviders } from '../../../test/test-utils';
 import MeetingBotsCard from '../MeetingBotsCard';
 
@@ -73,9 +70,7 @@ describe('MeetingBotsCard', () => {
     // MeetingBotsInline to ActiveMeetingView. The inline component is unmounted at
     // that point, so its useEffect success-toast branch does not fire. Verify the
     // active view is now shown instead.
-    store.dispatch(
-      setBackendMeetJoined({ meetUrl: 'https://meet.google.com/abc-defg-hij' })
-    );
+    store.dispatch(setBackendMeetJoined({ meetUrl: 'https://meet.google.com/abc-defg-hij' }));
     await vi.waitFor(() => {
       expect(screen.getAllByText(/live/i).length).toBeGreaterThan(0);
     });
@@ -154,20 +149,13 @@ describe('MeetingBotsCard', () => {
     fireEvent.submit(document.querySelector('form')!);
 
     await vi.waitFor(() => expect(joinMock).toHaveBeenCalled());
-    store.dispatch(
-      setBackendMeetError({ error: 'Meeting bot is a paid-plan feature.' })
-    );
+    store.dispatch(setBackendMeetError({ error: 'Meeting bot is a paid-plan feature.' }));
 
     await vi.waitFor(() => {
-      expect(screen.getByRole('alert')).toHaveTextContent(
-        'Meeting bot is a paid-plan feature.'
-      );
+      expect(screen.getByRole('alert')).toHaveTextContent('Meeting bot is a paid-plan feature.');
     });
     expect(onToast).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'error',
-        title: expect.stringMatching(/not start/i),
-      })
+      expect.objectContaining({ type: 'error', title: expect.stringMatching(/not start/i) })
     );
   });
 
@@ -363,9 +351,7 @@ describe('MeetingBotsCard — recent calls section', () => {
   });
 
   it('omits the participants line when the record has none', async () => {
-    listMock.mockResolvedValueOnce([
-      makeCallRecord({ owner_display_name: '', participants: [] }),
-    ]);
+    listMock.mockResolvedValueOnce([makeCallRecord({ owner_display_name: '', participants: [] })]);
     renderWithProviders(<MeetingBotsCard />);
     await waitFor(() => {
       expect(screen.getByText(/3 turns/i)).toBeInTheDocument();
diff --git a/app/src/components/skills/__tests__/ScreenIntelligenceSetupModal.test.tsx b/app/src/components/skills/__tests__/ScreenIntelligenceSetupModal.test.tsx
index 33c2ae4df..fc890819f 100644
--- a/app/src/components/skills/__tests__/ScreenIntelligenceSetupModal.test.tsx
+++ b/app/src/components/skills/__tests__/ScreenIntelligenceSetupModal.test.tsx
@@ -16,7 +16,13 @@ vi.mock('react-router-dom', async () => {
   return {
     ...actual,
     useNavigate: vi.fn(() => vi.fn()),
-    useLocation: () => ({ pathname: '/connections', search: '', hash: '', state: null, key: 'test' }),
+    useLocation: () => ({
+      pathname: '/connections',
+      search: '',
+      hash: '',
+      state: null,
+      key: 'test',
+    }),
   };
 });
 
diff --git a/app/src/components/skills/__tests__/SkillsExplorerTab.test.tsx b/app/src/components/skills/__tests__/SkillsExplorerTab.test.tsx
index d9cf432ed..380e117d3 100644
--- a/app/src/components/skills/__tests__/SkillsExplorerTab.test.tsx
+++ b/app/src/components/skills/__tests__/SkillsExplorerTab.test.tsx
@@ -108,9 +108,7 @@ const MOCK_CATALOG_ENTRY_WITH_META: CatalogEntry = {
 describe('SkillsExplorerTab', () => {
   beforeEach(async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const { skillRegistryApi } = await import(
-      '../../../services/api/skillRegistryApi'
-    );
+    const { skillRegistryApi } = await import('../../../services/api/skillRegistryApi');
     vi.mocked(workflowsApi.listWorkflows).mockReset();
     vi.mocked(workflowsApi.uninstallWorkflow).mockReset();
     vi.mocked(skillRegistryApi.browse).mockReset();
@@ -124,9 +122,7 @@ describe('SkillsExplorerTab', () => {
 
   it('defaults to registry view and shows catalog entries', async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const { skillRegistryApi } = await import(
-      '../../../services/api/skillRegistryApi'
-    );
+    const { skillRegistryApi } = await import('../../../services/api/skillRegistryApi');
     vi.mocked(workflowsApi.listWorkflows).mockResolvedValue([]);
     vi.mocked(skillRegistryApi.browse).mockResolvedValue([MOCK_CATALOG_ENTRY]);
 
@@ -140,9 +136,7 @@ describe('SkillsExplorerTab', () => {
 
   it('searches catalog via RPC when typing in search box', async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const { skillRegistryApi } = await import(
-      '../../../services/api/skillRegistryApi'
-    );
+    const { skillRegistryApi } = await import('../../../services/api/skillRegistryApi');
     vi.mocked(workflowsApi.listWorkflows).mockResolvedValue([]);
     vi.mocked(skillRegistryApi.browse).mockResolvedValue([MOCK_CATALOG_ENTRY]);
     vi.mocked(skillRegistryApi.search).mockResolvedValue([MOCK_DOCKER_ENTRY]);
@@ -159,9 +153,12 @@ describe('SkillsExplorerTab', () => {
     });
 
     // Wait for the debounce to fire and the RPC search to be called
-    await waitFor(() => {
-      expect(skillRegistryApi.search).toHaveBeenCalledWith('docker', undefined);
-    }, { timeout: 2000 });
+    await waitFor(
+      () => {
+        expect(skillRegistryApi.search).toHaveBeenCalledWith('docker', undefined);
+      },
+      { timeout: 2000 }
+    );
 
     await waitFor(() => {
       expect(screen.getByText('Docker Manager')).toBeInTheDocument();
@@ -199,9 +196,7 @@ describe('SkillsExplorerTab', () => {
   });
 
   it('shows error state on registry fetch failure', async () => {
-    const { skillRegistryApi } = await import(
-      '../../../services/api/skillRegistryApi'
-    );
+    const { skillRegistryApi } = await import('../../../services/api/skillRegistryApi');
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
     vi.mocked(workflowsApi.listWorkflows).mockResolvedValue([]);
     vi.mocked(skillRegistryApi.browse).mockRejectedValue(new Error('Network error'));
@@ -288,10 +283,7 @@ describe('SkillsExplorerTab', () => {
 
   it('shows skill warnings when present', async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const skillWithWarning = {
-      ...MOCK_SKILL,
-      warnings: ['Missing required field: author'],
-    };
+    const skillWithWarning = { ...MOCK_SKILL, warnings: ['Missing required field: author'] };
     vi.mocked(workflowsApi.listWorkflows).mockResolvedValue([skillWithWarning]);
 
     render(<SkillsExplorerTab />);
@@ -304,9 +296,7 @@ describe('SkillsExplorerTab', () => {
 
   it('shows "Installed" badge for already-installed catalog entries', async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const { skillRegistryApi } = await import(
-      '../../../services/api/skillRegistryApi'
-    );
+    const { skillRegistryApi } = await import('../../../services/api/skillRegistryApi');
     const catalogEntry = {
       ...MOCK_CATALOG_ENTRY,
       id: 'built-in/apple-notes',
@@ -345,9 +335,7 @@ describe('SkillsExplorerTab', () => {
 
   it('does not mark catalog entries installed by display name alone', async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const { skillRegistryApi } = await import(
-      '../../../services/api/skillRegistryApi'
-    );
+    const { skillRegistryApi } = await import('../../../services/api/skillRegistryApi');
     const catalogEntry = {
       ...MOCK_CATALOG_ENTRY,
       id: 'built-in/apple-notes',
@@ -367,9 +355,7 @@ describe('SkillsExplorerTab', () => {
 
     const tile = await screen.findByTestId('registry-tile-built-in/apple-notes');
     expect(within(tile).queryByText('Installed')).not.toBeInTheDocument();
-    expect(
-      within(tile).getByTestId('registry-install-built-in/apple-notes')
-    ).toBeInTheDocument();
+    expect(within(tile).getByTestId('registry-install-built-in/apple-notes')).toBeInTheDocument();
   });
 
   it('has an install from URL button', async () => {
@@ -381,9 +367,7 @@ describe('SkillsExplorerTab', () => {
     await waitFor(() => {
       expect(screen.getByTestId('skill-install-from-url-btn')).toBeInTheDocument();
     });
-    expect(screen.getByTestId('skill-install-from-url-btn')).toHaveTextContent(
-      'Install from URL'
-    );
+    expect(screen.getByTestId('skill-install-from-url-btn')).toHaveTextContent('Install from URL');
   });
 
   it('shows "no results" when installed skills exist but search has no matches', async () => {
@@ -487,7 +471,7 @@ describe('SkillsExplorerTab', () => {
     // Dialog open — find the backdrop and click it
     await waitFor(() => {
       // The close button (×) should be visible
-      expect(screen.getByRole('button', { name: '' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
     });
 
     // Click the ×-close button inside the dialog header
@@ -553,9 +537,7 @@ describe('SkillsExplorerTab', () => {
       expect(skillRegistryApi.install).toHaveBeenCalledWith('registry-skill-1');
     });
     await waitFor(() => {
-      expect(onToast).toHaveBeenCalledWith(
-        expect.objectContaining({ type: 'success' })
-      );
+      expect(onToast).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }));
     });
   });
 
@@ -578,9 +560,7 @@ describe('SkillsExplorerTab', () => {
     });
 
     await waitFor(() => {
-      expect(onToast).toHaveBeenCalledWith(
-        expect.objectContaining({ type: 'error' })
-      );
+      expect(onToast).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }));
     });
   });
 
@@ -597,7 +577,9 @@ describe('SkillsExplorerTab', () => {
     // Source toggles are rendered as buttons with their source name text
     await waitFor(() => {
       const buttons = screen.getAllByRole('button');
-      const sourceButtons = buttons.filter(b => b.textContent === 'built-in' || b.textContent === 'ClawHub');
+      const sourceButtons = buttons.filter(
+        b => b.textContent === 'built-in' || b.textContent === 'ClawHub'
+      );
       expect(sourceButtons.length).toBe(2);
     });
   });
@@ -671,7 +653,12 @@ describe('SkillsExplorerTab', () => {
 
   it('displays SkillFormatBadge with fallback label for unknown format', async () => {
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
-    const unknownFormatSkill = { ...MOCK_SKILL, id: 'unk-skill', name: 'Unknown Format Skill', sourceFormat: 'unknown-format' };
+    const unknownFormatSkill = {
+      ...MOCK_SKILL,
+      id: 'unk-skill',
+      name: 'Unknown Format Skill',
+      sourceFormat: 'unknown-format',
+    };
     vi.mocked(workflowsApi.listWorkflows).mockResolvedValue([unknownFormatSkill]);
 
     render(<SkillsExplorerTab />);
@@ -794,9 +781,9 @@ describe('SkillsExplorerTab', () => {
       expect(screen.getByText('Hermes Skill')).toBeInTheDocument();
     });
 
-    const allTiles = screen.getAllByRole('button').filter(
-      el => el.getAttribute('data-testid')?.startsWith('skill-explorer-tile')
-    );
+    const allTiles = screen
+      .getAllByRole('button')
+      .filter(el => el.getAttribute('data-testid')?.startsWith('skill-explorer-tile'));
     // Hermes should come first
     expect(allTiles[0]).toHaveAttribute('data-testid', 'skill-explorer-tile-hermes');
     expect(allTiles[1]).toHaveAttribute('data-testid', 'skill-explorer-tile-alpha');
diff --git a/app/src/components/skills/__tests__/UninstallSkillConfirmDialog.test.tsx b/app/src/components/skills/__tests__/UninstallSkillConfirmDialog.test.tsx
index 96be81dce..36dcb9178 100644
--- a/app/src/components/skills/__tests__/UninstallSkillConfirmDialog.test.tsx
+++ b/app/src/components/skills/__tests__/UninstallSkillConfirmDialog.test.tsx
@@ -13,13 +13,11 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import UninstallSkillConfirmDialog from '../UninstallSkillConfirmDialog';
 import type { WorkflowSummary } from '../../../services/api/workflowsApi';
+import UninstallSkillConfirmDialog from '../UninstallSkillConfirmDialog';
 
 vi.mock('../../../services/api/workflowsApi', () => ({
-  workflowsApi: {
-    uninstallWorkflow: vi.fn(),
-  },
+  workflowsApi: { uninstallWorkflow: vi.fn() },
 }));
 
 const fixture: WorkflowSummary = {
@@ -49,11 +47,7 @@ describe('UninstallSkillConfirmDialog', () => {
 
   it('renders skill name, path (stripped of /SKILL.md), and confirm copy', () => {
     render(
-      <UninstallSkillConfirmDialog
-        skill={fixture}
-        onClose={vi.fn()}
-        onUninstalled={vi.fn()}
-      />
+      <UninstallSkillConfirmDialog skill={fixture} onClose={vi.fn()} onUninstalled={vi.fn()} />
     );
     expect(screen.getByText(/Delete weather-helper\?/)).toBeInTheDocument();
     expect(screen.getByText(/permanently deletes/i)).toBeInTheDocument();
@@ -92,18 +86,16 @@ describe('UninstallSkillConfirmDialog', () => {
     await waitFor(() => {
       expect(vi.mocked(workflowsApi.uninstallWorkflow)).toHaveBeenCalledWith('weather-helper');
     });
-    expect(vi.mocked(workflowsApi.uninstallWorkflow)).not.toHaveBeenCalledWith('Weather Helper (Pro)');
+    expect(vi.mocked(workflowsApi.uninstallWorkflow)).not.toHaveBeenCalledWith(
+      'Weather Helper (Pro)'
+    );
   });
 
   it('Cancel fires onClose without calling the RPC', async () => {
     const onClose = vi.fn();
     const { workflowsApi } = await import('../../../services/api/workflowsApi');
     render(
-      <UninstallSkillConfirmDialog
-        skill={fixture}
-        onClose={onClose}
-        onUninstalled={vi.fn()}
-      />
+      <UninstallSkillConfirmDialog skill={fixture} onClose={onClose} onUninstalled={vi.fn()} />
     );
     fireEvent.click(screen.getByRole('button', { name: /Cancel/ }));
     expect(onClose).toHaveBeenCalledTimes(1);
@@ -185,21 +177,15 @@ describe('UninstallSkillConfirmDialog', () => {
     }) => void;
     const deferred: { resolve?: UninstallResolve } = {};
     vi.mocked(workflowsApi.uninstallWorkflow).mockReturnValueOnce(
-      new Promise<{
-        name: string;
-        removedPath: string;
-        scope: WorkflowSummary['scope'];
-      }>(resolve => {
-        deferred.resolve = resolve;
-      })
+      new Promise<{ name: string; removedPath: string; scope: WorkflowSummary['scope'] }>(
+        resolve => {
+          deferred.resolve = resolve;
+        }
+      )
     );
 
     render(
-      <UninstallSkillConfirmDialog
-        skill={fixture}
-        onClose={vi.fn()}
-        onUninstalled={vi.fn()}
-      />
+      <UninstallSkillConfirmDialog skill={fixture} onClose={vi.fn()} onUninstalled={vi.fn()} />
     );
     fireEvent.click(screen.getByTestId('uninstall-skill-confirm'));
 
diff --git a/app/src/components/skills/__tests__/WorkflowRunnerBody.test.tsx b/app/src/components/skills/__tests__/WorkflowRunnerBody.test.tsx
index 45d6d8f3c..fd0da2485 100644
--- a/app/src/components/skills/__tests__/WorkflowRunnerBody.test.tsx
+++ b/app/src/components/skills/__tests__/WorkflowRunnerBody.test.tsx
@@ -971,9 +971,7 @@ describe('WorkflowRunnerBody — recent runs status badges', () => {
     renderBody(Body);
 
     await waitFor(() => {
-      expect(
-        screen.getByText('settings.skillsRunner.recentRuns.headingAll')
-      ).toBeInTheDocument();
+      expect(screen.getByText('settings.skillsRunner.recentRuns.headingAll')).toBeInTheDocument();
     });
   });
 
@@ -1124,7 +1122,19 @@ describe('WorkflowRunnerBody — history run with no output', () => {
 
   it('shows historyNoOutput placeholder when a run row has null output', async () => {
     hoisted.cronRuns.mockResolvedValue({
-      result: { runs: [{ id: 1, job_id: 'job-1', started_at: '2026-05-30T09:00:00Z', finished_at: '2026-05-30T09:00:05Z', status: 'ok', output: null, duration_ms: 5000 }] },
+      result: {
+        runs: [
+          {
+            id: 1,
+            job_id: 'job-1',
+            started_at: '2026-05-30T09:00:00Z',
+            finished_at: '2026-05-30T09:00:05Z',
+            status: 'ok',
+            output: null,
+            duration_ms: 5000,
+          },
+        ],
+      },
     });
 
     const Body = await importBody();
@@ -1210,9 +1220,7 @@ describe('WorkflowRunnerBody — buildCronJobName with non-empty inputs', () =>
       id: 'name-skill',
       name: 'Name Skill',
       when_to_use: 'test.',
-      inputs: [
-        { name: 'owner', type: 'string', required: true, description: 'Owner' },
-      ],
+      inputs: [{ name: 'owner', type: 'string', required: true, description: 'Owner' }],
     });
   });
 
@@ -1248,11 +1256,9 @@ describe('WorkflowRunnerBody — ensureRuntimeAvailability failure', () => {
     hoisted.cronList.mockResolvedValue({ result: [] });
     hoisted.cronRuns.mockResolvedValue({ result: { runs: [] } });
     hoisted.runWorkflow.mockResolvedValue({ run_id: 'r', skill_id: 'x', log: '/tmp/l' });
-    hoisted.listWorkflows.mockResolvedValue([{
-      id: 'py-skill',
-      name: 'Python Skill',
-      resources: ['scripts/run.py'],
-    }]);
+    hoisted.listWorkflows.mockResolvedValue([
+      { id: 'py-skill', name: 'Python Skill', resources: ['scripts/run.py'] },
+    ]);
     hoisted.describeWorkflow.mockResolvedValue({
       id: 'py-skill',
       name: 'Python Skill',
@@ -1264,7 +1270,16 @@ describe('WorkflowRunnerBody — ensureRuntimeAvailability failure', () => {
   it('surfaces runtime unavailable error on run when python runtime is missing', async () => {
     hoisted.resolveRuntimes.mockResolvedValue({
       runtimes: [
-        { runtime: 'python', enabled: true, available: false, source: 'managed', version: null, binary: null, binDir: null, error: 'not installed' },
+        {
+          runtime: 'python',
+          enabled: true,
+          available: false,
+          source: 'managed',
+          version: null,
+          binary: null,
+          binDir: null,
+          error: 'not installed',
+        },
       ],
     });
 
diff --git a/app/src/components/skills/inputs/BranchPicker.tsx b/app/src/components/skills/inputs/BranchPicker.tsx
index bb7677510..869864527 100644
--- a/app/src/components/skills/inputs/BranchPicker.tsx
+++ b/app/src/components/skills/inputs/BranchPicker.tsx
@@ -10,7 +10,6 @@
 // Refetches whenever `repo` changes. Like RepoPicker, this is a
 // parallel component to the inline impl in DevWorkflowPanel — the
 // original panel stays untouched.
-
 import createDebug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -121,10 +120,9 @@ const BranchPicker = ({ value, onChange, repo, id, placeholder, disabled }: Bran
       <select
         id={id}
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={e => onChange(e.target.value)}
         disabled={disabled || loading || !repo}
-        className={selectClass}
-      >
+        className={selectClass}>
         <option value="">
           {!repo
             ? t('settings.skillsRunner.branchPicker.needRepo')
@@ -132,15 +130,13 @@ const BranchPicker = ({ value, onChange, repo, id, placeholder, disabled }: Bran
               ? t('settings.skillsRunner.branchPicker.loading')
               : (placeholder ?? t('settings.skillsRunner.branchPicker.select'))}
         </option>
-        {branches.map((b) => (
+        {branches.map(b => (
           <option key={b.name} value={b.name}>
             {b.name}
           </option>
         ))}
       </select>
-      {error && (
-        <p className="text-xs text-red-600 dark:text-red-400 mt-1">{error}</p>
-      )}
+      {error && <p className="text-xs text-red-600 dark:text-red-400 mt-1">{error}</p>}
     </div>
   );
 };
diff --git a/app/src/components/skills/inputs/RepoPicker.tsx b/app/src/components/skills/inputs/RepoPicker.tsx
index 70ca40313..f98667644 100644
--- a/app/src/components/skills/inputs/RepoPicker.tsx
+++ b/app/src/components/skills/inputs/RepoPicker.tsx
@@ -13,7 +13,6 @@
 // identically to the Settings → Dev Workflow panel. The original panel
 // stays in place with its own inline implementation; this is a parallel
 // component for the generic Skills Runner surface.
-
 import createDebug from 'debug';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -59,17 +58,14 @@ const RepoPicker = ({ value, onChange, id, placeholder, disabled }: RepoPickerPr
       // Step 1: Is GitHub connected via Composio?
       const conns = await listConnections();
       const ghConn = conns.connections?.find(
-        (c) =>
+        c =>
           c.toolkit.toLowerCase().includes('github') &&
           (c.status === 'ACTIVE' || c.status === 'CONNECTED')
       );
       if (!ghConn) throw new Error('NOT_CONNECTED');
 
       // Step 2: Fetch repos.
-      const res = await composioExecute(
-        'GITHUB_LIST_REPOSITORIES_FOR_THE_AUTHENTICATED_USER',
-        {}
-      );
+      const res = await composioExecute('GITHUB_LIST_REPOSITORIES_FOR_THE_AUTHENTICATED_USER', {});
       if (!res.successful) throw new Error(res.error ?? 'Failed to fetch repositories');
 
       // Step 3: Parse — GitHub API returns an array of repo objects;
@@ -79,7 +75,7 @@ const RepoPicker = ({ value, onChange, id, placeholder, disabled }: RepoPickerPr
         ? raw
         : ((raw as Record<string, unknown>)?.repositories ?? []);
       const list: ComposioGhRepo[] = Array.isArray(items)
-        ? (items as Record<string, unknown>[]).map((r) => ({
+        ? (items as Record<string, unknown>[]).map(r => ({
             owner: String((r.owner as Record<string, unknown>)?.login ?? r.owner ?? ''),
             repo: String(r.name ?? ''),
             fullName: String(
@@ -122,25 +118,22 @@ const RepoPicker = ({ value, onChange, id, placeholder, disabled }: RepoPickerPr
       <select
         id={id}
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={e => onChange(e.target.value)}
         disabled={disabled || loading || error !== null}
-        className={selectClass}
-      >
+        className={selectClass}>
         <option value="">
           {loading
             ? t('settings.skillsRunner.repoPicker.loading')
             : (placeholder ?? t('settings.skillsRunner.repoPicker.select'))}
         </option>
-        {repos.map((r) => (
+        {repos.map(r => (
           <option key={r.fullName} value={r.fullName}>
             {r.fullName}
             {r.private ? ` ${t('settings.skillsRunner.repoPicker.privateTag')}` : ''}
           </option>
         ))}
       </select>
-      {error && (
-        <p className="text-xs text-red-600 dark:text-red-400 mt-1">{error}</p>
-      )}
+      {error && <p className="text-xs text-red-600 dark:text-red-400 mt-1">{error}</p>}
     </div>
   );
 };
diff --git a/app/src/components/skills/skillIcons.tsx b/app/src/components/skills/skillIcons.tsx
index 8791fe7e9..00e72b270 100644
--- a/app/src/components/skills/skillIcons.tsx
+++ b/app/src/components/skills/skillIcons.tsx
@@ -2,8 +2,6 @@ import type { ReactNode } from 'react';
 import type { IconType } from 'react-icons';
 import { FaDiscord, FaGlobe, FaTelegramPlane } from 'react-icons/fa';
 import { IoChatbubble } from 'react-icons/io5';
-
-import YuanbaoIcon from '../channels/YuanbaoIcon';
 import {
   LuBlocks,
   LuBot,
@@ -17,6 +15,7 @@ import {
   LuWrench,
 } from 'react-icons/lu';
 
+import YuanbaoIcon from '../channels/YuanbaoIcon';
 import type { SkillCategory } from './skillCategories';
 
 function iconClasses(...parts: Array<string | undefined>): string {
@@ -55,37 +54,37 @@ export function getChannelIcons(
 ): Record<string, ReactNode> {
   return {
     telegram: (
-    <SkillIconBadge
-      icon={FaTelegramPlane}
-      label={t('skills.channelIcon.telegram')}
-      bgClassName="bg-[#E7F4FB]"
-      iconClassName="text-[#249CD8]"
-    />
-  ),
+      <SkillIconBadge
+        icon={FaTelegramPlane}
+        label={t('skills.channelIcon.telegram')}
+        bgClassName="bg-[#E7F4FB]"
+        iconClassName="text-[#249CD8]"
+      />
+    ),
     discord: (
-    <SkillIconBadge
-      icon={FaDiscord}
-      label={t('skills.channelIcon.discord')}
-      bgClassName="bg-[#EEF2FF]"
-      iconClassName="text-[#5865F2]"
-    />
-  ),
+      <SkillIconBadge
+        icon={FaDiscord}
+        label={t('skills.channelIcon.discord')}
+        bgClassName="bg-[#EEF2FF]"
+        iconClassName="text-[#5865F2]"
+      />
+    ),
     web: (
-    <SkillIconBadge
-      icon={FaGlobe}
-      label={t('skills.channelIcon.web')}
-      bgClassName="bg-stone-100 dark:bg-neutral-800"
-      iconClassName="text-stone-600 dark:text-neutral-300"
-    />
-  ),
+      <SkillIconBadge
+        icon={FaGlobe}
+        label={t('skills.channelIcon.web')}
+        bgClassName="bg-stone-100 dark:bg-neutral-800"
+        iconClassName="text-stone-600 dark:text-neutral-300"
+      />
+    ),
     imessage: (
-    <SkillIconBadge
-      icon={IoChatbubble}
-      label={t('skills.channelIcon.imessage')}
-      bgClassName="bg-[#E8F8EE]"
-      iconClassName="text-[#34C759]"
-    />
-  ),
+      <SkillIconBadge
+        icon={IoChatbubble}
+        label={t('skills.channelIcon.imessage')}
+        bgClassName="bg-[#E8F8EE]"
+        iconClassName="text-[#34C759]"
+      />
+    ),
     yuanbao: (
       <span
         role="img"
diff --git a/app/src/components/ui/Button.test.tsx b/app/src/components/ui/Button.test.tsx
index a5537945d..01b9b0523 100644
--- a/app/src/components/ui/Button.test.tsx
+++ b/app/src/components/ui/Button.test.tsx
@@ -21,20 +21,59 @@ describe('Button', () => {
     expect(btn.className).toMatch(/bg-neutral-0/);
   });
 
-  it('applies ghost variant classes', () => {
-    render(<Button variant="ghost">Skip</Button>);
+  it('applies tertiary variant classes', () => {
+    render(<Button variant="tertiary">Skip</Button>);
     const btn = screen.getByRole('button', { name: 'Skip' });
     expect(btn.className).toMatch(/bg-transparent/);
     expect(btn.className).toMatch(/text-neutral-700/);
   });
 
-  it('applies danger variant classes', () => {
-    render(<Button variant="danger">Delete</Button>);
+  it('renders a filled coral button for primary + tone="danger"', () => {
+    render(
+      <Button variant="primary" tone="danger">
+        Delete
+      </Button>
+    );
     const btn = screen.getByRole('button', { name: 'Delete' });
+    expect(btn.className).toMatch(/bg-coral-500/);
+    expect(btn.className).toMatch(/text-white/);
+  });
+
+  it('renders a coral outline for secondary + tone="danger"', () => {
+    render(
+      <Button variant="secondary" tone="danger">
+        Remove
+      </Button>
+    );
+    const btn = screen.getByRole('button', { name: 'Remove' });
     expect(btn.className).toMatch(/text-coral-600/);
+    expect(btn.className).toMatch(/border-coral-300\/50/);
     expect(btn.className).toMatch(/hover:bg-coral-50/);
   });
 
+  it('renders coral text for tertiary + tone="danger"', () => {
+    render(
+      <Button variant="tertiary" tone="danger">
+        Discard
+      </Button>
+    );
+    const btn = screen.getByRole('button', { name: 'Discard' });
+    expect(btn.className).toMatch(/text-coral-600/);
+    expect(btn.className).not.toMatch(/border-coral/);
+  });
+
+  it('squares the footprint for iconOnly (no horizontal padding)', () => {
+    render(
+      <Button iconOnly size="md" aria-label="Close">
+        <span data-testid="icon" />
+      </Button>
+    );
+    const btn = screen.getByRole('button', { name: 'Close' });
+    expect(btn.className).toMatch(/h-9/);
+    expect(btn.className).toMatch(/w-9/);
+    expect(btn.className).not.toMatch(/px-4/);
+  });
+
   it('honors size=xl classes', () => {
     render(
       <Button size="xl" variant="primary">
diff --git a/app/src/components/ui/Button.tsx b/app/src/components/ui/Button.tsx
index c4689304a..d27ad8579 100644
--- a/app/src/components/ui/Button.tsx
+++ b/app/src/components/ui/Button.tsx
@@ -1,33 +1,64 @@
 import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+/**
+ * The one button in the app. Three hierarchy variants plus an orthogonal tone:
+ *
+ * - **variant** — visual weight / importance:
+ *   - `primary`   the main call-to-action on a surface (Save, Continue, Create)
+ *   - `secondary` an alternative of similar weight (Cancel, Back, Import)
+ *   - `tertiary`  low-emphasis / text-style action (Skip, links, inline actions)
+ * - **tone** — semantic intent layered on any variant:
+ *   - `default`   the normal palette
+ *   - `danger`    destructive actions (Delete, Remove, Logout) — coral
+ *
+ * Use `iconOnly` for icon-only affordances (close / refresh / add); it squares
+ * the padding — always pass an `aria-label` in that case.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonTone = 'default' | 'danger';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
+  tone?: ButtonTone;
   size?: ButtonSize;
+  /** Square the button for a single centered icon. Requires an `aria-label`. */
+  iconOnly?: boolean;
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
 }
 
 const BASE =
   'inline-flex items-center justify-center gap-2 font-medium transition-colors duration-150 ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/25 ' +
-  'focus-visible:ring-offset-2 disabled:opacity-40 disabled:pointer-events-none';
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
+  'disabled:opacity-40 disabled:pointer-events-none';
 
-const VARIANTS: Record<ButtonVariant, string> = {
-  primary:
-    'bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 ' +
-    'dark:bg-primary-500 dark:hover:bg-primary-400 dark:active:bg-primary-600',
-  secondary:
-    'bg-neutral-0 text-neutral-900 border border-neutral-300 hover:bg-neutral-50 ' +
-    'dark:bg-neutral-900 dark:text-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800',
-  ghost:
-    'bg-transparent text-neutral-700 hover:bg-neutral-100 ' +
-    'dark:text-neutral-200 dark:hover:bg-neutral-800',
-  danger:
-    'bg-transparent text-coral-600 border border-coral-300/50 hover:bg-coral-50 ' +
-    'dark:text-coral-400 dark:border-coral-500/40 dark:hover:bg-coral-500/10',
+// variant × tone → surface classes. The focus ring colour follows the tone.
+const VARIANTS: Record<ButtonVariant, Record<ButtonTone, string>> = {
+  primary: {
+    default:
+      'bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary-500/25 ' +
+      'dark:bg-primary-500 dark:hover:bg-primary-400 dark:active:bg-primary-600',
+    danger:
+      'bg-coral-500 text-white hover:bg-coral-600 active:bg-coral-700 focus-visible:ring-coral-500/25 ' +
+      'dark:bg-coral-500 dark:hover:bg-coral-400 dark:active:bg-coral-600',
+  },
+  secondary: {
+    default:
+      'bg-neutral-0 text-neutral-900 border border-neutral-300 hover:bg-neutral-50 focus-visible:ring-primary-500/25 ' +
+      'dark:bg-neutral-900 dark:text-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800',
+    danger:
+      'bg-transparent text-coral-600 border border-coral-300/50 hover:bg-coral-50 focus-visible:ring-coral-500/25 ' +
+      'dark:text-coral-400 dark:border-coral-500/40 dark:hover:bg-coral-500/10',
+  },
+  tertiary: {
+    default:
+      'bg-transparent text-neutral-700 hover:bg-neutral-100 focus-visible:ring-primary-500/25 ' +
+      'dark:text-neutral-200 dark:hover:bg-neutral-800',
+    danger:
+      'bg-transparent text-coral-600 hover:bg-coral-50 focus-visible:ring-coral-500/25 ' +
+      'dark:text-coral-400 dark:hover:bg-coral-500/10',
+  },
 };
 
 const SIZES: Record<ButtonSize, string> = {
@@ -38,10 +69,21 @@ const SIZES: Record<ButtonSize, string> = {
   xl: 'h-14 px-7 text-base rounded-xl font-medium',
 };
 
+// Square footprints for icon-only buttons (no horizontal padding).
+const ICON_SIZES: Record<ButtonSize, string> = {
+  xs: 'h-6 w-6 text-xs rounded-sm',
+  sm: 'h-[30px] w-[30px] text-sm rounded-md',
+  md: 'h-9 w-9 text-sm rounded-lg',
+  lg: 'h-11 w-11 text-base rounded-lg',
+  xl: 'h-14 w-14 text-base rounded-xl',
+};
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     variant = 'primary',
+    tone = 'default',
     size = 'md',
+    iconOnly = false,
     leadingIcon,
     trailingIcon,
     className,
@@ -50,7 +92,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     ...rest
   } = props;
 
-  const classes = [BASE, VARIANTS[variant], SIZES[size], className ?? ''].filter(Boolean).join(' ');
+  const sizeClass = (iconOnly ? ICON_SIZES : SIZES)[size];
+  const classes = [BASE, VARIANTS[variant][tone], sizeClass, className ?? '']
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <button ref={ref} type={type ?? 'button'} className={classes} {...rest}>
diff --git a/app/src/components/ui/ModalShell.tsx b/app/src/components/ui/ModalShell.tsx
index 196d62b8c..500284e57 100644
--- a/app/src/components/ui/ModalShell.tsx
+++ b/app/src/components/ui/ModalShell.tsx
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 
 import { useEscapeKey } from '../../hooks/useEscapeKey';
 import { useT } from '../../lib/i18n/I18nContext';
+import Button from './Button';
 import { CloseIcon } from './icons';
 
 interface ModalShellProps {
@@ -71,13 +72,14 @@ export function ModalShell({
               ) : null}
             </div>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             aria-label={t('common.close')}
-            onClick={onClose}
-            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 dark:bg-neutral-800 transition-colors">
+            onClick={onClose}>
             <CloseIcon className="w-4 h-4" />
-          </button>
+          </Button>
         </div>
         <div className={contentClassName}>{children}</div>
       </div>
diff --git a/app/src/components/webhooks/TunnelList.test.tsx b/app/src/components/webhooks/TunnelList.test.tsx
new file mode 100644
index 000000000..6cf3b558f
--- /dev/null
+++ b/app/src/components/webhooks/TunnelList.test.tsx
@@ -0,0 +1,48 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import TunnelList from './TunnelList';
+
+// Identity translator so we can assert on stable i18n keys.
+vi.mock('../../lib/i18n/I18nContext', () => ({ useT: () => ({ t: (k: string) => k }) }));
+vi.mock('../../hooks/useBackendUrl', () => ({ useBackendUrl: () => 'http://localhost:8787' }));
+vi.mock('../../services/api/tunnelsApi', () => ({
+  tunnelsApi: { ingressUrl: () => 'http://localhost:8787/ingress/x' },
+}));
+
+const baseProps = {
+  tunnels: [],
+  registrations: [],
+  loading: false,
+  onCreateTunnel: vi.fn().mockResolvedValue({}),
+  onDeleteTunnel: vi.fn().mockResolvedValue(undefined),
+  onRefresh: vi.fn().mockResolvedValue(undefined),
+  onRegisterEcho: vi.fn().mockResolvedValue(undefined),
+  onUnregisterEcho: vi.fn().mockResolvedValue(undefined),
+};
+
+describe('TunnelList', () => {
+  it('calls onRefresh when the refresh button is clicked', () => {
+    const onRefresh = vi.fn().mockResolvedValue(undefined);
+    render(<TunnelList {...baseProps} onRefresh={onRefresh} />);
+    fireEvent.click(screen.getByRole('button', { name: 'common.refresh' }));
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens the create form, cancels it, then creates a tunnel', async () => {
+    const onCreateTunnel = vi.fn().mockResolvedValue({});
+    render(<TunnelList {...baseProps} onCreateTunnel={onCreateTunnel} />);
+
+    // Open the create form.
+    fireEvent.click(screen.getByRole('button', { name: 'webhooks.tunnels.newTunnel' }));
+    // Cancel hides it again.
+    fireEvent.click(screen.getByRole('button', { name: 'common.cancel' }));
+    // Reopen and create.
+    fireEvent.click(screen.getByRole('button', { name: 'webhooks.tunnels.newTunnel' }));
+    const nameInput = screen.getAllByRole('textbox')[0];
+    fireEvent.change(nameInput, { target: { value: 'my-tunnel' } });
+    fireEvent.click(screen.getByRole('button', { name: 'common.create' }));
+
+    await waitFor(() => expect(onCreateTunnel).toHaveBeenCalledWith('my-tunnel', undefined));
+  });
+});
diff --git a/app/src/components/webhooks/TunnelList.tsx b/app/src/components/webhooks/TunnelList.tsx
index 58591ee1d..e08302609 100644
--- a/app/src/components/webhooks/TunnelList.tsx
+++ b/app/src/components/webhooks/TunnelList.tsx
@@ -4,6 +4,7 @@ import type { TunnelRegistration } from '../../features/webhooks/types';
 import { useBackendUrl } from '../../hooks/useBackendUrl';
 import { useT } from '../../lib/i18n/I18nContext';
 import { type Tunnel, tunnelsApi } from '../../services/api/tunnelsApi';
+import Button from '../ui/Button';
 
 interface TunnelListProps {
   tunnels: Tunnel[];
@@ -64,17 +65,12 @@ export default function TunnelList({
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-semibold text-stone-900">{t('webhooks.tunnels.title')}</h3>
         <div className="flex gap-2">
-          <button
-            onClick={onRefresh}
-            disabled={loading}
-            className="px-3 py-1.5 text-sm text-stone-600 hover:text-stone-900 rounded-lg hover:bg-stone-100 transition-colors">
+          <Button variant="tertiary" size="sm" onClick={onRefresh} disabled={loading}>
             {loading ? t('common.loading') : t('common.refresh')}
-          </button>
-          <button
-            onClick={() => setShowCreate(true)}
-            className="px-3 py-1.5 text-sm font-medium text-white bg-primary-500 rounded-lg hover:bg-primary-600 transition-colors">
+          </Button>
+          <Button variant="primary" size="sm" onClick={() => setShowCreate(true)}>
             {t('webhooks.tunnels.newTunnel')}
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -97,17 +93,16 @@ export default function TunnelList({
             className="w-full px-3 py-2 text-sm border border-stone-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500"
           />
           <div className="flex gap-2 justify-end">
-            <button
-              onClick={() => setShowCreate(false)}
-              className="px-3 py-1.5 text-sm text-stone-600 hover:text-stone-900 rounded-lg">
+            <Button variant="tertiary" size="sm" onClick={() => setShowCreate(false)}>
               {t('common.cancel')}
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
               onClick={handleCreate}
-              disabled={!newName.trim() || creating}
-              className="px-3 py-1.5 text-sm font-medium text-white bg-primary-500 rounded-lg hover:bg-primary-600 disabled:opacity-50 transition-colors">
+              disabled={!newName.trim() || creating}>
               {creating ? t('webhooks.tunnels.creating') : t('common.create')}
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -116,11 +111,14 @@ export default function TunnelList({
       {actionError && (
         <div className="p-3 rounded-lg bg-coral-50 text-coral-700 text-sm flex items-center justify-between">
           <span>{actionError}</span>
-          <button
+          <Button
+            variant="tertiary"
+            tone="danger"
+            size="xs"
             onClick={() => setActionError(null)}
-            className="text-coral-500 hover:text-coral-700 text-xs ml-2">
+            className="ml-2">
             {t('common.dismiss')}
-          </button>
+          </Button>
         </div>
       )}
 
@@ -245,12 +243,14 @@ function TunnelCard({
             <code className="text-xs text-stone-500 bg-stone-50 px-2 py-1 rounded font-mono truncate max-w-[400px]">
               {webhookUrl || 'Resolving backend URL…'}
             </code>
-            <button
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={handleCopy}
               disabled={!webhookUrl}
-              className="text-xs text-primary-500 hover:text-primary-700 whitespace-nowrap disabled:text-stone-400 disabled:cursor-not-allowed">
+              className="whitespace-nowrap">
               {copied ? t('common.copied') : t('common.copy')}
-            </button>
+            </Button>
           </div>
         </div>
         <div className="ml-3 flex flex-col gap-1 shrink-0">
@@ -271,12 +271,14 @@ function TunnelCard({
                   : t('webhooks.tunnels.enableEcho')}
             </button>
           )}
-          <button
+          <Button
+            variant="tertiary"
+            tone="danger"
+            size="xs"
             onClick={handleDelete}
-            disabled={deleting}
-            className="px-2 py-1 text-xs text-coral-600 hover:text-coral-700 hover:bg-coral-50 rounded-lg transition-colors">
+            disabled={deleting}>
             {deleting ? '...' : t('common.delete')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/app/src/pages/Activity.tsx b/app/src/pages/Activity.tsx
index 459f8cf05..0c3faab42 100644
--- a/app/src/pages/Activity.tsx
+++ b/app/src/pages/Activity.tsx
@@ -5,7 +5,7 @@ import { ConfirmationModal } from '../components/intelligence/ConfirmationModal'
 import IntelligenceSubconsciousTab from '../components/intelligence/IntelligenceSubconsciousTab';
 import { ToastContainer } from '../components/intelligence/Toast';
 import WorkflowsTab from '../components/intelligence/WorkflowsTab';
-import PillTabBar from '../components/PillTabBar';
+import ChipTabs from '../components/layout/ChipTabs';
 import {
   useIntelligenceSocket,
   useIntelligenceSocketManager,
@@ -107,29 +107,23 @@ export default function Activity() {
   return (
     <div className="min-h-full p-4 pt-6">
       <div className="max-w-4xl mx-auto space-y-4">
-        <PillTabBar
-          items={tabs.map(tab => ({ label: tab.label, value: tab.id }))}
-          selected={activeTab}
-          onChange={setActiveTab}
-          activeClassName="border-primary-600 bg-primary-600 text-white"
-          renderItem={(item, active) => {
-            const tab = tabs.find(entry => entry.id === item.value);
-            return (
+        <ChipTabs<ActivityTab>
+          items={tabs.map(tab => ({
+            id: tab.id,
+            label: (
               <span className="inline-flex items-center gap-1.5">
-                <span>{item.label}</span>
-                {tab?.comingSoon && (
-                  <span
-                    className={`rounded-full border px-1.5 py-0.5 text-[10px] ${
-                      active
-                        ? 'border-white/30 bg-white/15 text-white'
-                        : 'border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 text-stone-500 dark:text-neutral-400'
-                    }`}>
+                <span>{tab.label}</span>
+                {tab.comingSoon && (
+                  <span className="rounded-full border border-stone-200 dark:border-neutral-800 bg-stone-50 dark:bg-neutral-800/60 px-1.5 py-0.5 text-[10px] text-stone-500 dark:text-neutral-400">
                     {t('misc.beta')}
                   </span>
                 )}
               </span>
-            );
-          }}
+            ),
+          }))}
+          value={activeTab}
+          onChange={setActiveTab}
+          className="flex flex-wrap gap-2 pb-1"
         />
 
         {/* Alerts tab renders outside the card so Notifications can use its own
diff --git a/app/src/pages/Feedback.tsx b/app/src/pages/Feedback.tsx
index 63e710426..b3aa90821 100644
--- a/app/src/pages/Feedback.tsx
+++ b/app/src/pages/Feedback.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import FeedbackFilterSelect from '../components/feedback/FeedbackFilterSelect';
 import FeedbackItemRow from '../components/feedback/FeedbackItemRow';
 import FeedbackSubmitForm from '../components/feedback/FeedbackSubmitForm';
+import Button from '../components/ui/Button';
 import { useUser } from '../hooks/useUser';
 import { useT } from '../lib/i18n/I18nContext';
 import { feedbackApi } from '../services/api/feedbackApi';
@@ -242,13 +243,12 @@ const Feedback = () => {
 
           {hasMore && (
             <div className="flex justify-center pt-1">
-              <button
-                type="button"
+              <Button
+                variant="secondary"
                 onClick={() => void load(pageRef.current + 1, true)}
-                disabled={isLoading}
-                className="rounded-xl border border-neutral-200 bg-white px-5 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                disabled={isLoading}>
                 {isLoading ? '...' : t('feedback.loadMore')}
-              </button>
+              </Button>
             </div>
           )}
         </section>
diff --git a/app/src/pages/Home.tsx b/app/src/pages/Home.tsx
index 7525fe88b..8e3ce4db2 100644
--- a/app/src/pages/Home.tsx
+++ b/app/src/pages/Home.tsx
@@ -7,6 +7,7 @@ import {
   PromotionalCreditsBanner,
   UsageLimitBanner,
 } from '../components/home/HomeBanners';
+import Button from '../components/ui/Button';
 import { useUsageState } from '../hooks/useUsageState';
 import { useUser } from '../hooks/useUser';
 import { useT } from '../lib/i18n/I18nContext';
@@ -176,12 +177,13 @@ const Home = () => {
             <span className="text-xs text-center text-stone-400 dark:text-neutral-500">
               v{APP_VERSION}
             </span>
-            <button
-              type="button"
+            <Button
+              iconOnly
+              variant="tertiary"
               onClick={toggleTheme}
               aria-label={isDark ? t('home.themeToggle.toLight') : t('home.themeToggle.toDark')}
               title={isDark ? t('home.themeToggle.toLight') : t('home.themeToggle.toDark')}
-              className="p-2 rounded-full text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800/60 transition-colors">
+              className="rounded-full">
               {isDark ? (
                 <svg
                   className="w-5 h-5"
@@ -211,7 +213,7 @@ const Home = () => {
                   />
                 </svg>
               )}
-            </button>
+            </Button>
           </div>
 
           {/* Connection status */}
@@ -244,13 +246,15 @@ const Home = () => {
           )}
 
           {/* CTA button — data-walkthrough target for step 2 */}
-          <button
+          <Button
             data-walkthrough="home-cta"
+            variant="primary"
+            size="lg"
             onClick={handleStartCooking}
             disabled={blocking === 'core-unreachable' || blocking === 'internet-offline'}
-            className="w-full py-3 bg-primary-500 hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-xl transition-colors duration-200">
+            className="w-full">
             {t('home.askAssistant')}
-          </button>
+          </Button>
         </div>
 
         <DiscordBanner />
diff --git a/app/src/pages/Intelligence.test.tsx b/app/src/pages/Intelligence.test.tsx
index 15c7812be..92526dcfa 100644
--- a/app/src/pages/Intelligence.test.tsx
+++ b/app/src/pages/Intelligence.test.tsx
@@ -95,7 +95,7 @@ describe('Intelligence tab selection', () => {
   it('switches panel when a tab pill is clicked', async () => {
     renderAt('/intelligence?tab=tasks');
     await waitFor(() => expect(screen.getByText('TASKS_PANEL')).toBeInTheDocument());
-    // PillTabBar renders the tab labels (i18n keys); click the Workflows pill.
+    // ChipTabs renders the tab labels (i18n keys); click the Workflows pill.
     fireEvent.click(screen.getByText('memory.tab.workflows'));
     await waitFor(() => expect(screen.getByText('WORKFLOWS_PANEL')).toBeInTheDocument());
   });
diff --git a/app/src/pages/Intelligence.tsx b/app/src/pages/Intelligence.tsx
index 0993af1f8..fc5a4f6b5 100644
--- a/app/src/pages/Intelligence.tsx
+++ b/app/src/pages/Intelligence.tsx
@@ -14,7 +14,7 @@ import MemorySection from '../components/intelligence/MemorySection';
 import ModelCouncilTab from '../components/intelligence/ModelCouncilTab';
 import { ToastContainer } from '../components/intelligence/Toast';
 import WorkflowsTab from '../components/intelligence/WorkflowsTab';
-import PillTabBar from '../components/PillTabBar';
+import ChipTabs from '../components/layout/ChipTabs';
 import SettingsHeader from '../components/settings/components/SettingsHeader';
 import { useSettingsNavigation } from '../components/settings/hooks/useSettingsNavigation';
 import { useDeveloperMode } from '../hooks/useDeveloperMode';
@@ -210,29 +210,23 @@ export default function Intelligence({ tabParamKey = 'tab' }: IntelligenceProps
       />
 
       <div className="p-4 space-y-4">
-        <PillTabBar
-          items={tabs.map(tab => ({ label: tab.label, value: tab.id }))}
-          selected={activeTab}
-          onChange={setActiveTab}
-          activeClassName="border-primary-600 bg-primary-600 text-white"
-          renderItem={(item, active) => {
-            const tab = tabs.find(entry => entry.id === item.value);
-            return (
+        <ChipTabs<IntelligenceTab>
+          items={tabs.map(tab => ({
+            id: tab.id,
+            label: (
               <span className="inline-flex items-center gap-1.5">
-                <span>{item.label}</span>
-                {tab?.comingSoon && (
-                  <span
-                    className={`rounded-full border px-1.5 py-0.5 text-[10px] ${
-                      active
-                        ? 'border-white/30 bg-white/15 text-white'
-                        : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 text-neutral-500 dark:text-neutral-400'
-                    }`}>
+                <span>{tab.label}</span>
+                {tab.comingSoon && (
+                  <span className="rounded-full border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/60 px-1.5 py-0.5 text-[10px] text-neutral-500 dark:text-neutral-400">
                     {t('misc.beta')}
                   </span>
                 )}
               </span>
-            );
-          }}
+            ),
+          }))}
+          value={activeTab}
+          onChange={setActiveTab}
+          className="flex flex-wrap gap-2 pb-1"
         />
 
         <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-soft border border-neutral-200 dark:border-neutral-800 p-6">
diff --git a/app/src/pages/Invites.tsx b/app/src/pages/Invites.tsx
index b7e3067e9..0297cc4b6 100644
--- a/app/src/pages/Invites.tsx
+++ b/app/src/pages/Invites.tsx
@@ -1,6 +1,7 @@
 import debugFactory from 'debug';
 import { useEffect, useRef, useState } from 'react';
 
+import Button from '../components/ui/Button';
 import { useUser } from '../hooks/useUser';
 import { useT } from '../lib/i18n/I18nContext';
 import { inviteApi } from '../services/api/inviteApi';
@@ -46,9 +47,12 @@ const CodeRow = ({ invite }: { invite: InviteCode }) => {
             {t('common.enabled')}
           </span>
         )}
-        <button
+        <Button
+          iconOnly
+          variant="tertiary"
+          size="sm"
           onClick={handleCopy}
-          className="p-1.5 rounded-lg hover:bg-white/10 transition-colors text-stone-400 hover:text-stone-200"
+          aria-label={t('common.copy')}
           title={t('common.copy')}>
           {copied ? (
             <svg
@@ -73,7 +77,7 @@ const CodeRow = ({ invite }: { invite: InviteCode }) => {
               />
             </svg>
           )}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -173,12 +177,13 @@ const Invites = () => {
                     className="flex-1 px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl font-mono text-sm tracking-wider placeholder:text-stone-500 placeholder:tracking-normal placeholder:font-sans focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50 transition-all"
                     disabled={redeemStatus === 'loading'}
                   />
-                  <button
+                  <Button
+                    variant="primary"
                     onClick={handleRedeem}
                     disabled={redeemStatus === 'loading' || !redeemInput.trim()}
-                    className="btn-primary px-5 py-2.5 text-sm font-medium rounded-xl disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap">
+                    className="whitespace-nowrap">
                     {redeemStatus === 'loading' ? '...' : t('rewards.referrals')}
-                  </button>
+                  </Button>
                 </div>
                 {redeemStatus === 'success' && (
                   <p className="text-sage-500 text-xs mt-2">{t('common.success')}</p>
diff --git a/app/src/pages/Notifications.tsx b/app/src/pages/Notifications.tsx
index 18515f7ce..5a6b53b54 100644
--- a/app/src/pages/Notifications.tsx
+++ b/app/src/pages/Notifications.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import NotificationBody from '../components/notifications/NotificationBody';
 import NotificationCenter from '../components/notifications/NotificationCenter';
+import Button from '../components/ui/Button';
 import { useT } from '../lib/i18n/I18nContext';
 import { resolveSystemRoute } from '../lib/notificationRouter';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
@@ -122,20 +123,20 @@ const Notifications = () => {
             </p>
           </div>
           <div className="flex items-center gap-2">
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() => dispatch(markAllRead())}
-              disabled={unread === 0}
-              className="text-xs font-medium text-stone-600 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed">
+              disabled={unread === 0}>
               {t('alerts.markAllRead')}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() => dispatch(clearAll())}
-              disabled={items.length === 0}
-              className="text-xs font-medium text-stone-600 dark:text-neutral-400 hover:text-stone-900 dark:hover:text-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed">
+              disabled={items.length === 0}>
               {t('common.clear')}
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/app/src/pages/Rewards.tsx b/app/src/pages/Rewards.tsx
index a0b0e8c59..de940b026 100644
--- a/app/src/pages/Rewards.tsx
+++ b/app/src/pages/Rewards.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import EmptyStateCard from '../components/EmptyStateCard';
-import PillTabBar from '../components/PillTabBar';
+import ChipTabs from '../components/layout/ChipTabs';
 import RewardsCommunityTab from '../components/rewards/RewardsCommunityTab';
 import RewardsRedeemTab from '../components/rewards/RewardsRedeemTab';
 import RewardsReferralsTab from '../components/rewards/RewardsReferralsTab';
@@ -136,15 +136,15 @@ const Rewards = () => {
   return (
     <div className="min-h-full px-4 pt-6 pb-10">
       <div className="mx-auto max-w-2xl space-y-4">
-        <PillTabBar
+        <ChipTabs<RewardsTab>
           items={[
-            { label: t('rewards.referrals'), value: 'referrals' },
-            { label: t('rewards.title'), value: 'rewards' },
-            { label: t('rewards.coupons'), value: 'redeem' },
+            { id: 'referrals', label: t('rewards.referrals') },
+            { id: 'rewards', label: t('rewards.title') },
+            { id: 'redeem', label: t('rewards.coupons') },
           ]}
-          selected={selectedTab}
+          value={selectedTab}
           onChange={handleTabChange}
-          activeClassName="border-primary-600 bg-primary-600 text-white"
+          className="flex flex-wrap gap-2 pb-1"
         />
 
         {selectedTab === 'referrals' ? (
diff --git a/app/src/pages/Routines.tsx b/app/src/pages/Routines.tsx
index 01e1ace7e..bca3fa7fd 100644
--- a/app/src/pages/Routines.tsx
+++ b/app/src/pages/Routines.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import RoutineCard from '../components/routines/RoutineCard';
+import Button from '../components/ui/Button';
 import { useT } from '../lib/i18n/I18nContext';
 import {
   type CoreCronJob,
@@ -162,10 +163,11 @@ const Routines = () => {
       <div className="max-w-lg w-full mx-auto space-y-4">
         {/* Header */}
         <div className="flex items-center gap-3">
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={() => navigate('/home')}
-            className="p-1.5 rounded-lg text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 transition-colors"
             aria-label={t('common.back')}>
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -175,7 +177,7 @@ const Routines = () => {
                 d="M15 19l-7-7 7-7"
               />
             </svg>
-          </button>
+          </Button>
           <div>
             <h1 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
               {t('routines.title')}
@@ -245,12 +247,9 @@ const Routines = () => {
         {/* Refresh */}
         {!loading && jobs.length > 0 && (
           <div className="flex justify-center pt-2">
-            <button
-              type="button"
-              onClick={() => void loadJobs()}
-              className="text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:hover:text-neutral-300 transition-colors">
+            <Button variant="tertiary" size="xs" onClick={() => void loadJobs()}>
               {t('routines.refresh')}
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/app/src/pages/Welcome.tsx b/app/src/pages/Welcome.tsx
index 5103f40c6..cf80909cb 100644
--- a/app/src/pages/Welcome.tsx
+++ b/app/src/pages/Welcome.tsx
@@ -88,12 +88,13 @@ const Welcome = () => {
           <div className="flex items-center justify-between mb-4">
             <div className="w-9" aria-hidden="true" />
             <div className="w-9" aria-hidden="true" />
-            <button
-              type="button"
+            <Button
+              iconOnly
+              variant="tertiary"
               onClick={toggleTheme}
               aria-label={isDark ? t('home.themeToggle.toLight') : t('home.themeToggle.toDark')}
               title={isDark ? t('home.themeToggle.toLight') : t('home.themeToggle.toDark')}
-              className="p-2 rounded-full text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 hover:bg-stone-100 dark:hover:bg-neutral-800/60 transition-colors">
+              className="rounded-full">
               {isDark ? (
                 <svg
                   className="w-5 h-5"
@@ -123,7 +124,7 @@ const Welcome = () => {
                   />
                 </svg>
               )}
-            </button>
+            </Button>
           </div>
           <div className="flex justify-center mb-6">
             <img
@@ -148,11 +149,13 @@ const Welcome = () => {
               <p>{errorMessage}</p>
               {requiresAppDataReset ? (
                 <div className="mt-3 space-y-2">
-                  <button
-                    type="button"
+                  <Button
+                    variant="primary"
+                    tone="danger"
+                    size="sm"
                     onClick={handleClearAppData}
                     disabled={isClearingAppData}
-                    className="w-full rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-60">
+                    className="w-full">
                     {isClearingAppData ? (
                       <span className="flex items-center justify-center gap-2">
                         <span className="h-3 w-3 animate-spin rounded-full border border-white border-t-transparent" />
@@ -161,7 +164,7 @@ const Welcome = () => {
                     ) : (
                       t('welcome.clearAppDataAndRestart')
                     )}
-                  </button>
+                  </Button>
                   <p className="text-[11px] leading-4 text-red-600/80">
                     {t('welcome.clearAppDataWarning')}
                   </p>
diff --git a/app/src/pages/WorkflowNew.tsx b/app/src/pages/WorkflowNew.tsx
index 62c791e79..28dedec9a 100644
--- a/app/src/pages/WorkflowNew.tsx
+++ b/app/src/pages/WorkflowNew.tsx
@@ -21,6 +21,7 @@ import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import CreateWorkflowForm from '../components/skills/CreateWorkflowForm';
+import Button from '../components/ui/Button';
 import { useT } from '../lib/i18n/I18nContext';
 import { type WorkflowSummary } from '../services/api/workflowsApi';
 
@@ -66,22 +67,21 @@ export default function WorkflowNew() {
               </p>
             </div>
             <div className="flex items-center gap-2 shrink-0">
-              <button
-                type="button"
+              <Button
+                variant="tertiary"
                 data-testid="skill-new-cancel"
                 onClick={() => navigate('/connections')}
-                disabled={submitting}
-                className="rounded-lg px-4 py-2 text-sm font-medium text-stone-600 dark:text-neutral-300 transition-colors hover:bg-stone-100 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:opacity-40">
+                disabled={submitting}>
                 {t('common.cancel')}
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="primary"
                 type="submit"
                 form={PAGE_FORM_ID}
                 data-testid="skill-new-submit"
-                disabled={!formValid || submitting}
-                className="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white shadow-soft transition-colors hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50">
+                disabled={!formValid || submitting}>
                 {submitting ? t('skills.create.creating') : t('skills.create.createBtn')}
-              </button>
+              </Button>
             </div>
           </div>
 
diff --git a/app/src/pages/WorkflowsRun.tsx b/app/src/pages/WorkflowsRun.tsx
index 953783cfd..4ba47decd 100644
--- a/app/src/pages/WorkflowsRun.tsx
+++ b/app/src/pages/WorkflowsRun.tsx
@@ -12,6 +12,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import WorkflowRunnerBody from '../components/skills/WorkflowRunnerBody';
+import Button from '../components/ui/Button';
 import { useT } from '../lib/i18n/I18nContext';
 
 export default function WorkflowsRun() {
@@ -28,8 +29,9 @@ export default function WorkflowsRun() {
               isn't polluted and `-1` lands on the originating page. Falls back
               to the Workflows tab on a cold deep-link with no history. */}
           <div className="flex items-center gap-3">
-            <button
-              type="button"
+            <Button
+              variant="tertiary"
+              size="xs"
               onClick={() =>
                 // Use the router history index, not `history.length`: length > 1
                 // is true even when the only prior entry is an external referrer,
@@ -40,10 +42,9 @@ export default function WorkflowsRun() {
                   ? navigate(-1)
                   : navigate('/intelligence?tab=workflows')
               }
-              aria-label={t('common.back')}
-              className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-stone-600 dark:text-neutral-300 hover:bg-stone-100 dark:hover:bg-neutral-800 transition-colors">
+              aria-label={t('common.back')}>
               <span aria-hidden="true">←</span> {t('common.back')}
-            </button>
+            </Button>
             <h1 className="text-base font-semibold text-stone-900 dark:text-neutral-100">
               {t('skills.run.title')}
             </h1>
diff --git a/app/src/pages/__tests__/Brain.test.tsx b/app/src/pages/__tests__/Brain.test.tsx
index 9105d49eb..5120218c5 100644
--- a/app/src/pages/__tests__/Brain.test.tsx
+++ b/app/src/pages/__tests__/Brain.test.tsx
@@ -35,7 +35,7 @@ vi.mock('../../components/intelligence/IntelligenceSubconsciousTab', async () =>
   const React = await import('react');
   return { default: () => React.createElement('div', { 'data-testid': 'brain-subconscious' }) };
 });
-vi.mock('../../components/PillTabBar', async () => {
+vi.mock('../../components/layout/ChipTabs', async () => {
   const React = await import('react');
   return {
     default: ({ children }: { children?: React.ReactNode }) =>
diff --git a/app/src/pages/__tests__/Intelligence.test.tsx b/app/src/pages/__tests__/Intelligence.test.tsx
index c249f97f6..ef2e70ce5 100644
--- a/app/src/pages/__tests__/Intelligence.test.tsx
+++ b/app/src/pages/__tests__/Intelligence.test.tsx
@@ -24,10 +24,14 @@ vi.mock('../../components/intelligence/Toast', () => ({ ToastContainer: () => nu
 vi.mock('../../components/intelligence/ConfirmationModal', () => ({
   ConfirmationModal: () => null,
 }));
-vi.mock('../../components/PillTabBar', () => ({
-  default: ({ selected, onChange }: { selected: string; onChange: (tab: string) => void }) => (
+interface MockChipTabsProps {
+  value: string;
+  onChange: (tab: string) => void;
+}
+vi.mock('../../components/layout/ChipTabs', () => ({
+  default: ({ value, onChange }: MockChipTabsProps) => (
     <div data-testid="pilltabs">
-      <span>selected:{selected}</span>
+      <span>selected:{value}</span>
       {['memory', 'subconscious', 'tasks', 'workflows', 'council'].map(tab => (
         <button key={tab} type="button" onClick={() => onChange(tab)}>
           go-{tab}
diff --git a/app/src/pages/__tests__/Skills.mcp-coming-soon.test.tsx b/app/src/pages/__tests__/Skills.mcp-coming-soon.test.tsx
index 39cf68de4..835905026 100644
--- a/app/src/pages/__tests__/Skills.mcp-coming-soon.test.tsx
+++ b/app/src/pages/__tests__/Skills.mcp-coming-soon.test.tsx
@@ -57,10 +57,10 @@ describe('Skills page — MCP Servers tab (MCP + Meeting bots)', () => {
 
     // The Tools tab shows filter chips (All / Installed / Registry) and a search input
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'All' })).toBeInTheDocument();
+      expect(screen.getByRole('tab', { name: 'All' })).toBeInTheDocument();
     });
-    expect(screen.getByRole('button', { name: /Installed/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Registry' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Installed/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Registry' })).toBeInTheDocument();
   });
 
   it('shows the table header columns on the MCP Servers tab', async () => {
@@ -84,9 +84,9 @@ describe('Skills page — MCP Servers tab (MCP + Meeting bots)', () => {
     fireEvent.click(screen.getByTestId('two-pane-nav-mcp'));
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Installed/i })).toBeInTheDocument();
+      expect(screen.getByRole('tab', { name: /Installed/i })).toBeInTheDocument();
     });
-    fireEvent.click(screen.getByRole('button', { name: /Installed/i }));
+    fireEvent.click(screen.getByRole('tab', { name: /Installed/i }));
 
     await waitFor(() => {
       expect(screen.getByText('No MCP servers installed yet.')).toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('Skills page — MCP Servers tab (MCP + Meeting bots)', () => {
 
     expect(screen.getByTestId('two-pane-nav-mcp')).toHaveAttribute('aria-current', 'page');
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'All' })).toBeInTheDocument();
+      expect(screen.getByRole('tab', { name: 'All' })).toBeInTheDocument();
     });
   });
 });
diff --git a/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx b/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx
index cc0306da0..2c696cb3f 100644
--- a/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx
+++ b/app/src/pages/conversations/components/AgentProcessSourcePanel.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import type { ToolTimelineEntry } from '../../../store/chatRuntimeSlice';
 import { type AgentSource, extractAgentSources } from '../../../utils/toolTimelineFormatting';
@@ -104,13 +105,15 @@ export function AgentProcessSourcePanel({
           <span className="min-w-0 flex-1 truncate font-semibold text-stone-800 dark:text-neutral-100">
             {t('conversations.agentTaskInsights.processSourceTitle')}
           </span>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={onClose}
             aria-label={t('conversations.subagent.close')}
-            className="shrink-0 rounded-full p-1.5 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
+            className="shrink-0 rounded-full">
             ✕
-          </button>
+          </Button>
         </header>
 
         {/* Body — the full agent timeline, then the visited sources. */}
diff --git a/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx b/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx
index 770ea7d12..e870c72ca 100644
--- a/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx
+++ b/app/src/pages/conversations/components/BackgroundProcessesPanel.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import type {
   SubagentActivity,
@@ -163,11 +164,12 @@ export function BackgroundProcessesPanel({
               {runningLabel} · {totalLabel}
             </span>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             aria-label={t('conversations.backgroundTasks.close')}
-            onClick={onClose}
-            className="flex h-7 w-7 items-center justify-center rounded-lg text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:text-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-neutral-300">
+            onClick={onClose}>
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -176,7 +178,7 @@ export function BackgroundProcessesPanel({
                 d="M6 18L18 6M6 6l12 12"
               />
             </svg>
-          </button>
+          </Button>
         </header>
 
         <div className="flex-1 overflow-y-auto p-2">
diff --git a/app/src/pages/conversations/components/SubagentDrawer.tsx b/app/src/pages/conversations/components/SubagentDrawer.tsx
index e8aea304e..f5364b3a4 100644
--- a/app/src/pages/conversations/components/SubagentDrawer.tsx
+++ b/app/src/pages/conversations/components/SubagentDrawer.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode, useEffect, useState } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import { threadApi } from '../../../services/api/threadApi';
 import type {
@@ -265,24 +266,28 @@ export function SubagentDrawer({
             </div>
           </div>
           {canCancel ? (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
+              tone="danger"
+              size="sm"
               onClick={handleCancel}
               disabled={cancelling}
               data-testid="subagent-cancel"
-              className="shrink-0 rounded-full border border-coral-200 px-2.5 py-1 text-xs font-medium text-coral-600 hover:bg-coral-50 disabled:cursor-not-allowed disabled:opacity-60 dark:border-coral-500/40 dark:text-coral-300 dark:hover:bg-coral-500/10">
+              className="shrink-0 rounded-full">
               {cancelling
                 ? t('conversations.subagent.cancelling')
                 : t('conversations.subagent.cancel')}
-            </button>
+            </Button>
           ) : null}
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             onClick={onClose}
             aria-label={t('conversations.subagent.close')}
-            className="shrink-0 rounded-full p-1.5 text-stone-400 hover:bg-stone-100 dark:hover:bg-neutral-800 hover:text-stone-600 dark:hover:text-neutral-200">
+            className="shrink-0 rounded-full">
             ✕
-          </button>
+          </Button>
         </header>
         {cancelError ? (
           <div
diff --git a/app/src/pages/conversations/components/TaskKanbanBoard.tsx b/app/src/pages/conversations/components/TaskKanbanBoard.tsx
index ae5055b94..2d8871bb9 100644
--- a/app/src/pages/conversations/components/TaskKanbanBoard.tsx
+++ b/app/src/pages/conversations/components/TaskKanbanBoard.tsx
@@ -16,6 +16,7 @@ import {
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { settingsNavState } from '../../../components/settings/modal/settingsOverlay';
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import type { TaskBoard, TaskBoardCard, TaskBoardCardStatus } from '../../../types/turnState';
 import {
@@ -875,13 +876,15 @@ function TaskBriefDialog({
               {card.title}
             </h3>
           </div>
-          <button
-            type="button"
+          <Button
+            iconOnly
+            variant="tertiary"
+            size="sm"
             aria-label={t('conversations.taskKanban.closeBrief')}
             onClick={onClose}
-            className="flex h-7 w-7 flex-none items-center justify-center rounded-md text-stone-500 hover:bg-stone-100 hover:text-stone-800 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100">
+            className="flex-none">
             <LuX className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         {source && <SourceBrief source={source} />}
@@ -977,29 +980,19 @@ function TaskBriefDialog({
             />
             <div className="flex items-center justify-between gap-2 pt-1">
               {deletable ? (
-                <button
-                  type="button"
-                  onClick={handleDelete}
-                  className="rounded-md border border-coral-200 px-3 py-1.5 text-xs font-medium text-coral-600 hover:bg-coral-50 dark:border-coral-500/30 dark:text-coral-300 dark:hover:bg-coral-500/10">
+                <Button variant="secondary" tone="danger" size="sm" onClick={handleDelete}>
                   {t('conversations.taskKanban.deleteCard')}
-                </button>
+                </Button>
               ) : (
                 <span />
               )}
               <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={onClose}
-                  className="rounded-md border border-stone-200 px-3 py-1.5 text-xs font-medium text-stone-600 hover:bg-stone-50 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800">
+                <Button variant="secondary" size="sm" onClick={onClose}>
                   {t('common.cancel')}
-                </button>
-                <button
-                  type="button"
-                  onClick={save}
-                  disabled={!title.trim()}
-                  className="rounded-md bg-ocean-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-ocean-700 disabled:opacity-50">
+                </Button>
+                <Button variant="primary" size="sm" onClick={save} disabled={!title.trim()}>
                   {t('conversations.taskKanban.saveChanges')}
-                </button>
+                </Button>
               </div>
             </div>
           </div>
@@ -1050,12 +1043,9 @@ function TaskBriefDialog({
             />
             {deletable && (
               <div className="flex justify-end pt-1">
-                <button
-                  type="button"
-                  onClick={handleDelete}
-                  className="rounded-md border border-coral-200 px-3 py-1.5 text-xs font-medium text-coral-600 hover:bg-coral-50 dark:border-coral-500/30 dark:text-coral-300 dark:hover:bg-coral-500/10">
+                <Button variant="secondary" tone="danger" size="sm" onClick={handleDelete}>
                   {t('conversations.taskKanban.deleteCard')}
-                </button>
+                </Button>
               </div>
             )}
           </div>
diff --git a/app/src/pages/dev/AgentInsightsPreview.tsx b/app/src/pages/dev/AgentInsightsPreview.tsx
index 6ad39630f..122f90b26 100644
--- a/app/src/pages/dev/AgentInsightsPreview.tsx
+++ b/app/src/pages/dev/AgentInsightsPreview.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import Button from '../../components/ui/Button';
 import type { ToolTimelineEntry } from '../../store/chatRuntimeSlice';
 import { AgentProcessSourcePanel } from '../conversations/components/AgentProcessSourcePanel';
 import { ToolTimelineBlock } from '../conversations/components/ToolTimelineBlock';
@@ -124,12 +125,9 @@ export default function AgentInsightsPreview() {
         </Section>
 
         <Section title="Agent Process Source panel">
-          <button
-            type="button"
-            onClick={() => setPanelOpen(true)}
-            className="rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-600">
+          <Button variant="primary" size="sm" onClick={() => setPanelOpen(true)}>
             View full agent process Source →
-          </button>
+          </Button>
         </Section>
       </div>
 
diff --git a/app/src/pages/ios/MascotScreen.tsx b/app/src/pages/ios/MascotScreen.tsx
index 987643ef7..b88e9a2bc 100644
--- a/app/src/pages/ios/MascotScreen.tsx
+++ b/app/src/pages/ios/MascotScreen.tsx
@@ -34,6 +34,7 @@ import {
   stopListening,
 } from 'tauri-plugin-ptt-api';
 
+import Button from '../../components/ui/Button';
 import { RiveMascot } from '../../features/human/Mascot';
 import { useHumanMascot } from '../../features/human/useHumanMascot';
 import { useT } from '../../lib/i18n/I18nContext';
@@ -419,13 +420,9 @@ export const MascotScreen: FC = () => {
             {pairedLabel}
           </span>
         </div>
-        <button
-          type="button"
-          onClick={handleDisconnect}
-          className="px-3 py-1.5 rounded-lg text-xs text-red-400 border border-red-400/30
-                     active:opacity-70 transition-opacity">
+        <Button variant="secondary" tone="danger" size="sm" onClick={handleDisconnect}>
           {t('iosMascot.disconnect')}
-        </button>
+        </Button>
       </div>
 
       {/* Mascot canvas */}
diff --git a/app/src/pages/onboarding/steps/ApiKeysStep.tsx b/app/src/pages/onboarding/steps/ApiKeysStep.tsx
index dd8072379..2f2958941 100644
--- a/app/src/pages/onboarding/steps/ApiKeysStep.tsx
+++ b/app/src/pages/onboarding/steps/ApiKeysStep.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import { setCloudProviderKey } from '../../../services/api/aiSettingsApi';
 import { callCoreRpc } from '../../../services/coreRpcClient';
@@ -258,13 +259,14 @@ const ApiKeysStep = ({ onNext, onSkip }: ApiKeysStepProps) => {
       </div>
 
       <div className="mt-4 flex justify-center">
-        <button
-          type="button"
+        <Button
+          variant="tertiary"
+          size="xs"
           onClick={onSkip}
           disabled={saving}
-          className="text-xs text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 underline disabled:opacity-50">
+          className="underline">
           {t('onboarding.apiKeys.skipForNow')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/app/src/pages/onboarding/steps/CustomWizardStep.tsx b/app/src/pages/onboarding/steps/CustomWizardStep.tsx
index 82946edae..8d928f879 100644
--- a/app/src/pages/onboarding/steps/CustomWizardStep.tsx
+++ b/app/src/pages/onboarding/steps/CustomWizardStep.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode, useState } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import OnboardingNextButton from '../components/OnboardingNextButton';
 import WizardStepper from '../components/WizardStepper';
@@ -169,12 +170,9 @@ const CustomWizardStep = ({
       ) : null}
 
       <div className="mt-8 flex items-center gap-3">
-        <button
-          type="button"
-          onClick={onBack}
-          className="rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-2.5 text-sm font-medium text-stone-700 dark:text-neutral-200 hover:bg-stone-50 dark:hover:bg-neutral-800/60 focus:outline-none">
+        <Button variant="secondary" onClick={onBack}>
           {t('onboarding.custom.back')}
-        </button>
+        </Button>
         <div className="flex-1">
           <OnboardingNextButton
             label={continueLabel ?? t('onboarding.custom.continue')}
diff --git a/app/src/pages/onboarding/steps/LocalAIStep.tsx b/app/src/pages/onboarding/steps/LocalAIStep.tsx
index 33da62543..92daeaaeb 100644
--- a/app/src/pages/onboarding/steps/LocalAIStep.tsx
+++ b/app/src/pages/onboarding/steps/LocalAIStep.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import { bootstrapLocalAiWithRecommendedPreset } from '../../../utils/localAiBootstrap';
 import { openhumanLocalAiPresets } from '../../../utils/tauriCommands';
@@ -120,12 +121,9 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
           onClick={handleSkip}
         />
 
-        <button
-          type="button"
-          onClick={handleConsent}
-          className="mt-3 w-full text-center text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 transition-colors">
+        <Button variant="tertiary" size="xs" onClick={handleConsent} className="mt-3 w-full">
           {t('onboarding.localAI.useLocalAnyway')}
-        </button>
+        </Button>
       </div>
     );
   }
@@ -189,12 +187,9 @@ const LocalAIStep = ({ onNext, onBack: _onBack, onDownloadError }: LocalAIStepPr
         onClick={handleSkip}
       />
 
-      <button
-        type="button"
-        onClick={handleConsent}
-        className="mt-3 w-full text-center text-xs text-stone-400 dark:text-neutral-500 hover:text-stone-600 dark:text-neutral-300 transition-colors">
+      <Button variant="tertiary" size="xs" onClick={handleConsent} className="mt-3 w-full">
         {t('onboarding.localAI.useLocalInstead')}
-      </button>
+      </Button>
     </div>
   );
 };
diff --git a/app/src/pages/onboarding/steps/ReferralApplyStep.tsx b/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
index a0f6dbe56..2fd8b8006 100644
--- a/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
+++ b/app/src/pages/onboarding/steps/ReferralApplyStep.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import Button from '../../../components/ui/Button';
 import { useT } from '../../../lib/i18n/I18nContext';
 import { useCoreState } from '../../../providers/CoreStateProvider';
 import { referralApi } from '../../../services/api/referralApi';
@@ -117,20 +118,16 @@ const ReferralApplyStep = ({ onNext, onApplied }: ReferralApplyStepProps) => {
           </div>
 
           <div className="flex gap-3">
-            <button
-              type="button"
-              onClick={onNext}
-              disabled={isLoading}
-              className="flex-1 py-2.5 text-sm font-medium rounded-xl border border-stone-200 dark:border-neutral-800 text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 dark:text-neutral-200 hover:border-stone-300 dark:border-neutral-700 transition-colors">
+            <Button variant="secondary" onClick={onNext} disabled={isLoading} className="flex-1">
               {t('onboarding.skip')}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="primary"
               onClick={() => void handleApply()}
               disabled={isLoading || !code.trim()}
-              className="btn-primary flex-1 py-2.5 text-sm font-medium rounded-xl disabled:opacity-50 disabled:cursor-not-allowed">
+              className="flex-1">
               {isLoading ? t('common.loading') : t('common.submit')}
-            </button>
+            </Button>
           </div>
         </>
       )}
diff --git a/app/test/playwright/specs/mcp-tab-flow.spec.ts b/app/test/playwright/specs/mcp-tab-flow.spec.ts
index 64476247d..18985913a 100644
--- a/app/test/playwright/specs/mcp-tab-flow.spec.ts
+++ b/app/test/playwright/specs/mcp-tab-flow.spec.ts
@@ -266,9 +266,9 @@ test.describe('MCP Tab — Table View & Filtering', () => {
 
   test('renders search bar and filter chips', async ({ page }) => {
     await expect(page.locator('input[type="search"]')).toBeVisible();
-    await expect(page.getByRole('button', { name: /^All$/ })).toBeVisible();
-    await expect(page.getByRole('button', { name: /Installed/ })).toBeVisible();
-    await expect(page.getByRole('button', { name: /Registry/ })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /^All$/ })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /Installed/ })).toBeVisible();
+    await expect(page.getByRole('tab', { name: /Registry/ })).toBeVisible();
   });
 
   test('displays installed servers with status dot and Manage action', async ({ page }) => {
@@ -286,7 +286,7 @@ test.describe('MCP Tab — Table View & Filtering', () => {
   });
 
   test('filter "Installed" hides registry rows', async ({ page }) => {
-    await page.getByRole('button', { name: /Installed/ }).click();
+    await page.getByRole('tab', { name: /Installed/ }).click();
     const rows = page.locator('table tbody tr');
     const count = await rows.count();
     expect(count).toBeGreaterThan(0);
@@ -296,7 +296,7 @@ test.describe('MCP Tab — Table View & Filtering', () => {
   });
 
   test('filter "Registry" hides installed rows', async ({ page }) => {
-    await page.getByRole('button', { name: /Registry/ }).click();
+    await page.getByRole('tab', { name: /Registry/ }).click();
     const rows = page.locator('table tbody tr');
     const count = await rows.count();
     expect(count).toBeGreaterThan(0);
@@ -306,7 +306,7 @@ test.describe('MCP Tab — Table View & Filtering', () => {
   });
 
   test('already-installed servers are excluded from registry rows', async ({ page }) => {
-    await page.getByRole('button', { name: /Registry/ }).click();
+    await page.getByRole('tab', { name: /Registry/ }).click();
     const rows = page.locator('table tbody tr');
     const count = await rows.count();
     for (let i = 0; i < count; i++) {
@@ -452,7 +452,7 @@ test.describe('MCP Tab — Manage & Uninstall Lifecycle', () => {
 
     await expect(page.locator('table')).toBeVisible({ timeout: 10_000 });
 
-    await page.getByRole('button', { name: /Installed/ }).click();
+    await page.getByRole('tab', { name: /Installed/ }).click();
     const removedRow = page.locator('table tbody tr', {
       has: page.locator('td:first-child:has-text("Memory Server")'),
     });
@@ -477,7 +477,7 @@ test.describe('MCP Tab — Empty & Edge States', () => {
     await setupMockRpc(page, state);
     await navigateToMcpTab(page);
 
-    await page.getByRole('button', { name: /Installed/ }).click();
+    await page.getByRole('tab', { name: /Installed/ }).click();
     // Target the empty-state element directly: a broad `text=/no.*servers/i`
     // locator also matches ancestor containers (the root shell wraps the panel),
     // tripping Playwright strict mode.