From e8f1e78c87143142e1aa4c4ef43df50b73c37311 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 00:37:11 -0300
Subject: [PATCH 01/13] refactor(dashboard): /dashboard/tokens on the CI UI Kit
 (KEA-7886, lote 3)

---
 src/app/(dashboard)/dashboard/tokens/page.tsx | 359 +++++++++---------
 1 file changed, 176 insertions(+), 183 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/tokens/page.tsx b/src/app/(dashboard)/dashboard/tokens/page.tsx
index 17a31288aa04..e1561dbd5c0f 100644
--- a/src/app/(dashboard)/dashboard/tokens/page.tsx
+++ b/src/app/(dashboard)/dashboard/tokens/page.tsx
@@ -2,7 +2,21 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useLocale, useTranslations } from "next-intl";
-import { Card } from "@/shared/components";
+import { Alert } from "@omniroute/ui-kit/alert";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@omniroute/ui-kit/table";
+import { TableLoadingState } from "@omniroute/ui-kit/table-loading";
+import Badge from "@/shared/components/Badge";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import EmptyState from "@/shared/components/EmptyState";
+import Input from "@/shared/components/Input";
 
 interface TokenLedgerEntry {
   id: number;
@@ -264,6 +278,27 @@ export default function TokensPage() {
     }
   };
 
+  const statusMessage = (
+    message: { type: "success" | "error"; text: string } | null,
+    onDismiss: () => void
+  ) =>
+    message ? (
+      <Alert
+        variant={message.type === "success" ? "success" : "critical"}
+        dismissLabel={t("close")}
+        onDismiss={onDismiss}
+      >
+        {message.text}
+      </Alert>
+    ) : null;
+
+  const errorMessage = (text: string, onDismiss: () => void) =>
+    text ? (
+      <Alert variant="critical" dismissLabel={t("close")} onDismiss={onDismiss}>
+        {text}
+      </Alert>
+    ) : null;
+
   return (
     <div className="flex flex-col gap-6">
       {/* Balance */}
@@ -273,128 +308,102 @@ export default function TokensPage() {
             <p className="text-sm text-text-muted">{t("tokensTokenBalance")}</p>
             <p className="text-4xl font-bold mt-1">{balance.toLocaleString(locale)}</p>
           </div>
-          <div className="text-6xl opacity-20">🪙</div>
+          <div className="text-6xl opacity-20" aria-hidden="true">
+            🪙
+          </div>
         </div>
       </Card>
 
       {/* Transfer Form */}
       <Card title={t("tokensSendTokens")} icon="send">
         <form onSubmit={handleTransfer} className="grid gap-4">
-          <div>
-            <label className="block text-sm text-text-muted mb-1">
-              {t("tokensRecipientApiKeyId")}
-            </label>
-            <input
-              type="text"
-              value={toApiKeyId}
-              onChange={(e) => setToApiKeyId(e.target.value)}
-              placeholder={t("tokensRecipientApiKeyIdPlaceholder")}
+          <Input
+            label={t("tokensRecipientApiKeyId")}
+            type="text"
+            value={toApiKeyId}
+            onChange={(e) => setToApiKeyId(e.target.value)}
+            placeholder={t("tokensRecipientApiKeyIdPlaceholder")}
+            required
+          />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              label={t("tokensAmount")}
+              type="number"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              placeholder="0"
+              min="1"
               required
-              className="w-full px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
+            />
+            <Input
+              label={t("tokensReasonOptional")}
+              type="text"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder={t("tokensReasonPlaceholder")}
             />
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm text-text-muted mb-1">{t("tokensAmount")}</label>
-              <input
-                type="number"
-                value={amount}
-                onChange={(e) => setAmount(e.target.value)}
-                placeholder="0"
-                min="1"
-                required
-                className="w-full px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm text-text-muted mb-1">
-                {t("tokensReasonOptional")}
-              </label>
-              <input
-                type="text"
-                value={reason}
-                onChange={(e) => setReason(e.target.value)}
-                placeholder={t("tokensReasonPlaceholder")}
-                className="w-full px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
-              />
-            </div>
-          </div>
-          {transferMsg && (
-            <div
-              className={`p-3 rounded-lg text-sm ${
-                transferMsg.type === "success"
-                  ? "bg-emerald-500/10 text-emerald-400"
-                  : "bg-red-500/10 text-red-400"
-              }`}
-            >
-              {transferMsg.text}
-            </div>
-          )}
-          <button
+          {statusMessage(transferMsg, () => setTransferMsg(null))}
+          <Button
             type="submit"
+            variant="primary"
             disabled={transferLoading || !toApiKeyId || !amount}
-            className="px-4 py-2 text-sm font-medium rounded-lg bg-violet-500 text-white hover:bg-violet-600 disabled:opacity-50 transition-colors justify-self-start"
+            className="justify-self-start"
           >
             {transferLoading ? t("tokensSending") : t("tokensSendTokens")}
-          </button>
+          </Button>
         </form>
       </Card>
 
       {/* Transaction History */}
       <Card title={t("tokensTransactionHistory")} icon="history">
         {historyLoading ? (
-          <div className="text-center py-8 text-text-muted">{t("loading")}</div>
+          <TableLoadingState label={t("loading")} />
         ) : history.length === 0 ? (
-          <div className="text-center py-8 text-text-muted">{t("tokensNoTransactionsYet")}</div>
+          <EmptyState icon="history" title={t("tokensNoTransactionsYet")} />
         ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="text-left text-sm text-text-muted border-b border-border">
-                  <th className="pb-3 font-medium">{t("type")}</th>
-                  <th className="pb-3 font-medium">{t("tokensFrom")}</th>
-                  <th className="pb-3 font-medium">{t("tokensTo")}</th>
-                  <th className="pb-3 font-medium text-right">{t("tokensAmount")}</th>
-                  <th className="pb-3 font-medium">{t("tokensReason")}</th>
-                  <th className="pb-3 font-medium text-right">{t("tokensDate")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {history.map((entry) => {
-                  const isSent = entry.fromApiKeyId !== "current";
-                  return (
-                    <tr key={entry.id} className="border-b border-border/50 last:border-b-0">
-                      <td className="py-3">
-                        <span
-                          className={`text-xs px-2 py-1 rounded ${
-                            isSent
-                              ? "bg-red-500/10 text-red-400"
-                              : "bg-emerald-500/10 text-emerald-400"
-                          }`}
-                        >
-                          {isSent ? t("tokensSent") : t("tokensReceived")}
-                        </span>
-                      </td>
-                      <td className="py-3 text-sm font-mono">
-                        {entry.fromApiKeyId.slice(0, 8)}...
-                      </td>
-                      <td className="py-3 text-sm font-mono">{entry.toApiKeyId.slice(0, 8)}...</td>
-                      <td
-                        className={`py-3 text-right font-mono ${isSent ? "text-red-400" : "text-emerald-400"}`}
-                      >
-                        {isSent ? "-" : "+"}
-                        {entry.amount.toLocaleString(locale)}
-                      </td>
-                      <td className="py-3 text-sm text-text-muted">{entry.reason || "-"}</td>
-                      <td className="py-3 text-right text-sm text-text-muted">
-                        {new Date(entry.createdAt).toLocaleDateString(locale)}
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
+          <Table scrollbarLabel={t("tokensTransactionHistory")}>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("type")}</TableHead>
+                <TableHead>{t("tokensFrom")}</TableHead>
+                <TableHead>{t("tokensTo")}</TableHead>
+                <TableHead className="text-right">{t("tokensAmount")}</TableHead>
+                <TableHead>{t("tokensReason")}</TableHead>
+                <TableHead className="text-right">{t("tokensDate")}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {history.map((entry) => {
+                const isSent = entry.fromApiKeyId !== "current";
+                return (
+                  <TableRow key={entry.id}>
+                    <TableCell>
+                      <Badge variant={isSent ? "error" : "success"} size="sm">
+                        {isSent ? t("tokensSent") : t("tokensReceived")}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm font-mono">
+                      {entry.fromApiKeyId.slice(0, 8)}...
+                    </TableCell>
+                    <TableCell className="text-sm font-mono">
+                      {entry.toApiKeyId.slice(0, 8)}...
+                    </TableCell>
+                    <TableCell
+                      className={`text-right font-mono ${isSent ? "text-error" : "text-success"}`}
+                    >
+                      {isSent ? "-" : "+"}
+                      {entry.amount.toLocaleString(locale)}
+                    </TableCell>
+                    <TableCell className="text-sm text-text-muted">{entry.reason || "-"}</TableCell>
+                    <TableCell className="text-right text-sm text-text-muted">
+                      {new Date(entry.createdAt).toLocaleDateString(locale)}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
         )}
       </Card>
 
@@ -402,72 +411,52 @@ export default function TokensPage() {
       <Card title={t("tokensInviteCodes")} icon="mail">
         <div className="flex flex-col gap-4">
           <div className="flex items-end gap-3">
-            <div className="flex-1">
-              <label className="block text-sm text-text-muted mb-1">{t("tokensMaxUses")}</label>
-              <input
-                type="number"
-                value={inviteMaxUses}
-                onChange={(e) => setInviteMaxUses(e.target.value)}
-                min="1"
-                className="w-full px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
-              />
-            </div>
-            <button
-              onClick={handleCreateInvite}
-              disabled={inviteLoading}
-              className="px-4 py-2 text-sm font-medium rounded-lg bg-violet-500 text-white hover:bg-violet-600 disabled:opacity-50 transition-colors"
-            >
+            <Input
+              label={t("tokensMaxUses")}
+              type="number"
+              value={inviteMaxUses}
+              onChange={(e) => setInviteMaxUses(e.target.value)}
+              min="1"
+              className="flex-1"
+            />
+            <Button variant="primary" onClick={handleCreateInvite} disabled={inviteLoading}>
               {inviteLoading ? t("tokensCreatingInvite") : t("tokensCreateInvite")}
-            </button>
+            </Button>
           </div>
 
           {newInviteCode && (
-            <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400 text-sm">
+            <Alert
+              variant="success"
+              dismissLabel={t("close")}
+              onDismiss={() => setNewInviteCode(null)}
+            >
               {t("tokensInviteCreated")}:{" "}
               <span className="font-mono font-bold">{newInviteCode}</span>
-            </div>
+            </Alert>
           )}
 
-          {inviteError && (
-            <div className="p-3 rounded-lg bg-red-500/10 text-red-400 text-sm">{inviteError}</div>
-          )}
+          {errorMessage(inviteError, () => setInviteError(""))}
 
           {/* Redeem */}
           <form
             onSubmit={handleRedeem}
             className="flex items-end gap-3 border-t border-border pt-4"
           >
-            <div className="flex-1">
-              <label className="block text-sm text-text-muted mb-1">{t("tokensRedeemCode")}</label>
-              <input
-                type="text"
-                value={redeemCode}
-                onChange={(e) => setRedeemCode(e.target.value)}
-                placeholder={t("tokensRedeemCodePlaceholder")}
-                required
-                className="w-full px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
-              />
-            </div>
-            <button
-              type="submit"
-              disabled={redeemLoading || !redeemCode}
-              className="px-4 py-2 text-sm font-medium rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 disabled:opacity-50 transition-colors"
-            >
+            <Input
+              label={t("tokensRedeemCode")}
+              type="text"
+              value={redeemCode}
+              onChange={(e) => setRedeemCode(e.target.value)}
+              placeholder={t("tokensRedeemCodePlaceholder")}
+              required
+              className="flex-1"
+            />
+            <Button type="submit" variant="secondary" disabled={redeemLoading || !redeemCode}>
               {redeemLoading ? t("tokensRedeeming") : t("tokensRedeem")}
-            </button>
+            </Button>
           </form>
 
-          {redeemMsg && (
-            <div
-              className={`p-3 rounded-lg text-sm ${
-                redeemMsg.type === "success"
-                  ? "bg-emerald-500/10 text-emerald-400"
-                  : "bg-red-500/10 text-red-400"
-              }`}
-            >
-              {redeemMsg.text}
-            </div>
-          )}
+          {statusMessage(redeemMsg, () => setRedeemMsg(null))}
 
           {/* Active Invites */}
           {invites.length > 0 && (
@@ -477,7 +466,7 @@ export default function TokensPage() {
                 {invites.map((inv) => (
                   <div
                     key={inv.id}
-                    className="flex items-center justify-between p-3 rounded-lg bg-surface/50 border border-border/50"
+                    className="flex items-center justify-between p-3 rounded-lg bg-surface-2 border border-border"
                   >
                     <div>
                       <span className="font-mono font-bold">{inv.code}</span>
@@ -485,16 +474,20 @@ export default function TokensPage() {
                         {t("tokensInviteUses", { used: inv.useCount, max: inv.maxUses })}
                       </span>
                       {inv.revokedAt && (
-                        <span className="text-xs text-red-400 ml-2">{t("tokensRevoked")}</span>
+                        <Badge variant="error" size="sm" className="ml-2">
+                          {t("tokensRevoked")}
+                        </Badge>
                       )}
                     </div>
                     {!inv.revokedAt && (
-                      <button
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-error"
                         onClick={() => handleRevokeInvite(inv.id)}
-                        className="text-xs px-2 py-1 rounded text-red-400 hover:bg-red-500/10 transition-colors"
                       >
                         {t("tokensRevoke")}
-                      </button>
+                      </Button>
                     )}
                   </div>
                 ))}
@@ -509,75 +502,73 @@ export default function TokensPage() {
         <div className="flex flex-col gap-4">
           <form onSubmit={handleConnectServer} className="grid gap-3">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-              <input
+              <Input
                 type="text"
                 value={serverName}
                 onChange={(e) => setServerName(e.target.value)}
                 placeholder={t("tokensServerNamePlaceholder")}
+                aria-label={t("tokensServerNamePlaceholder")}
                 required
-                className="px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
               />
-              <input
+              <Input
                 type="url"
                 value={serverUrl}
                 onChange={(e) => setServerUrl(e.target.value)}
                 placeholder="https://server.example.com"
+                aria-label="URL"
                 required
-                className="px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
               />
-              <input
+              <Input
                 type="password"
                 value={serverApiKey}
                 onChange={(e) => setServerApiKey(e.target.value)}
                 placeholder={t("tokensApiKeyPlaceholder")}
+                aria-label={t("tokensApiKeyPlaceholder")}
                 required
-                className="px-3 py-2 rounded-lg bg-background border border-border text-sm focus:outline-none focus:ring-1 focus:ring-violet-500"
               />
             </div>
-            <button
+            <Button
               type="submit"
+              variant="primary"
               disabled={serverLoading || !serverName || !serverUrl || !serverApiKey}
-              className="px-4 py-2 text-sm font-medium rounded-lg bg-violet-500 text-white hover:bg-violet-600 disabled:opacity-50 transition-colors justify-self-start"
+              className="justify-self-start"
             >
               {serverLoading ? t("tokensConnecting") : t("tokensConnectServer")}
-            </button>
+            </Button>
           </form>
 
-          {serverError && (
-            <div className="p-3 rounded-lg bg-red-500/10 text-red-400 text-sm">{serverError}</div>
-          )}
+          {errorMessage(serverError, () => setServerError(""))}
 
           {servers.length === 0 ? (
-            <div className="text-center py-6 text-text-muted text-sm">
-              {t("tokensNoServersConnected")}
-            </div>
+            <EmptyState icon="dns" title={t("tokensNoServersConnected")} />
           ) : (
             <div className="space-y-2">
               {servers.map((server) => (
                 <div
                   key={server.id}
-                  className="flex items-center justify-between p-3 rounded-lg bg-surface/50 border border-border/50"
+                  className="flex items-center justify-between p-3 rounded-lg bg-surface-2 border border-border"
                 >
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
                       <p className="font-semibold truncate">{server.name}</p>
-                      <span
-                        className={`text-xs px-2 py-0.5 rounded ${
+                      <Badge
+                        size="sm"
+                        variant={
                           server.status === "connected"
-                            ? "bg-emerald-500/10 text-emerald-400"
+                            ? "success"
                             : server.status === "error"
-                              ? "bg-red-500/10 text-red-400"
-                              : "bg-gray-500/10 text-gray-400"
-                        }`}
+                              ? "error"
+                              : "default"
+                        }
                       >
                         {t.has(`tokensServerStatus.${server.status}`)
                           ? t(`tokensServerStatus.${server.status}`)
                           : server.status}
-                      </span>
+                      </Badge>
                     </div>
                     <p className="text-xs text-text-muted mt-1 truncate">{server.url}</p>
                     {server.errorMessage && (
-                      <p className="text-xs text-red-400 mt-1">{server.errorMessage}</p>
+                      <p className="text-xs text-error mt-1">{server.errorMessage}</p>
                     )}
                     {server.lastSyncAt && (
                       <p className="text-xs text-text-muted mt-1">
@@ -587,12 +578,14 @@ export default function TokensPage() {
                       </p>
                     )}
                   </div>
-                  <button
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-error ml-4"
                     onClick={() => handleDisconnectServer(server.id)}
-                    className="text-xs px-3 py-1.5 rounded text-red-400 hover:bg-red-500/10 transition-colors ml-4"
                   >
                     {t("tokensDisconnect")}
-                  </button>
+                  </Button>
                 </div>
               ))}
             </div>

From 07a9ec1c6cc6dacd921642d0f7cc5571e1421a76 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 00:37:31 -0300
Subject: [PATCH 02/13] refactor(dashboard): /dashboard/api-manager/routing on
 the CI UI Kit (KEA-7886, lote 3)

---
 .../api-manager/routing/RoutingPageClient.tsx  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/api-manager/routing/RoutingPageClient.tsx b/src/app/(dashboard)/dashboard/api-manager/routing/RoutingPageClient.tsx
index d3e64bfa2ec4..df1e0acfc142 100644
--- a/src/app/(dashboard)/dashboard/api-manager/routing/RoutingPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/routing/RoutingPageClient.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
+import { PageHeader } from "@omniroute/ui-kit/page-header";
 import ReasoningRoutingRules from "@/shared/components/ReasoningRoutingRules";
 
 export default function RoutingPageClient() {
@@ -10,13 +11,16 @@ export default function RoutingPageClient() {
   const searchParams = useSearchParams();
   return (
     <div className="min-w-0 w-full space-y-6 pb-10">
-      <header className="space-y-3">
-        <Link href="/dashboard/api-manager" className="text-sm text-primary hover:underline">
-          ← {t("backToKeys")}
-        </Link>
-        <h1 className="text-2xl font-semibold tracking-tight text-text-main">{t("pageTitle")}</h1>
-        <p className="max-w-3xl text-sm leading-relaxed text-text-muted">{t("pageDescription")}</p>
-      </header>
+      <PageHeader
+        compact
+        breadcrumbs={
+          <Link href="/dashboard/api-manager" className="text-sm text-primary hover:underline">
+            ← {t("backToKeys")}
+          </Link>
+        }
+        title={t("pageTitle")}
+        description={t("pageDescription")}
+      />
       <ReasoningRoutingRules
         key={searchParams.get("apiKeyId") || "all"}
         initialApiKeyId={searchParams.get("apiKeyId") || ""}

From cf3e15e3a2536fdcc6e59c92cf75aa882f9efa91 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 00:42:13 -0300
Subject: [PATCH 03/13] refactor(dashboard): /dashboard/onboarding on the CI UI
 Kit (KEA-7886, lote 3)

---
 .../onboarding/components/TierFlowDiagram.tsx |   2 +-
 .../(dashboard)/dashboard/onboarding/page.tsx | 302 +++++++++---------
 .../steps/FreeProviderOnboardingCard.tsx      |  83 +++--
 .../dashboard/onboarding/steps/TierTour.tsx   |   6 +-
 src/i18n/messages/en.json                     |   3 +-
 src/i18n/messages/pt-BR.json                  |   3 +-
 6 files changed, 191 insertions(+), 208 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx b/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx
index ded42fdf0dee..845e14282b06 100644
--- a/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx
@@ -19,7 +19,7 @@ export function TierFlowDiagram() {
         width={800}
         height={420}
         priority
-        className="w-full max-w-2xl rounded-lg border border-white/[0.06]"
+        className="w-full max-w-2xl rounded-lg border border-border"
       />
       <p className="mx-auto max-w-md text-xs leading-relaxed text-text-muted text-center text-balance">
         {t("flowCaption")}
diff --git a/src/app/(dashboard)/dashboard/onboarding/page.tsx b/src/app/(dashboard)/dashboard/onboarding/page.tsx
index adf2720d442d..2e6f2bcebc22 100644
--- a/src/app/(dashboard)/dashboard/onboarding/page.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/page.tsx
@@ -3,6 +3,17 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
+import { Alert } from "@omniroute/ui-kit/alert";
+import { CodePreview } from "@omniroute/ui-kit/code-preview";
+import { ChoiceCard } from "@omniroute/ui-kit/onboarding-patterns";
+import { RadioGroup } from "@omniroute/ui-kit/radio-group";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Checkbox from "@/shared/components/Checkbox";
+import Icon from "@/shared/components/Icon";
+import Input from "@/shared/components/Input";
+import { Spinner } from "@/shared/components/Loading";
+import { cn } from "@/shared/utils/cn";
 import { useDisplayBaseUrl } from "@/shared/hooks";
 import { FreeProviderOnboardingCard } from "./steps/FreeProviderOnboardingCard";
 import { TierTour } from "./steps/TierTour";
@@ -32,7 +43,6 @@ export default function OnboardingWizard() {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [skipSecurity, setSkipSecurity] = useState(false);
-  const [capsLockOn, setCapsLockOn] = useState(false);
 
   // #14296: fresh Docker/NAT-forwarded installs (peer isn't 127.0.0.1) hit a
   // 401 on the bootstrap writes below until the operator supplies the
@@ -260,7 +270,7 @@ export default function OnboardingWizard() {
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-pulse text-text-muted">{tc("loading")}</div>
+        <Spinner label={tc("loading")} />
       </div>
     );
   }
@@ -269,46 +279,51 @@ export default function OnboardingWizard() {
     <div className="min-h-screen flex items-center justify-center p-4">
       <div className="w-full max-w-lg">
         {/* Progress Indicator */}
-        <div className="flex items-center justify-center gap-2 mb-8">
+        <ol aria-label={t("stepProgress")} className="flex items-center justify-center gap-2 mb-8">
           {STEPS.map((s, i) => (
-            <div key={s.id} className="flex items-center gap-2">
-              <div
-                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300 ${
+            <li
+              key={s.id}
+              className="flex items-center gap-2"
+              aria-current={i === step ? "step" : undefined}
+            >
+              <span
+                className={cn(
+                  "w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300",
                   i < step
-                    ? "bg-green-500/20 text-green-400"
+                    ? "bg-success-bg text-success"
                     : i === step
                       ? "bg-primary/20 text-primary ring-2 ring-primary/40"
-                      : "bg-white/5 text-text-muted"
-                }`}
-              >
-                {i < step ? (
-                  <span className="material-symbols-outlined text-[16px]">check</span>
-                ) : (
-                  i + 1
+                      : "bg-surface-2 text-text-muted"
                 )}
-              </div>
+              >
+                {i < step ? <Icon name="check" size={16} /> : i + 1}
+                <span className="sr-only">{s.title}</span>
+              </span>
               {i < STEPS.length - 1 && (
-                <div
-                  className={`w-8 h-0.5 rounded-full transition-colors ${
-                    i < step ? "bg-green-500/40" : "bg-white/10"
-                  }`}
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "w-8 h-0.5 rounded-full transition-colors",
+                    i < step ? "bg-success/40" : "bg-border"
+                  )}
                 />
               )}
-            </div>
+            </li>
           ))}
-        </div>
+        </ol>
 
         {/* Card */}
-        <div className="bg-surface rounded-2xl border border-white/[0.06] p-8 shadow-xl">
+        <Card padding="lg" className="shadow-xl">
           {/* Step Header */}
           <div className="text-center mb-6">
-            <span
-              className={`material-symbols-outlined text-[48px] mb-3 block ${
-                currentStep.id === "done" ? "text-green-400" : "text-primary"
-              }`}
-            >
-              {currentStep.icon}
-            </span>
+            <Icon
+              name={currentStep.icon}
+              size={48}
+              className={cn(
+                "mx-auto mb-3 block",
+                currentStep.id === "done" ? "text-success" : "text-primary"
+              )}
+            />
             <h2 className="text-2xl font-bold text-text-main">{currentStep.title}</h2>
             {currentStep.id === "tiers" && (
               <p className="mx-auto mt-2 max-w-md text-sm leading-relaxed text-text-muted text-balance">
@@ -322,27 +337,32 @@ export default function OnboardingWizard() {
               which step's write actually failed (security step or the
               Finish/Skip-wizard buttons). */}
           {errorMessage && (
-            <div className="mb-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg text-center animate-in fade-in duration-200">
-              <p className="text-sm text-amber-400">{errorMessage}</p>
+            <Alert
+              variant="warning"
+              className="mb-4"
+              dismissLabel={tc("close")}
+              onDismiss={() => setErrorMessage("")}
+            >
+              <p className="text-sm">{errorMessage}</p>
               {needsBootstrapToken && (
                 <div className="mt-3 space-y-2">
-                  <input
+                  <Input
                     type="text"
                     placeholder={t("bootstrapTokenLabel")}
+                    aria-label={t("bootstrapTokenLabel")}
                     value={bootstrapToken}
                     onChange={(e) => setBootstrapToken(e.target.value)}
-                    className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
                   />
-                  <button
+                  <Button
+                    variant="primary"
                     onClick={isLastStep ? handleFinish : handleSetPassword}
                     disabled={!bootstrapToken}
-                    className="px-6 py-2 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
                   >
                     {t("retry")}
-                  </button>
+                  </Button>
                 </div>
               )}
-            </div>
+            </Alert>
           )}
 
           {/* Step Content */}
@@ -359,12 +379,10 @@ export default function OnboardingWizard() {
                   ].map((f) => (
                     <div
                       key={f.icon}
-                      className="h-full bg-white/[0.03] rounded-xl p-3 text-center border border-white/[0.06]"
+                      className="h-full bg-surface-2 rounded-xl p-3 text-center border border-border"
                     >
                       <div className="flex h-full flex-col items-center justify-center">
-                        <span className="material-symbols-outlined text-primary text-[24px] mb-1 block">
-                          {f.icon}
-                        </span>
+                        <Icon name={f.icon} size={24} className="text-primary mb-1 block" />
                         <span className="text-xs text-text-muted">{f.label}</span>
                       </div>
                     </div>
@@ -380,51 +398,38 @@ export default function OnboardingWizard() {
             {currentStep.id === "security" && (
               <div className="space-y-4">
                 <p className="text-sm text-text-muted text-center">{t("securityDesc")}</p>
-                <label className="flex items-center gap-2 cursor-pointer text-sm text-text-muted">
-                  <input
-                    type="checkbox"
-                    checked={skipSecurity}
-                    onChange={(e) => setSkipSecurity(e.target.checked)}
-                    className="accent-primary"
-                  />
-                  {t("skipPassword")}
-                </label>
+                <Checkbox
+                  label={t("skipPassword")}
+                  checked={skipSecurity}
+                  onChange={(e) => setSkipSecurity(e.target.checked)}
+                />
                 {skipSecurity && (
-                  <p className="text-xs text-amber-400 text-center animate-in fade-in duration-200">
+                  <p className="text-xs text-warning text-center animate-in fade-in duration-200">
                     {t("securityDescSkipWarning")}
                   </p>
                 )}
                 {!skipSecurity && (
                   <div className="space-y-3">
-                    <input
+                    {/* Caps Lock warning comes from the Input adapter (common.capsLockOn). */}
+                    <Input
                       type="password"
                       placeholder={t("enterPassword")}
+                      aria-label={t("enterPassword")}
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
-                      onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
-                      onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
-                      className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
                     />
-                    <input
+                    <Input
                       type="password"
                       placeholder={t("confirmPasswordPlaceholder")}
+                      aria-label={t("confirmPasswordPlaceholder")}
                       value={confirmPassword}
                       onChange={(e) => setConfirmPassword(e.target.value)}
-                      onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
-                      onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
-                      className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
+                      error={
+                        password && confirmPassword && password !== confirmPassword
+                          ? t("passwordsMismatch")
+                          : undefined
+                      }
                     />
-                    {capsLockOn && (
-                      <p className="text-xs text-amber-500 dark:text-amber-400 flex items-center gap-1 animate-in fade-in duration-200">
-                        <span className="material-symbols-outlined text-[14px]" aria-hidden="true">
-                          keyboard_capslock
-                        </span>
-                        Caps Lock is on
-                      </p>
-                    )}
-                    {password && confirmPassword && password !== confirmPassword && (
-                      <p className="text-xs text-red-400">{t("passwordsMismatch")}</p>
-                    )}
                   </div>
                 )}
               </div>
@@ -435,53 +440,58 @@ export default function OnboardingWizard() {
               <div className="space-y-4">
                 <p className="text-sm text-text-muted text-center">{t("providerDesc")}</p>
                 {skipSecurity && (
-                  <div className="text-center p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg animate-in fade-in duration-200">
-                    <p className="text-sm text-amber-400">{t("providerRequiresPassword")}</p>
-                  </div>
+                  <p
+                    role="status"
+                    className="rounded-lg border border-warning/30 bg-warning-bg p-3 text-center text-sm text-warning animate-in fade-in duration-200"
+                  >
+                    {t("providerRequiresPassword")}
+                  </p>
                 )}
                 {!skipSecurity && <FreeProviderOnboardingCard />}
                 {!skipSecurity && (
                   <div className="flex items-center gap-3 text-[11px] text-text-muted">
-                    <span className="h-px flex-1 bg-white/10" />
+                    <span className="h-px flex-1 bg-border" />
                     <span>{t("freeProviders.orUseApiKey")}</span>
-                    <span className="h-px flex-1 bg-white/10" />
+                    <span className="h-px flex-1 bg-border" />
                   </div>
                 )}
                 {!skipSecurity && (
-                  <div className="grid grid-cols-3 gap-2">
+                  <RadioGroup
+                    aria-label={t("providerDesc")}
+                    value={selectedProvider ?? ""}
+                    onValueChange={(id) => {
+                      const provider = COMMON_PROVIDERS.find((p) => p.id === id);
+                      setSelectedProvider(id);
+                      if (provider) setProviderName(provider.name);
+                    }}
+                    className="[&_.ci-radio-group__items]:grid-cols-2 sm:[&_.ci-radio-group__items]:grid-cols-3 [&_.ci-radio-group__items]:gap-2"
+                  >
                     {COMMON_PROVIDERS.map((p) => (
-                      <button
+                      <ChoiceCard
                         key={p.id}
-                        onClick={() => {
-                          setSelectedProvider(p.id);
-                          setProviderName(p.name);
-                        }}
-                        className={`p-3 rounded-xl border text-center text-xs font-medium transition-all cursor-pointer ${
-                          selectedProvider === p.id
-                            ? "border-primary/60 bg-primary/10 text-primary"
-                            : "border-white/10 bg-white/[0.03] text-text-muted hover:border-white/20"
-                        }`}
-                      >
-                        {p.name}
-                      </button>
+                        value={p.id}
+                        title={p.name}
+                        tone="accent"
+                        className="text-xs"
+                      />
                     ))}
-                  </div>
+                  </RadioGroup>
                 )}
                 {!skipSecurity && selectedProvider && (
                   <div className="space-y-3 mt-4">
-                    <input
+                    <Input
                       type="password"
                       placeholder={t("apiKeyRequired")}
+                      aria-label={t("apiKeyRequired")}
                       value={providerKey}
                       onChange={(e) => setProviderKey(e.target.value)}
-                      className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
                     />
-                    <input
+                    <Input
                       type="text"
                       placeholder={t("customUrlOptional")}
+                      aria-label={t("customUrlOptional")}
                       value={providerUrl}
                       onChange={(e) => setProviderUrl(e.target.value)}
-                      className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
                     />
                   </div>
                 )}
@@ -493,39 +503,31 @@ export default function OnboardingWizard() {
               <div className="text-center space-y-4">
                 <p className="text-sm text-text-muted">{t("testDesc")}</p>
                 {testStatus === "idle" && (
-                  <button
-                    onClick={handleTestProvider}
-                    className="px-6 py-2.5 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors cursor-pointer"
-                  >
+                  <Button variant="primary" onClick={handleTestProvider}>
                     {t("runTest")}
-                  </button>
+                  </Button>
                 )}
                 {testStatus === "testing" && (
                   <div className="flex items-center justify-center gap-2 text-text-muted">
-                    <span className="material-symbols-outlined animate-spin text-[20px]">
-                      progress_activity
-                    </span>
+                    <Icon name="progress_activity" size={20} className="animate-spin" />
                     <span className="text-sm">{testMessage}</span>
                   </div>
                 )}
                 {testStatus === "success" && (
-                  <div className="flex items-center justify-center gap-2 text-green-400">
-                    <span className="material-symbols-outlined text-[20px]">check_circle</span>
+                  <div className="flex items-center justify-center gap-2 text-success">
+                    <Icon name="check_circle" size={20} />
                     <span className="text-sm">{testMessage}</span>
                   </div>
                 )}
                 {testStatus === "error" && (
                   <div className="space-y-3">
-                    <div className="flex items-center justify-center gap-2 text-amber-400">
-                      <span className="material-symbols-outlined text-[20px]">warning</span>
+                    <div className="flex items-center justify-center gap-2 text-warning">
+                      <Icon name="warning" size={20} />
                       <span className="text-sm">{testMessage}</span>
                     </div>
-                    <button
-                      onClick={handleTestProvider}
-                      className="text-xs text-text-muted underline cursor-pointer"
-                    >
+                    <Button variant="ghost" size="sm" onClick={handleTestProvider}>
                       {t("retry")}
-                    </button>
+                    </Button>
                   </div>
                 )}
               </div>
@@ -535,98 +537,82 @@ export default function OnboardingWizard() {
             {currentStep.id === "done" && (
               <div className="text-center space-y-4">
                 <p className="text-text-muted">{t("doneDesc")}</p>
-                <div className="bg-white/[0.03] rounded-xl p-4 border border-white/[0.06] text-left">
-                  <p className="text-xs text-text-muted mb-2 font-medium">{t("yourEndpoint")}</p>
-                  <code className="text-sm text-primary">{apiEndpoint}</code>
-                </div>
+                <CodePreview
+                  variant="surface"
+                  filename={t("yourEndpoint")}
+                  language=""
+                  code={apiEndpoint}
+                  copyLabel={tc("copy")}
+                  copiedLabel={tc("copied")}
+                  className="text-left"
+                />
               </div>
             )}
           </div>
 
           {/* Footer Actions */}
-          <div className="flex items-center justify-between mt-8 pt-6 border-t border-white/[0.06]">
+          <div className="flex items-center justify-between mt-8 pt-6 border-t border-border">
             <div>
               {step > 0 && !isLastStep && (
-                <button
-                  onClick={handleBack}
-                  className="px-4 py-2 text-sm text-text-muted hover:text-text-main transition-colors cursor-pointer"
-                >
+                <Button variant="ghost" onClick={handleBack}>
                   {tc("back")}
-                </button>
+                </Button>
               )}
             </div>
             <div className="flex items-center gap-3">
               {!isLastStep && step > 0 && (
-                <button
-                  onClick={handleNext}
-                  className="px-4 py-2 text-sm text-text-muted hover:text-text-main transition-colors cursor-pointer"
-                >
+                <Button variant="ghost" onClick={handleNext}>
                   {t("skip")}
-                </button>
+                </Button>
               )}
               {currentStep.id === "welcome" && (
-                <button
-                  onClick={handleNext}
-                  className="px-6 py-2.5 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors cursor-pointer"
-                >
+                <Button variant="primary" onClick={handleNext}>
                   {t("getStarted")}
-                </button>
+                </Button>
               )}
               {currentStep.id === "tiers" && (
-                <button
-                  onClick={handleNext}
-                  className="px-6 py-2.5 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors cursor-pointer"
-                >
+                <Button variant="primary" onClick={handleNext}>
                   {t("continue")}
-                </button>
+                </Button>
               )}
               {currentStep.id === "security" && (
-                <button
+                <Button
+                  variant="primary"
                   onClick={handleSetPassword}
                   disabled={!skipSecurity && (!password || password !== confirmPassword)}
-                  className="px-6 py-2.5 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
                 >
                   {skipSecurity ? t("skipAndContinue") : t("setPassword")}
-                </button>
+                </Button>
               )}
               {currentStep.id === "provider" && !skipSecurity ? (
-                <button
+                <Button
+                  variant="primary"
                   onClick={handleAddProvider}
                   disabled={!selectedProvider || !providerKey}
-                  className="px-6 py-2.5 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
                 >
                   {t("addProvider")}
-                </button>
+                </Button>
               ) : null}
               {currentStep.id === "test" && (
-                <button
-                  onClick={handleNext}
-                  className="px-6 py-2.5 bg-primary rounded-lg text-accent-foreground font-medium text-sm hover:bg-primary/90 transition-colors cursor-pointer"
-                >
+                <Button variant="primary" onClick={handleNext}>
                   {testStatus === "success" ? t("continue") : t("skip")}
-                </button>
+                </Button>
               )}
               {isLastStep && (
-                <button
-                  onClick={handleFinish}
-                  className="px-6 py-2.5 bg-green-500 rounded-lg text-white font-medium text-sm hover:bg-green-500/90 transition-colors cursor-pointer"
-                >
+                <Button variant="primary" onClick={handleFinish}>
                   {t("goToDashboard")}
-                </button>
+                </Button>
               )}
             </div>
           </div>
-        </div>
+        </Card>
 
         {/* Skip Wizard */}
         {!isLastStep && (
           <div className="text-center mt-4">
-            <button
-              onClick={handleFinish}
-              className="text-xs text-text-muted/60 hover:text-text-muted transition-colors cursor-pointer"
-            >
+            <Button variant="ghost" size="sm" className="text-text-muted" onClick={handleFinish}>
               {t("skipWizard")}
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/src/app/(dashboard)/dashboard/onboarding/steps/FreeProviderOnboardingCard.tsx b/src/app/(dashboard)/dashboard/onboarding/steps/FreeProviderOnboardingCard.tsx
index 2522275a5e93..3c352790ff40 100644
--- a/src/app/(dashboard)/dashboard/onboarding/steps/FreeProviderOnboardingCard.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/steps/FreeProviderOnboardingCard.tsx
@@ -2,6 +2,8 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
+import { Checkbox } from "@omniroute/ui-kit/checkbox";
+import Button from "@/shared/components/Button";
 
 interface FreeProviderOption {
   id: string;
@@ -102,47 +104,40 @@ export function FreeProviderOnboardingCard() {
 
       <div className="max-h-48 space-y-2 overflow-y-auto pr-1">
         {providers.map((provider) => (
-          <label
+          <Checkbox
             key={provider.id}
-            className="flex cursor-pointer items-start gap-3 rounded-lg border border-white/10 bg-white/[0.03] p-3"
-          >
-            <input
-              type="checkbox"
-              checked={selectedIds.includes(provider.id)}
-              onChange={() => toggleProvider(provider.id)}
-              className="mt-1 accent-primary"
-            />
-            <span className="min-w-0 flex-1">
-              <span className="block text-xs font-medium text-text-main">{provider.name}</span>
-              <span className="mt-1 block text-[11px] leading-relaxed text-amber-300/90">
-                {provider.caution}
-              </span>
-              <a
-                href={provider.website}
-                target="_blank"
-                rel="noreferrer"
-                className="mt-1 inline-block text-[11px] text-primary hover:underline"
-                onClick={(event) => event.stopPropagation()}
-              >
-                {t("reviewProviderSite")}
-              </a>
-            </span>
-          </label>
+            card
+            checked={selectedIds.includes(provider.id)}
+            onChange={() => toggleProvider(provider.id)}
+            label={<span className="text-xs font-medium text-text-main">{provider.name}</span>}
+            description={
+              <>
+                <span className="block text-[11px] leading-relaxed text-warning">
+                  {provider.caution}
+                </span>
+                <a
+                  href={provider.website}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mt-1 inline-block text-[11px] text-primary hover:underline"
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  {t("reviewProviderSite")}
+                </a>
+              </>
+            }
+          />
         ))}
       </div>
 
-      <label className="flex cursor-pointer items-start gap-2 text-xs text-text-muted">
-        <input
-          data-testid="free-provider-confirmation"
-          type="checkbox"
-          checked={confirmed}
-          onChange={(event) => setConfirmed(event.target.checked)}
-          className="mt-0.5 accent-primary"
-        />
-        <span>{t("confirmation")}</span>
-      </label>
+      <Checkbox
+        data-testid="free-provider-confirmation"
+        checked={confirmed}
+        onChange={(event) => setConfirmed(event.target.checked)}
+        label={<span className="text-xs text-text-muted">{t("confirmation")}</span>}
+      />
 
-      {error && <p className="text-xs text-red-400">{error}</p>}
+      {error && <p className="text-xs text-error">{error}</p>}
       {results.length > 0 && (
         <ul className="space-y-1 text-xs text-text-muted">
           {results.map((result) => (
@@ -154,24 +149,24 @@ export function FreeProviderOnboardingCard() {
       )}
 
       <div className="flex flex-wrap gap-2">
-        <button
+        <Button
           data-testid="setup-free-providers"
-          type="button"
+          variant="primary"
+          size="sm"
           disabled={!confirmed || selectedIds.length === 0 || submitting}
           onClick={() => void submit()}
-          className="rounded-lg bg-primary px-4 py-2 text-xs font-medium text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
         >
           {submitting ? t("settingUp") : t("setupSelected")}
-        </button>
+        </Button>
         {failedIds.length > 0 && (
-          <button
-            type="button"
+          <Button
+            variant="outline"
+            size="sm"
             disabled={submitting}
             onClick={() => void submit(failedIds)}
-            className="rounded-lg border border-white/10 px-4 py-2 text-xs text-text-main disabled:opacity-50"
           >
             {t("retryFailed")}
-          </button>
+          </Button>
         )}
       </div>
     </section>
diff --git a/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx b/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx
index c09276df3dd0..ec2b2e7e07e2 100644
--- a/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx
@@ -39,21 +39,21 @@ export function TierTour() {
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <TierCard
           number={1}
-          colorClass="border-amber-500/60 bg-amber-500/[0.06]"
+          colorClass="border-warning/60 bg-warning/[0.06]"
           label={t("tier1.label")}
           description={t("tier1.description")}
           examples={["Claude Code", "Codex", "Copilot", "Cursor"]}
         />
         <TierCard
           number={2}
-          colorClass="border-green-500/60 bg-green-500/[0.06]"
+          colorClass="border-success/60 bg-success/[0.06]"
           label={t("tier2.label")}
           description={t("tier2.description")}
           examples={["DeepSeek", "GLM", "MiniMax", "Qwen"]}
         />
         <TierCard
           number={3}
-          colorClass="border-indigo-500/60 bg-indigo-500/[0.06]"
+          colorClass="border-chart-3/60 bg-chart-3/[0.06]"
           label={t("tier3.label")}
           description={t("tier3.description")}
           examples={["Kiro", "OpenCode", "Antigravity CLI", "Vertex"]}
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 503cb5897f73..d90f33f4943f 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -5293,7 +5293,8 @@
         "skipped": "already configured",
         "failed": "failed"
       }
-    }
+    },
+    "stepProgress": "Setup progress"
   },
   "providers": {
     "tosAvoidNoticeTitle": "This provider is excluded from auto by default",
diff --git a/src/i18n/messages/pt-BR.json b/src/i18n/messages/pt-BR.json
index 6074e81c990d..69030331c427 100644
--- a/src/i18n/messages/pt-BR.json
+++ b/src/i18n/messages/pt-BR.json
@@ -5293,7 +5293,8 @@
         "skipped": "já configurado",
         "failed": "falhou"
       }
-    }
+    },
+    "stepProgress": "Progresso da configuração"
   },
   "providers": {
     "tosAvoidNoticeTitle": "Este provedor é excluído do auto por padrão",

From 22e38cc2b5f0c954c908330745279aa79316795e Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 00:57:08 -0300
Subject: [PATCH 04/13] refactor(dashboard): /dashboard/api-manager on the CI
 UI Kit (KEA-7886, lote 3)

---
 .../api-manager/ApiManagerPageClient.tsx      | 578 ++++++++----------
 .../components/AllowedCombosSection.tsx       |  63 +-
 .../components/ApiKeyAutoCombosToggle.tsx     |  26 +-
 .../components/ApiKeyCatalogScopeSelect.tsx   |  35 +-
 .../components/ApiKeyCompressionToggle.tsx    |  26 +-
 .../components/ApiKeyFilterBar.tsx            |  30 +-
 .../components/ApiKeyFilterChip.tsx           |  17 +-
 .../components/BypassProviderQuotaToggle.tsx  |  26 +-
 .../components/ChaosModeAccessToggle.tsx      |  26 +-
 .../ProviderConnectionPermissionList.tsx      | 107 ++--
 .../ProviderModelPermissionList.tsx           |  84 +--
 .../components/UsageLimitSettings.tsx         |  70 +--
 tests/e2e/api-keys-flow.spec.ts               |   3 +-
 13 files changed, 515 insertions(+), 576 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
index 1896ddfddbd9..2185f3373bd5 100644
--- a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
@@ -1,8 +1,25 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useState, useEffect, useMemo, useCallback, useRef, useId } from "react";
 import Link from "next/link";
-import { Card, Button, Input, Modal, CardSkeleton } from "@/shared/components";
+import { Alert } from "@omniroute/ui-kit/alert";
+import { PageHeader } from "@omniroute/ui-kit/page-header";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@omniroute/ui-kit/table";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Input from "@/shared/components/Input";
+import { CardSkeleton } from "@/shared/components/Loading";
+import Modal from "@/shared/components/Modal";
+import Toggle from "@/shared/components/Toggle";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { useLocale, useTranslations } from "next-intl";
 import { matchesSearch } from "@/shared/utils/turkishText";
@@ -588,54 +605,42 @@ export default function ApiManagerPageClient() {
     <div className="flex flex-col gap-8">
       {/* Error Banner */}
       {pageError && (
-        <div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
-          <span className="material-symbols-outlined text-red-500">error</span>
-          <p className="text-sm text-red-700 dark:text-red-300 flex-1">{pageError}</p>
-          <button
-            onClick={clearPageError}
-            className="text-red-500 hover:text-red-700 transition-colors"
-          >
-            <span className="material-symbols-outlined">close</span>
-          </button>
-        </div>
+        <Alert
+          variant="critical"
+          icon={<Icon name="error" />}
+          description={pageError}
+          dismissLabel={tc("close")}
+          onDismiss={clearPageError}
+        />
       )}
 
-      <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex flex-col gap-3">
-          <div>
-            <h1 className="text-3xl font-bold text-text-main">{t("keyManagement")}</h1>
-            <p className="mt-1 text-text-muted">{t("keyManagementDesc")}</p>
-          </div>
-          <div
-            className="flex flex-wrap items-center gap-2 text-sm text-text-secondary"
-            aria-label={t("requestFlowAria")}
-          >
-            <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
-              {t("requestFlowYourApp")}
-            </span>
-            <span
-              className="material-symbols-outlined text-base text-text-muted"
-              aria-hidden="true"
-            >
-              arrow_forward
-            </span>
-            <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
-              {t("requestFlowApiKey")}
-            </span>
-            <span
-              className="material-symbols-outlined text-base text-text-muted"
-              aria-hidden="true"
-            >
-              arrow_forward
-            </span>
-            <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
-              {t("requestFlowOmniRoute")}
-            </span>
-          </div>
+      <div className="flex flex-col gap-3">
+        <PageHeader
+          compact
+          title={t("keyManagement")}
+          description={t("keyManagementDesc")}
+          actions={
+            <Button onClick={() => setShowAddModal(true)} icon="add" className="shrink-0">
+              {t("createKey")}
+            </Button>
+          }
+        />
+        <div
+          className="flex flex-wrap items-center gap-2 text-sm text-text-secondary"
+          aria-label={t("requestFlowAria")}
+        >
+          <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
+            {t("requestFlowYourApp")}
+          </span>
+          <Icon name="arrow_forward" className="text-base text-text-muted" />
+          <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
+            {t("requestFlowApiKey")}
+          </span>
+          <Icon name="arrow_forward" className="text-base text-text-muted" />
+          <span className="rounded-control border border-border bg-surface px-3 py-1.5 font-medium">
+            {t("requestFlowOmniRoute")}
+          </span>
         </div>
-        <Button onClick={() => setShowAddModal(true)} icon="add" className="shrink-0">
-          {t("createKey")}
-        </Button>
       </div>
 
       <RoutingEntryLink />
@@ -659,8 +664,8 @@ export default function ApiManagerPageClient() {
       <Card>
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3">
-            <div className="flex items-center justify-center size-10 rounded-lg bg-amber-500/10 shrink-0">
-              <span className="material-symbols-outlined text-xl text-amber-500">vpn_key</span>
+            <div className="flex items-center justify-center size-10 rounded-lg bg-warning/10 shrink-0">
+              <Icon name="vpn_key" className="text-xl text-warning" />
             </div>
             <div>
               <h3 className="font-semibold">
@@ -701,7 +706,7 @@ export default function ApiManagerPageClient() {
         {keys.length === 0 ? (
           <div className="text-center py-12 border border-dashed border-border rounded-lg">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
-              <span className="material-symbols-outlined text-[32px]">vpn_key</span>
+              <Icon name="vpn_key" size={32} />
             </div>
             <p className="text-text-main font-medium mb-2">{t("noKeys")}</p>
             <p className="text-sm text-text-muted mb-4">{t("noKeysDesc")}</p>
@@ -719,7 +724,7 @@ export default function ApiManagerPageClient() {
         ) : filteredKeys.length === 0 ? (
           <div className="text-center py-12 border border-dashed border-border rounded-lg">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
-              <span className="material-symbols-outlined text-[32px]">search_off</span>
+              <Icon name="search_off" size={32} />
             </div>
             <p className="text-text-main font-medium mb-2">{t("emptyFilterTitle")}</p>
             <Button onClick={handleClearFilters}>{t("emptyFilterClear")}</Button>
@@ -765,62 +770,61 @@ export default function ApiManagerPageClient() {
               const visibleGroups = groups.slice(0, 3);
               const extraGroupCount = groups.length - visibleGroups.length;
               return (
-                <div
-                  key={key.id}
-                  className="grid grid-cols-12 gap-4 px-4 py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 hover:bg-surface/30 transition-colors group min-w-[760px]"
-                >
-                  <div className="col-span-2 flex items-center gap-2">
-                    <span
-                      className={`material-symbols-outlined text-sm ${isRestricted ? "text-amber-500" : "text-emerald-500"}`}
-                    >
-                      {isRestricted ? "lock" : "lock_open"}
-                    </span>
-                    <span className="text-sm font-medium truncate" title={key.name}>
-                      {key.name}
-                    </span>
-                  </div>
-                  <div className="col-span-3 flex items-center gap-1.5">
-                    <code className="text-sm text-text-muted font-mono truncate">
-                      {visibleKeys.has(key.id) ? (revealedKeys.get(key.id) ?? key.key) : key.key}
-                    </code>
-                    {allowKeyReveal ? (
-                      <>
-                        <button
-                          onClick={() => handleToggleKeyVisibility(key.id)}
-                          className="p-1 text-text-muted/60 hover:text-primary transition-colors shrink-0"
-                          title={visibleKeys.has(key.id) ? t("hideKey") : t("showKey")}
-                          aria-label={visibleKeys.has(key.id) ? t("hideKey") : t("showKey")}
-                          aria-pressed={visibleKeys.has(key.id)}
-                        >
-                          <span className="material-symbols-outlined text-[14px]">
-                            {visibleKeys.has(key.id) ? "visibility_off" : "visibility"}
-                          </span>
-                        </button>
-                        <button
-                          onClick={() => handleCopyExistingKey(key.id)}
-                          className="p-1 text-text-muted/60 hover:text-primary transition-colors shrink-0"
-                          title={tc("copy")}
-                          aria-label={tc("copy")}
-                        >
-                          <span className="material-symbols-outlined text-[14px]">
-                            {copied === `existing_key_${key.id}` ? "check" : "content_copy"}
-                          </span>
-                        </button>
-                      </>
-                    ) : (
-                      <span
-                        className="p-1 text-text-muted/40 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0 cursor-help"
-                        title={t("keyOnlyAvailableAtCreation")}
-                      >
-                        <span className="material-symbols-outlined text-[14px]">lock</span>
+                <TableRow key={key.id} className="group">
+                  <TableCell className="max-w-48">
+                    <div className="flex items-center gap-2">
+                      <Icon
+                        name={isRestricted ? "lock" : "lock_open"}
+                        size={14}
+                        className={isRestricted ? "text-warning" : "text-success"}
+                      />
+                      <span className="text-sm font-medium truncate" title={key.name}>
+                        {key.name}
                       </span>
-                    )}
-                  </div>
-                  <div className="col-span-2 flex items-center">
+                    </div>
+                  </TableCell>
+                  <TableCell className="max-w-64">
+                    <div className="flex items-center gap-1.5">
+                      <code className="text-sm text-text-muted font-mono truncate">
+                        {visibleKeys.has(key.id) ? (revealedKeys.get(key.id) ?? key.key) : key.key}
+                      </code>
+                      {allowKeyReveal ? (
+                        <>
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => handleToggleKeyVisibility(key.id)}
+                            className="shrink-0 text-text-muted"
+                            title={visibleKeys.has(key.id) ? t("hideKey") : t("showKey")}
+                            aria-label={visibleKeys.has(key.id) ? t("hideKey") : t("showKey")}
+                            aria-pressed={visibleKeys.has(key.id)}
+                            icon={visibleKeys.has(key.id) ? "visibility_off" : "visibility"}
+                          />
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            onClick={() => handleCopyExistingKey(key.id)}
+                            className="shrink-0 text-text-muted"
+                            title={tc("copy")}
+                            aria-label={tc("copy")}
+                            icon={copied === `existing_key_${key.id}` ? "check" : "content_copy"}
+                          />
+                        </>
+                      ) : (
+                        <span
+                          className="p-1 text-text-muted/40 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0 cursor-help"
+                          title={t("keyOnlyAvailableAtCreation")}
+                        >
+                          <Icon name="lock" size={14} />
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
                     <div className="flex flex-col items-start gap-1">
                       {/* QUOTA differentiation chips — prepended before existing badges */}
                       {keyIsQuota && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-violet-500/10 text-violet-600 dark:text-violet-400 text-[11px] font-medium">
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-chart-3/10 text-chart-3 text-[11px] font-medium">
                           {t("quotaModeOnly")}
                         </span>
                       )}
@@ -828,13 +832,13 @@ export default function ApiManagerPageClient() {
                         visibleGroups.map((groupName) => (
                           <span
                             key={groupName}
-                            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-sky-500/10 text-sky-600 dark:text-sky-400 text-[11px] font-medium truncate max-w-full"
+                            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-info/10 text-info text-[11px] font-medium truncate max-w-full"
                           >
                             {groupName}
                           </span>
                         ))}
                       {keyIsQuota && extraGroupCount > 0 && (
-                        <span className="inline-flex items-center px-2 py-0.5 rounded-md bg-sky-500/10 text-sky-600 dark:text-sky-400 text-[11px] font-medium">
+                        <span className="inline-flex items-center px-2 py-0.5 rounded-md bg-info/10 text-info text-[11px] font-medium">
                           +{extraGroupCount}
                         </span>
                       )}
@@ -842,209 +846,210 @@ export default function ApiManagerPageClient() {
                       {isModelRestricted ? (
                         <Link
                           href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access?tab=models`}
-                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400 text-xs font-medium hover:bg-amber-500/20 transition-colors"
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-warning/10 text-warning text-xs font-medium hover:bg-warning/20 transition-colors"
                         >
-                          <span className="material-symbols-outlined text-[14px]">lock</span>
+                          <Icon name="lock" size={14} />
                           {formatProviderModelPermissionSummary(providerCount, modelCount, t, tc)}
                         </Link>
                       ) : (
                         <Link
                           href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access?tab=models`}
-                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-medium hover:bg-green-500/20 transition-colors"
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-success/10 text-success text-xs font-medium hover:bg-success/20 transition-colors"
                         >
-                          <span className="material-symbols-outlined text-[14px]">lock_open</span>
+                          <Icon name="lock_open" size={14} />
                           {t("allModels")}
                         </Link>
                       )}
                       {hasConnectionRestrictions && (
                         <Link
                           href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access?tab=connections`}
-                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-medium hover:bg-blue-500/20 transition-colors"
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-info/10 text-info text-xs font-medium hover:bg-info/20 transition-colors"
                         >
-                          <span className="material-symbols-outlined text-[14px]">cable</span>
+                          <Icon name="cable" size={14} />
                           {key.allowedConnections!.length} conn
                         </Link>
                       )}
                       {hasExclusiveLeaseScope && (
                         <Link
                           href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access`}
-                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-purple-500/10 text-purple-600 dark:text-purple-400 text-xs font-medium hover:bg-purple-500/20 transition-colors"
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-chart-3/10 text-chart-3 text-xs font-medium hover:bg-chart-3/20 transition-colors"
                         >
-                          <span className="material-symbols-outlined text-[14px]">
-                            key_vertical
-                          </span>
+                          <Icon name="key_vertical" size={14} />
                           {t("exclusiveLease")}
                         </Link>
                       )}
                       {hasComboRestrictions && (
                         <Link
                           href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access?tab=combos`}
-                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-teal-500/10 text-teal-600 dark:text-teal-400 text-xs font-medium hover:bg-teal-500/20 transition-colors"
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-chart-4/10 text-chart-4 text-xs font-medium hover:bg-chart-4/20 transition-colors"
                         >
-                          <span className="material-symbols-outlined text-[14px]">hub</span>
+                          <Icon name="hub" size={14} />
                           {key.allowedCombos!.length} combos
                         </Link>
                       )}
                       {noLogEnabled && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-violet-500/10 text-violet-600 dark:text-violet-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">
-                            visibility_off
-                          </span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-chart-3/10 text-chart-3 text-[11px] font-medium">
+                          <Icon name="visibility_off" size={12} />
                           No-Log
                         </span>
                       )}
                       {key.autoResolve && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">
-                            auto_fix_high
-                          </span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-info/10 text-info text-[11px] font-medium">
+                          <Icon name="auto_fix_high" size={12} />
                           Auto-Resolve
                         </span>
                       )}
                       {hasJsonStreamDefault && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-sky-500/10 text-sky-600 dark:text-sky-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">data_object</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-info/10 text-info text-[11px] font-medium">
+                          <Icon name="data_object" size={12} />
                           {t("streamDefaultBadge")}
                         </span>
                       )}
                       {hasLocalUsageCommand && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-slate-500/10 text-slate-600 dark:text-slate-300 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">terminal</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-surface-2 text-text-muted text-[11px] font-medium">
+                          <Icon name="terminal" size={12} />
                           {t("localUsageCommandBadge")}
                         </span>
                       )}
                       {key.usageLimitEnabled === true && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">paid</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-success/10 text-success text-[11px] font-medium">
+                          <Icon name="paid" size={12} />
                           USD quota
                         </span>
                       )}
                       {hasProviderQuotaBypass && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-amber-500/10 text-amber-700 dark:text-amber-300 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">alt_route</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-warning/10 text-warning text-[11px] font-medium">
+                          <Icon name="alt_route" size={12} />
                           Bypass quota policy
                         </span>
                       )}
                       {hasSessionLimit && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">group</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-chart-3/10 text-chart-3 text-[11px] font-medium">
+                          <Icon name="group" size={12} />
                           Sessions: {activeSessions}/{maxSessions}
                         </span>
                       )}
                       {deviceCount > 0 && (
                         <span
-                          className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-cyan-500/10 text-cyan-700 dark:text-cyan-300 text-[11px] font-medium"
+                          className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-info/10 text-info text-[11px] font-medium"
                           title={t("devicesTooltip", { count: deviceCount })}
                         >
-                          <span className="material-symbols-outlined text-[12px]">devices</span>
+                          <Icon name="devices" size={12} />
                           {t("devicesCount", { count: deviceCount })}
                         </span>
                       )}
                       {hasThrottle && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-yellow-500/10 text-yellow-700 dark:text-yellow-300 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">speed</span>+
-                          {throttleDelayMs}ms
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-warning/10 text-warning text-[11px] font-medium">
+                          <Icon name="speed" size={12} />+{throttleDelayMs}ms
                         </span>
                       )}
                       {hasManageScope && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">
-                            admin_panel_settings
-                          </span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-error/10 text-error text-[11px] font-medium">
+                          <Icon name="admin_panel_settings" size={12} />
                           manage
                         </span>
                       )}
                       {!keyIsActive && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-red-500/10 text-red-600 dark:text-red-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">block</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-error/10 text-error text-[11px] font-medium">
+                          <Icon name="block" size={12} />
                           {t("disabled")}
                         </span>
                       )}
                       {hasSchedule && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-orange-500/10 text-orange-600 dark:text-orange-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">schedule</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-warning/10 text-warning text-[11px] font-medium">
+                          <Icon name="schedule" size={12} />
                           {t("scheduleActive")}
                         </span>
                       )}
                       {key.isBanned && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-red-600/10 text-red-700 dark:text-red-400 text-[11px] font-bold animate-pulse">
-                          <span className="material-symbols-outlined text-[12px]">gavel</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-error/10 text-error text-[11px] font-bold animate-pulse">
+                          <Icon name="gavel" size={12} />
                           BANNED
                         </span>
                       )}
                       {key.expiresAt && new Date(key.expiresAt).getTime() < Date.now() && (
-                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-gray-500/10 text-gray-600 dark:text-gray-400 text-[11px] font-medium">
-                          <span className="material-symbols-outlined text-[12px]">event_busy</span>
+                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-surface-2 text-text-muted text-[11px] font-medium">
+                          <Icon name="event_busy" size={12} />
                           EXPIRED
                         </span>
                       )}
                     </div>
-                  </div>
-                  <div className="col-span-2 flex flex-col justify-center">
-                    <span className="text-sm font-medium tabular-nums">
-                      {stats?.totalRequests ?? 0}{" "}
-                      <span className="text-text-muted font-normal text-xs">{t("reqs")}</span>
-                    </span>
-                    {(stats?.totalRequests ?? 0) > 0 && (
-                      <span className="text-[10px] text-emerald-600 dark:text-emerald-400 tabular-nums">
-                        {formatUsdCost(stats?.totalCost ?? 0, locale)}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col justify-center">
+                      <span className="text-sm font-medium tabular-nums">
+                        {stats?.totalRequests ?? 0}{" "}
+                        <span className="text-text-muted font-normal text-xs">{t("reqs")}</span>
                       </span>
-                    )}
-                    {stats?.lastUsed ? (
-                      <span className="text-[10px] text-text-muted">
-                        {t("lastUsedOn", { date: new Date(stats.lastUsed).toLocaleDateString() })}
-                      </span>
-                    ) : (
-                      <span className="text-[10px] text-text-muted italic">{t("neverUsed")}</span>
-                    )}
-                  </div>
-                  <div className="col-span-1 flex items-center text-sm text-text-muted">
+                      {(stats?.totalRequests ?? 0) > 0 && (
+                        <span className="text-[10px] text-success tabular-nums">
+                          {formatUsdCost(stats?.totalCost ?? 0, locale)}
+                        </span>
+                      )}
+                      {stats?.lastUsed ? (
+                        <span className="text-[10px] text-text-muted">
+                          {t("lastUsedOn", { date: new Date(stats.lastUsed).toLocaleDateString() })}
+                        </span>
+                      ) : (
+                        <span className="text-[10px] text-text-muted italic">{t("neverUsed")}</span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm text-text-muted whitespace-nowrap">
                     {new Date(key.createdAt).toLocaleDateString()}
-                  </div>
-                  <div className="col-span-2 flex items-center justify-end gap-1">
-                    <a
-                      href={`/dashboard/costs?range=all&apiKeyIds=${encodeURIComponent(key.id)}&groupBy=model`}
-                      className="p-2 hover:bg-emerald-500/10 rounded text-text-muted hover:text-emerald-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
-                      title={`View costs for ${key.name}`}
-                      aria-label={`View costs for ${key.name}`}
-                    >
-                      <span className="material-symbols-outlined text-[18px]">payments</span>
-                    </a>
-                    <button
-                      onClick={() => handleRegenerateKey(key.id)}
-                      className="p-2 hover:bg-amber-500/10 rounded text-text-muted hover:text-amber-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
-                      title={t("regenerateKey")}
-                    >
-                      <span className="material-symbols-outlined text-[18px]">refresh</span>
-                    </button>
-                    <Link
-                      href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access`}
-                      className="p-2 hover:bg-primary/10 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all inline-flex items-center justify-center"
-                      title={t("editPermissions")}
-                    >
-                      <span className="material-symbols-outlined text-[18px]">tune</span>
-                    </Link>
-                    <button
-                      onClick={() => handleDeleteKey(key.id)}
-                      className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
-                      title={t("deleteKey")}
-                    >
-                      <span className="material-symbols-outlined text-[18px]">delete</span>
-                    </button>
-                  </div>
-                </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center justify-end gap-1">
+                      <a
+                        href={`/dashboard/costs?range=all&apiKeyIds=${encodeURIComponent(key.id)}&groupBy=model`}
+                        className="p-2 hover:bg-success/10 rounded text-text-muted hover:text-success opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
+                        title={`View costs for ${key.name}`}
+                        aria-label={`View costs for ${key.name}`}
+                      >
+                        <Icon name="payments" size={18} />
+                      </a>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleRegenerateKey(key.id)}
+                        className="text-text-muted hover:text-warning opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"
+                        title={t("regenerateKey")}
+                        aria-label={t("regenerateKey")}
+                        icon="refresh"
+                      />
+                      <Link
+                        href={`/dashboard/api-manager/${encodeURIComponent(key.id)}/access`}
+                        className="p-2 hover:bg-primary/10 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all inline-flex items-center justify-center"
+                        title={t("editPermissions")}
+                      >
+                        <Icon name="tune" size={18} />
+                      </Link>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleDeleteKey(key.id)}
+                        className="text-error opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"
+                        title={t("deleteKey")}
+                        aria-label={t("deleteKey")}
+                        icon="delete"
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
               );
             };
 
             const tableHeader = (
-              <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-surface/50 border-b border-border text-xs font-semibold text-text-muted uppercase tracking-wider min-w-[760px]">
-                <div className="col-span-2">{t("name")}</div>
-                <div className="col-span-3">{t("key")}</div>
-                <div className="col-span-2">{t("permissions")}</div>
-                <div className="col-span-2">{t("usage")}</div>
-                <div className="col-span-1">{t("created")}</div>
-                <div className="col-span-2 text-right">{t("actions")}</div>
-              </div>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("name")}</TableHead>
+                  <TableHead>{t("key")}</TableHead>
+                  <TableHead>{t("permissions")}</TableHead>
+                  <TableHead>{t("usage")}</TableHead>
+                  <TableHead>{t("created")}</TableHead>
+                  <TableHead className="text-right">{t("actions")}</TableHead>
+                </TableRow>
+              </TableHeader>
             );
 
             return (
@@ -1053,9 +1058,7 @@ export default function ApiManagerPageClient() {
                   <div>
                     {/* Normal keys section heading */}
                     <div className="flex items-center gap-2 mb-2">
-                      <span className="material-symbols-outlined text-base text-text-muted">
-                        vpn_key
-                      </span>
+                      <Icon name="vpn_key" className="text-base text-text-muted" />
                       <span className="text-sm font-medium text-text-main">
                         {t("normalKeysSection")}
                       </span>
@@ -1063,37 +1066,31 @@ export default function ApiManagerPageClient() {
                         {normalKeys.length}
                       </span>
                     </div>
-                    <div className="border border-border rounded-lg overflow-hidden">
-                      <div className="overflow-x-auto">
-                        {tableHeader}
-                        {normalKeys.map(renderKeyRow)}
-                      </div>
-                    </div>
+                    <Table scrollbarLabel={t("normalKeysSection")}>
+                      {tableHeader}
+                      <TableBody>{normalKeys.map(renderKeyRow)}</TableBody>
+                    </Table>
                   </div>
                 )}
                 {quotaKeys.length > 0 && (
                   <div>
                     {/* Quota keys section heading */}
                     <div className="flex items-center gap-2 mb-2">
-                      <span className="material-symbols-outlined text-base text-violet-500">
-                        toll
-                      </span>
+                      <Icon name="toll" className="text-base text-chart-3" />
                       <span className="text-sm font-medium text-text-main">
                         {t("quotaKeysSection")}
                       </span>
                       <span className="inline-flex items-center justify-center px-2 py-0.5 rounded-full bg-surface/80 border border-border text-[11px] font-semibold text-text-muted">
                         {quotaKeys.length}
                       </span>
-                      <span className="inline-flex items-center px-2 py-0.5 rounded-full bg-violet-500/10 text-violet-600 dark:text-violet-400 text-[11px] font-semibold">
+                      <span className="inline-flex items-center px-2 py-0.5 rounded-full bg-chart-3/10 text-chart-3 text-[11px] font-semibold">
                         {t("quotaPill")}
                       </span>
                     </div>
-                    <div className="border border-border rounded-lg overflow-hidden">
-                      <div className="overflow-x-auto">
-                        {tableHeader}
-                        {quotaKeys.map(renderKeyRow)}
-                      </div>
-                    </div>
+                    <Table scrollbarLabel={t("quotaKeysSection")}>
+                      {tableHeader}
+                      <TableBody>{quotaKeys.map(renderKeyRow)}</TableBody>
+                    </Table>
                   </div>
                 )}
               </div>
@@ -1120,10 +1117,8 @@ export default function ApiManagerPageClient() {
       >
         <div ref={createKeyFormRef} className="flex flex-col gap-4">
           <div ref={createKeyNameFieldRef}>
-            <label className="text-sm font-medium text-text-main mb-1.5 block">
-              {t("keyName")}
-            </label>
             <Input
+              label={t("keyName")}
               id={newKeyNameInputId}
               value={newKeyName}
               onChange={(e) => {
@@ -1134,28 +1129,21 @@ export default function ApiManagerPageClient() {
               maxLength={MAX_KEY_NAME_LENGTH}
               error={nameError}
               autoFocus
+              hint={t("keyNameDesc")}
             />
-            <p className="text-xs text-text-muted mt-1.5">{t("keyNameDesc")}</p>
           </div>
           <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-border bg-surface/40">
             <div className="flex flex-col gap-1">
               <p className="text-sm font-medium text-text-main">{t("managementAccess")}</p>
               <p className="text-xs text-text-muted">{t("managementAccessDesc")}</p>
             </div>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={newKeyManageEnabled}
-              onClick={() => setNewKeyManageEnabled((prev) => !prev)}
-              className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors shrink-0 ${
-                newKeyManageEnabled
-                  ? "bg-rose-500/15 text-rose-700 dark:text-rose-300 border border-rose-500/30"
-                  : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-              }`}
-            >
-              <span className="material-symbols-outlined text-[14px]">admin_panel_settings</span>
-              {newKeyManageEnabled ? tc("enabled") : tc("disabled")}
-            </button>
+            <Toggle
+              size="sm"
+              className="shrink-0"
+              checked={newKeyManageEnabled}
+              onChange={setNewKeyManageEnabled}
+              ariaLabel={t("managementAccess")}
+            />
           </div>
           <div className="flex flex-col gap-3 p-3 rounded-lg border border-border bg-surface/40">
             <div className="flex flex-col gap-1">
@@ -1167,73 +1155,55 @@ export default function ApiManagerPageClient() {
                 <p className="text-sm text-text-main">{t("ownUsageVisibility")}</p>
                 <p className="text-xs text-text-muted">{t("ownUsageVisibilityDesc")}</p>
               </div>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={newKeySelfUsageEnabled}
-                onClick={() =>
+              <Toggle
+                size="sm"
+                className="shrink-0"
+                checked={newKeySelfUsageEnabled}
+                onChange={() =>
                   setNewKeySelfUsageEnabled((prev) => {
                     if (prev) setNewKeyAccountQuotaEnabled(false);
                     return !prev;
                   })
                 }
-                className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors shrink-0 ${
-                  newKeySelfUsageEnabled
-                    ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30"
-                    : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-                }`}
-              >
-                <span className="material-symbols-outlined text-[14px]">query_stats</span>
-                {newKeySelfUsageEnabled ? tc("enabled") : tc("disabled")}
-              </button>
+                ariaLabel={t("ownUsageVisibility")}
+              />
             </div>
             <div className="flex items-start justify-between gap-3">
               <div className="flex flex-col gap-1">
                 <p className="text-sm text-text-main">{t("sharedAccountQuotaVisibility")}</p>
                 <p className="text-xs text-text-muted">{t("sharedAccountQuotaVisibilityDesc")}</p>
               </div>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={newKeyAccountQuotaEnabled}
+              <Toggle
+                size="sm"
+                className="shrink-0"
+                checked={newKeyAccountQuotaEnabled}
                 disabled={!newKeySelfUsageEnabled}
-                onClick={() => setNewKeyAccountQuotaEnabled((prev) => !prev)}
-                className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors shrink-0 ${
-                  newKeyAccountQuotaEnabled
-                    ? "bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30"
-                    : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-                } ${!newKeySelfUsageEnabled ? "opacity-50 cursor-not-allowed" : ""}`}
-              >
-                <span className="material-symbols-outlined text-[14px]">account_balance</span>
-                {newKeyAccountQuotaEnabled ? tc("enabled") : tc("disabled")}
-              </button>
+                onChange={setNewKeyAccountQuotaEnabled}
+                ariaLabel={t("sharedAccountQuotaVisibility")}
+              />
             </div>
             <div className="flex items-start justify-between gap-3">
               <div className="flex flex-col gap-1">
                 <p className="text-sm text-text-main">{t("localUsageCommand")}</p>
                 <p className="text-xs text-text-muted">{t("localUsageCommandDesc")}</p>
               </div>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={newKeyAllowUsageCommand}
-                onClick={() => setNewKeyAllowUsageCommand((prev) => !prev)}
-                className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors shrink-0 ${
-                  newKeyAllowUsageCommand
-                    ? "bg-sky-500/15 text-sky-700 dark:text-sky-300 border border-sky-500/30"
-                    : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-                }`}
-              >
-                <span className="material-symbols-outlined text-[14px]">terminal</span>
-                {newKeyAllowUsageCommand ? tc("enabled") : tc("disabled")}
-              </button>
+              <Toggle
+                size="sm"
+                className="shrink-0"
+                checked={newKeyAllowUsageCommand}
+                onChange={setNewKeyAllowUsageCommand}
+                ariaLabel={t("localUsageCommand")}
+              />
             </div>
           </div>
           {createError && (
-            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/30">
-              <span className="material-symbols-outlined text-red-500 text-sm">error</span>
-              <p className="text-sm text-red-700 dark:text-red-300 flex-1">{createError}</p>
-            </div>
+            <Alert
+              variant="critical"
+              icon={<Icon name="error" />}
+              description={createError}
+              dismissLabel={tc("close")}
+              onDismiss={() => setCreateError(null)}
+            />
           )}
           <div className="flex gap-2">
             <Button
@@ -1267,19 +1237,13 @@ export default function ApiManagerPageClient() {
       {/* Created Key Modal */}
       <Modal isOpen={!!createdKey} title={t("keyCreated")} onClose={() => setCreatedKey(null)}>
         <div className="flex flex-col gap-4">
-          <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
-            <div className="flex items-start gap-3">
-              <span className="material-symbols-outlined text-green-600 dark:text-green-400">
-                check_circle
-              </span>
-              <div>
-                <p className="text-sm text-green-800 dark:text-green-200 font-medium mb-1">
-                  {t("keyCreatedSuccess")}
-                </p>
-                <p className="text-sm text-green-700 dark:text-green-300">{t("keyCreatedNote")}</p>
-              </div>
-            </div>
-          </div>
+          <Alert
+            variant="success"
+            icon={<Icon name="check_circle" />}
+            title={t("keyCreatedSuccess")}
+            description={t("keyCreatedNote")}
+            dismissLabel={tc("close")}
+          />
           <div className="flex gap-2">
             <Input value={createdKey || ""} readOnly className="flex-1 font-mono text-sm" />
             <Button
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/AllowedCombosSection.tsx b/src/app/(dashboard)/dashboard/api-manager/components/AllowedCombosSection.tsx
index a9cb5d9e649e..c8f0bd8dd4f9 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/AllowedCombosSection.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/AllowedCombosSection.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import { cn } from "@/shared/utils/cn";
+
 import { useMemo } from "react";
 import { useTranslations } from "next-intl";
 import { listUnrenderableComboAccessRules } from "../apiManagerPageUtils";
@@ -10,9 +14,6 @@ export interface AllowedComboOption {
   models?: unknown[];
 }
 
-const MODE_BUTTON_ACTIVE = "bg-primary text-accent-foreground";
-const MODE_BUTTON_IDLE = "text-text-muted hover:bg-black/5 dark:hover:bg-white/5";
-
 function ComboAccessModeToggle({
   allowAllCombos,
   onAllowAll,
@@ -26,22 +27,24 @@ function ComboAccessModeToggle({
   const tc = useTranslations("common");
   return (
     <div className="flex gap-1 p-0.5 bg-surface rounded-md">
-      <button
+      <Button
+        size="sm"
+        variant={allowAllCombos ? "primary" : "ghost"}
+        aria-pressed={allowAllCombos}
         onClick={onAllowAll}
-        className={`px-2 py-1 rounded text-xs font-medium transition-all ${
-          allowAllCombos ? MODE_BUTTON_ACTIVE : MODE_BUTTON_IDLE
-        }`}
+        className="text-xs"
       >
         {tc("all")}
-      </button>
-      <button
+      </Button>
+      <Button
+        size="sm"
+        variant={allowAllCombos ? "ghost" : "primary"}
+        aria-pressed={!allowAllCombos}
         onClick={onRestrict}
-        className={`px-2 py-1 rounded text-xs font-medium transition-all ${
-          allowAllCombos ? MODE_BUTTON_IDLE : MODE_BUTTON_ACTIVE
-        }`}
+        className="text-xs"
       >
         {t("restrict")}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -56,28 +59,30 @@ function ComboOptionRow({
   onToggle: (comboName: string) => void;
 }) {
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
+      aria-pressed={isSelected}
       onClick={() => onToggle(combo.name)}
-      className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs transition-all ${
-        isSelected
-          ? "bg-primary/10 text-primary"
-          : "text-text-muted hover:bg-surface/50 hover:text-text-main"
-      }`}
+      className={cn(
+        "w-full justify-start gap-2 text-left text-xs font-normal",
+        isSelected ? "bg-primary/10 text-text-main" : "text-text-muted"
+      )}
     >
-      <div
-        className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
-          isSelected ? "bg-primary border-primary" : "border-border"
-        }`}
-      >
-        {isSelected && (
-          <span className="material-symbols-outlined text-white text-[10px]">check</span>
+      <span
+        aria-hidden="true"
+        className={cn(
+          "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
+          isSelected ? "bg-primary border-primary text-accent-foreground" : "border-border"
         )}
-      </div>
+      >
+        {isSelected && <Icon name="check" size={10} />}
+      </span>
       <span className="truncate flex-1">{combo.name}</span>
       {Array.isArray(combo.models) && (
         <span className="text-[10px] text-text-muted shrink-0">{combo.models.length} models</span>
       )}
-    </button>
+    </Button>
   );
 }
 
@@ -100,7 +105,7 @@ function PreservedComboRules({ rules }: { rules: string[] }) {
             title={t("preservedComboRuleHint")}
             className="inline-flex items-center gap-1 px-2 py-0.5 rounded border border-border bg-surface text-[11px] text-text-muted"
           >
-            <span className="material-symbols-outlined text-[12px]">lock</span>
+            <Icon name="lock" size={12} />
             <span data-testid="preserved-combo-rule" className="truncate max-w-[16rem]">
               {rule}
             </span>
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyAutoCombosToggle.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyAutoCombosToggle.tsx
index d9a42ef07d0c..b134b3bd7e6f 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyAutoCombosToggle.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyAutoCombosToggle.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Toggle from "@/shared/components/Toggle";
+
 import { useTranslations } from "next-intl";
 
 /**
@@ -18,7 +20,6 @@ export function ApiKeyAutoCombosToggle({
   onToggle: () => void;
 }) {
   const tSettings = useTranslations("settings");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-border bg-surface/40">
@@ -26,22 +27,13 @@ export function ApiKeyAutoCombosToggle({
         <p className="text-sm font-medium text-text-main">{tSettings("autoCombosTitle")}</p>
         <p className="text-xs text-text-muted">{tSettings("autoCombosDesc")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={enabled}
-        onClick={onToggle}
-        className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          enabled
-            ? "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">
-          {enabled ? "auto_awesome" : "block"}
-        </span>
-        {enabled ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={enabled}
+        onChange={() => onToggle()}
+        ariaLabel={tSettings("autoCombosTitle")}
+      />
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCatalogScopeSelect.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCatalogScopeSelect.tsx
index 73bdee89fd5e..fd414f66e24f 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCatalogScopeSelect.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCatalogScopeSelect.tsx
@@ -1,6 +1,9 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useTranslations } from "next-intl";
+import { RadioGroup, RadioGroupItem } from "@omniroute/ui-kit/radio-group";
 
 export type CatalogScope = "all" | "combos" | "models";
 
@@ -32,25 +35,25 @@ export function ApiKeyCatalogScopeSelect({
         <p className="text-sm font-medium text-text-main">{tSettings("catalogScopeTitle")}</p>
         <p className="text-xs text-text-muted">{tSettings("catalogScopeDesc")}</p>
       </div>
-      <div className="flex items-center gap-1 p-1 rounded-lg bg-black/5 dark:bg-white/5">
+      <RadioGroup
+        orientation="horizontal"
+        aria-label={tSettings("catalogScopeTitle")}
+        value={value}
+        onValueChange={(next) => onChange(next as CatalogScope)}
+      >
         {OPTIONS.map((opt) => (
-          <button
+          <RadioGroupItem
             key={opt.value}
-            type="button"
-            role="radio"
-            aria-checked={value === opt.value}
-            onClick={() => onChange(opt.value)}
-            className={`flex-1 inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-              value === opt.value
-                ? "bg-primary text-accent-foreground"
-                : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-            }`}
-          >
-            <span className="material-symbols-outlined text-[14px]">{opt.icon}</span>
-            {tSettings(opt.labelKey)}
-          </button>
+            value={opt.value}
+            label={
+              <span className="inline-flex items-center gap-1.5 text-xs font-semibold">
+                <Icon name={opt.icon} size={14} />
+                {tSettings(opt.labelKey)}
+              </span>
+            }
+          />
         ))}
-      </div>
+      </RadioGroup>
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCompressionToggle.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCompressionToggle.tsx
index ed912ee92ca6..1c53cb66cb0d 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCompressionToggle.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCompressionToggle.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Toggle from "@/shared/components/Toggle";
+
 import { useTranslations } from "next-intl";
 
 /** Per-key prompt-compression policy used by the API key permissions modal. */
@@ -11,7 +13,6 @@ export function ApiKeyCompressionToggle({
   onToggle: () => void;
 }) {
   const tSettings = useTranslations("settings");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-border bg-surface/40">
@@ -19,22 +20,13 @@ export function ApiKeyCompressionToggle({
         <p className="text-sm font-medium text-text-main">{tSettings("compressionTitle")}</p>
         <p className="text-xs text-text-muted">{tSettings("compressionDesc")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={enabled}
-        onClick={onToggle}
-        className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          enabled
-            ? "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">
-          {enabled ? "compress" : "unfold_more"}
-        </span>
-        {enabled ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={enabled}
+        onChange={() => onToggle()}
+        ariaLabel={tSettings("compressionTitle")}
+      />
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterBar.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterBar.tsx
index 81a0546648e0..1801643b1b4a 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterBar.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterBar.tsx
@@ -1,7 +1,10 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Card, Input, Toggle } from "@/shared/components";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Input from "@/shared/components/Input";
+import Toggle from "@/shared/components/Toggle";
 import ApiKeyFilterChip from "./ApiKeyFilterChip";
 import type { KeyStatus, KeyType, ApiKeyCounts } from "../apiManagerPageUtils";
 
@@ -41,25 +44,25 @@ export default function ApiKeyFilterBar({
     {
       value: "active",
       label: t("filterStatusActive"),
-      dotColor: "bg-green-500",
+      dotColor: "bg-success",
       count: counts.active,
     },
     {
       value: "disabled",
       label: t("filterStatusDisabled"),
-      dotColor: "bg-gray-500",
+      dotColor: "bg-text-muted",
       count: counts.disabled,
     },
     {
       value: "banned",
       label: t("filterStatusBanned"),
-      dotColor: "bg-red-500",
+      dotColor: "bg-error",
       count: counts.banned,
     },
     {
       value: "expired",
       label: t("filterStatusExpired"),
-      dotColor: "bg-amber-500",
+      dotColor: "bg-warning",
       count: counts.expired,
     },
   ];
@@ -74,19 +77,19 @@ export default function ApiKeyFilterBar({
     {
       value: "standard",
       label: t("filterTypeStandard"),
-      dotColor: "bg-slate-500",
+      dotColor: "bg-text-muted",
       count: counts.standard,
     },
     {
       value: "manage",
       label: t("filterTypeManage"),
-      dotColor: "bg-rose-500",
+      dotColor: "bg-error",
       count: counts.manage,
     },
     {
       value: "restricted",
       label: t("filterTypeRestricted"),
-      dotColor: "bg-amber-500",
+      dotColor: "bg-warning",
       count: counts.restricted,
     },
   ];
@@ -106,13 +109,14 @@ export default function ApiKeyFilterBar({
               inputClassName={searchQuery ? "pr-9" : ""}
             />
             {searchQuery && (
-              <button
+              <Button
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => onSearchChange("")}
-                className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-text-muted hover:text-text-primary transition-colors"
+                className="absolute inset-y-0 right-1 my-auto text-text-muted"
                 aria-label={tc("clear")}
-              >
-                <span className="material-symbols-outlined text-[18px]">close</span>
-              </button>
+                icon="close"
+              />
             )}
           </div>
           <Toggle
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterChip.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterChip.tsx
index e75a1dcd39e9..37d56032975c 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterChip.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ApiKeyFilterChip.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/shared/components/Button";
 import { cn } from "@/shared/utils/cn";
 
 interface ApiKeyFilterChipProps {
@@ -18,22 +19,20 @@ export default function ApiKeyFilterChip({
   onClick,
 }: ApiKeyFilterChipProps) {
   return (
-    <button
+    <Button
+      variant={isActive ? "primary" : "outline"}
+      size="sm"
+      aria-pressed={isActive}
       onClick={onClick}
-      className={cn(
-        "flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
-        isActive
-          ? "bg-primary text-accent-foreground border-primary"
-          : "bg-bg-subtle border-border text-text-muted hover:text-text-primary hover:border-primary/30"
-      )}
+      className="gap-1.5 rounded-full text-xs"
     >
       {dotColor && <span className={cn("size-2 rounded-full shrink-0", dotColor)} />}
       <span>{label}</span>
       {count !== undefined && (
-        <span className={cn("text-[11px]", isActive ? "text-white/80" : "text-text-muted")}>
+        <span className={cn("text-[11px]", isActive ? "opacity-80" : "text-text-muted")}>
           {count}
         </span>
       )}
-    </button>
+    </Button>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/BypassProviderQuotaToggle.tsx b/src/app/(dashboard)/dashboard/api-manager/components/BypassProviderQuotaToggle.tsx
index 27dc90964146..38f7d93d506f 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/BypassProviderQuotaToggle.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/BypassProviderQuotaToggle.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Toggle from "@/shared/components/Toggle";
+
 import { useTranslations } from "next-intl";
 
 /**
@@ -15,29 +17,21 @@ export function BypassProviderQuotaToggle({
   enabled: boolean;
   onToggle: () => void;
 }) {
-  const tc = useTranslations("common");
   const t = useTranslations("apiManager");
 
   return (
-    <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-amber-500/20 bg-amber-500/5">
+    <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-warning/20 bg-warning/5">
       <div className="flex flex-col gap-1 pr-2">
         <p className="text-sm font-medium text-text-main">{t("bypassProviderQuota")}</p>
         <p className="text-xs text-text-muted">{t("bypassProviderQuotaDescription")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={enabled}
-        onClick={onToggle}
-        className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          enabled
-            ? "bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">alt_route</span>
-        {enabled ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={enabled}
+        onChange={() => onToggle()}
+        ariaLabel={t("bypassProviderQuota")}
+      />
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ChaosModeAccessToggle.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ChaosModeAccessToggle.tsx
index 30cf2d228e55..35412935083b 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ChaosModeAccessToggle.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ChaosModeAccessToggle.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Toggle from "@/shared/components/Toggle";
+
 import { useTranslations } from "next-intl";
 
 /**
@@ -18,28 +20,20 @@ export function ChaosModeAccessToggle({
   onToggle: () => void;
 }) {
   const tChaos = useTranslations("chaosConfig");
-  const tc = useTranslations("common");
 
   return (
-    <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-amber-500/20 bg-amber-500/5">
+    <div className="flex items-start justify-between gap-3 p-3 rounded-lg border border-warning/20 bg-warning/5">
       <div className="flex flex-col gap-1">
         <p className="text-sm font-medium text-text-main">{tChaos("keyPermission")}</p>
         <p className="text-xs text-text-muted">{tChaos("keyPermissionDesc")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={enabled}
-        onClick={onToggle}
-        className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          enabled
-            ? "bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">blender</span>
-        {tChaos("pageTitle")} - {enabled ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={enabled}
+        onChange={() => onToggle()}
+        ariaLabel={tChaos("keyPermission")}
+      />
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ProviderConnectionPermissionList.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ProviderConnectionPermissionList.tsx
index 2ed1556b8f10..e9f3f7e8e6f0 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ProviderConnectionPermissionList.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ProviderConnectionPermissionList.tsx
@@ -1,9 +1,13 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
+import { Checkbox } from "@omniroute/ui-kit/checkbox";
 import { getProviderDisplayName } from "@/lib/display/names";
-import { Input } from "@/shared/components";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import Input from "@/shared/components/Input";
+import { cn } from "@/shared/utils/cn";
 import { compareTr, matchesSearch } from "@/shared/utils/turkishText";
 
 export interface ProviderConnection {
@@ -33,19 +37,13 @@ function ProviderSelectionCheckbox({
   indeterminate: boolean;
   onChange: () => void;
 }) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
-  }, [indeterminate]);
-
   return (
-    <input
-      ref={inputRef}
-      type="checkbox"
+    <Checkbox
       aria-label={`${provider} connection access`}
       checked={checked}
+      indeterminate={indeterminate}
       onChange={onChange}
-      className="w-4 h-4 rounded border-border accent-[var(--color-primary)] cursor-pointer shrink-0"
+      className="shrink-0"
     />
   );
 }
@@ -220,20 +218,21 @@ export const ProviderConnectionPermissionList = memo(function ProviderConnection
           icon="search"
         />
         {search && (
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="icon-sm"
             onClick={() => handleSearchChange("")}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-main"
-          >
-            <span className="material-symbols-outlined text-[18px]">close</span>
-          </button>
+            className="absolute inset-y-0 right-1 my-auto text-text-muted"
+            aria-label={tc("clear")}
+            icon="close"
+          />
         )}
       </div>
 
       <div className="max-h-[280px] overflow-y-auto border border-border rounded-lg divide-y divide-border">
         {filteredGroups.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-6 text-text-muted">
-            <span className="material-symbols-outlined text-2xl mb-1">search_off</span>
+            <Icon name="search_off" className="text-2xl mb-1" />
             <p className="text-xs">{tc("noResults")}</p>
           </div>
         ) : (
@@ -253,20 +252,20 @@ export const ProviderConnectionPermissionList = memo(function ProviderConnection
             return (
               <div key={provider} className="group">
                 <div className="w-full flex items-center gap-2 px-3 py-2 hover:bg-surface/50 transition-colors text-left">
-                  <button
-                    type="button"
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
                     onClick={() => handleToggleExpand(provider)}
-                    className="flex items-center shrink-0 text-text-muted hover:text-text-main"
+                    className="shrink-0 text-text-muted"
                     aria-label={providerDisplayName}
+                    aria-expanded={isExpanded}
                   >
-                    <span
-                      className={`material-symbols-outlined text-base transition-transform duration-200 ${
-                        isExpanded ? "rotate-90" : ""
-                      }`}
-                    >
-                      chevron_right
-                    </span>
-                  </button>
+                    <Icon
+                      name="chevron_right"
+                      size={16}
+                      className={cn("transition-transform duration-200", isExpanded && "rotate-90")}
+                    />
+                  </Button>
                   <div className="flex items-center gap-2 flex-1 min-w-0">
                     <ProviderSelectionCheckbox
                       provider={provider}
@@ -274,13 +273,14 @@ export const ProviderConnectionPermissionList = memo(function ProviderConnection
                       indeterminate={someSelected}
                       onChange={() => handleToggleAllInProvider(provider, conns)}
                     />
-                    <button
-                      type="button"
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       onClick={() => handleToggleExpand(provider)}
-                      className="text-xs font-semibold text-text-main truncate text-left"
+                      className="h-auto min-h-0 px-1 text-xs font-semibold text-text-main truncate text-left"
                     >
                       {providerDisplayName}
-                    </button>
+                    </Button>
                     <span className="text-[10px] text-text-muted bg-surface px-1 py-0.5 rounded shrink-0">
                       {totalCount}
                     </span>
@@ -297,37 +297,36 @@ export const ProviderConnectionPermissionList = memo(function ProviderConnection
                     {conns.map((conn) => {
                       const isSelected = safeSelectedConnections.includes(conn.id);
                       return (
-                        <button
+                        <Button
                           key={conn.id}
-                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          aria-pressed={isSelected}
                           onClick={() => handleToggleSingleConnection(conn.id)}
-                          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs transition-all ${
-                            isSelected
-                              ? "bg-primary/10 text-primary"
-                              : "text-text-muted hover:bg-surface/50 hover:text-text-main"
-                          }`}
+                          className={cn(
+                            "w-full justify-start gap-2 text-left text-xs font-normal",
+                            isSelected ? "bg-primary/10 text-text-main" : "text-text-muted"
+                          )}
                         >
-                          <div
-                            className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
-                              isSelected ? "bg-primary border-primary" : "border-border"
-                            }`}
-                          >
-                            {isSelected && (
-                              <span className="material-symbols-outlined text-white text-[10px]">
-                                check
-                              </span>
+                          <span
+                            aria-hidden="true"
+                            className={cn(
+                              "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
+                              isSelected
+                                ? "bg-primary border-primary text-accent-foreground"
+                                : "border-border"
                             )}
-                          </div>
+                          >
+                            {isSelected && <Icon name="check" size={10} />}
+                          </span>
                           <span className="truncate flex-1 font-mono text-[11px]" title={conn.id}>
                             {conn.name ||
                               (typeof conn.id === "string" ? conn.id.slice(0, 8) : "connection")}
                           </span>
                           {!conn.isActive && (
-                            <span className="text-[9px] text-red-400 shrink-0">
-                              {tc("inactive")}
-                            </span>
+                            <span className="text-[9px] text-error shrink-0">{tc("inactive")}</span>
                           )}
-                        </button>
+                        </Button>
                       );
                     })}
                   </div>
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/ProviderModelPermissionList.tsx b/src/app/(dashboard)/dashboard/api-manager/components/ProviderModelPermissionList.tsx
index 8b94eaa3dc48..701ea1ac1c85 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/ProviderModelPermissionList.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/ProviderModelPermissionList.tsx
@@ -1,9 +1,13 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { useTranslations } from "next-intl";
+import { Checkbox } from "@omniroute/ui-kit/checkbox";
 import { getProviderDisplayName } from "@/lib/display/names";
-import { Input } from "@/shared/components";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import Input from "@/shared/components/Input";
+import { cn } from "@/shared/utils/cn";
 import {
   isModelIndividuallyToggleable,
   restoreProviderScopeSelection,
@@ -66,19 +70,13 @@ function ProviderSelectionCheckbox({
   indeterminate: boolean;
   onChange: () => void;
 }) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
-  }, [indeterminate]);
-
   return (
-    <input
-      ref={inputRef}
-      type="checkbox"
+    <Checkbox
       aria-label={`${provider} model access`}
       checked={checked}
+      indeterminate={indeterminate}
       onChange={onChange}
-      className="w-4 h-4 rounded border-border accent-[var(--color-primary)] cursor-pointer shrink-0"
+      className="shrink-0"
     />
   );
 }
@@ -96,6 +94,7 @@ const ProviderModelPermissionList = memo(function ProviderModelPermissionList({
   onClaudeCodeDefaultDeselected,
 }: ProviderModelPermissionListProps) {
   const t = useTranslations("apiManager");
+  const tc = useTranslations("common");
 
   const providerModelRefs = useMemo(() => allModels.map(getModelRef), [allModels]);
 
@@ -180,20 +179,21 @@ const ProviderModelPermissionList = memo(function ProviderModelPermissionList({
           icon="search"
         />
         {searchModel && (
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="icon-sm"
             onClick={() => onSearchChange("")}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-main"
-          >
-            <span className="material-symbols-outlined text-[18px]">close</span>
-          </button>
+            className="absolute inset-y-0 right-1 my-auto text-text-muted"
+            aria-label={tc("clear")}
+            icon="close"
+          />
         )}
       </div>
 
       <div className="max-h-[280px] overflow-y-auto border border-border rounded-lg divide-y divide-border">
         {modelsByProvider.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-6 text-text-muted">
-            <span className="material-symbols-outlined text-2xl mb-1">search_off</span>
+            <Icon name="search_off" className="text-2xl mb-1" />
             <p className="text-xs">{t("noModelsFound")}</p>
           </div>
         ) : (
@@ -215,20 +215,23 @@ const ProviderModelPermissionList = memo(function ProviderModelPermissionList({
             return (
               <div key={provider} className="group">
                 <div className="w-full flex items-center gap-2 px-3 py-2 hover:bg-surface/50 transition-colors text-left">
-                  <button
-                    type="button"
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
                     onClick={() => onToggleExpand(provider)}
-                    className="flex items-center shrink-0"
+                    className="shrink-0"
                     aria-label={provider}
+                    aria-expanded={expandedProviders.has(provider)}
                   >
-                    <span
-                      className={`material-symbols-outlined text-base transition-transform duration-200 ${
-                        expandedProviders.has(provider) ? "rotate-90" : ""
-                      }`}
-                    >
-                      chevron_right
-                    </span>
-                  </button>
+                    <Icon
+                      name="chevron_right"
+                      size={16}
+                      className={cn(
+                        "transition-transform duration-200",
+                        expandedProviders.has(provider) && "rotate-90"
+                      )}
+                    />
+                  </Button>
                   <div className="flex items-center gap-2 flex-1 min-w-0">
                     <ProviderSelectionCheckbox
                       provider={provider}
@@ -239,13 +242,14 @@ const ProviderModelPermissionList = memo(function ProviderModelPermissionList({
                         else handleSnapshotToggleProvider(provider, models);
                       }}
                     />
-                    <button
-                      type="button"
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       onClick={() => onToggleExpand(provider)}
-                      className="text-xs font-semibold text-text-main truncate"
+                      className="h-auto min-h-0 px-1 text-xs font-semibold text-text-main truncate"
                     >
                       {provider}
-                    </button>
+                    </Button>
                     <span className="text-[10px] text-text-muted bg-surface px-1 py-0.5 rounded shrink-0">
                       {models.length}
                     </span>
@@ -270,20 +274,18 @@ const ProviderModelPermissionList = memo(function ProviderModelPermissionList({
                           { ownedBy: model.owned_by }
                         );
                         return (
-                          <button
+                          <Button
                             key={model.id}
-                            type="button"
+                            size="sm"
+                            variant={isSelected ? "primary" : "outline"}
+                            aria-pressed={isSelected}
                             disabled={!isToggleable}
                             onClick={() => handleToggleModel(model)}
-                            className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-mono transition-all ${
-                              isSelected
-                                ? "bg-primary text-accent-foreground"
-                                : "bg-surface border border-border text-text-muted hover:border-primary/50 hover:text-text-main"
-                            } ${isToggleable ? "" : "opacity-70 cursor-not-allowed"}`}
+                            className="h-auto min-h-0 gap-1 rounded-full px-2 py-1 text-[10px] font-mono"
                             title={model.id}
                           >
                             {getModelDisplayName(model.id)}
-                          </button>
+                          </Button>
                         );
                       })}
                     </div>
diff --git a/src/app/(dashboard)/dashboard/api-manager/components/UsageLimitSettings.tsx b/src/app/(dashboard)/dashboard/api-manager/components/UsageLimitSettings.tsx
index abbd9d9f3ed5..a8dce2cbef8c 100644
--- a/src/app/(dashboard)/dashboard/api-manager/components/UsageLimitSettings.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/components/UsageLimitSettings.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import { Input } from "@/shared/components";
+import Toggle from "@/shared/components/Toggle";
+
+import Input from "@/shared/components/Input";
 import { useTranslations } from "next-intl";
 
 export function UsageLimitSettings({
   enabled,
   dailyLimitUsd,
   weeklyLimitUsd,
-  enabledLabel,
-  disabledLabel,
   onEnabledChange,
   onDailyLimitUsdChange,
   onWeeklyLimitUsdChange,
@@ -16,6 +16,7 @@ export function UsageLimitSettings({
   enabled: boolean;
   dailyLimitUsd: string;
   weeklyLimitUsd: string;
+  /** Kept for callers; the switch state is conveyed by the kit Switch itself. */
   enabledLabel: string;
   disabledLabel: string;
   onEnabledChange: (enabled: boolean) => void;
@@ -24,50 +25,39 @@ export function UsageLimitSettings({
 }) {
   const t = useTranslations("usageLimits");
   return (
-    <div className="mt-1 rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3">
+    <div className="mt-1 rounded-lg border border-success/20 bg-success/5 p-3">
       <div className="flex items-start justify-between gap-3">
         <div className="flex flex-col gap-1">
           <p className="text-sm font-medium text-text-main">{t("usdUsageQuota")}</p>
           <p className="text-xs text-text-muted">{t("usdUsageQuotaDescription")}</p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={enabled}
-          onClick={() => onEnabledChange(!enabled)}
-          className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-            enabled
-              ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30"
-              : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-          }`}
-        >
-          <span className="material-symbols-outlined text-[14px]">paid</span>
-          {enabled ? enabledLabel : disabledLabel}
-        </button>
+        <Toggle
+          size="sm"
+          className="shrink-0"
+          checked={enabled}
+          onChange={onEnabledChange}
+          ariaLabel={t("usdUsageQuota")}
+        />
       </div>
       <div className="mt-3 grid grid-cols-2 gap-2">
-        <div>
-          <label className="text-xs text-text-muted mb-1 block">{t("dailyQuotaUsd")}</label>
-          <Input
-            type="number"
-            min={0}
-            step="0.01"
-            value={dailyLimitUsd}
-            onChange={(event) => onDailyLimitUsdChange(event.target.value)}
-            placeholder="0.00"
-          />
-        </div>
-        <div>
-          <label className="text-xs text-text-muted mb-1 block">{t("weeklyQuotaUsd")}</label>
-          <Input
-            type="number"
-            min={0}
-            step="0.01"
-            value={weeklyLimitUsd}
-            onChange={(event) => onWeeklyLimitUsdChange(event.target.value)}
-            placeholder="0.00"
-          />
-        </div>
+        <Input
+          label={t("dailyQuotaUsd")}
+          type="number"
+          min={0}
+          step="0.01"
+          value={dailyLimitUsd}
+          onChange={(event) => onDailyLimitUsdChange(event.target.value)}
+          placeholder="0.00"
+        />
+        <Input
+          label={t("weeklyQuotaUsd")}
+          type="number"
+          min={0}
+          step="0.01"
+          value={weeklyLimitUsd}
+          onChange={(event) => onWeeklyLimitUsdChange(event.target.value)}
+          placeholder="0.00"
+        />
       </div>
       <p className="mt-2 text-[11px] text-text-muted">{t("quotaWindowDescription")}</p>
     </div>
diff --git a/tests/e2e/api-keys-flow.spec.ts b/tests/e2e/api-keys-flow.spec.ts
index 336d84fe956a..2c6eae6f72ac 100644
--- a/tests/e2e/api-keys-flow.spec.ts
+++ b/tests/e2e/api-keys-flow.spec.ts
@@ -292,7 +292,8 @@ test.describe("API keys flow", () => {
     await expect(inlineError).toBeInViewport();
 
     // No page-level error banner should appear behind the modal
-    const pageErrorBanner = page.locator('.flex.flex-col.gap-8 > [class~="bg-red-500/10"]');
+    // KEA-7886: the page-level banner is the kit Alert (critical variant).
+    const pageErrorBanner = page.locator('.flex.flex-col.gap-8 > [data-slot="alert"]');
     await expect(pageErrorBanner).not.toBeVisible();
 
     // Typing should clear the error

From e667a8c9d6701451d3904c2e0fe183167fa3fa3c Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 00:57:37 -0300
Subject: [PATCH 05/13] refactor(dashboard): /dashboard/api-manager/[id]/access
 on the CI UI Kit (KEA-7886, lote 3)

---
 .../[id]/access/ApiKeyAccessEditorClient.tsx  | 216 ++++++++----------
 .../[id]/access/tabs/BehaviourTab.tsx         | 106 ++++-----
 .../[id]/access/tabs/ConnectionsTab.tsx       |  29 ++-
 .../[id]/access/tabs/GeneralTab.tsx           | 208 +++++++----------
 .../[id]/access/tabs/LimitsTab.tsx            | 128 +++++------
 .../[id]/access/tabs/ModelsTab.tsx            | 185 ++++++++-------
 .../[id]/access/tabs/TabErrorList.tsx         |  10 +-
 src/i18n/messages/en.json                     |   3 +-
 src/i18n/messages/pt-BR.json                  |   3 +-
 tests/e2e/api-key-model-scope.spec.ts         |  15 +-
 tests/unit/api-manager-page-static.test.ts    |  28 +--
 11 files changed, 411 insertions(+), 520 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/ApiKeyAccessEditorClient.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/ApiKeyAccessEditorClient.tsx
index d5638233d55f..427e22d9b1b2 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/ApiKeyAccessEditorClient.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/ApiKeyAccessEditorClient.tsx
@@ -1,10 +1,17 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { Card, Button, CardSkeleton } from "@/shared/components";
+import { buttonVariants } from "@omniroute/ui-kit/button";
+import { PageHeader } from "@omniroute/ui-kit/page-header";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@omniroute/ui-kit/tabs";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import { CardSkeleton } from "@/shared/components/Loading";
 import { useNotificationStore } from "@/store/notificationStore";
 import { getProviderDisplayName } from "@/lib/display/names";
 import { compareTr, matchesSearch } from "@/shared/utils/turkishText";
@@ -408,100 +415,79 @@ function AccessBehaviourPanelPanelContent({ context }: { context: AccessFormCont
 function AccessHeader({ context }: { context: AccessFormContext }) {
   const { apiKey, t } = context;
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2 text-xs text-text-muted">
-        <Link
-          href="/dashboard/api-manager"
-          className="hover:text-primary transition-colors inline-flex items-center gap-1"
-        >
-          <span aria-hidden="true" className="material-symbols-outlined text-[14px]">
-            arrow_back
-          </span>
-          {t("keyManagement")}
-        </Link>
-        <span>/</span>
-        <span className="font-mono text-text-main truncate max-w-[200px]">{apiKey.name}</span>
-        <span>/</span>
-        <span>{t("accessBreadcrumb")}</span>
-      </div>
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-        <div className="flex flex-col gap-1">
-          <h1 className="text-2xl sm:text-3xl font-bold text-text-main flex items-center gap-2">
-            <span aria-hidden="true" className="material-symbols-outlined text-[28px] text-primary">
-              key
-            </span>
-            {t("accessEditorTitle", { name: apiKey.name })}
-          </h1>
-          <p className="text-sm text-text-muted">{t("accessEditorDesc")}</p>
+    <PageHeader
+      compact
+      breadcrumbs={
+        <div className="flex items-center gap-2 text-xs text-text-muted">
+          <Link
+            href="/dashboard/api-manager"
+            className="hover:text-primary transition-colors inline-flex items-center gap-1"
+          >
+            <Icon name="arrow_back" size={14} />
+            {t("keyManagement")}
+          </Link>
+          <span>/</span>
+          <span className="font-mono text-text-main truncate max-w-[200px]">{apiKey.name}</span>
+          <span>/</span>
+          <span>{t("accessBreadcrumb")}</span>
         </div>
-      </div>
-    </div>
+      }
+      title={t("accessEditorTitle", { name: apiKey.name })}
+      description={t("accessEditorDesc")}
+    />
   );
 }
 
 function AccessTabBar({ context }: { context: AccessFormContext }) {
   const { form, t, tabListRef, activeTab, switchTab, handleTabKeyDown } = context;
   return (
-    <div className="border-b border-border">
-      <div
-        ref={tabListRef}
-        role="tablist"
-        aria-label={t("accessEditorTabsLabel")}
-        className="flex gap-1 overflow-x-auto scrollbar-none pb-px"
-      >
-        {TABS.map((tabDef, index) => {
-          const isSelected = activeTab === tabDef.id;
-          const errorCount = form.getTabErrorCount(tabDef.id);
-
-          return (
-            <button
-              key={tabDef.id}
-              role="tab"
-              type="button"
-              id={`tab-${tabDef.id}`}
-              aria-controls={isSelected ? `panel-${tabDef.id}` : undefined}
-              aria-selected={isSelected}
-              tabIndex={isSelected ? 0 : -1}
-              onClick={() => switchTab(tabDef.id)}
-              onKeyDown={(e) => handleTabKeyDown(e, index)}
-              className={`relative inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-t-lg transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
-                isSelected
-                  ? "text-primary border-b-2 border-primary bg-primary/5"
-                  : "text-text-muted hover:text-text-main hover:bg-surface/50 border-b-2 border-transparent"
-              }`}
-            >
-              <span aria-hidden="true" className="material-symbols-outlined text-[18px]">
-                {tabDef.icon}
-              </span>
-              <span>{t(tabDef.labelKey)}</span>
-              {/* The space keeps the label and the badge text apart in the accessible name;
+    <TabsList
+      ref={tabListRef}
+      aria-label={t("accessEditorTabsLabel")}
+      className="overflow-x-auto scrollbar-none"
+    >
+      {TABS.map((tabDef, index) => {
+        const isSelected = activeTab === tabDef.id;
+        const errorCount = form.getTabErrorCount(tabDef.id);
+
+        return (
+          <TabsTrigger
+            key={tabDef.id}
+            value={tabDef.id}
+            id={`tab-${tabDef.id}`}
+            aria-controls={isSelected ? `panel-${tabDef.id}` : undefined}
+            onClick={() => switchTab(tabDef.id)}
+            onKeyDown={(e) => handleTabKeyDown(e, index)}
+            className="gap-2 whitespace-nowrap"
+          >
+            <Icon name={tabDef.icon} size={18} />
+            <span>{t(tabDef.labelKey)}</span>
+            {/* The space keeps the label and the badge text apart in the accessible name;
                     white space between flex items is not rendered. */}
-              {errorCount > 0 && " "}
-              {errorCount > 0 && (
-                <span
-                  className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold bg-red-500 text-white"
-                  title={t("errorBadgeLabel", { count: errorCount })}
-                >
-                  <span aria-hidden="true">{errorCount}</span>
-                  <span className="sr-only">{t("errorBadgeLabel", { count: errorCount })}</span>
-                </span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </div>
+            {errorCount > 0 && " "}
+            {errorCount > 0 && (
+              <span
+                className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold bg-error text-bg"
+                title={t("errorBadgeLabel", { count: errorCount })}
+              >
+                <span aria-hidden="true">{errorCount}</span>
+                <span className="sr-only">{t("errorBadgeLabel", { count: errorCount })}</span>
+              </span>
+            )}
+          </TabsTrigger>
+        );
+      })}
+    </TabsList>
   );
 }
 
 function AccessPanel({ context }: { context: AccessFormContext }) {
   const { activeTab, isSubmitting } = context;
   return (
-    <div
-      role="tabpanel"
+    <TabsContent
+      value={activeTab}
       id={`panel-${activeTab}`}
       aria-labelledby={`tab-${activeTab}`}
-      tabIndex={0}
       className="focus:outline-none"
     >
       <Card className="p-6">
@@ -525,7 +511,7 @@ function AccessPanel({ context }: { context: AccessFormContext }) {
           {activeTab === "behaviour" && <AccessBehaviourPanelPanelContent context={context} />}
         </fieldset>
       </Card>
-    </div>
+    </TabsContent>
   );
 }
 
@@ -536,27 +522,20 @@ function AccessSaveBar({ context }: { context: AccessFormContext }) {
       <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
         <div className="flex items-center gap-2">
           {form.isDirty ? (
-            <span className="flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400">
-              <span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+            <span className="flex items-center gap-1.5 text-xs font-medium text-warning">
+              <span className="w-2 h-2 rounded-full bg-warning animate-pulse" />
               {t("unsavedChanges")}
             </span>
           ) : (
             <span className="flex items-center gap-1.5 text-xs text-text-muted">
-              <span
-                aria-hidden="true"
-                className="material-symbols-outlined text-[16px] text-emerald-500"
-              >
-                check_circle
-              </span>
+              <Icon name="check_circle" size={16} className="text-success" />
               {ts("saved")}
             </span>
           )}
 
           {form.hasErrors && (
-            <span className="flex items-center gap-1 text-xs text-red-600 dark:text-red-400 font-medium">
-              <span aria-hidden="true" className="material-symbols-outlined text-[16px]">
-                error
-              </span>
+            <span className="flex items-center gap-1 text-xs text-error font-medium">
+              <Icon name="error" size={16} />
               {t("fixValidationErrors")}
             </span>
           )}
@@ -576,16 +555,10 @@ function AccessSaveBar({ context }: { context: AccessFormContext }) {
             type="button"
             onClick={handleSave}
             disabled={!form.isDirty || isSubmitting || form.hasErrors}
+            loading={isSubmitting}
             className="flex-1 sm:flex-none"
           >
-            {isSubmitting ? (
-              <span className="flex items-center gap-1.5">
-                <span className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                {ts("saving")}
-              </span>
-            ) : (
-              t("saveChanges")
-            )}
+            {isSubmitting ? <span>{ts("saving")}</span> : t("saveChanges")}
           </Button>
         </div>
       </div>
@@ -597,8 +570,15 @@ function ApiKeyAccessEditorForm(props: ApiKeyAccessEditorFormProps) {
   return (
     <div className="flex flex-col gap-6">
       <AccessHeader context={context} />
-      <AccessTabBar context={context} />
-      <AccessPanel context={context} />
+      <Tabs
+        variant="underline"
+        value={context.activeTab}
+        onValueChange={(next) => context.switchTab(next as typeof context.activeTab)}
+        className="flex flex-col gap-6"
+      >
+        <AccessTabBar context={context} />
+        <AccessPanel context={context} />
+      </Tabs>
       <AccessSaveBar context={context} />
     </div>
   );
@@ -841,22 +821,16 @@ export default function ApiKeyAccessEditorClient({ apiKeyId }: ApiKeyAccessEdito
   if (notFound) {
     return (
       <Card className="flex flex-col items-center justify-center p-12 text-center gap-4">
-        <div className="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
-          <span aria-hidden="true" className="material-symbols-outlined text-[24px]">
-            key_off
-          </span>
+        <div className="w-12 h-12 rounded-full bg-error/10 flex items-center justify-center text-error">
+          <Icon name="key_off" size={24} />
         </div>
         <div className="flex flex-col gap-1">
           <h2 className="text-xl font-bold text-text-main">{t("keyNotFound")}</h2>
           <p className="text-sm text-text-muted">{t("keyNotFoundDesc")}</p>
         </div>
-        <Link href="/dashboard/api-manager">
-          <Button variant="outline">
-            <span aria-hidden="true" className="material-symbols-outlined text-[16px] mr-1.5">
-              arrow_back
-            </span>
-            {t("backToApiKeys")}
-          </Button>
+        <Link href="/dashboard/api-manager" className={buttonVariants({ variant: "outline" })}>
+          <Icon name="arrow_back" size={16} />
+          {t("backToApiKeys")}
         </Link>
       </Card>
     );
@@ -866,21 +840,15 @@ export default function ApiKeyAccessEditorClient({ apiKeyId }: ApiKeyAccessEdito
   if (fetchError || !apiKey) {
     return (
       <Card className="flex flex-col items-center justify-center p-12 text-center gap-4">
-        <div className="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
-          <span aria-hidden="true" className="material-symbols-outlined text-[24px]">
-            error
-          </span>
+        <div className="w-12 h-12 rounded-full bg-error/10 flex items-center justify-center text-error">
+          <Icon name="error" size={24} />
         </div>
         <div className="flex flex-col gap-1">
           <h2 className="text-xl font-bold text-text-main">{fetchError || t("failedLoadKey")}</h2>
         </div>
-        <Link href="/dashboard/api-manager">
-          <Button variant="outline">
-            <span aria-hidden="true" className="material-symbols-outlined text-[16px] mr-1.5">
-              arrow_back
-            </span>
-            {t("backToApiKeys")}
-          </Button>
+        <Link href="/dashboard/api-manager" className={buttonVariants({ variant: "outline" })}>
+          <Icon name="arrow_back" size={16} />
+          {t("backToApiKeys")}
         </Link>
       </Card>
     );
diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/BehaviourTab.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/BehaviourTab.tsx
index 0c09b65ac198..68f9196b055a 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/BehaviourTab.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/BehaviourTab.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import Toggle from "@/shared/components/Toggle";
+
 import { useTranslations } from "next-intl";
 import { ApiKeyCompressionToggle } from "@/app/(dashboard)/dashboard/api-manager/components/ApiKeyCompressionToggle";
 import { ChaosModeAccessToggle } from "@/app/(dashboard)/dashboard/api-manager/components/ChaosModeAccessToggle";
@@ -26,7 +30,6 @@ type BehaviourSectionProps<K extends keyof BehaviourTabProps> = Pick<
 
 function PayloadPrivacyToggle({ formState, setNoLog }: BehaviourSectionProps<"setNoLog">) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex items-start justify-between gap-3 p-4 rounded-lg border border-border bg-surface/40">
@@ -36,29 +39,19 @@ function PayloadPrivacyToggle({ formState, setNoLog }: BehaviourSectionProps<"se
           Disable request/response payload persistence for this API key.
         </p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={formState.noLog}
-        onClick={() => setNoLog(!formState.noLog)}
-        className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          formState.noLog
-            ? "bg-violet-500/15 text-violet-700 dark:text-violet-300 border border-violet-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">
-          {formState.noLog ? "visibility_off" : "visibility"}
-        </span>
-        {formState.noLog ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={formState.noLog}
+        onChange={() => setNoLog(!formState.noLog)}
+        ariaLabel={t("noLogPayloadPrivacy")}
+      />
     </div>
   );
 }
 
 function AutoResolveToggle({ formState, setAutoResolve }: BehaviourSectionProps<"setAutoResolve">) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex items-start justify-between gap-3 p-4 rounded-lg border border-border bg-surface/40">
@@ -66,22 +59,13 @@ function AutoResolveToggle({ formState, setAutoResolve }: BehaviourSectionProps<
         <p className="text-sm font-medium text-text-main">{t("autoResolve")}</p>
         <p className="text-xs text-text-muted">{t("autoResolveDesc")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={formState.autoResolve}
-        onClick={() => setAutoResolve(!formState.autoResolve)}
-        className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          formState.autoResolve
-            ? "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">
-          {formState.autoResolve ? "auto_fix_high" : "auto_fix_normal"}
-        </span>
-        {formState.autoResolve ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={formState.autoResolve}
+        onChange={() => setAutoResolve(!formState.autoResolve)}
+        ariaLabel={t("autoResolve")}
+      />
     </div>
   );
 }
@@ -99,30 +83,26 @@ function StreamDefaultModeSelector({
         <p className="text-xs text-text-muted">{t("streamDefaultModeDesc")}</p>
       </div>
       <div className="flex gap-1 p-0.5 bg-surface rounded-md shrink-0 w-full sm:w-auto">
-        <button
-          type="button"
+        <Button
+          size="sm"
+          variant={formState.streamDefaultMode === "legacy" ? "primary" : "ghost"}
+          aria-pressed={formState.streamDefaultMode === "legacy"}
           onClick={() => setStreamDefaultMode("legacy")}
-          className={`inline-flex flex-1 sm:flex-none items-center justify-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold transition-all ${
-            formState.streamDefaultMode === "legacy"
-              ? "bg-primary text-accent-foreground"
-              : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-          }`}
+          className="gap-1.5 text-xs flex-1 sm:flex-none justify-center"
         >
-          <span className="material-symbols-outlined text-[14px]">settings_backup_restore</span>
+          <Icon name="settings_backup_restore" size={14} />
           {t("streamDefaultLegacy")}
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
+          size="sm"
+          variant={formState.streamDefaultMode === "json" ? "primary" : "ghost"}
+          aria-pressed={formState.streamDefaultMode === "json"}
           onClick={() => setStreamDefaultMode("json")}
-          className={`inline-flex flex-1 sm:flex-none items-center justify-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold transition-all ${
-            formState.streamDefaultMode === "json"
-              ? "bg-primary text-accent-foreground"
-              : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-          }`}
+          className="gap-1.5 text-xs flex-1 sm:flex-none justify-center"
         >
-          <span className="material-symbols-outlined text-[14px]">data_object</span>
+          <Icon name="data_object" size={14} />
           {t("streamDefaultJson")}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -140,7 +120,6 @@ export default function BehaviourTab({
   errors,
 }: BehaviourTabProps) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex flex-col gap-5">
@@ -176,20 +155,13 @@ export default function BehaviourTab({
           <p className="text-sm font-medium text-text-main">{t("localUsageCommand")}</p>
           <p className="text-xs text-text-muted">{t("localUsageCommandDesc")}</p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={formState.allowUsageCommand}
-          onClick={() => setAllowUsageCommand(!formState.allowUsageCommand)}
-          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-            formState.allowUsageCommand
-              ? "bg-sky-500/15 text-sky-700 dark:text-sky-300 border border-sky-500/30"
-              : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-          }`}
-        >
-          <span className="material-symbols-outlined text-[14px]">terminal</span>
-          {formState.allowUsageCommand ? tc("enabled") : tc("disabled")}
-        </button>
+        <Toggle
+          size="sm"
+          className="shrink-0"
+          checked={formState.allowUsageCommand}
+          onChange={() => setAllowUsageCommand(!formState.allowUsageCommand)}
+          ariaLabel={t("localUsageCommand")}
+        />
       </div>
 
       {/* Advanced Provider Quota Policy Override */}
diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ConnectionsTab.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ConnectionsTab.tsx
index 759aef4ad8ab..d6df5472ab91 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ConnectionsTab.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ConnectionsTab.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import Button from "@/shared/components/Button";
 import ProviderConnectionPermissionList, {
   type ProviderConnection,
 } from "@/app/(dashboard)/dashboard/api-manager/components/ProviderConnectionPermissionList";
@@ -41,31 +42,27 @@ export default function ConnectionsTab({
             </p>
           </div>
           <div className="flex gap-1 p-0.5 bg-surface rounded-md shrink-0">
-            <button
-              type="button"
+            <Button
+              size="sm"
+              variant={formState.allowAllConnections ? "primary" : "ghost"}
+              aria-pressed={formState.allowAllConnections}
               onClick={() => {
                 setAllowAllConnections(true);
                 setSelectedConnections([]);
               }}
-              className={`px-3 py-1.5 rounded text-xs font-medium transition-all ${
-                formState.allowAllConnections
-                  ? "bg-primary text-accent-foreground"
-                  : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-              }`}
+              className="gap-1.5 text-xs"
             >
               {t("allConnections")}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              size="sm"
+              variant={!formState.allowAllConnections ? "primary" : "ghost"}
+              aria-pressed={!formState.allowAllConnections}
               onClick={() => setAllowAllConnections(false)}
-              className={`px-3 py-1.5 rounded text-xs font-medium transition-all ${
-                !formState.allowAllConnections
-                  ? "bg-primary text-accent-foreground"
-                  : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-              }`}
+              className="gap-1.5 text-xs"
             >
               {t("onlySelectedConnections")}
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx
index 117439827165..c271de660dfe 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx
@@ -1,7 +1,12 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import Toggle from "@/shared/components/Toggle";
+
 import { useTranslations } from "next-intl";
-import { Input } from "@/shared/components";
+import Input from "@/shared/components/Input";
+import { cn } from "@/shared/utils/cn";
 import { ENDPOINT_CATEGORIES } from "@/shared/constants/endpointCategories";
 import { toLocalDateTimeInputValue } from "@/app/(dashboard)/dashboard/api-manager/apiManagerPageUtils";
 import RoutingEntryLink from "@/shared/components/routing/RoutingEntryLink";
@@ -69,14 +74,12 @@ function ExclusiveLeaseNotice({ apiKey }: Pick<GeneralTabProps, "apiKey">) {
     <>
       {/* Exclusive Lease Notice */}
       {hasExclusiveLeaseScope && (
-        <div className="flex flex-col gap-1 p-3 rounded-lg border border-purple-500/30 bg-purple-500/10">
-          <div className="flex items-center gap-1.5 text-purple-700 dark:text-purple-300 font-medium text-sm">
-            <span className="material-symbols-outlined text-[16px]">key_vertical</span>
+        <div className="flex flex-col gap-1 p-3 rounded-lg border border-chart-3/30 bg-chart-3/10">
+          <div className="flex items-center gap-1.5 text-chart-3 font-medium text-sm">
+            <Icon name="key_vertical" size={16} />
             {t("exclusiveLeaseNoticeTitle")}
           </div>
-          <p className="text-xs text-purple-600/80 dark:text-purple-400/80">
-            {t("exclusiveLeaseNoticeDesc")}
-          </p>
+          <p className="text-xs text-chart-3/80">{t("exclusiveLeaseNoticeDesc")}</p>
         </div>
       )}
     </>
@@ -85,7 +88,6 @@ function ExclusiveLeaseNotice({ apiKey }: Pick<GeneralTabProps, "apiKey">) {
 
 function KeyActiveToggle({ formState, setIsActive }: GeneralSectionProps<"setIsActive">) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex items-start justify-between gap-3 p-4 rounded-lg border border-border bg-surface/40">
@@ -94,22 +96,13 @@ function KeyActiveToggle({ formState, setIsActive }: GeneralSectionProps<"setIsA
         <p className="text-sm font-medium text-text-main">{t("keyActive")}</p>
         <p className="text-xs text-text-muted">{t("keyActiveDesc")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={formState.isActive}
-        onClick={() => setIsActive(!formState.isActive)}
-        className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          formState.isActive
-            ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30"
-            : "bg-red-500/15 text-red-700 dark:text-red-300 border border-red-500/30"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">
-          {formState.isActive ? "check_circle" : "block"}
-        </span>
-        {formState.isActive ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={formState.isActive}
+        onChange={() => setIsActive(!formState.isActive)}
+        ariaLabel={t("keyActive")}
+      />
     </div>
   );
 }
@@ -118,30 +111,21 @@ function BanToggle({ formState, setIsBanned }: GeneralSectionProps<"setIsBanned"
   const t = useTranslations("apiManager");
 
   return (
-    <div className="flex items-start justify-between gap-3 p-4 rounded-lg border border-red-500/20 bg-red-500/5">
+    <div className="flex items-start justify-between gap-3 p-4 rounded-lg border border-error/20 bg-error/5">
       {/* Ban Toggle (SECURITY) */}
       <div className="flex flex-col gap-1">
-        <p className="text-sm font-bold text-red-700 dark:text-red-400">{t("bannedStatus")}</p>
-        <p className="text-xs text-red-600 dark:text-red-300">
+        <p className="text-sm font-bold text-error">{t("bannedStatus")}</p>
+        <p className="text-xs text-error">
           Immediately revoke all access. Used for suspected abuse or compromised keys.
         </p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={formState.isBanned}
-        onClick={() => setIsBanned(!formState.isBanned)}
-        className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-bold transition-colors ${
-          formState.isBanned
-            ? "bg-red-500 text-white shadow-sm"
-            : "bg-black/5 dark:bg-white/5 text-text-muted hover:bg-black/10 dark:hover:bg-white/10 border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">
-          {formState.isBanned ? "block" : "check_circle"}
-        </span>
-        {formState.isBanned ? "Banned" : "Active"}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={formState.isBanned}
+        onChange={() => setIsBanned(!formState.isBanned)}
+        ariaLabel={t("bannedStatus")}
+      />
     </div>
   );
 }
@@ -160,8 +144,10 @@ function ExpirationDateField({ formState, setExpiresAt }: GeneralSectionProps<"s
         </p>
       </div>
       <div className="flex gap-2 max-w-md">
-        <input
+        <Input
           type="datetime-local"
+          aria-label={t("expirationDate")}
+          className="min-w-0 flex-1"
           value={toLocalDateTimeInputValue(formState.expiresAt)}
           onChange={(e) => {
             const val = e.target.value;
@@ -174,16 +160,15 @@ function ExpirationDateField({ formState, setExpiresAt }: GeneralSectionProps<"s
               setExpiresAt(date.toISOString());
             }
           }}
-          className="min-w-0 flex-1 px-2.5 py-1.5 text-sm border border-border rounded-md bg-background text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
         />
-        <button
-          type="button"
+        <Button
+          variant="outline"
           onClick={() => setExpiresAt("")}
           disabled={!formState.expiresAt}
-          className="shrink-0 px-3 py-1.5 text-sm font-medium border border-border rounded-md text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="shrink-0"
         >
           {tc("clear")}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -194,7 +179,6 @@ function ManagementAccessToggle({
   setManageEnabled,
 }: GeneralSectionProps<"setManageEnabled">) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex items-start justify-between gap-3 p-4 rounded-lg border border-border bg-surface/40">
@@ -203,20 +187,13 @@ function ManagementAccessToggle({
         <p className="text-sm font-medium text-text-main">{t("managementAccess")}</p>
         <p className="text-xs text-text-muted">{t("managementAccessDesc")}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={formState.manageEnabled}
-        onClick={() => setManageEnabled(!formState.manageEnabled)}
-        className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-          formState.manageEnabled
-            ? "bg-rose-500/15 text-rose-700 dark:text-rose-300 border border-rose-500/30"
-            : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-        }`}
-      >
-        <span className="material-symbols-outlined text-[14px]">admin_panel_settings</span>
-        {formState.manageEnabled ? tc("enabled") : tc("disabled")}
-      </button>
+      <Toggle
+        size="sm"
+        className="shrink-0"
+        checked={formState.manageEnabled}
+        onChange={() => setManageEnabled(!formState.manageEnabled)}
+        ariaLabel={t("managementAccess")}
+      />
     </div>
   );
 }
@@ -227,7 +204,6 @@ function SelfServiceVisibility({
   setSelfAccountQuotaEnabled,
 }: GeneralSectionProps<"setSelfUsageEnabled" | "setSelfAccountQuotaEnabled">) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-surface/40">
@@ -242,20 +218,13 @@ function SelfServiceVisibility({
           <p className="text-xs font-medium text-text-main">{t("ownUsageVisibility")}</p>
           <p className="text-xs text-text-muted">{t("ownUsageVisibilityDesc")}</p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={formState.selfUsageEnabled}
-          onClick={() => setSelfUsageEnabled(!formState.selfUsageEnabled)}
-          className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-            formState.selfUsageEnabled
-              ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30"
-              : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-          }`}
-        >
-          <span className="material-symbols-outlined text-[14px]">query_stats</span>
-          {formState.selfUsageEnabled ? tc("enabled") : tc("disabled")}
-        </button>
+        <Toggle
+          size="sm"
+          className="shrink-0"
+          checked={formState.selfUsageEnabled}
+          onChange={() => setSelfUsageEnabled(!formState.selfUsageEnabled)}
+          ariaLabel={t("ownUsageVisibility")}
+        />
       </div>
 
       <div className="flex items-center justify-between gap-3 border-t border-border/50 pt-3">
@@ -263,21 +232,14 @@ function SelfServiceVisibility({
           <p className="text-xs font-medium text-text-main">{t("sharedAccountQuotaVisibility")}</p>
           <p className="text-xs text-text-muted">{t("sharedAccountQuotaVisibilityDesc")}</p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={formState.selfAccountQuotaEnabled}
+        <Toggle
+          size="sm"
+          className="shrink-0"
+          checked={formState.selfAccountQuotaEnabled}
           disabled={!formState.selfUsageEnabled}
-          onClick={() => setSelfAccountQuotaEnabled(!formState.selfAccountQuotaEnabled)}
-          className={`inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-            formState.selfAccountQuotaEnabled
-              ? "bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30"
-              : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-          } ${!formState.selfUsageEnabled ? "opacity-50 cursor-not-allowed" : ""}`}
-        >
-          <span className="material-symbols-outlined text-[14px]">account_balance</span>
-          {formState.selfAccountQuotaEnabled ? tc("enabled") : tc("disabled")}
-        </button>
+          onChange={() => setSelfAccountQuotaEnabled(!formState.selfAccountQuotaEnabled)}
+          ariaLabel={t("sharedAccountQuotaVisibility")}
+        />
       </div>
     </div>
   );
@@ -292,30 +254,30 @@ function EndpointCategoryPicker({
       {ENDPOINT_CATEGORIES.map((cat) => {
         const isSelected = formState.selectedEndpoints.includes(cat.id);
         return (
-          <button
+          <Button
             key={cat.id}
-            type="button"
+            variant="outline"
+            aria-pressed={isSelected}
             onClick={() => toggleEndpoint(cat.id)}
-            className={`flex items-center gap-2 p-2 rounded-lg text-left text-xs transition-all border ${
-              isSelected
-                ? "bg-primary/10 text-primary border-primary/30"
-                : "bg-surface/50 border-border text-text-muted hover:text-text-main hover:border-primary/40"
-            }`}
+            className={cn(
+              "h-auto justify-start gap-2 p-2 text-left text-xs font-normal",
+              isSelected ? "bg-primary/10 border-primary/30" : "text-text-muted"
+            )}
           >
-            <div
-              className={`w-4 h-4 rounded border flex items-center justify-center shrink-0 ${
-                isSelected ? "bg-primary border-primary" : "border-border"
-              }`}
-            >
-              {isSelected && (
-                <span className="material-symbols-outlined text-white text-[11px]">check</span>
+            <span
+              aria-hidden="true"
+              className={cn(
+                "w-4 h-4 rounded border flex items-center justify-center shrink-0",
+                isSelected ? "bg-primary border-primary text-accent-foreground" : "border-border"
               )}
-            </div>
+            >
+              {isSelected && <Icon name="check" size={11} />}
+            </span>
             <div className="flex flex-col min-w-0 flex-1">
               <span className="font-medium truncate text-text-main">{cat.label}</span>
               <span className="text-[10px] text-text-muted truncate">{cat.description}</span>
             </div>
-          </button>
+          </Button>
         );
       })}
     </div>
@@ -344,28 +306,24 @@ function AllowedEndpointsSection({
           </p>
         </div>
         <div className="flex gap-1 p-0.5 bg-surface rounded-md">
-          <button
-            type="button"
+          <Button
+            size="sm"
+            variant={formState.allowAllEndpoints ? "primary" : "ghost"}
+            aria-pressed={formState.allowAllEndpoints}
             onClick={() => setAllowAllEndpoints(true)}
-            className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${
-              formState.allowAllEndpoints
-                ? "bg-primary text-accent-foreground"
-                : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-            }`}
+            className="gap-1.5 text-xs"
           >
             {t("all")}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            size="sm"
+            variant={!formState.allowAllEndpoints ? "primary" : "ghost"}
+            aria-pressed={!formState.allowAllEndpoints}
             onClick={() => setAllowAllEndpoints(false)}
-            className={`px-2.5 py-1 rounded text-xs font-medium transition-all ${
-              !formState.allowAllEndpoints
-                ? "bg-primary text-accent-foreground"
-                : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-            }`}
+            className="gap-1.5 text-xs"
           >
             {t("restrict")}
-          </button>
+          </Button>
         </div>
       </div>
       {!formState.allowAllEndpoints && (
diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/LimitsTab.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/LimitsTab.tsx
index 343fcb91b40b..89f71f21bc1d 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/LimitsTab.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/LimitsTab.tsx
@@ -1,7 +1,11 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Toggle from "@/shared/components/Toggle";
+
+import { useId } from "react";
 import { useTranslations } from "next-intl";
-import { Input } from "@/shared/components";
+import Input from "@/shared/components/Input";
 import { UsageLimitSettings } from "@/app/(dashboard)/dashboard/api-manager/components/UsageLimitSettings";
 import type { ApiKeyAccessFormState } from "../useApiKeyAccessForm";
 import TabErrorList from "./TabErrorList";
@@ -40,6 +44,7 @@ function MaxSessionsField({ formState, setMaxSessions }: LimitsSectionProps<"set
           type="number"
           min={0}
           step={1}
+          aria-label={t("maxActiveSessions")}
           value={String(formState.maxSessions)}
           onChange={(e) => {
             const parsed = Number.parseInt(e.target.value || "0", 10);
@@ -69,6 +74,7 @@ function ThrottleDelayField({
           min={0}
           max={300000}
           step={100}
+          aria-label={t("throttleDelay")}
           value={String(formState.throttleDelayMs)}
           onChange={(e) => {
             const parsed = Number.parseInt(e.target.value || "0", 10);
@@ -98,14 +104,15 @@ function CustomRateLimits({
           <p className="text-sm font-medium text-text-main">{t("apiManagerCustomRateLimits")}</p>
           <p className="text-xs text-text-muted">{t("apiManagerCustomRateLimitsDesc")}</p>
         </div>
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="add"
           onClick={addRateLimit}
-          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold bg-primary/10 text-primary hover:bg-primary/20 transition-colors shrink-0"
+          className="shrink-0"
         >
-          <span className="material-symbols-outlined text-[14px]">add</span>
           Add Limit
-        </button>
+        </Button>
       </div>
       {formState.rateLimits.length > 0 && (
         <div className="flex flex-col gap-2 pt-1">
@@ -120,6 +127,7 @@ function CustomRateLimits({
                   updateRateLimit(index, val, rl.window);
                 }}
                 placeholder={t("apiManagerRateLimitRequestsPlaceholder")}
+                aria-label={t("apiManagerRateLimitRequestsPlaceholder")}
               />
               <span className="text-sm text-text-muted shrink-0">
                 {t("apiManagerRateLimitReqPer")}
@@ -133,16 +141,18 @@ function CustomRateLimits({
                   updateRateLimit(index, rl.limit, val);
                 }}
                 placeholder={t("apiManagerRateLimitSecondsPlaceholder")}
+                aria-label={t("apiManagerRateLimitSecondsPlaceholder")}
               />
               <span className="text-sm text-text-muted shrink-0">sec</span>
-              <button
-                type="button"
+              <Button
+                variant="ghost"
+                size="icon"
                 onClick={() => removeRateLimit(index)}
-                className="p-2 text-red-500 hover:bg-red-500/10 rounded transition-colors shrink-0"
+                className="text-error shrink-0"
                 title={t("apiManagerRemoveLimitTitle")}
-              >
-                <span className="material-symbols-outlined text-[18px]">delete</span>
-              </button>
+                aria-label={t("apiManagerRemoveLimitTitle")}
+                icon="delete"
+              />
             </div>
           ))}
         </div>
@@ -153,11 +163,14 @@ function CustomRateLimits({
 
 function ScheduleDayPicker({ formState, setScheduleDays }: LimitsSectionProps<"setScheduleDays">) {
   const t = useTranslations("apiManager");
+  const labelId = useId();
 
   return (
     <div>
-      <label className="text-xs text-text-muted mb-1.5 block">{t("scheduleDays")}</label>
-      <div className="flex gap-1.5 flex-wrap">
+      <p className="text-xs text-text-muted mb-1.5" id={labelId}>
+        {t("scheduleDays")}
+      </p>
+      <div className="flex gap-1.5 flex-wrap" role="group" aria-labelledby={labelId}>
         {(
           [
             [0, t("daySun")],
@@ -171,9 +184,11 @@ function ScheduleDayPicker({ formState, setScheduleDays }: LimitsSectionProps<"s
         ).map(([dayIdx, label]) => {
           const selected = formState.scheduleDays.includes(dayIdx);
           return (
-            <button
+            <Button
+              size="sm"
+              variant={selected ? "primary" : "ghost"}
+              aria-pressed={selected}
               key={dayIdx}
-              type="button"
               onClick={() =>
                 setScheduleDays((prev) =>
                   prev.includes(dayIdx)
@@ -181,14 +196,10 @@ function ScheduleDayPicker({ formState, setScheduleDays }: LimitsSectionProps<"s
                     : [...prev, dayIdx].sort((a, b) => a - b)
                 )
               }
-              className={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                selected
-                  ? "bg-primary text-accent-foreground"
-                  : "bg-surface border border-border text-text-muted hover:border-primary/50"
-              }`}
+              className="gap-1.5 text-xs"
             >
               {label}
-            </button>
+            </Button>
           );
         })}
       </div>
@@ -211,37 +222,30 @@ function ScheduleDetails({
   return (
     <div className="flex flex-col gap-3 pt-1 border-t border-border/50">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
-        <div>
-          <label className="text-xs text-text-muted mb-1 block">{t("scheduleFrom")}</label>
-          <input
-            type="time"
-            value={formState.scheduleFrom}
-            onChange={(e) => setScheduleFrom(e.target.value)}
-            className="w-full px-2.5 py-1.5 text-sm border border-border rounded-md bg-background text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
-          />
-        </div>
-        <div>
-          <label className="text-xs text-text-muted mb-1 block">{t("scheduleUntil")}</label>
-          <input
-            type="time"
-            value={formState.scheduleUntil}
-            onChange={(e) => setScheduleUntil(e.target.value)}
-            className="w-full px-2.5 py-1.5 text-sm border border-border rounded-md bg-background text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
-          />
-        </div>
-      </div>
-      <ScheduleDayPicker formState={formState} setScheduleDays={setScheduleDays} />
-      <div>
-        <label className="text-xs text-text-muted mb-1 block">{t("scheduleTimezone")}</label>
-        <input
-          type="text"
-          value={formState.scheduleTz}
-          onChange={(e) => setScheduleTz(e.target.value)}
-          placeholder={t("apiManagerTimezonePlaceholder")}
-          className="w-full max-w-sm px-2.5 py-1.5 text-sm border border-border rounded-md bg-background text-text-main font-mono focus:outline-none focus:ring-1 focus:ring-primary"
+        <Input
+          label={t("scheduleFrom")}
+          type="time"
+          value={formState.scheduleFrom}
+          onChange={(e) => setScheduleFrom(e.target.value)}
+        />
+        <Input
+          label={t("scheduleUntil")}
+          type="time"
+          value={formState.scheduleUntil}
+          onChange={(e) => setScheduleUntil(e.target.value)}
         />
-        <p className="text-[10px] text-text-muted mt-1">{t("scheduleTimezoneHint")}</p>
       </div>
+      <ScheduleDayPicker formState={formState} setScheduleDays={setScheduleDays} />
+      <Input
+        label={t("scheduleTimezone")}
+        type="text"
+        value={formState.scheduleTz}
+        onChange={(e) => setScheduleTz(e.target.value)}
+        placeholder={t("apiManagerTimezonePlaceholder")}
+        hint={t("scheduleTimezoneHint")}
+        className="max-w-sm"
+        inputClassName="font-mono"
+      />
     </div>
   );
 }
@@ -255,7 +259,6 @@ function AccessScheduleSection({
   setScheduleTz,
 }: LimitsSectionProps<"setScheduleEnabled" | ScheduleDetailSetter>) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <div className="flex flex-col gap-3 p-4 rounded-lg border border-border bg-surface/40">
@@ -264,20 +267,13 @@ function AccessScheduleSection({
           <p className="text-sm font-medium text-text-main">{t("accessSchedule")}</p>
           <p className="text-xs text-text-muted">{t("accessScheduleDesc")}</p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={formState.scheduleEnabled}
-          onClick={() => setScheduleEnabled(!formState.scheduleEnabled)}
-          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors shrink-0 ${
-            formState.scheduleEnabled
-              ? "bg-orange-500/15 text-orange-700 dark:text-orange-300 border border-orange-500/30"
-              : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-          }`}
-        >
-          <span className="material-symbols-outlined text-[14px]">schedule</span>
-          {formState.scheduleEnabled ? tc("enabled") : tc("disabled")}
-        </button>
+        <Toggle
+          size="sm"
+          className="shrink-0"
+          checked={formState.scheduleEnabled}
+          onChange={() => setScheduleEnabled(!formState.scheduleEnabled)}
+          ariaLabel={t("accessSchedule")}
+        />
       </div>
       {formState.scheduleEnabled && (
         <ScheduleDetails
diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ModelsTab.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ModelsTab.tsx
index 24cd23b19a21..336d0a1330a1 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ModelsTab.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/ModelsTab.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import Toggle from "@/shared/components/Toggle";
+import Input from "@/shared/components/Input";
+
 import {
   useMemo,
   useState,
@@ -180,30 +185,26 @@ function ModelAccessModeToggle({
   return (
     <div className="flex gap-2 p-1 bg-surface rounded-lg">
       {/* Access Mode Toggle */}
-      <button
-        type="button"
+      <Button
+        size="sm"
+        variant={allowAll ? "primary" : "ghost"}
+        aria-pressed={allowAll}
         onClick={onSelectAll}
-        className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all ${
-          allowAll
-            ? "bg-primary text-accent-foreground"
-            : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-        }`}
+        className="gap-1.5 text-xs flex-1 justify-center"
       >
-        <span className="material-symbols-outlined text-[18px]">lock_open</span>
+        <Icon name="lock_open" size={18} />
         {t("allowAll")}
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        size="sm"
+        variant={!allowAll ? "primary" : "ghost"}
+        aria-pressed={!allowAll}
         onClick={onRestrict}
-        className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all ${
-          !allowAll
-            ? "bg-primary text-accent-foreground"
-            : "text-text-muted hover:bg-black/5 dark:hover:bg-white/5"
-        }`}
+        className="gap-1.5 text-xs flex-1 justify-center"
       >
-        <span className="material-symbols-outlined text-[18px]">lock</span>
+        <Icon name="lock" size={18} />
         {t("restrict")}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -226,25 +227,17 @@ function ModelAccessInfoBanner({
     <div
       className={`flex items-start gap-2 p-3 rounded-lg ${
         formState.allowAll
-          ? "bg-green-500/10 border border-green-500/30"
-          : "bg-amber-500/10 border border-amber-500/30"
+          ? "bg-success/10 border border-success/30"
+          : "bg-warning/10 border border-warning/30"
       }`}
     >
       {/* Info Banner */}
-      <span
-        className={`material-symbols-outlined text-[18px] ${
-          formState.allowAll ? "text-green-500" : "text-amber-500"
-        }`}
-      >
-        {formState.allowAll ? "info" : "warning"}
-      </span>
-      <p
-        className={`text-xs ${
-          formState.allowAll
-            ? "text-green-700 dark:text-green-300"
-            : "text-amber-700 dark:text-amber-300"
-        }`}
-      >
+      <Icon
+        name={formState.allowAll ? "info" : "warning"}
+        size={18}
+        className={formState.allowAll ? "text-success" : "text-warning"}
+      />
+      <p className={`text-xs ${formState.allowAll ? "text-success" : "text-warning"}`}>
         {formState.allowAll
           ? t("allowAllDesc")
           : !modelsLoaded
@@ -269,19 +262,16 @@ function ForcedModelSetting({
 
   return (
     <div className="flex flex-col gap-2 p-4 rounded-lg border border-border bg-surface/40">
-      <label htmlFor="api-key-forced-model" className="text-sm font-medium text-text-main">
-        {t("forcedModel")}
-      </label>
-      <p className="text-xs text-text-muted">{t("forcedModelDesc")}</p>
-      <input
+      <Input
         id="api-key-forced-model"
+        label={t("forcedModel")}
+        hint={t("forcedModelDesc")}
         type="text"
         list="api-key-forced-model-options"
         value={formState.forcedModel}
         maxLength={300}
         onChange={(e) => setForcedModel(e.target.value)}
         placeholder={t("forcedModelPlaceholder")}
-        className="w-full px-3 py-2 text-sm rounded-md border border-border bg-transparent text-text-main"
       />
       <datalist id="api-key-forced-model-options">
         {allModels.map((model) => (
@@ -298,7 +288,6 @@ function CatalogVisibilitySettings({
   setDisableNonPublicModels,
 }: Pick<ModelsTabProps, "formState" | "setCatalogScope" | "setDisableNonPublicModels">) {
   const t = useTranslations("apiManager");
-  const tc = useTranslations("common");
 
   return (
     <>
@@ -311,22 +300,13 @@ function CatalogVisibilitySettings({
           <p className="text-sm font-medium text-text-main">{t("disableNonPublicModels")}</p>
           <p className="text-xs text-text-muted">{t("disableNonPublicModelsDesc")}</p>
         </div>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={formState.disableNonPublicModels}
-          onClick={() => setDisableNonPublicModels(!formState.disableNonPublicModels)}
-          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-semibold transition-colors ${
-            formState.disableNonPublicModels
-              ? "bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30"
-              : "bg-black/5 dark:bg-white/5 text-text-muted border border-border"
-          }`}
-        >
-          <span className="material-symbols-outlined text-[14px]">
-            {formState.disableNonPublicModels ? "shield_lock" : "shield"}
-          </span>
-          {formState.disableNonPublicModels ? tc("yes") : tc("no")}
-        </button>
+        <Toggle
+          size="sm"
+          className="shrink-0"
+          checked={formState.disableNonPublicModels}
+          onChange={() => setDisableNonPublicModels(!formState.disableNonPublicModels)}
+          ariaLabel={t("disableNonPublicModels")}
+        />
       </div>
     </>
   );
@@ -371,20 +351,22 @@ function SelectedModelsSummary({
       <div className="flex items-center justify-between">
         <span className="text-xs font-medium text-primary">{selectedPermissionSummary}</span>
         <div className="flex gap-1">
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={() => selectAllModels(allModels.map((m) => m.id))}
-            className="text-[10px] text-primary hover:bg-primary/10 px-1.5 py-0.5 rounded transition-colors"
+            className="h-auto min-h-0 px-1.5 py-0.5 text-[10px]"
           >
             {tc("all")}
-          </button>
-          <button
-            type="button"
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={deselectAllModels}
-            className="text-[10px] text-red-500 hover:bg-red-500/10 px-1.5 py-0.5 rounded transition-colors"
+            className="h-auto min-h-0 px-1.5 py-0.5 text-[10px] text-error"
           >
             {t("clear")}
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -458,28 +440,33 @@ function ClaudeCodeDefaultScopeChip({
   return (
     <div className="flex flex-col gap-1 basis-full">
       <span className="inline-flex w-fit items-center gap-0.5 px-1.5 py-0.5 bg-primary/10 text-text-main text-[10px] rounded border border-primary/35">
-        <button
-          type="button"
+        <Button
+          variant="ghost"
+          size="sm"
           onClick={() => setClaudeCodeFamiliesExpanded((prev) => !prev)}
-          className="inline-flex items-center gap-1 font-mono text-text-main"
+          className="h-auto min-h-0 gap-1 p-0 font-mono text-[10px] text-text-main"
           title={t("expandClaudeCodeFamilies")}
           aria-expanded={claudeCodeFamiliesExpanded}
         >
           <span className="truncate max-w-[140px]" title={scope}>
             {CLAUDE_CODE_DEFAULT_MODEL_NAME}
           </span>
-          <span className="material-symbols-outlined text-[12px] text-primary">
-            {claudeCodeFamiliesExpanded ? "expand_less" : "expand_more"}
-          </span>
-        </button>
-        <button
-          type="button"
+          <Icon
+            name={claudeCodeFamiliesExpanded ? "expand_less" : "expand_more"}
+            size={12}
+            className="text-primary"
+          />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon-sm"
           onClick={() => toggleModel(scope)}
-          className="text-text-muted hover:text-red-500 transition-colors"
+          className="h-4 w-4 min-h-0 min-w-0 p-0 text-text-muted hover:text-error"
           title={t("removeClaudeCodeDefault")}
+          aria-label={t("removeClaudeCodeDefault")}
         >
-          <span className="material-symbols-outlined text-[12px]">close</span>
-        </button>
+          <Icon name="close" size={12} />
+        </Button>
       </span>
 
       {claudeCodeFamiliesExpanded && (
@@ -525,8 +512,8 @@ function ClaudeCodeFamilyChips({
             key={family.id}
             className={`inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] rounded border ${
               canBlock
-                ? "bg-white dark:bg-surface text-text-main border-border"
-                : "bg-black/5 dark:bg-white/5 text-text-muted border-border"
+                ? "bg-surface text-text-main border-border"
+                : "bg-surface-2 text-text-muted border-border"
             }`}
             title={
               canBlock
@@ -536,14 +523,16 @@ function ClaudeCodeFamilyChips({
           >
             <span className="font-mono">{family.label}</span>
             {canBlock && (
-              <button
-                type="button"
+              <Button
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => blockClaudeCodeFamily(family.id as ClaudeCodeBlockableFamilyId)}
-                className="text-text-muted hover:text-red-500 transition-colors"
+                className="h-4 w-4 min-h-0 min-w-0 p-0 text-text-muted hover:text-error"
                 title={`Block ${family.label} family`}
+                aria-label={`Block ${family.label} family`}
               >
-                <span className="material-symbols-outlined text-[12px]">close</span>
-              </button>
+                <Icon name="close" size={12} />
+              </Button>
             )}
           </span>
         );
@@ -556,6 +545,7 @@ function ProviderScopeChip({
   scope,
   toggleModel,
 }: Pick<ModelsTabProps, "toggleModel"> & { scope: string }) {
+  const t = useTranslations("apiManager");
   const provider = scope.slice(0, -2);
   return (
     <span
@@ -563,13 +553,15 @@ function ProviderScopeChip({
       title={scope}
     >
       <span className="font-mono truncate max-w-[120px]">{provider}</span>
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="icon-sm"
         onClick={() => toggleModel(scope)}
-        className="text-text-muted hover:text-red-500 transition-colors"
+        className="h-4 w-4 min-h-0 min-w-0 p-0 text-text-muted hover:text-error"
+        aria-label={t("removeSelection", { name: provider })}
       >
-        <span className="material-symbols-outlined text-[12px]">close</span>
-      </button>
+        <Icon name="close" size={12} />
+      </Button>
     </span>
   );
 }
@@ -578,18 +570,21 @@ function SelectedModelChip({
   modelId,
   toggleModel,
 }: Pick<ModelsTabProps, "toggleModel"> & { modelId: string }) {
+  const t = useTranslations("apiManager");
   return (
-    <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-white dark:bg-surface text-text-main text-[10px] rounded border border-border">
+    <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-surface text-text-main text-[10px] rounded border border-border">
       <span className="font-mono truncate max-w-[120px]" title={modelId}>
         {getModelDisplayName(modelId)}
       </span>
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="icon-sm"
         onClick={() => toggleModel(modelId)}
-        className="text-text-muted hover:text-red-500 transition-colors"
+        className="h-4 w-4 min-h-0 min-w-0 p-0 text-text-muted hover:text-error"
+        aria-label={t("removeSelection", { name: getModelDisplayName(modelId) })}
       >
-        <span className="material-symbols-outlined text-[12px]">close</span>
-      </button>
+        <Icon name="close" size={12} />
+      </Button>
     </span>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/TabErrorList.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/TabErrorList.tsx
index 653b033083cc..534bb079ac2a 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/TabErrorList.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/TabErrorList.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 interface TabErrorListProps {
   errors?: readonly string[];
 }
@@ -14,13 +16,11 @@ export default function TabErrorList({ errors }: TabErrorListProps) {
   return (
     <div
       role="alert"
-      className="flex flex-col gap-1.5 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/30"
+      className="flex flex-col gap-1.5 px-3 py-2 rounded-lg bg-error/10 border border-error/30"
     >
       {errors.map((message) => (
-        <p key={message} className="flex items-center gap-2 text-sm text-red-700 dark:text-red-300">
-          <span className="material-symbols-outlined text-red-500 text-sm" aria-hidden="true">
-            error
-          </span>
+        <p key={message} className="flex items-center gap-2 text-sm text-error">
+          <Icon name="error" className="text-error text-sm" />
           {message}
         </p>
       ))}
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index d90f33f4943f..461217f3e4df 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -2500,7 +2500,8 @@
     "onlySelectedConnections": "Only selected connections",
     "selectAtLeastOneConnection": "Select at least one connection or choose All connections.",
     "allConnectionsDesc": "This key can use any active connection.",
-    "restrictedToConnections": "Restricted to {count, plural, one {# connection} other {# connections}}."
+    "restrictedToConnections": "Restricted to {count, plural, one {# connection} other {# connections}}.",
+    "removeSelection": "Remove {name}"
   },
   "auditLog": {
     "title": "Audit Log",
diff --git a/src/i18n/messages/pt-BR.json b/src/i18n/messages/pt-BR.json
index 69030331c427..1347e3bb1fef 100644
--- a/src/i18n/messages/pt-BR.json
+++ b/src/i18n/messages/pt-BR.json
@@ -2500,7 +2500,8 @@
     "onlySelectedConnections": "Apenas as conexões selecionadas",
     "selectAtLeastOneConnection": "Selecione pelo menos uma conexão ou escolha Todas as conexões.",
     "allConnectionsDesc": "Esta chave pode usar qualquer conexão ativa.",
-    "restrictedToConnections": "Restrita a {count, plural, one {# conexão} other {# conexões}}."
+    "restrictedToConnections": "Restrita a {count, plural, one {# conexão} other {# conexões}}.",
+    "removeSelection": "Remover {name}"
   },
   "auditLog": {
     "title": "Log de Auditoria",
diff --git a/tests/e2e/api-key-model-scope.spec.ts b/tests/e2e/api-key-model-scope.spec.ts
index 5bbc6d5099c2..7043582a0d6b 100644
--- a/tests/e2e/api-key-model-scope.spec.ts
+++ b/tests/e2e/api-key-model-scope.spec.ts
@@ -235,9 +235,10 @@ test.describe("API key model scope", () => {
     const permissionsEditor = await openKeyAccessEditor(page, "Provider Scope Key");
     await permissionsEditor.getByRole("tab", { name: "Models", exact: true }).click();
 
-    // Enter Restrict mode via the primary Access Mode toggle (accessible name includes the lock icon text).
+    // Enter Restrict mode via the primary Access Mode toggle (KEA-7886: the lock icon is an
+    // aria-hidden Lucide svg, so the accessible name is just "Restrict").
     const accessModeRestrict = permissionsEditor.getByRole("button", {
-      name: /^lock\s+restrict$/i,
+      name: /^restrict$/i,
     });
     await expect(accessModeRestrict).toBeVisible({ timeout: UI_STABILITY_TIMEOUT_MS });
     await accessModeRestrict.click();
@@ -288,8 +289,9 @@ test.describe("API key model scope", () => {
     await reopened.getByRole("tab", { name: "Models", exact: true }).click();
 
     // Restrict mode should remain selected after reopen.
-    await expect(reopened.getByRole("button", { name: /^lock\s+restrict$/i })).toHaveClass(
-      /bg-primary/
+    await expect(reopened.getByRole("button", { name: /^restrict$/i })).toHaveAttribute(
+      "aria-pressed",
+      "true"
     );
 
     const reopenedProviderCheckbox = reopened.getByRole("checkbox", {
@@ -320,8 +322,9 @@ test.describe("API key model scope", () => {
     await returnToKeyList(page);
     const denyAllReopened = await openKeyAccessEditor(page, "Provider Scope Key");
     await denyAllReopened.getByRole("tab", { name: "Models", exact: true }).click();
-    await expect(denyAllReopened.getByRole("button", { name: /^lock\s+restrict$/i })).toHaveClass(
-      /bg-primary/
+    await expect(denyAllReopened.getByRole("button", { name: /^restrict$/i })).toHaveAttribute(
+      "aria-pressed",
+      "true"
     );
     await expect(
       denyAllReopened.getByRole("checkbox", { name: /ollama[- ]?cloud/i })
diff --git a/tests/unit/api-manager-page-static.test.ts b/tests/unit/api-manager-page-static.test.ts
index efacafdbd3e2..4f562357139f 100644
--- a/tests/unit/api-manager-page-static.test.ts
+++ b/tests/unit/api-manager-page-static.test.ts
@@ -89,9 +89,10 @@ test("general tab uses i18n for management access description", () => {
 
 test("API manager page renders purpose-first header", () => {
   const source = readApiManagerPage();
+  // KEA-7886: the header is the kit PageHeader (title/description/actions) + the request flow.
   const headerBlock = source.slice(
-    source.indexOf('<h1 className="text-3xl'),
-    source.indexOf("{/* Filter Bar", source.indexOf('<h1 className="text-3xl'))
+    source.indexOf("<PageHeader"),
+    source.indexOf("{/* Filter Bar", source.indexOf("<PageHeader"))
   );
 
   assert.match(headerBlock, /\{t\("keyManagement"\)\}/);
@@ -131,20 +132,20 @@ test("general tab converts API key expiration ISO timestamps to local datetime i
   assert.doesNotMatch(expirationBlock, /expiresAt\.slice\(0, 16\)/);
 });
 
-test("access editor switch buttons declare button type", () => {
+test("access editor switches never submit the form (kit Switch via the Toggle adapter)", () => {
+  // KEA-7886: the switches are the Toggle adapter (kit Switch = input[type=checkbox][role=switch]),
+  // which cannot submit a form; a hand-rolled <button role="switch"> must not come back.
   const source = readGeneralTab();
   const visibilityStart = source.indexOf("{/* Self-service Visibility */}");
   const visibilityEnd = source.indexOf("{/* Allowed Endpoints Section */}", visibilityStart);
   const selfServiceBlock = source.slice(visibilityStart, visibilityEnd);
-  const switchButtonCount = (selfServiceBlock.match(/role="switch"/g) ?? []).length;
-  const typedSwitchButtonCount = (
-    selfServiceBlock.match(/<button\s+type="button"\s+role="switch"/g) ?? []
-  ).length;
+  const toggleCount = (selfServiceBlock.match(/<Toggle\b/g) ?? []).length;
+  const rawSwitchCount = (selfServiceBlock.match(/role="switch"/g) ?? []).length;
 
   // Self-service Visibility block in GeneralTab has 2 inline switches: own-usage visibility
   // and shared-account quota visibility.
-  assert.equal(switchButtonCount, 2);
-  assert.equal(typedSwitchButtonCount, 2);
+  assert.equal(toggleCount, 2);
+  assert.equal(rawSwitchCount, 0);
 
   // The extracted toggle components keep the same invariant.
   for (const rel of [
@@ -153,11 +154,10 @@ test("access editor switch buttons declare button type", () => {
     "src/app/(dashboard)/dashboard/api-manager/components/ApiKeyCompressionToggle.tsx",
   ]) {
     const componentSource = fs.readFileSync(path.join(repoRoot, rel), "utf8");
-    const compSwitches = (componentSource.match(/role="switch"/g) ?? []).length;
-    const compTyped = (componentSource.match(/<button\s+type="button"\s+role="switch"/g) ?? [])
-      .length;
+    const compSwitches = (componentSource.match(/<Toggle\b/g) ?? []).length;
+    const compRaw = (componentSource.match(/role="switch"/g) ?? []).length;
     assert.ok(compSwitches >= 1, `${rel} must render a switch`);
-    assert.equal(compTyped, compSwitches, `${rel}: every switch declares type="button"`);
+    assert.equal(compRaw, 0, `${rel}: every switch is the non-submitting kit Switch`);
   }
 });
 
@@ -216,7 +216,7 @@ test("behaviour tab persists the per-key prompt-compression switch", () => {
   assert.match(component, /useTranslations\("settings"\)/);
   assert.match(component, /tSettings\("compressionTitle"\)/);
   assert.match(component, /tSettings\("compressionDesc"\)/);
-  assert.match(component, /aria-checked=\{enabled\}/);
+  assert.match(component, /checked=\{enabled\}/);
 });
 
 test("access editor exposes Claude Code default wildcard model", () => {

From 121a096675502ee32c715ead126c94c2f724242e Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 01:08:29 -0300
Subject: [PATCH 06/13] refactor(dashboard): /dashboard/endpoint on the CI UI
 Kit (KEA-7886, lote 3)

---
 .../dashboard/endpoint/ApiEndpointsTab.tsx    | 343 +++++------
 .../dashboard/endpoint/EndpointPageClient.tsx | 567 +++++++++---------
 .../endpoint/VscodeTokenAliasCard.tsx         |  36 +-
 .../endpoint/components/A2ADashboard.tsx      | 140 +++--
 .../endpoint/components/MCPDashboard.tsx      | 125 ++--
 .../endpoint/components/NotionSourceCard.tsx  |  73 ++-
 .../components/ObsidianSourceCard.tsx         | 135 ++---
 7 files changed, 692 insertions(+), 727 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/endpoint/ApiEndpointsTab.tsx b/src/app/(dashboard)/dashboard/endpoint/ApiEndpointsTab.tsx
index 96322ba7bcb4..115f61e3dbd5 100644
--- a/src/app/(dashboard)/dashboard/endpoint/ApiEndpointsTab.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/ApiEndpointsTab.tsx
@@ -1,8 +1,19 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { useTranslations } from "next-intl";
-import { Card } from "@/shared/components";
+import { buttonVariants } from "@omniroute/ui-kit/button";
+import { CodePreview } from "@omniroute/ui-kit/code-preview";
+import Badge from "@/shared/components/Badge";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import EmptyState from "@/shared/components/EmptyState";
+import Input from "@/shared/components/Input";
+import Select from "@/shared/components/Select";
+import Textarea from "@/shared/components/Textarea";
+import { cn } from "@/shared/utils/cn";
 import { useDisplayBaseUrl } from "@/shared/hooks";
 import VscodeTokenAliasCard from "./VscodeTokenAliasCard";
 import { matchesSearch } from "@/shared/utils/turkishText";
@@ -41,45 +52,37 @@ interface TryItResult {
   contentType: string;
 }
 
-const METHOD_COLORS: Record<string, string> = {
-  GET: "bg-emerald-500/15 text-emerald-500 border-emerald-500/30",
-  POST: "bg-blue-500/15 text-blue-500 border-blue-500/30",
-  PUT: "bg-amber-500/15 text-amber-500 border-amber-500/30",
-  PATCH: "bg-orange-500/15 text-orange-500 border-orange-500/30",
-  DELETE: "bg-red-500/15 text-red-500 border-red-500/30",
+const METHOD_VARIANTS: Record<string, "success" | "info" | "warning" | "error"> = {
+  GET: "success",
+  POST: "info",
+  PUT: "warning",
+  PATCH: "warning",
+  DELETE: "error",
 };
 
 /* ─── Main Component ─────────────────────────────────── */
 export default function ApiEndpointsTab() {
   const t = useTranslations("endpoint");
+  const tc = useTranslations("common");
   const baseUrl = useDisplayBaseUrl();
 
   function EndpointBadges({ ep }: { ep: Endpoint }) {
     return (
       <div className="flex items-center gap-1 shrink-0">
         {ep.loopbackOnly && (
-          <span
-            className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-500 border border-blue-500/30"
-            title={t("badgeLoopbackTooltip")}
-          >
+          <Badge size="sm" variant="info" title={t("badgeLoopbackTooltip")}>
             {t("badgeLocal")}
-          </span>
+          </Badge>
         )}
         {ep.alwaysProtected && (
-          <span
-            className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-red-500/15 text-red-500 border border-red-500/30"
-            title={t("badgeAlwaysProtectedTooltip")}
-          >
+          <Badge size="sm" variant="error" title={t("badgeAlwaysProtectedTooltip")}>
             {t("badgeProtected")}
-          </span>
+          </Badge>
         )}
         {ep.internal && (
-          <span
-            className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-gray-500/15 text-gray-400 border border-gray-500/30"
-            title={t("badgeInternalTooltip")}
-          >
+          <Badge size="sm" title={t("badgeInternalTooltip")}>
             {t("badgeInternal")}
-          </span>
+          </Badge>
         )}
       </div>
     );
@@ -311,8 +314,8 @@ export default function ApiEndpointsTab() {
   if (loading) {
     return (
       <div className="animate-pulse space-y-4">
-        <div className="h-8 bg-white/5 rounded-lg w-1/3" />
-        <div className="h-64 bg-white/5 rounded-xl" />
+        <div className="h-8 bg-surface-2 rounded-lg w-1/3" />
+        <div className="h-64 bg-surface-2 rounded-xl" />
       </div>
     );
   }
@@ -325,7 +328,7 @@ export default function ApiEndpointsTab() {
           <div className="flex items-center justify-between flex-wrap gap-3">
             <div className="flex items-center gap-3">
               <div className="flex items-center justify-center size-10 rounded-xl bg-primary/10">
-                <span className="material-symbols-outlined text-primary text-[20px]">api</span>
+                <Icon name="api" size={20} className="text-primary" />
               </div>
               <div>
                 <div className="flex items-center gap-2">
@@ -346,20 +349,18 @@ export default function ApiEndpointsTab() {
               <a
                 href="/docs/openapi.yaml"
                 download
-                className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-lg
-                           bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+                className={buttonVariants({ variant: "secondary", size: "sm" })}
               >
-                <span className="material-symbols-outlined text-[14px]">download</span>
+                <Icon name="download" size={14} />
                 YAML
               </a>
               <a
                 href="/api/openapi/spec"
                 target="_blank"
                 rel="noopener"
-                className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-lg
-                           bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+                className={buttonVariants({ variant: "secondary", size: "sm" })}
               >
-                <span className="material-symbols-outlined text-[14px]">open_in_new</span>
+                <Icon name="open_in_new" size={14} />
                 JSON
               </a>
             </div>
@@ -372,8 +373,8 @@ export default function ApiEndpointsTab() {
         <>
           <Card className="p-6">
             <div className="flex items-start gap-3">
-              <div className="flex size-10 items-center justify-center rounded-lg bg-red-500/10">
-                <span className="material-symbols-outlined text-[20px] text-red-500">error</span>
+              <div className="flex size-10 items-center justify-center rounded-lg bg-error/10">
+                <Icon name="error" size={20} className="text-error" />
               </div>
               <div>
                 <h3 className="text-sm font-semibold text-text-main">
@@ -386,10 +387,9 @@ export default function ApiEndpointsTab() {
                   href="/api/openapi/spec"
                   target="_blank"
                   rel="noopener"
-                  className="inline-flex items-center gap-1 mt-3 px-2.5 py-1.5 text-xs font-medium rounded-lg
-                           bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+                  className={cn(buttonVariants({ variant: "secondary", size: "sm" }), "mt-3")}
                 >
-                  <span className="material-symbols-outlined text-[14px]">open_in_new</span>
+                  <Icon name="open_in_new" size={14} />
                   {t("openJsonResponse")}
                 </a>
               </div>
@@ -404,43 +404,35 @@ export default function ApiEndpointsTab() {
         <>
           {/* Search & filter */}
           <div className="flex items-center gap-2">
-            <div className="relative flex-1 max-w-md">
-              <span className="material-symbols-outlined text-[16px] text-text-muted absolute left-3 top-1/2 -translate-y-1/2">
-                search
-              </span>
-              <input
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder={t("apiEndpointsSearchPlaceholder")}
-                className="w-full pl-9 pr-3 py-2 text-xs rounded-lg border border-black/10 dark:border-white/10
-                           bg-white dark:bg-black/20 focus:outline-none focus:ring-1 focus:ring-primary"
-              />
-            </div>
+            <Input
+              icon="search"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t("apiEndpointsSearchPlaceholder")}
+              aria-label={t("apiEndpointsSearchPlaceholder")}
+              className="flex-1 max-w-md"
+            />
             <div className="flex gap-1 flex-wrap">
-              <button
+              <Button
+                size="sm"
+                variant={!selectedTag ? "secondary" : "ghost"}
+                aria-pressed={!selectedTag}
                 onClick={() => setSelectedTag(null)}
-                className={`px-2 py-1 text-[10px] font-medium rounded-md transition-colors
-                  ${
-                    !selectedTag
-                      ? "bg-primary/10 text-primary"
-                      : "bg-black/5 dark:bg-white/5 text-text-muted hover:text-text-main"
-                  }`}
+                className="text-[10px]"
               >
                 {t("all")}
-              </button>
+              </Button>
               {allTags.slice(0, 8).map((tag) => (
-                <button
+                <Button
                   key={tag}
+                  size="sm"
+                  variant={selectedTag === tag ? "secondary" : "ghost"}
+                  aria-pressed={selectedTag === tag}
                   onClick={() => setSelectedTag(selectedTag === tag ? null : tag)}
-                  className={`px-2 py-1 text-[10px] font-medium rounded-md transition-colors
-                    ${
-                      selectedTag === tag
-                        ? "bg-primary/10 text-primary"
-                        : "bg-black/5 dark:bg-white/5 text-text-muted hover:text-text-main"
-                    }`}
+                  className="text-[10px]"
                 >
                   {tag}
-                </button>
+                </Button>
               ))}
               {allTags.length > 8 && (
                 <span className="px-2 py-1 text-[10px] text-text-muted">
@@ -449,17 +441,15 @@ export default function ApiEndpointsTab() {
               )}
             </div>
             {/* Security tier filter */}
-            <div className="flex items-center gap-1 ml-1 border-l border-black/10 dark:border-white/10 pl-2 flex-wrap">
+            <div className="flex items-center gap-1 ml-1 border-l border-border pl-2 flex-wrap">
               {(["all", "auth", "loopback", "always-protected", "public"] as const).map((tier) => (
-                <button
+                <Button
                   key={tier}
+                  size="sm"
+                  variant={securityTier === tier ? "secondary" : "ghost"}
+                  aria-pressed={securityTier === tier}
                   onClick={() => setSecurityTier(tier)}
-                  className={`px-2 py-1 text-[10px] font-medium rounded-md transition-colors
-                    ${
-                      securityTier === tier
-                        ? "bg-primary/10 text-primary"
-                        : "bg-black/5 dark:bg-white/5 text-text-muted hover:text-text-main"
-                    }`}
+                  className="text-[10px]"
                 >
                   {tier === "all"
                     ? t("tierAll")
@@ -470,20 +460,18 @@ export default function ApiEndpointsTab() {
                         : tier === "always-protected"
                           ? t("tierAlwaysProtected")
                           : t("tierPublic")}
-                </button>
+                </Button>
               ))}
-              <button
+              <Button
+                size="sm"
+                variant={showInternal ? "warning" : "ghost"}
+                aria-pressed={showInternal}
                 onClick={() => setShowInternal(!showInternal)}
-                className={`px-2 py-1 text-[10px] font-medium rounded-md transition-colors ml-1
-                  ${
-                    showInternal
-                      ? "bg-amber-500/10 text-amber-500"
-                      : "bg-black/5 dark:bg-white/5 text-text-muted hover:text-text-main"
-                  }`}
+                className="text-[10px] ml-1"
                 title={t("showInternalTooltip")}
               >
                 {showInternal ? t("hideInternal") : t("showInternal")}
-              </button>
+              </Button>
             </div>
           </div>
 
@@ -492,17 +480,15 @@ export default function ApiEndpointsTab() {
           {/* Endpoint groups */}
           {Object.entries(groupedEndpoints).map(([tag, endpoints]) => (
             <Card key={tag} className="overflow-hidden">
-              <div className="flex items-center gap-2 px-4 py-3 border-b border-black/5 dark:border-white/5">
-                <span className="material-symbols-outlined text-[14px] text-primary">folder</span>
+              <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
+                <Icon name="folder" size={14} className="text-primary" />
                 <h3 className="text-xs font-semibold uppercase tracking-wider text-text-muted">
                   {tag}
                 </h3>
-                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-black/5 dark:bg-white/5 text-text-muted">
-                  {endpoints.length}
-                </span>
+                <Badge size="sm">{endpoints.length}</Badge>
                 <div className="flex-1 h-px bg-border/30" />
               </div>
-              <div className="divide-y divide-black/[0.03] dark:divide-white/[0.03]">
+              <div className="divide-y divide-border">
                 {endpoints.map((ep) => {
                   const key = `${ep.method}:${ep.path}`;
                   const isExpanded = expandedEndpoint === key;
@@ -510,17 +496,19 @@ export default function ApiEndpointsTab() {
 
                   return (
                     <div key={key}>
-                      <div
-                        className="flex items-center gap-3 px-4 py-2.5 hover:bg-black/[0.02] dark:hover:bg-white/[0.02]
-                                   cursor-pointer transition-colors"
+                      <Button
+                        variant="ghost"
+                        className="w-full h-auto justify-start gap-3 rounded-none px-4 py-2.5 text-left font-normal"
+                        aria-expanded={isExpanded}
                         onClick={() => setExpandedEndpoint(isExpanded ? null : key)}
                       >
-                        <span
-                          className={`text-[10px] font-bold px-2 py-0.5 rounded border min-w-[42px] text-center font-mono
-                            ${METHOD_COLORS[ep.method] || "bg-gray-500/15 text-gray-500"}`}
+                        <Badge
+                          size="sm"
+                          variant={METHOD_VARIANTS[ep.method] ?? "default"}
+                          className="min-w-[42px] justify-center font-mono font-bold"
                         >
                           {ep.method}
-                        </span>
+                        </Badge>
                         <code className="text-xs font-mono text-text-main flex-1 truncate">
                           {ep.path}
                         </code>
@@ -529,23 +517,26 @@ export default function ApiEndpointsTab() {
                         </span>
                         <EndpointBadges ep={ep} />
                         {ep.security && (
-                          <span
-                            className="material-symbols-outlined text-[12px] text-amber-500"
-                            title={t("apiEndpointsRequiresAuth")}
-                          >
-                            lock
-                          </span>
+                          <Icon
+                            name="lock"
+                            size={12}
+                            className="text-warning"
+                            ariaLabel={t("apiEndpointsRequiresAuth")}
+                          />
                         )}
-                        <span
-                          className={`material-symbols-outlined text-[14px] text-text-muted transition-transform ${isExpanded ? "rotate-180" : ""}`}
-                        >
-                          expand_more
-                        </span>
-                      </div>
+                        <Icon
+                          name="expand_more"
+                          size={14}
+                          className={cn(
+                            "text-text-muted transition-transform",
+                            isExpanded && "rotate-180"
+                          )}
+                        />
+                      </Button>
 
                       {/* Expanded detail */}
                       {isExpanded && (
-                        <div className="px-4 pb-3 space-y-3 bg-black/[0.01] dark:bg-white/[0.01]">
+                        <div className="px-4 pb-3 space-y-3 bg-surface-2">
                           <div className="flex items-start justify-between gap-4">
                             <div>
                               <p className="text-xs text-text-main font-medium">{ep.summary}</p>
@@ -555,17 +546,13 @@ export default function ApiEndpointsTab() {
                               <div className="flex items-center gap-3 mt-2 text-[10px] text-text-muted">
                                 {ep.security && (
                                   <span className="flex items-center gap-1">
-                                    <span className="material-symbols-outlined text-[12px] text-amber-500">
-                                      lock
-                                    </span>
+                                    <Icon name="lock" size={12} className="text-warning" />
                                     {t("bearerAuth")}
                                   </span>
                                 )}
                                 {ep.requestBody && (
                                   <span className="flex items-center gap-1">
-                                    <span className="material-symbols-outlined text-[12px]">
-                                      description
-                                    </span>
+                                    <Icon name="description" size={12} />
                                     {t("requestBody")}
                                   </span>
                                 )}
@@ -574,40 +561,35 @@ export default function ApiEndpointsTab() {
                                 </span>
                               </div>
                             </div>
-                            <button
+                            <Button
+                              size="sm"
+                              variant={isTrying ? "primary" : "secondary"}
+                              icon={isTrying ? "close" : "play_arrow"}
                               onClick={(e) => {
                                 e.stopPropagation();
                                 handleTryIt(ep);
                               }}
-                              className={`flex items-center gap-1 px-2.5 py-1 text-[10px] font-semibold rounded-lg
-                                         transition-colors shrink-0
-                                ${
-                                  isTrying
-                                    ? "bg-primary text-accent-foreground"
-                                    : "bg-primary/10 text-primary hover:bg-primary/20"
-                                }`}
+                              className="shrink-0 text-[10px]"
                             >
-                              <span className="material-symbols-outlined text-[12px]">
-                                {isTrying ? "close" : "play_arrow"}
-                              </span>
                               {isTrying ? t("close") : t("tryIt")}
-                            </button>
+                            </Button>
                           </div>
 
                           {/* curl example */}
-                          <div className="rounded-lg bg-black/5 dark:bg-black/30 p-3">
-                            <p className="text-[9px] font-semibold text-text-muted uppercase tracking-wider mb-1">
-                              {t("example")}
-                            </p>
-                            <code className="text-[11px] font-mono text-text-main break-all">
-                              curl -X {ep.method} {baseUrl}
-                              {ep.path}
-                              {ep.security ? ' -H "Authorization: Bearer YOUR_KEY"' : ""}
-                              {ep.requestBody
+                          <CodePreview
+                            variant="surface"
+                            filename={t("example")}
+                            language="cURL"
+                            copyLabel={tc("copy")}
+                            copiedLabel={tc("copied")}
+                            code={`curl -X ${ep.method} ${baseUrl}${ep.path}${
+                              ep.security ? ' -H "Authorization: Bearer YOUR_KEY"' : ""
+                            }${
+                              ep.requestBody
                                 ? " -H \"Content-Type: application/json\" -d '{...}'"
-                                : ""}
-                            </code>
-                          </div>
+                                : ""
+                            }`}
+                          />
 
                           {/* Try It panel */}
                           {isTrying && (
@@ -615,44 +597,43 @@ export default function ApiEndpointsTab() {
                               {ep.security && (
                                 <div>
                                   <div className="flex items-center justify-between mb-1">
-                                    <label className="text-[9px] font-semibold text-text-muted uppercase tracking-wider">
+                                    <p className="text-[9px] font-semibold text-text-muted uppercase tracking-wider">
                                       {t("apiKey")}
-                                    </label>
-                                    <button
-                                      type="button"
+                                    </p>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
                                       onClick={() => setUseManualKey(!useManualKey)}
-                                      className="text-[9px] text-primary hover:underline"
+                                      className="h-auto min-h-0 px-1 py-0 text-[10px]"
                                     >
                                       {useManualKey ? t("switchToSelection") : t("enterManually")}
-                                    </button>
+                                    </Button>
                                   </div>
 
                                   {useManualKey ? (
-                                    <input
+                                    <Input
                                       type="password"
                                       value={manualApiKey}
                                       onChange={(e) => setManualApiKey(e.target.value)}
                                       placeholder={t("pasteApiKey")}
-                                      className="w-full px-3 py-2 text-xs font-mono rounded-lg border border-black/10
-                                               dark:border-white/10 bg-white dark:bg-black/30 focus:outline-none
-                                               focus:ring-1 focus:ring-primary"
+                                      aria-label={t("apiKey")}
+                                      inputClassName="font-mono text-xs"
                                     />
                                   ) : availableApiKeys.length > 0 ? (
-                                    <select
+                                    <Select
+                                      aria-label={t("apiKey")}
                                       value={selectedApiKeyId}
                                       onChange={(e) => setSelectedApiKeyId(e.target.value)}
-                                      className="w-full px-3 py-2 text-xs font-mono rounded-lg border border-black/10
-                                               dark:border-white/10 bg-white dark:bg-black/30 focus:outline-none
-                                               focus:ring-1 focus:ring-primary"
+                                      selectClassName="font-mono text-xs"
                                     >
                                       {availableApiKeys.map((apiKey) => (
                                         <option key={apiKey.id} value={apiKey.id}>
                                           {apiKey.key}
                                         </option>
                                       ))}
-                                    </select>
+                                    </Select>
                                   ) : (
-                                    <p className="text-[11px] text-amber-500">
+                                    <p className="text-[11px] text-warning">
                                       {apiKeyLoadError || t("noActiveApiKeys")}
                                     </p>
                                   )}
@@ -660,46 +641,43 @@ export default function ApiEndpointsTab() {
                               )}
                               {ep.method !== "GET" && (
                                 <div>
-                                  <label className="text-[9px] font-semibold text-text-muted uppercase tracking-wider">
+                                  <p className="text-[9px] font-semibold text-text-muted uppercase tracking-wider">
                                     {t("requestBodyJson")}
-                                  </label>
-                                  <textarea
+                                  </p>
+                                  <Textarea
+                                    aria-label={t("requestBodyJson")}
                                     value={tryBody}
                                     onChange={(e) => setTryBody(e.target.value)}
                                     rows={8}
-                                    className="w-full mt-1 px-3 py-2 text-xs font-mono rounded-lg border border-black/10
-                                             dark:border-white/10 bg-white dark:bg-black/30 focus:outline-none
-                                             focus:ring-1 focus:ring-primary resize-none"
+                                    className="mt-1 font-mono text-xs resize-none"
                                     placeholder='{ "model": "gpt-4o", "messages": [...] }'
                                   />
                                 </div>
                               )}
-                              <button
+                              <Button
+                                size="sm"
+                                variant="primary"
+                                icon="send"
+                                loading={trying}
                                 onClick={() => executeTryIt(ep)}
-                                disabled={trying}
-                                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg
-                                           bg-primary text-accent-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
                               >
-                                <span className="material-symbols-outlined text-[14px]">
-                                  {trying ? "hourglass_empty" : "send"}
-                                </span>
                                 {trying ? t("sending") : t("sendRequest")}
-                              </button>
+                              </Button>
 
                               {tryResult && (
-                                <div className="rounded-lg bg-black/5 dark:bg-black/30 p-3 space-y-2">
+                                <div className="rounded-lg bg-surface-2 p-3 space-y-2">
                                   <div className="flex items-center gap-3 text-xs">
-                                    <span
-                                      className={`px-2 py-0.5 rounded font-bold ${
+                                    <Badge
+                                      variant={
                                         tryResult.status >= 200 && tryResult.status < 300
-                                          ? "bg-emerald-500/15 text-emerald-500"
+                                          ? "success"
                                           : tryResult.status >= 400
-                                            ? "bg-red-500/15 text-red-500"
-                                            : "bg-amber-500/15 text-amber-500"
-                                      }`}
+                                            ? "error"
+                                            : "warning"
+                                      }
                                     >
                                       {tryResult.status} {tryResult.statusText}
-                                    </span>
+                                    </Badge>
                                     <span className="text-text-muted">{tryResult.latencyMs}ms</span>
                                   </div>
                                   <pre className="text-[11px] font-mono text-text-main overflow-auto max-h-[300px] whitespace-pre-wrap">
@@ -721,11 +699,8 @@ export default function ApiEndpointsTab() {
           ))}
 
           {filteredEndpoints.length === 0 && (
-            <Card className="p-8 text-center">
-              <span className="material-symbols-outlined text-[32px] text-text-muted">
-                search_off
-              </span>
-              <p className="text-sm text-text-muted mt-2">{t("apiEndpointsNoMatch")}</p>
+            <Card>
+              <EmptyState icon="search_off" title={t("apiEndpointsNoMatch")} />
             </Card>
           )}
 
@@ -733,13 +708,11 @@ export default function ApiEndpointsTab() {
           {catalog.schemas.length > 0 && (
             <Card className="p-4">
               <div className="flex items-center gap-2 mb-3">
-                <span className="material-symbols-outlined text-[14px] text-primary">
-                  data_object
-                </span>
+                <Icon name="data_object" size={14} className="text-primary" />
                 <h3 className="text-xs font-semibold uppercase tracking-wider text-text-muted">
                   {t("dataSchemas")}
                 </h3>
-                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-black/5 dark:bg-white/5 text-text-muted">
+                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-surface-2 text-text-muted">
                   {catalog.schemas.length}
                 </span>
               </div>
@@ -747,7 +720,7 @@ export default function ApiEndpointsTab() {
                 {catalog.schemas.map((schema) => (
                   <span
                     key={schema}
-                    className="text-[10px] px-2 py-1 rounded-md bg-purple-500/10 text-purple-500 dark:text-purple-300 font-mono"
+                    className="text-[10px] px-2 py-1 rounded-md bg-chart-3/10 text-chart-3 font-mono"
                   >
                     {schema}
                   </span>
diff --git a/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx b/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
index 1722f083c000..b49394ea8542 100644
--- a/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
@@ -1,7 +1,18 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+import { Alert } from "@omniroute/ui-kit/alert";
+
 import { useState, useEffect, useMemo, useCallback } from "react";
-import { Card, Button, Input, Modal, CardSkeleton, SegmentedControl } from "@/shared/components";
+import { Checkbox } from "@omniroute/ui-kit/checkbox";
+import { PageHeader } from "@omniroute/ui-kit/page-header";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Input from "@/shared/components/Input";
+import { CardSkeleton } from "@/shared/components/Loading";
+import Modal from "@/shared/components/Modal";
+import SegmentedControl from "@/shared/components/SegmentedControl";
+import { cn } from "@/shared/utils/cn";
 import Toggle from "@/shared/components/Toggle";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { isPublicDisplayBaseUrl, useDisplayBaseUrl } from "@/shared/hooks";
@@ -1144,11 +1155,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
     {
       running: {
         label: translateOrFallback("cloudflaredRunning", "Running"),
-        className: "bg-green-500/10 border-green-500/30 text-green-400",
+        className: "bg-success/10 border-success/30 text-success",
       },
       starting: {
         label: translateOrFallback("cloudflaredStarting", "Starting"),
-        className: "bg-blue-500/10 border-blue-500/30 text-blue-400",
+        className: "bg-info/10 border-info/30 text-info",
       },
       stopped: {
         label: translateOrFallback("cloudflaredStoppedState", "Stopped"),
@@ -1160,11 +1171,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
       },
       unsupported: {
         label: translateOrFallback("cloudflaredUnsupported", "Unsupported"),
-        className: "bg-amber-500/10 border-amber-500/30 text-amber-400",
+        className: "bg-warning/10 border-warning/30 text-warning",
       },
       error: {
         label: translateOrFallback("cloudflaredError", "Error"),
-        className: "bg-red-500/10 border-red-500/30 text-red-400",
+        className: "bg-error/10 border-error/30 text-error",
       },
     };
   const cloudflaredActionLabel = cloudflaredStatus?.running
@@ -1176,11 +1187,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
   const tailscalePhaseMeta: Record<TailscaleTunnelPhase, { label: string; className: string }> = {
     running: {
       label: translateOrFallback("tailscaleRunning", "Running"),
-      className: "bg-green-500/10 border-green-500/30 text-green-400",
+      className: "bg-success/10 border-success/30 text-success",
     },
     needs_login: {
       label: translateOrFallback("tailscaleNeedsLogin", "Needs Login"),
-      className: "bg-blue-500/10 border-blue-500/30 text-blue-400",
+      className: "bg-info/10 border-info/30 text-info",
     },
     stopped: {
       label: translateOrFallback("tailscaleStoppedState", "Stopped"),
@@ -1192,11 +1203,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
     },
     unsupported: {
       label: translateOrFallback("tailscaleUnsupported", "Unsupported"),
-      className: "bg-amber-500/10 border-amber-500/30 text-amber-400",
+      className: "bg-warning/10 border-warning/30 text-warning",
     },
     error: {
       label: translateOrFallback("tailscaleError", "Error"),
-      className: "bg-red-500/10 border-red-500/30 text-red-400",
+      className: "bg-error/10 border-error/30 text-error",
     },
   };
   const tailscaleActionLabel = tailscaleStatus?.running
@@ -1215,11 +1226,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
   const ngrokPhaseMeta: Record<NgrokTunnelPhase, { label: string; className: string }> = {
     running: {
       label: translateOrFallback("ngrokRunning", "Running"),
-      className: "bg-green-500/10 border-green-500/30 text-green-400",
+      className: "bg-success/10 border-success/30 text-success",
     },
     starting: {
       label: translateOrFallback("ngrokStarting", "Starting"),
-      className: "bg-blue-500/10 border-blue-500/30 text-blue-400",
+      className: "bg-info/10 border-info/30 text-info",
     },
     stopped: {
       label: translateOrFallback("ngrokStoppedState", "Stopped"),
@@ -1227,7 +1238,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
     },
     needs_auth: {
       label: translateOrFallback("ngrokNeedsAuth", "Needs Auth"),
-      className: "bg-amber-500/10 border-amber-500/30 text-amber-400",
+      className: "bg-warning/10 border-warning/30 text-warning",
     },
     not_installed: {
       label: translateOrFallback("ngrokNotInstalled", "Not installed"),
@@ -1235,11 +1246,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
     },
     unsupported: {
       label: translateOrFallback("ngrokUnsupported", "Unsupported"),
-      className: "bg-amber-500/10 border-amber-500/30 text-amber-400",
+      className: "bg-warning/10 border-warning/30 text-warning",
     },
     error: {
       label: translateOrFallback("ngrokError", "Error"),
-      className: "bg-red-500/10 border-red-500/30 text-red-400",
+      className: "bg-error/10 border-error/30 text-error",
     },
   };
   const ngrokActionLabel = ngrokStatus?.running
@@ -1251,8 +1262,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
     <div className="flex flex-col gap-8">
       {/* Guided connection header (#11228): /v1 URL + test action lead; advanced protocols demoted */}
       <div className="flex flex-col gap-2">
-        <h1 className="text-2xl font-bold">{t("title")}</h1>
-        <p className="text-text-muted">{t("subtitle")}</p>
+        <PageHeader compact title={t("title")} description={t("subtitle")} />
         <div className="flex items-center gap-3 mt-2">
           <code className="text-sm bg-card-subtle px-3 py-1 rounded-md text-text-main font-mono">
             {displayBaseUrl}/v1
@@ -1288,30 +1298,31 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
 
         {/* Cloud Status Toast */}
         {cloudStatus && (
-          <div
-            className={`flex items-center gap-2 px-4 py-2.5 rounded-lg mb-4 text-sm font-medium animate-in fade-in slide-in-from-top-2 duration-300 ${
+          <Alert
+            variant={
               cloudStatus.type === "success"
-                ? "bg-green-500/10 border border-green-500/30 text-green-400"
-                : cloudStatus.type === "warning"
-                  ? "bg-amber-500/10 border border-amber-500/30 text-amber-400"
-                  : "bg-red-500/10 border border-red-500/30 text-red-400"
-            }`}
-          >
-            <span className="material-symbols-outlined text-[18px]">
-              {cloudStatus.type === "success"
-                ? "check_circle"
+                ? "success"
                 : cloudStatus.type === "warning"
                   ? "warning"
-                  : "error"}
-            </span>
-            <span className="flex-1">{cloudStatus.message}</span>
-            <button
-              onClick={() => setCloudStatus(null)}
-              className="p-0.5 hover:bg-white/10 rounded transition-colors"
-            >
-              <span className="material-symbols-outlined text-[16px]">close</span>
-            </button>
-          </div>
+                  : "critical"
+            }
+            className="mb-4 animate-in fade-in slide-in-from-top-2 duration-300"
+            icon={
+              <Icon
+                name={
+                  cloudStatus.type === "success"
+                    ? "check_circle"
+                    : cloudStatus.type === "warning"
+                      ? "warning"
+                      : "error"
+                }
+                size={18}
+              />
+            }
+            description={cloudStatus.message}
+            dismissLabel={tc("close")}
+            onDismiss={() => setCloudStatus(null)}
+          />
         )}
 
         {/* Active URLs bar */}
@@ -1323,19 +1334,20 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             <div className="flex flex-col gap-1.5">
               {activeUrls.map(({ label, url, key }) => (
                 <div key={key} className="flex items-center gap-2 min-w-0">
-                  <span className="w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" />
+                  <span className="w-1.5 h-1.5 rounded-full bg-success shrink-0" />
                   <span className="text-xs text-text-muted w-20 shrink-0">{label}</span>
                   <code className="text-xs font-mono text-text-main flex-1 truncate min-w-0">
                     {url}
                   </code>
-                  <button
+                  <Button
+                    variant="outline"
+                    size="icon-sm"
                     onClick={() => void copy(url, key)}
-                    className="shrink-0 flex items-center gap-1 px-2 py-0.5 rounded border border-border/70 text-text-muted hover:text-text transition-colors"
-                  >
-                    <span className="material-symbols-outlined text-[12px]">
-                      {copied === key ? "check" : "content_copy"}
-                    </span>
-                  </button>
+                    className="shrink-0 text-text-muted"
+                    aria-label={`${tc("copy")} ${label}`}
+                    title={url}
+                    icon={copied === key ? "check" : "content_copy"}
+                  />
                 </div>
               ))}
             </div>
@@ -1346,9 +1358,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         <div className="flex flex-col">
           {/* Local Server */}
           <div className="flex items-center gap-3 py-3">
-            <span className="material-symbols-outlined text-[18px] text-emerald-500 shrink-0">
-              computer
-            </span>
+            <Icon name="computer" size={18} className="text-success" />
             <div className="flex-1 min-w-0">
               <div className="flex items-baseline gap-1 flex-wrap">
                 <span className="text-sm font-medium">{t("localServer")}</span>
@@ -1356,40 +1366,43 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                   <span className="text-xs text-text-muted">· {resolvedMachineId.slice(0, 8)}</span>
                 )}
                 {lanUrls.map((url) => (
-                  <button
+                  <Button
                     key={url}
+                    variant="ghost"
+                    size="sm"
                     onClick={() => void copy(url, `lan_${url}`)}
                     title={t("copyUrlTitle", { url })}
-                    className="inline-flex items-center gap-0.5 text-[10px] text-text-muted hover:text-text transition-colors"
+                    aria-label={t("copyUrlTitle", { url })}
+                    className="h-auto min-h-0 gap-0.5 px-1 py-0 text-[10px] font-normal text-text-muted"
                   >
                     <code className="font-mono">{url.replace(/^https?:\/\//, "")}</code>
-                    <span className="material-symbols-outlined text-[10px] opacity-60">
-                      {copied === `lan_${url}` ? "check" : "content_copy"}
-                    </span>
-                  </button>
+                    <Icon
+                      name={copied === `lan_${url}` ? "check" : "content_copy"}
+                      size={10}
+                      className="opacity-60"
+                    />
+                  </Button>
                 ))}
               </div>
             </div>
-            <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 border border-green-500/30 text-green-400 shrink-0">
-              <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+            <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-success/10 border border-success/30 text-success shrink-0">
+              <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
               {t("statusRunning")}
             </span>
-            <button
+            <Button
+              variant="outline"
+              size="sm"
+              icon={copied === "endpoint_url" ? "check" : "content_copy"}
               onClick={() => void copy(localApiUrl, "endpoint_url")}
-              className="shrink-0 flex items-center gap-1 text-xs px-2.5 py-1.5 rounded-md border border-border/70 text-text-muted hover:text-text hover:border-border transition-colors"
+              className="shrink-0 text-text-muted"
             >
-              <span className="material-symbols-outlined text-[14px]">
-                {copied === "endpoint_url" ? "check" : "content_copy"}
-              </span>
               {copied === "endpoint_url" ? tc("copied") : tc("copy")}
-            </button>
+            </Button>
           </div>
 
           {/* Tunnels section header */}
           <div className="flex items-center gap-2 pt-4 pb-1 border-t border-border/50">
-            <span className="material-symbols-outlined text-[14px] text-text-muted">
-              network_node
-            </span>
+            <Icon name="network_node" size={14} className="text-text-muted" />
             <span className="text-[10px] font-semibold text-text-muted uppercase tracking-wider">
               {t("tunnels")}
             </span>
@@ -1404,9 +1417,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
 
           {/* Cloud OmniRoute */}
           <div className="flex items-center gap-3 py-3">
-            <span className="material-symbols-outlined text-[18px] text-blue-400 shrink-0">
-              cloud
-            </span>
+            <Icon name="cloud" size={18} className="text-info" />
             <div className="flex-1 min-w-0">
               <span className="text-sm font-medium">{t("cloudOmniroute")}</span>
               <p className="text-xs text-text-muted break-all">
@@ -1420,12 +1431,12 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             <span
               className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border shrink-0 ${
                 cloudEnabled
-                  ? "bg-green-500/10 border-green-500/30 text-green-400"
+                  ? "bg-success/10 border-success/30 text-success"
                   : "bg-surface border-border/70 text-text-muted"
               }`}
             >
               <span
-                className={`w-1.5 h-1.5 rounded-full shrink-0 ${cloudEnabled ? "bg-green-400 animate-pulse" : "bg-text-muted"}`}
+                className={`w-1.5 h-1.5 rounded-full shrink-0 ${cloudEnabled ? "bg-success animate-pulse" : "bg-text-muted"}`}
               />
               {cloudEnabled ? tc("active") : tc("disabled")}
             </span>
@@ -1436,7 +1447,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 icon="cloud_off"
                 onClick={() => handleCloudToggle(false)}
                 disabled={cloudSyncing}
-                className="shrink-0 bg-red-500/10! text-red-500! hover:bg-red-500/20! border-red-500/30!"
+                className="shrink-0 border-error/30 text-error hover:bg-error/10"
               >
                 {t("disableCloud")}
               </Button>
@@ -1462,9 +1473,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
           {showCloudflaredTunnel && (
             <div className="border-t border-border/30">
               <div className="flex items-center gap-3 py-3">
-                <span className="material-symbols-outlined text-[18px] text-orange-400 shrink-0">
-                  cloud_queue
-                </span>
+                <Icon name="cloud_queue" size={18} className="text-warning" />
                 <div className="flex-1 min-w-0">
                   <span className="text-sm font-medium">
                     {translateOrFallback("cloudflaredTitle", "Cloudflare Quick Tunnel")}
@@ -1478,7 +1487,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 {cloudflaredStatus?.supported !== false && (
                   <Button
                     size="sm"
-                    variant={cloudflaredStatus?.running ? "secondary" : "primary"}
+                    variant={cloudflaredStatus?.running ? "outline" : "primary"}
                     icon={cloudflaredStatus?.running ? "cloud_off" : "cloud_upload"}
                     loading={cloudflaredBusy}
                     onClick={() => {
@@ -1486,40 +1495,41 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                         cloudflaredStatus?.running ? "disable" : "enable"
                       );
                     }}
-                    className={`shrink-0 ${cloudflaredStatus?.running ? "border-border/70! text-text-muted! hover:text-text!" : ""}`}
+                    className="shrink-0"
                   >
                     {cloudflaredActionLabel}
                   </Button>
                 )}
               </div>
               {cloudflaredNotice && (
-                <div
-                  className={`mb-2 ml-7 flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
+                <Alert
+                  variant={
                     cloudflaredNotice.type === "success"
-                      ? "border-green-500/30 bg-green-500/10 text-green-400"
-                      : cloudflaredNotice.type === "info"
-                        ? "border-blue-500/30 bg-blue-500/10 text-blue-400"
-                        : "border-red-500/30 bg-red-500/10 text-red-400"
-                  }`}
-                >
-                  <span className="material-symbols-outlined text-[18px]">
-                    {cloudflaredNotice.type === "success"
-                      ? "check_circle"
+                      ? "success"
                       : cloudflaredNotice.type === "info"
                         ? "info"
-                        : "error"}
-                  </span>
-                  <span className="flex-1">{cloudflaredNotice.message}</span>
-                  <button
-                    onClick={() => setCloudflaredNotice(null)}
-                    className="rounded p-0.5 transition-colors hover:bg-white/10"
-                  >
-                    <span className="material-symbols-outlined text-[16px]">close</span>
-                  </button>
-                </div>
+                        : "critical"
+                  }
+                  className="mb-2 ml-7"
+                  icon={
+                    <Icon
+                      name={
+                        cloudflaredNotice.type === "success"
+                          ? "check_circle"
+                          : cloudflaredNotice.type === "info"
+                            ? "info"
+                            : "error"
+                      }
+                      size={18}
+                    />
+                  }
+                  description={cloudflaredNotice.message}
+                  dismissLabel={tc("close")}
+                  onDismiss={() => setCloudflaredNotice(null)}
+                />
               )}
               {cloudflaredStatus?.lastError && (
-                <p className="mb-2 ml-7 text-xs text-red-400">
+                <p className="mb-2 ml-7 text-xs text-error">
                   {translateOrFallback("cloudflaredLastError", "Last error: {error}", {
                     error: cloudflaredStatus.lastError,
                   })}
@@ -1543,30 +1553,33 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                   }
                 }}
               >
-                <span className="material-symbols-outlined text-[18px] text-indigo-400 shrink-0">
-                  vpn_lock
-                </span>
+                <Icon name="vpn_lock" size={18} className="text-chart-3" />
                 <div className="flex-1 min-w-0">
                   <div className="flex items-baseline gap-1 flex-wrap">
                     <span className="text-sm font-medium">
                       {translateOrFallback("tailscaleTitle", "Tailscale Funnel")}
                     </span>
                     {tailscaleIpUrl && (
-                      <button
+                      <Button
+                        variant="ghost"
+                        size="sm"
                         onClick={(e) => {
                           e.stopPropagation();
                           void copy(tailscaleIpUrl, "tailscale_ip_inline");
                         }}
                         title={`Copy ${tailscaleIpUrl}`}
-                        className="inline-flex items-center gap-0.5 text-[10px] text-text-muted hover:text-text transition-colors"
+                        aria-label={`Copy ${tailscaleIpUrl}`}
+                        className="h-auto min-h-0 gap-0.5 px-1 py-0 text-[10px] font-normal text-text-muted"
                       >
                         <code className="font-mono">
                           {tailscaleIpUrl.replace(/^https?:\/\//, "")}
                         </code>
-                        <span className="material-symbols-outlined text-[10px] opacity-60">
-                          {copied === "tailscale_ip_inline" ? "check" : "content_copy"}
-                        </span>
-                      </button>
+                        <Icon
+                          name={copied === "tailscale_ip_inline" ? "check" : "content_copy"}
+                          size={10}
+                          className="opacity-60"
+                        />
+                      </Button>
                     )}
                   </div>
                 </div>
@@ -1578,7 +1591,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 {tailscaleStatus?.supported !== false && (
                   <Button
                     size="sm"
-                    variant={tailscaleStatus?.running ? "secondary" : "primary"}
+                    variant={tailscaleStatus?.running ? "outline" : "primary"}
                     icon={tailscaleStatus?.running ? "vpn_key_off" : "vpn_lock"}
                     loading={tailscaleBusy}
                     onClick={(e) => {
@@ -1591,51 +1604,51 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                         setShowTailscaleInstallModal(true);
                       }
                     }}
-                    className={`shrink-0 ${tailscaleStatus?.running ? "border-border/70! text-text-muted! hover:text-text!" : ""}`}
+                    className="shrink-0"
                   >
                     {tailscaleActionLabel}
                   </Button>
                 )}
-                <span
-                  className="material-symbols-outlined text-[18px] text-text-muted shrink-0 transition-transform duration-200"
-                  style={{
-                    transform: expandedTunnel === "ts" ? "rotate(180deg)" : "rotate(0deg)",
-                  }}
-                >
-                  expand_more
-                </span>
+                <Icon
+                  name="expand_more"
+                  size={18}
+                  className={cn(
+                    "text-text-muted shrink-0 transition-transform duration-200",
+                    expandedTunnel === "ts" && "rotate-180"
+                  )}
+                />
               </div>
               {expandedTunnel === "ts" && (
                 <div className="pb-3 pl-7 pr-1 flex flex-col gap-2">
                   {tailscaleNotice && (
-                    <div
-                      className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
+                    <Alert
+                      variant={
                         tailscaleNotice.type === "success"
-                          ? "border-green-500/30 bg-green-500/10 text-green-400"
-                          : tailscaleNotice.type === "info"
-                            ? "border-blue-500/30 bg-blue-500/10 text-blue-400"
-                            : "border-red-500/30 bg-red-500/10 text-red-400"
-                      }`}
-                    >
-                      <span className="material-symbols-outlined text-[18px]">
-                        {tailscaleNotice.type === "success"
-                          ? "check_circle"
+                          ? "success"
                           : tailscaleNotice.type === "info"
                             ? "info"
-                            : "error"}
-                      </span>
-                      <span className="flex-1">{tailscaleNotice.message}</span>
-                      <button
-                        onClick={() => setTailscaleNotice(null)}
-                        className="rounded p-0.5 transition-colors hover:bg-white/10"
-                      >
-                        <span className="material-symbols-outlined text-[16px]">close</span>
-                      </button>
-                    </div>
+                            : "critical"
+                      }
+                      icon={
+                        <Icon
+                          name={
+                            tailscaleNotice.type === "success"
+                              ? "check_circle"
+                              : tailscaleNotice.type === "info"
+                                ? "info"
+                                : "error"
+                          }
+                          size={18}
+                        />
+                      }
+                      description={tailscaleNotice.message}
+                      dismissLabel={tc("close")}
+                      onDismiss={() => setTailscaleNotice(null)}
+                    />
                   )}
                   <p className="text-xs text-text-muted">{tailscaleUrlNotice}</p>
                   {tailscaleStatus?.phase === "needs_login" && (
-                    <p className="text-xs text-blue-400">
+                    <p className="text-xs text-info">
                       {translateOrFallback(
                         "tailscaleNeedsLoginHint",
                         "Authenticate this machine with Tailscale, then enable Funnel."
@@ -1644,13 +1657,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                   )}
                   {tailscaleStatus?.installed && tailscaleStatus?.platform !== "win32" && (
                     <div className="flex flex-col gap-1">
-                      <label className="text-xs text-text-muted">
-                        {translateOrFallback(
+                      <Input
+                        label={translateOrFallback(
                           "tailscaleSudoLabel",
                           "Sudo Password (required on macOS/Linux)"
                         )}
-                      </label>
-                      <Input
                         type="password"
                         value={tailscalePassword}
                         onChange={(event) => setTailscalePassword(event.target.value)}
@@ -1671,7 +1682,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                     </p>
                   )}
                   {tailscaleStatus?.lastError && (
-                    <p className="text-xs text-red-400">
+                    <p className="text-xs text-error">
                       {translateOrFallback("tailscaleLastError", "Last error: {error}", {
                         error: tailscaleStatus.lastError,
                       })}
@@ -1701,9 +1712,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                   }
                 }}
               >
-                <span className="material-symbols-outlined text-[18px] text-purple-400 shrink-0">
-                  public
-                </span>
+                <Icon name="public" size={18} className="text-chart-3" />
                 <div className="flex-1 min-w-0">
                   <span className="text-sm font-medium">
                     {translateOrFallback("ngrokTitle", "ngrok Tunnel")}
@@ -1717,65 +1726,63 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 {ngrokStatus?.supported !== false && (
                   <Button
                     size="sm"
-                    variant={ngrokStatus?.running ? "secondary" : "primary"}
+                    variant={ngrokStatus?.running ? "outline" : "primary"}
                     icon={ngrokStatus?.running ? "public_off" : "public"}
                     loading={ngrokBusy}
                     onClick={(e) => {
                       e.stopPropagation();
                       void handleNgrokAction(ngrokStatus?.running ? "disable" : "enable");
                     }}
-                    className={`shrink-0 ${ngrokStatus?.running ? "border-border/70! text-text-muted! hover:text-text!" : ""}`}
+                    className="shrink-0"
                   >
                     {ngrokActionLabel}
                   </Button>
                 )}
-                <span
-                  className="material-symbols-outlined text-[18px] text-text-muted shrink-0 transition-transform duration-200"
-                  style={{
-                    transform: expandedTunnel === "ngrok" ? "rotate(180deg)" : "rotate(0deg)",
-                  }}
-                >
-                  expand_more
-                </span>
+                <Icon
+                  name="expand_more"
+                  size={18}
+                  className={cn(
+                    "text-text-muted shrink-0 transition-transform duration-200",
+                    expandedTunnel === "ngrok" && "rotate-180"
+                  )}
+                />
               </div>
               {expandedTunnel === "ngrok" && (
                 <div className="pb-3 pl-7 pr-1 flex flex-col gap-2">
                   {ngrokNotice && (
-                    <div
-                      className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
+                    <Alert
+                      variant={
                         ngrokNotice.type === "success"
-                          ? "border-green-500/30 bg-green-500/10 text-green-400"
-                          : ngrokNotice.type === "info"
-                            ? "border-blue-500/30 bg-blue-500/10 text-blue-400"
-                            : "border-red-500/30 bg-red-500/10 text-red-400"
-                      }`}
-                    >
-                      <span className="material-symbols-outlined text-[18px]">
-                        {ngrokNotice.type === "success"
-                          ? "check_circle"
+                          ? "success"
                           : ngrokNotice.type === "info"
                             ? "info"
-                            : "error"}
-                      </span>
-                      <span className="flex-1">{ngrokNotice.message}</span>
-                      <button
-                        onClick={() => setNgrokNotice(null)}
-                        className="rounded p-0.5 transition-colors hover:bg-white/10"
-                      >
-                        <span className="material-symbols-outlined text-[16px]">close</span>
-                      </button>
-                    </div>
+                            : "critical"
+                      }
+                      icon={
+                        <Icon
+                          name={
+                            ngrokNotice.type === "success"
+                              ? "check_circle"
+                              : ngrokNotice.type === "info"
+                                ? "info"
+                                : "error"
+                          }
+                          size={18}
+                        />
+                      }
+                      description={ngrokNotice.message}
+                      dismissLabel={tc("close")}
+                      onDismiss={() => setNgrokNotice(null)}
+                    />
                   )}
                   <p className="text-xs text-text-muted">{ngrokUrlNotice}</p>
                   {ngrokStatus?.phase === "needs_auth" && (
                     <div className="flex flex-col gap-1">
-                      <label className="text-xs text-text-muted">
-                        {translateOrFallback(
+                      <Input
+                        label={translateOrFallback(
                           "ngrokAuthTokenLabel",
                           "Authtoken (Required if NGROK_AUTHTOKEN not set in environment)"
                         )}
-                      </label>
-                      <Input
                         type="password"
                         value={ngrokToken}
                         onChange={(event) => setNgrokToken(event.target.value)}
@@ -1789,7 +1796,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                     </div>
                   )}
                   {ngrokStatus?.lastError && (
-                    <p className="text-xs text-red-400">
+                    <p className="text-xs text-error">
                       {translateOrFallback("ngrokLastError", "Last error: {error}", {
                         error: ngrokStatus.lastError,
                       })}
@@ -1845,7 +1852,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         {/* Core APIs */}
         <div className="mb-5">
           <div className="flex items-center gap-2 mb-3">
-            <span className="material-symbols-outlined text-sm text-primary">hub</span>
+            <Icon name="hub" className="text-sm text-primary" />
             <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
               {t("categoryCore")}
             </h3>
@@ -1854,8 +1861,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
           <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
             <EndpointCard
               icon="chat"
-              iconColor="text-blue-500"
-              iconBg="bg-blue-500/10"
+              iconColor="text-info"
+              iconBg="bg-info/10"
               title={t("chatCompletions")}
               path="/v1/chat/completions"
               models={endpointData.chat}
@@ -1866,8 +1873,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="code"
-              iconColor="text-indigo-500"
-              iconBg="bg-indigo-500/10"
+              iconColor="text-chart-3"
+              iconBg="bg-chart-3/10"
               title={t("responses")}
               path="/v1/responses"
               models={endpointData.chat}
@@ -1878,8 +1885,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="text_fields"
-              iconColor="text-orange-500"
-              iconBg="bg-orange-500/10"
+              iconColor="text-warning"
+              iconBg="bg-warning/10"
               title={t("completionsLegacy")}
               path="/v1/completions"
               models={endpointData.chat}
@@ -1890,8 +1897,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="psychology"
-              iconColor="text-violet-500"
-              iconBg="bg-violet-500/10"
+              iconColor="text-chart-3"
+              iconBg="bg-chart-3/10"
               title={t("messagesApi")}
               path="/v1/messages"
               models={null}
@@ -1906,7 +1913,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         {/* Media & Multi-Modal */}
         <div className="mb-5">
           <div className="flex items-center gap-2 mb-3">
-            <span className="material-symbols-outlined text-sm text-purple-400">perm_media</span>
+            <Icon name="perm_media" className="text-sm text-chart-3" />
             <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
               {t("categoryMedia")}
             </h3>
@@ -1915,8 +1922,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
           <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
             <EndpointCard
               icon="data_array"
-              iconColor="text-emerald-500"
-              iconBg="bg-emerald-500/10"
+              iconColor="text-success"
+              iconBg="bg-success/10"
               title={t("embeddings")}
               path="/v1/embeddings"
               models={endpointData.embeddings}
@@ -1927,8 +1934,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="image"
-              iconColor="text-purple-500"
-              iconBg="bg-purple-500/10"
+              iconColor="text-chart-3"
+              iconBg="bg-chart-3/10"
               title={t("imageGeneration")}
               path="/v1/images/generations"
               models={endpointData.images}
@@ -1939,8 +1946,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="edit_square"
-              iconColor="text-violet-500"
-              iconBg="bg-violet-500/10"
+              iconColor="text-chart-3"
+              iconBg="bg-chart-3/10"
               title={t("imageEdits")}
               path="/v1/images/edits"
               models={endpointData.images}
@@ -1951,8 +1958,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="mic"
-              iconColor="text-rose-500"
-              iconBg="bg-rose-500/10"
+              iconColor="text-error"
+              iconBg="bg-error/10"
               title={t("audioTranscription")}
               path="/v1/audio/transcriptions"
               models={endpointData.audioTranscription}
@@ -1963,8 +1970,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="record_voice_over"
-              iconColor="text-cyan-500"
-              iconBg="bg-cyan-500/10"
+              iconColor="text-info"
+              iconBg="bg-info/10"
               title={t("textToSpeech")}
               path="/v1/audio/speech"
               models={endpointData.audioSpeech}
@@ -1975,8 +1982,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="music_note"
-              iconColor="text-fuchsia-500"
-              iconBg="bg-fuchsia-500/10"
+              iconColor="text-chart-3"
+              iconBg="bg-chart-3/10"
               title={t("musicGeneration")}
               path="/v1/music/generations"
               models={endpointData.music}
@@ -1987,8 +1994,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="videocam"
-              iconColor="text-red-500"
-              iconBg="bg-red-500/10"
+              iconColor="text-error"
+              iconBg="bg-error/10"
               title={t("videoGeneration")}
               path="/v1/videos/generations"
               models={endpointData.video}
@@ -2004,9 +2011,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         {searchProviders.length > 0 && (
           <div className="mb-5">
             <div className="flex items-center gap-2 mb-3">
-              <span className="material-symbols-outlined text-sm text-cyan-400">
-                travel_explore
-              </span>
+              <Icon name="travel_explore" className="text-sm text-info" />
               <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
                 {t("categorySearch")}
               </h3>
@@ -2015,8 +2020,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
               <EndpointCard
                 icon="search"
-                iconColor="text-cyan-500"
-                iconBg="bg-cyan-500/10"
+                iconColor="text-info"
+                iconBg="bg-info/10"
                 title={t("webSearch")}
                 path="/v1/search"
                 models={searchProviders.map((p) => ({ id: p.id, owned_by: p.id, type: "search" }))}
@@ -2031,7 +2036,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         {/* Utility & Management */}
         <div>
           <div className="flex items-center gap-2 mb-3">
-            <span className="material-symbols-outlined text-sm text-amber-400">build</span>
+            <Icon name="build" className="text-sm text-warning" />
             <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
               {t("categoryUtility")}
             </h3>
@@ -2040,8 +2045,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
           <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
             <EndpointCard
               icon="sort"
-              iconColor="text-amber-500"
-              iconBg="bg-amber-500/10"
+              iconColor="text-warning"
+              iconBg="bg-warning/10"
               title={t("rerank")}
               path="/v1/rerank"
               models={endpointData.rerank}
@@ -2052,8 +2057,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="shield"
-              iconColor="text-orange-500"
-              iconBg="bg-orange-500/10"
+              iconColor="text-warning"
+              iconBg="bg-warning/10"
               title={t("moderations")}
               path="/v1/moderations"
               models={endpointData.moderation}
@@ -2064,8 +2069,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="view_list"
-              iconColor="text-teal-500"
-              iconBg="bg-teal-500/10"
+              iconColor="text-chart-4"
+              iconBg="bg-chart-4/10"
               title={t("batchApi")}
               path="/v1/batches"
               models={null}
@@ -2076,8 +2081,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="folder"
-              iconColor="text-yellow-500"
-              iconBg="bg-yellow-500/10"
+              iconColor="text-warning"
+              iconBg="bg-warning/10"
               title={t("filesApi")}
               path="/v1/files"
               models={null}
@@ -2087,8 +2092,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             />
             <EndpointCard
               icon="list"
-              iconColor="text-teal-500"
-              iconBg="bg-teal-500/10"
+              iconColor="text-chart-4"
+              iconBg="bg-chart-4/10"
               title={t("listModels")}
               path="/v1/models"
               models={allModels}
@@ -2110,11 +2115,9 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         onClose={() => setShowCloudModal(false)}
       >
         <div className="flex flex-col gap-4">
-          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-            <p className="text-sm text-blue-800 dark:text-blue-200 font-medium mb-2">
-              {t("whatYouGet")}
-            </p>
-            <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1">
+          <div className="bg-info-bg border border-info/30 rounded-lg p-4">
+            <p className="text-sm text-info font-medium mb-2">{t("whatYouGet")}</p>
+            <ul className="text-sm text-info space-y-1">
               <li>• {t("cloudBenefitAccess")}</li>
               <li>• {t("cloudBenefitShare")}</li>
               <li>• {t("cloudBenefitPorts")}</li>
@@ -2122,17 +2125,15 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             </ul>
           </div>
 
-          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
-            <p className="text-sm text-yellow-800 dark:text-yellow-200 font-medium mb-1">
-              {tc("note")}
-            </p>
-            <ul className="text-sm text-yellow-700 dark:text-yellow-300 space-y-1">
+          <div className="bg-warning-bg border border-warning/30 rounded-lg p-4">
+            <p className="text-sm text-warning font-medium mb-1">{tc("note")}</p>
+            <ul className="text-sm text-warning space-y-1">
               <li>• {t("cloudSessionNote")}</li>
               <li>• {t("cloudUnstableNote")}</li>
             </ul>
           </div>
 
-          <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-4">
+          <div className="rounded-lg border border-error/40 bg-error/10 p-4">
             <p className="text-sm break-all">{cloudBaseUrl || tc("notConfigured")}</p>
             <p className="text-sm mt-2">
               {translateOrFallback(
@@ -2140,41 +2141,33 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 "Cloud sync is disabled by default on new installations. Enabling it uploads provider API keys, OAuth access/refresh tokens, OmniRoute API keys, and configuration to the destination above, now and during future syncs. This is separate from local Storage backups. Only enable it if you trust that server."
               )}
             </p>
-            <label className="flex items-start gap-2 mt-3 text-sm">
-              <input
-                type="checkbox"
-                checked={acknowledgeCloudUpload}
-                onChange={(event) => setAcknowledgeCloudUpload(event.target.checked)}
-              />
-              {translateOrFallback(
+            <Checkbox
+              className="mt-3 text-sm"
+              checked={acknowledgeCloudUpload}
+              onChange={(event) => setAcknowledgeCloudUpload(event.target.checked)}
+              label={translateOrFallback(
                 "cloudUploadConsent",
                 "I understand and authorize uploading my credentials to this destination."
               )}
-            </label>
+            />
           </div>
 
           {/* Sync Progress / Success */}
           {(cloudSyncing || modalSuccess) && (
             <div
               className={`flex items-center gap-3 p-3 rounded-lg border transition-all duration-300 ${
-                modalSuccess
-                  ? "bg-green-500/10 border-green-500/30"
-                  : "bg-primary/10 border-primary/30"
+                modalSuccess ? "bg-success/10 border-success/30" : "bg-primary/10 border-primary/30"
               }`}
             >
               {modalSuccess ? (
-                <span className="material-symbols-outlined text-green-500 text-xl">
-                  check_circle
-                </span>
+                <Icon name="check_circle" className="text-success text-xl" />
               ) : (
-                <span className="material-symbols-outlined animate-spin text-primary">
-                  progress_activity
-                </span>
+                <Icon name="progress_activity" className="animate-spin text-primary" />
               )}
               <div className="flex-1">
                 <p
                   className={`text-sm font-medium ${
-                    modalSuccess ? "text-green-500" : "text-primary"
+                    modalSuccess ? "text-success" : "text-primary"
                   }`}
                 >
                   {modalSuccess && t("cloudConnected")}
@@ -2193,14 +2186,12 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             >
               {cloudSyncing ? (
                 <span className="flex items-center gap-2">
-                  <span className="material-symbols-outlined animate-spin text-sm">
-                    progress_activity
-                  </span>
+                  <Icon name="progress_activity" className="animate-spin text-sm" />
                   {syncStep === "syncing" ? t("connecting") : t("verifying")}
                 </span>
               ) : modalSuccess ? (
                 <span className="flex items-center gap-2">
-                  <span className="material-symbols-outlined text-sm">check</span>
+                  <Icon name="check" className="text-sm" />
                   {t("connected")}
                 </span>
               ) : (
@@ -2226,16 +2217,12 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         onClose={() => !cloudSyncing && setShowDisableModal(false)}
       >
         <div className="flex flex-col gap-4">
-          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <div className="bg-error-bg border border-error/30 rounded-lg p-4">
             <div className="flex items-start gap-3">
-              <span className="material-symbols-outlined text-red-600 dark:text-red-400">
-                warning
-              </span>
+              <Icon name="warning" className="text-error" />
               <div>
-                <p className="text-sm text-red-800 dark:text-red-200 font-medium mb-1">
-                  {tc("warning")}
-                </p>
-                <p className="text-sm text-red-700 dark:text-red-300">{t("disableWarning")}</p>
+                <p className="text-sm text-error font-medium mb-1">{tc("warning")}</p>
+                <p className="text-sm text-error">{t("disableWarning")}</p>
               </div>
             </div>
           </div>
@@ -2243,9 +2230,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
           {/* Sync Progress */}
           {cloudSyncing && (
             <div className="flex items-center gap-3 p-3 bg-primary/10 border border-primary/30 rounded-lg">
-              <span className="material-symbols-outlined animate-spin text-primary">
-                progress_activity
-              </span>
+              <Icon name="progress_activity" className="animate-spin text-primary" />
               <div className="flex-1">
                 <p className="text-sm font-medium text-primary">
                   {syncStep === "syncing" && t("syncingData")}
@@ -2262,13 +2247,11 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
               onClick={handleConfirmDisable}
               fullWidth
               disabled={cloudSyncing}
-              className="bg-red-500! hover:bg-red-600! text-white!"
+              variant="danger"
             >
               {cloudSyncing ? (
                 <span className="flex items-center gap-2">
-                  <span className="material-symbols-outlined animate-spin text-sm">
-                    progress_activity
-                  </span>
+                  <Icon name="progress_activity" className="animate-spin text-sm" />
                   {syncStep === "syncing" ? t("syncing") : t("disabling")}
                 </span>
               ) : (
@@ -2293,14 +2276,14 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
         onClose={() => !tailscaleInstallBusy && setShowTailscaleInstallModal(false)}
       >
         <div className="flex flex-col gap-4">
-          <div className="rounded-lg border border-blue-500/30 bg-blue-500/10 p-4">
-            <p className="text-sm font-medium text-blue-300">
+          <div className="rounded-lg border border-info/30 bg-info/10 p-4">
+            <p className="text-sm font-medium text-info">
               {translateOrFallback(
                 "tailscaleInstallIntro",
                 "Installs Tailscale on this machine and prepares OmniRoute to enable Funnel."
               )}
             </p>
-            <p className="mt-2 text-sm text-blue-200/80">
+            <p className="mt-2 text-sm text-info/80">
               {translateOrFallback(
                 "tailscaleInstallPasswordHint",
                 "On macOS and Linux, sudo may be required for the package install and daemon start."
@@ -2332,9 +2315,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
             >
               {tailscaleInstallBusy ? (
                 <span className="flex items-center gap-2">
-                  <span className="material-symbols-outlined animate-spin text-sm">
-                    progress_activity
-                  </span>
+                  <Icon name="progress_activity" className="animate-spin text-sm" />
                   {translateOrFallback("tailscaleInstalling", "Installing")}
                 </span>
               ) : (
@@ -2401,7 +2382,7 @@ function ProviderModelsModal({
     return (
       <div className="mb-4">
         <h4 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2 flex items-center gap-1.5">
-          <span className="material-symbols-outlined text-sm">{icon}</span>
+          <Icon name={icon} className="text-sm" />
           {title} ({groupModels.length})
         </h4>
         <div className="flex flex-col gap-1">
@@ -2418,15 +2399,15 @@ function ProviderModelsModal({
                     {t("custom")}
                   </span>
                 )}
-                <button
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => copy(m.id, copyKey)}
-                  className="p-1 hover:bg-sidebar rounded text-text-muted hover:text-primary opacity-0 group-hover:opacity-100 transition-opacity"
+                  className="text-text-muted opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"
                   title={tc("copy")}
-                >
-                  <span className="material-symbols-outlined text-sm">
-                    {copied === copyKey ? "check" : "content_copy"}
-                  </span>
-                </button>
+                  aria-label={`${tc("copy")} ${m.id}`}
+                  icon={copied === copyKey ? "check" : "content_copy"}
+                />
               </div>
             );
           })}
@@ -2491,7 +2472,7 @@ function EndpointCard({
     <div className="border border-border rounded-lg p-3 hover:bg-surface/30 transition-colors flex flex-col gap-2">
       <div className="flex items-start gap-2.5">
         <div className={`flex items-center justify-center size-8 rounded-lg ${iconBg} shrink-0`}>
-          <span className={`material-symbols-outlined text-base ${iconColor}`}>{icon}</span>
+          <Icon name={icon} size={16} className={iconColor} />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5 flex-wrap">
@@ -2515,15 +2496,15 @@ function EndpointCard({
         <code className="flex-1 text-[10px] font-mono text-text-muted bg-surface/80 px-2 py-1 rounded truncate">
           {path}
         </code>
-        <button
+        <Button
+          variant="ghost"
+          size="icon-sm"
           onClick={() => void copy(fullUrl, copyId)}
-          className="shrink-0 flex items-center justify-center size-6 rounded hover:bg-sidebar transition-colors"
+          className="shrink-0 text-text-muted"
           title={t("copyUrl")}
-        >
-          <span className="material-symbols-outlined text-[12px] text-text-muted">
-            {copied === copyId ? "check" : "content_copy"}
-          </span>
-        </button>
+          aria-label={`${t("copyUrl")}: ${path}`}
+          icon={copied === copyId ? "check" : "content_copy"}
+        />
       </div>
     </div>
   );
diff --git a/src/app/(dashboard)/dashboard/endpoint/VscodeTokenAliasCard.tsx b/src/app/(dashboard)/dashboard/endpoint/VscodeTokenAliasCard.tsx
index b693c0b4a2d1..9a7c6cade835 100644
--- a/src/app/(dashboard)/dashboard/endpoint/VscodeTokenAliasCard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/VscodeTokenAliasCard.tsx
@@ -1,11 +1,14 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useState } from "react";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { useDisplayBaseUrl } from "@/shared/hooks";
-import { Card } from "@/shared/components";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
 
 type EndpointApiKeySummary = {
   id: string;
@@ -67,7 +70,9 @@ export default function VscodeTokenAliasCard({
     }
 
     const storedCopilotKeyId =
-      typeof window !== "undefined" ? window.localStorage.getItem("omniroute-cli-key-copilot") : null;
+      typeof window !== "undefined"
+        ? window.localStorage.getItem("omniroute-cli-key-copilot")
+        : null;
 
     return (
       (storedCopilotKeyId ? cliApiKeys.find((key) => key.id === storedCopilotKeyId) : null) ??
@@ -110,8 +115,8 @@ export default function VscodeTokenAliasCard({
   if (variant === "catalog") {
     return (
       <Card className={`overflow-hidden ${className}`.trim()}>
-        <div className="flex items-center gap-2 px-4 py-3 border-b border-black/5 dark:border-white/5">
-          <span className="material-symbols-outlined text-[14px] text-primary">key</span>
+        <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
+          <Icon name="key" size={14} className="text-primary" />
           <h3 className="text-xs font-semibold uppercase tracking-wider text-text-muted">
             {t("vscodeAliasTitle")}
           </h3>
@@ -146,10 +151,10 @@ export default function VscodeTokenAliasCard({
   }
 
   return (
-    <div className={`rounded-lg border border-sky-500/20 bg-sky-500/5 p-3 ${className}`.trim()}>
+    <div className={`rounded-lg border border-info/20 bg-info/5 p-3 ${className}`.trim()}>
       <div className="flex items-start justify-between gap-3">
         <div>
-          <p className="text-[10px] font-semibold uppercase tracking-wider text-sky-600 dark:text-sky-400">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-info">
             {t("vscodeAliasTitle")}
           </p>
           <p className="mt-1 text-xs text-text-muted">{description}</p>
@@ -193,21 +198,22 @@ function CopyableEndpointRow({
 }>) {
   const rowClassName =
     variant === "catalog"
-      ? "flex items-center gap-2 min-w-0 rounded-lg border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] px-3 py-2.5"
-      : "flex items-center gap-2 min-w-0 rounded-md border border-sky-500/15 bg-background/60 px-2.5 py-2";
+      ? "flex items-center gap-2 min-w-0 rounded-lg border border-border bg-surface-2 px-3 py-2.5"
+      : "flex items-center gap-2 min-w-0 rounded-md border border-info/15 bg-background/60 px-2.5 py-2";
 
   return (
     <div className={rowClassName}>
       <span className="w-24 shrink-0 text-[11px] font-medium text-text-muted">{label}</span>
       <code className="flex-1 min-w-0 truncate text-[11px] font-mono text-text-main">{url}</code>
-      <button
+      <Button
+        variant="outline"
+        size="icon-sm"
         onClick={() => copy(url, copyKey)}
-        className="shrink-0 flex items-center gap-1 rounded border border-border/70 px-2 py-1 text-text-muted transition-colors hover:text-text"
-      >
-        <span className="material-symbols-outlined text-[12px]">
-          {copied === copyKey ? "check" : "content_copy"}
-        </span>
-      </button>
+        className="shrink-0 text-text-muted"
+        aria-label={`${label}: ${url}`}
+        title={url}
+        icon={copied === copyKey ? "check" : "content_copy"}
+      />
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx b/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx
index 278844cfd059..495bd3ea2260 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx
@@ -1,7 +1,17 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Card, Button } from "@/shared/components";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@omniroute/ui-kit/table";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Select from "@/shared/components/Select";
 import { useTranslations } from "next-intl";
 
 type A2ATaskState = "submitted" | "working" | "completed" | "failed" | "cancelled";
@@ -75,11 +85,11 @@ const TASK_STATES: Array<"all" | A2ATaskState> = [
 ];
 
 function stateClass(state: A2ATaskState) {
-  if (state === "completed") return "bg-green-500/15 text-green-500";
-  if (state === "failed") return "bg-red-500/15 text-red-500";
-  if (state === "working") return "bg-amber-500/15 text-amber-500";
-  if (state === "cancelled") return "bg-gray-500/15 text-gray-400";
-  return "bg-blue-500/15 text-blue-500";
+  if (state === "completed") return "bg-success/15 text-success";
+  if (state === "failed") return "bg-error/15 text-error";
+  if (state === "working") return "bg-warning/15 text-warning";
+  if (state === "cancelled") return "bg-surface-2 text-text-muted";
+  return "bg-info/15 text-info";
 }
 
 export default function A2ADashboardPage() {
@@ -395,8 +405,8 @@ export default function A2ADashboardPage() {
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
-            <select
-              className="rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            <Select
+              aria-label={t("tableState")}
               value={stateFilter}
               onChange={(event) => {
                 setOffset(0);
@@ -408,9 +418,9 @@ export default function A2ADashboardPage() {
                   {state === "all" ? t("allStates") : t(`state.${state}`)}
                 </option>
               ))}
-            </select>
-            <select
-              className="rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            </Select>
+            <Select
+              aria-label={t("tableSkill")}
               value={skillFilter}
               onChange={(event) => {
                 setOffset(0);
@@ -423,7 +433,7 @@ export default function A2ADashboardPage() {
                   {skill}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
         </div>
 
@@ -433,46 +443,46 @@ export default function A2ADashboardPage() {
           <p className="text-sm text-text-muted">{t("noTasksForFilters")}</p>
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border">
-                  <th className="text-left py-2 pr-2">{t("tableTask")}</th>
-                  <th className="text-left py-2 pr-2">{t("tableSkill")}</th>
-                  <th className="text-left py-2 pr-2">{t("tableState")}</th>
-                  <th className="text-left py-2 pr-2">{t("tablePhase")}</th>
-                  <th className="text-left py-2 pr-2">{t("tableUpdated")}</th>
-                  <th className="text-left py-2">{t("tableActions")}</th>
-                </tr>
-              </thead>
-              <tbody>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("tableTask")}</TableHead>
+                  <TableHead>{t("tableSkill")}</TableHead>
+                  <TableHead>{t("tableState")}</TableHead>
+                  <TableHead>{t("tablePhase")}</TableHead>
+                  <TableHead>{t("tableUpdated")}</TableHead>
+                  <TableHead>{t("tableActions")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
                 {tasksData.tasks.map((task) => {
                   const fsmPhase =
                     task.metadata?.fsmPhase || (task.metadata?.workflowFSM as any)?.currentPhase;
-                  let fsmBadgeColor = "bg-gray-500/15 text-gray-500";
+                  let fsmBadgeColor = "bg-surface-2 text-text-muted";
                   if (fsmPhase === "plan" || fsmPhase === "plan_review")
-                    fsmBadgeColor = "bg-purple-500/15 text-purple-500";
-                  else if (fsmPhase === "execute") fsmBadgeColor = "bg-blue-500/15 text-blue-500";
+                    fsmBadgeColor = "bg-chart-3/15 text-chart-3";
+                  else if (fsmPhase === "execute") fsmBadgeColor = "bg-info/15 text-info";
                   else if (
                     ["code_review", "quality_review", "security", "test", "output_review"].includes(
                       fsmPhase
                     )
                   )
-                    fsmBadgeColor = "bg-amber-500/15 text-amber-500";
-                  else if (fsmPhase === "done") fsmBadgeColor = "bg-green-500/15 text-green-500";
-                  else if (fsmPhase === "failed") fsmBadgeColor = "bg-red-500/15 text-red-500";
+                    fsmBadgeColor = "bg-warning/15 text-warning";
+                  else if (fsmPhase === "done") fsmBadgeColor = "bg-success/15 text-success";
+                  else if (fsmPhase === "failed") fsmBadgeColor = "bg-error/15 text-error";
 
                   return (
-                    <tr key={task.id} className="border-b border-border/40">
-                      <td className="py-2 pr-2 font-mono text-xs">{task.id}</td>
-                      <td className="py-2 pr-2">{task.skill}</td>
-                      <td className="py-2 pr-2">
+                    <TableRow key={task.id}>
+                      <TableCell className="font-mono">{task.id}</TableCell>
+                      <TableCell>{task.skill}</TableCell>
+                      <TableCell>
                         <span
                           className={`text-xs px-2 py-1 rounded-full ${stateClass(task.state)}`}
                         >
                           {t(`state.${task.state}`)}
                         </span>
-                      </td>
-                      <td className="py-2 pr-2">
+                      </TableCell>
+                      <TableCell>
                         {fsmPhase ? (
                           <span
                             className={`text-xs px-2 py-1 rounded border border-current/20 font-medium ${fsmBadgeColor}`}
@@ -482,37 +492,37 @@ export default function A2ADashboardPage() {
                         ) : (
                           <span className="text-xs text-text-muted">—</span>
                         )}
-                      </td>
-                      <td className="py-2 pr-2 text-xs">
-                        {new Date(task.updatedAt).toLocaleString()}
-                      </td>
-                      <td className="py-2 flex gap-2">
-                        <Button
-                          size="sm"
-                          variant="secondary"
-                          onClick={() => handleLoadTask(task.id)}
-                        >
-                          {t("view")}
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="secondary"
-                          onClick={() => handleCancelTask(task.id)}
-                          disabled={
-                            task.state === "completed" ||
-                            task.state === "failed" ||
-                            task.state === "cancelled" ||
-                            actionBusy === "cancel"
-                          }
-                        >
-                          {t("cancel")}
-                        </Button>
-                      </td>
-                    </tr>
+                      </TableCell>
+                      <TableCell>{new Date(task.updatedAt).toLocaleString()}</TableCell>
+                      <TableCell>
+                        <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => handleLoadTask(task.id)}
+                          >
+                            {t("view")}
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => handleCancelTask(task.id)}
+                            disabled={
+                              task.state === "completed" ||
+                              task.state === "failed" ||
+                              task.state === "cancelled" ||
+                              actionBusy === "cancel"
+                            }
+                          >
+                            {t("cancel")}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
                   );
                 })}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           </div>
         )}
 
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx b/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx
index 49f69b6ca0d6..d0410acdac0a 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx
@@ -1,7 +1,18 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Card, Button } from "@/shared/components";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@omniroute/ui-kit/table";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Input from "@/shared/components/Input";
+import Select from "@/shared/components/Select";
 import { useTranslations } from "next-intl";
 
 type McpTransport = "stdio" | "sse" | "streamable-http";
@@ -459,8 +470,8 @@ export default function McpDashboardPage() {
         <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
           <div className="rounded-lg border border-border p-3 space-y-3">
             <p className="text-sm font-semibold">{t("switchCombo")}</p>
-            <select
-              className="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            <Select
+              aria-label={t("switchCombo")}
               value={selectedComboId}
               onChange={(event) => setSelectedComboId(event.target.value)}
             >
@@ -469,7 +480,7 @@ export default function McpDashboardPage() {
                   {combo.name} ({combo.isActive === false ? t("inactive") : t("active")})
                 </option>
               ))}
-            </select>
+            </Select>
             <Button
               size="sm"
               variant="secondary"
@@ -482,8 +493,8 @@ export default function McpDashboardPage() {
 
           <div className="rounded-lg border border-border p-3 space-y-3">
             <p className="text-sm font-semibold">{t("applyResilienceProfile")}</p>
-            <select
-              className="w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            <Select
+              aria-label={t("applyResilienceProfile")}
               value={selectedProfile}
               onChange={(event) =>
                 setSelectedProfile(event.target.value as keyof typeof RESILIENCE_PRESETS)
@@ -492,7 +503,7 @@ export default function McpDashboardPage() {
               <option value="aggressive">{t("profileAggressive")}</option>
               <option value="balanced">{t("profileBalanced")}</option>
               <option value="conservative">{t("profileConservative")}</option>
-            </select>
+            </Select>
             <Button
               size="sm"
               variant="secondary"
@@ -509,7 +520,7 @@ export default function McpDashboardPage() {
             <Button
               size="sm"
               onClick={handleResetCircuitBreakers}
-              className="bg-red-500! hover:bg-red-600! text-white!"
+              variant="danger"
               disabled={actionBusy === "reset"}
             >
               {t("resetAllBreakers")}
@@ -522,26 +533,26 @@ export default function McpDashboardPage() {
       <Card className="p-5">
         <h2 className="text-lg font-semibold mb-4">{t("toolsAndScopes")}</h2>
         <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-border">
-                <th className="text-left py-2 pr-2">{t("tableTool")}</th>
-                <th className="text-left py-2 pr-2">{t("tableScopes")}</th>
-                <th className="text-left py-2 pr-2">{t("tablePhase")}</th>
-                <th className="text-left py-2">{t("tableAudit")}</th>
-              </tr>
-            </thead>
-            <tbody>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("tableTool")}</TableHead>
+                <TableHead>{t("tableScopes")}</TableHead>
+                <TableHead>{t("tablePhase")}</TableHead>
+                <TableHead>{t("tableAudit")}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
               {tools.map((tool) => (
-                <tr key={tool.name} className="border-b border-border/40">
-                  <td className="py-2 pr-2 font-mono text-xs">{tool.name}</td>
-                  <td className="py-2 pr-2 text-xs">{tool.scopes.join(", ") || "—"}</td>
-                  <td className="py-2 pr-2">{tool.phase}</td>
-                  <td className="py-2">{tool.auditLevel}</td>
-                </tr>
+                <TableRow key={tool.name}>
+                  <TableCell className="font-mono">{tool.name}</TableCell>
+                  <TableCell>{tool.scopes.join(", ") || "—"}</TableCell>
+                  <TableCell>{tool.phase}</TableCell>
+                  <TableCell>{tool.auditLevel}</TableCell>
+                </TableRow>
               ))}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         </div>
       </Card>
 
@@ -554,8 +565,8 @@ export default function McpDashboardPage() {
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
-            <select
-              className="rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            <Select
+              aria-label={t("tableTool")}
               value={toolFilter}
               onChange={(event) => {
                 setAuditOffset(0);
@@ -568,9 +579,9 @@ export default function McpDashboardPage() {
                   {tool.name}
                 </option>
               ))}
-            </select>
-            <select
-              className="rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            </Select>
+            <Select
+              aria-label={t("tableResult")}
               value={successFilter}
               onChange={(event) => {
                 setAuditOffset(0);
@@ -580,9 +591,9 @@ export default function McpDashboardPage() {
               <option value="all">{t("allResults")}</option>
               <option value="true">{t("success")}</option>
               <option value="false">{t("failure")}</option>
-            </select>
-            <input
-              className="rounded-lg border border-border bg-bg px-3 py-2 text-sm"
+            </Select>
+            <Input
+              aria-label={t("apiKeyIdPlaceholder")}
               placeholder={t("apiKeyIdPlaceholder")}
               value={apiKeyFilter}
               onChange={(event) => {
@@ -599,34 +610,32 @@ export default function McpDashboardPage() {
           <p className="text-sm text-text-muted">{t("noAuditEntriesForFilters")}</p>
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border">
-                  <th className="text-left py-2 pr-2">{t("tableTimestamp")}</th>
-                  <th className="text-left py-2 pr-2">{t("tableTool")}</th>
-                  <th className="text-left py-2 pr-2">{t("tableDuration")}</th>
-                  <th className="text-left py-2 pr-2">{t("tableResult")}</th>
-                  <th className="text-left py-2">{t("tableApiKey")}</th>
-                </tr>
-              </thead>
-              <tbody>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("tableTimestamp")}</TableHead>
+                  <TableHead>{t("tableTool")}</TableHead>
+                  <TableHead>{t("tableDuration")}</TableHead>
+                  <TableHead>{t("tableResult")}</TableHead>
+                  <TableHead>{t("tableApiKey")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
                 {auditData.entries.map((entry) => (
-                  <tr key={entry.id} className="border-b border-border/40">
-                    <td className="py-2 pr-2 text-xs">
-                      {new Date(entry.createdAt).toLocaleString()}
-                    </td>
-                    <td className="py-2 pr-2 font-mono text-xs">{entry.toolName}</td>
-                    <td className="py-2 pr-2">{entry.durationMs}ms</td>
-                    <td className="py-2 pr-2">
-                      <span className={entry.success ? "text-green-500" : "text-red-500"}>
+                  <TableRow key={entry.id}>
+                    <TableCell>{new Date(entry.createdAt).toLocaleString()}</TableCell>
+                    <TableCell className="font-mono">{entry.toolName}</TableCell>
+                    <TableCell>{entry.durationMs}ms</TableCell>
+                    <TableCell>
+                      <span className={entry.success ? "text-success" : "text-error"}>
                         {entry.success ? t("success") : entry.errorCode || t("failed")}
                       </span>
-                    </td>
-                    <td className="py-2">{entry.apiKeyId || "—"}</td>
-                  </tr>
+                    </TableCell>
+                    <TableCell>{entry.apiKeyId || "—"}</TableCell>
+                  </TableRow>
                 ))}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           </div>
         )}
 
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/NotionSourceCard.tsx b/src/app/(dashboard)/dashboard/endpoint/components/NotionSourceCard.tsx
index e69a1317e9f6..11501cbd00a2 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/NotionSourceCard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/components/NotionSourceCard.tsx
@@ -1,11 +1,19 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useCallback, useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Card, Button, Input, Badge } from "@/shared/components";
+import { Alert } from "@omniroute/ui-kit/alert";
+import Badge from "@/shared/components/Badge";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Input from "@/shared/components/Input";
+import { cn } from "@/shared/utils/cn";
 
 export default function NotionSourceCard() {
   const t = useTranslations("endpoint");
+  const tc = useTranslations("common");
   const [connected, setConnected] = useState(false);
   const [token, setToken] = useState("");
   const [busy, setBusy] = useState(false);
@@ -122,12 +130,14 @@ export default function NotionSourceCard() {
   return (
     <Card>
       <div className="p-5">
-        <button
+        <Button
+          variant="ghost"
           onClick={() => setExpanded(!expanded)}
-          className="w-full flex items-center gap-3 text-left"
+          aria-expanded={expanded}
+          className="w-full h-auto justify-start gap-3 p-0 text-left font-normal whitespace-normal hover:bg-transparent"
         >
-          <div className="flex items-center justify-center size-10 rounded-lg bg-blue-500/10 shrink-0">
-            <span className="material-symbols-outlined text-xl text-blue-400">description</span>
+          <div className="flex items-center justify-center size-10 rounded-lg bg-info/10 shrink-0">
+            <Icon name="description" className="text-xl text-info" />
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
@@ -145,40 +155,35 @@ export default function NotionSourceCard() {
               )}
             </p>
           </div>
-          <span
-            className={`material-symbols-outlined text-text-muted text-lg transition-transform ${expanded ? "rotate-180" : ""}`}
-          >
-            expand_more
-          </span>
-        </button>
+          <Icon
+            name="expand_more"
+            size={18}
+            className={cn("text-text-muted transition-transform", expanded && "rotate-180")}
+          />
+        </Button>
 
         {expanded && (
           <div className="mt-4 pt-4 border-t border-border/50 flex flex-col gap-3">
             {message && (
-              <div
-                className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
-                  message.type === "success"
-                    ? "border-green-500/30 bg-green-500/10 text-green-400"
-                    : "border-red-500/30 bg-red-500/10 text-red-400"
-                }`}
-              >
-                <span className="material-symbols-outlined text-[18px]">
-                  {message.type === "success" ? "check_circle" : "error"}
-                </span>
-                <span className="flex-1">{message.text}</span>
-              </div>
+              <Alert
+                variant={message.type === "success" ? "success" : "critical"}
+                icon={
+                  <Icon name={message.type === "success" ? "check_circle" : "error"} size={18} />
+                }
+                description={message.text}
+                dismissLabel={tc("close")}
+                onDismiss={() => setMessage(null)}
+              />
             )}
 
             {!connected ? (
               <div className="flex flex-col gap-2">
-                <label className="text-xs text-text-muted font-medium">
-                  {translateOrFallback(
-                    "notionIntegrationToken",
-                    "Notion Internal Integration Token"
-                  )}
-                </label>
-                <div className="flex gap-2">
+                <div className="flex gap-2 items-end">
                   <Input
+                    label={translateOrFallback(
+                      "notionIntegrationToken",
+                      "Notion Internal Integration Token"
+                    )}
                     type="password"
                     value={token}
                     onChange={(e) => setToken(e.target.value)}
@@ -208,13 +213,7 @@ export default function NotionSourceCard() {
                     "Token configured. Notion tools are available via MCP."
                   )}
                 </span>
-                <Button
-                  onClick={handleDisconnect}
-                  loading={busy}
-                  variant="secondary"
-                  size="sm"
-                  className="border-red-500/30! text-red-400! hover:bg-red-500/10!"
-                >
+                <Button onClick={handleDisconnect} loading={busy} variant="danger" size="sm">
                   {translateOrFallback("notionDisconnect", "Disconnect")}
                 </Button>
               </div>
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/ObsidianSourceCard.tsx b/src/app/(dashboard)/dashboard/endpoint/components/ObsidianSourceCard.tsx
index 51fc2c1d8013..74e76a9fcd60 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/ObsidianSourceCard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/components/ObsidianSourceCard.tsx
@@ -1,11 +1,19 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useCallback, useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Card, Button, Input, Badge } from "@/shared/components";
+import { Alert } from "@omniroute/ui-kit/alert";
+import Badge from "@/shared/components/Badge";
+import Button from "@/shared/components/Button";
+import Card from "@/shared/components/Card";
+import Input from "@/shared/components/Input";
+import { cn } from "@/shared/utils/cn";
 
 export default function ObsidianSourceCard() {
   const t = useTranslations("endpoint");
+  const tc = useTranslations("common");
   const DEFAULT_URL = "http://127.0.0.1:27123";
   const [connected, setConnected] = useState(false);
   const [token, setToken] = useState("");
@@ -190,17 +198,21 @@ export default function ObsidianSourceCard() {
   return (
     <Card>
       <div className="p-5">
-        <button
+        <Button
+          variant="ghost"
           onClick={() => setExpanded(!expanded)}
-          className="w-full flex items-center gap-3 text-left"
+          aria-expanded={expanded}
+          className="w-full h-auto justify-start gap-3 p-0 text-left font-normal whitespace-normal hover:bg-transparent"
         >
-          <div className="flex items-center justify-center size-10 rounded-lg bg-purple-500/10 shrink-0">
+          <div className="flex items-center justify-center size-10 rounded-lg bg-chart-3/10 shrink-0">
             <svg
               width="20"
               height="20"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
-              fill="#C084FC"
+              fill="currentColor"
+              className="text-chart-3"
+              aria-hidden="true"
             >
               <path d="M19.355 18.538a68.967 68.959 0 0 0 1.858-2.954.81.81 0 0 0-.062-.9c-.516-.685-1.504-2.075-2.042-3.362-.553-1.321-.636-3.375-.64-4.377a1.707 1.707 0 0 0-.358-1.05l-3.198-4.064a3.744 3.744 0 0 1-.076.543c-.106.503-.307 1.004-.536 1.5-.134.29-.29.6-.446.914l-.31.626c-.516 1.068-.997 2.227-1.132 3.59-.124 1.26.046 2.73.815 4.481.128.011.257.025.386.044a6.363 6.363 0 0 1 3.326 1.505c.916.79 1.744 1.922 2.415 3.5zM8.199 22.569c.073.012.146.02.22.02.78.024 2.095.092 3.16.29.87.16 2.593.64 4.01 1.055 1.083.316 2.198-.548 2.355-1.664.114-.814.33-1.735.725-2.58l-.01.005c-.67-1.87-1.522-3.078-2.416-3.849a5.295 5.295 0 0 0-2.778-1.257c-1.54-.216-2.952.19-3.84.45.532 2.218.368 4.829-1.425 7.531zM5.533 9.938c-.023.1-.056.197-.098.29L2.82 16.059a1.602 1.602 0 0 0 .313 1.772l4.116 4.24c2.103-3.101 1.796-6.02.836-8.3-.728-1.73-1.832-3.081-2.55-3.831zM9.32 14.01c.615-.183 1.606-.465 2.745-.534-.683-1.725-.848-3.233-.716-4.577.154-1.552.7-2.847 1.235-3.95.113-.235.223-.454.328-.664.149-.297.288-.577.419-.86.217-.47.379-.885.46-1.27.08-.38.08-.72-.014-1.043-.095-.325-.297-.675-.68-1.06a1.6 1.6 0 0 0-1.475.36l-4.95 4.452a1.602 1.602 0 0 0-.513.952l-.427 2.83c.672.59 2.328 2.316 3.335 4.711.09.21.175.43.253.653z" />
             </svg>
@@ -211,48 +223,36 @@ export default function ObsidianSourceCard() {
               <Badge variant={connected ? "success" : "default"}>
                 {connected ? t("obsidianConnected") : t("obsidianNotConnected")}
               </Badge>
-              {webdavEnabled && (
-                <Badge
-                  variant="success"
-                  className="bg-blue-500/20 text-blue-400 border-blue-500/30"
-                >
-                  {t("obsidianWebdavSync")}
-                </Badge>
-              )}
+              {webdavEnabled && <Badge variant="info">{t("obsidianWebdavSync")}</Badge>}
             </div>
             <p className="text-xs text-text-muted mt-0.5">{t("obsidianDescription")}</p>
           </div>
-          <span
-            className={`material-symbols-outlined text-text-muted text-lg transition-transform ${expanded ? "rotate-180" : ""}`}
-          >
-            expand_more
-          </span>
-        </button>
+          <Icon
+            name="expand_more"
+            size={18}
+            className={cn("text-text-muted transition-transform", expanded && "rotate-180")}
+          />
+        </Button>
 
         {expanded && (
           <div className="mt-4 pt-4 border-t border-border/50 flex flex-col gap-3">
             {message && (
-              <div
-                className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
-                  message.type === "success"
-                    ? "border-green-500/30 bg-green-500/10 text-green-400"
-                    : "border-red-500/30 bg-red-500/10 text-red-400"
-                }`}
-              >
-                <span className="material-symbols-outlined text-[18px]">
-                  {message.type === "success" ? "check_circle" : "error"}
-                </span>
-                <span className="flex-1">{message.text}</span>
-              </div>
+              <Alert
+                variant={message.type === "success" ? "success" : "critical"}
+                icon={
+                  <Icon name={message.type === "success" ? "check_circle" : "error"} size={18} />
+                }
+                description={message.text}
+                dismissLabel={tc("close")}
+                onDismiss={() => setMessage(null)}
+              />
             )}
 
             {!connected ? (
               <div className="flex flex-col gap-2">
-                <label className="text-xs text-text-muted font-medium">
-                  {t("obsidianRestToken")}
-                </label>
-                <div className="flex gap-2">
+                <div className="flex gap-2 items-end">
                   <Input
+                    label={t("obsidianRestToken")}
                     type="password"
                     value={token}
                     onChange={(e) => setToken(e.target.value)}
@@ -264,10 +264,8 @@ export default function ObsidianSourceCard() {
                     {t("obsidianConnect")}
                   </Button>
                 </div>
-                <label className="text-xs text-text-muted font-medium mt-1">
-                  {t("obsidianBaseUrlOptional")}
-                </label>
                 <Input
+                  label={t("obsidianBaseUrlOptional")}
                   type="text"
                   value={baseUrl}
                   onChange={(e) => setBaseUrl(e.target.value)}
@@ -276,8 +274,8 @@ export default function ObsidianSourceCard() {
                   className="font-mono text-sm"
                 />
                 {baseUrl.includes(":27124") && (
-                  <div className="flex items-center gap-1.5 rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-2.5 py-1.5 text-[10px] text-yellow-300">
-                    <span className="material-symbols-outlined text-[14px]">warning</span>
+                  <div className="flex items-center gap-1.5 rounded-lg border border-warning/30 bg-warning/10 px-2.5 py-1.5 text-[10px] text-warning">
+                    <Icon name="warning" size={14} />
                     <span>{t("obsidianPortWarning")}</span>
                   </div>
                 )}
@@ -291,13 +289,7 @@ export default function ObsidianSourceCard() {
                   <span className="text-xs text-text-muted flex-1">
                     {t("obsidianTokenConfigured")}
                   </span>
-                  <Button
-                    onClick={handleDisconnect}
-                    loading={busy}
-                    variant="secondary"
-                    size="sm"
-                    className="border-red-500/30! text-red-400! hover:bg-red-500/10!"
-                  >
+                  <Button onClick={handleDisconnect} loading={busy} variant="danger" size="sm">
                     {t("obsidianDisconnect")}
                   </Button>
                 </div>
@@ -312,11 +304,9 @@ export default function ObsidianSourceCard() {
 
                   {!webdavEnabled ? (
                     <div className="flex flex-col gap-2">
-                      <label className="text-xs text-text-muted font-medium">
-                        {t("obsidianVaultDirectoryPath")}
-                      </label>
-                      <div className="flex gap-2">
+                      <div className="flex gap-2 items-end">
                         <Input
+                          label={t("obsidianVaultDirectoryPath")}
                           type="text"
                           value={vaultPath}
                           onChange={(e) => setVaultPath(e.target.value)}
@@ -336,15 +326,13 @@ export default function ObsidianSourceCard() {
                     </div>
                   ) : (
                     <div className="flex flex-col gap-3">
-                      <div className="flex items-center gap-2 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-2">
-                        <span className="material-symbols-outlined text-[18px] text-blue-400">
-                          cloud_sync
-                        </span>
+                      <div className="flex items-center gap-2 rounded-lg border border-info/30 bg-info/10 px-3 py-2">
+                        <Icon name="cloud_sync" size={18} className="text-info" />
                         <div className="flex-1 min-w-0">
-                          <p className="text-xs text-blue-300 font-medium">
+                          <p className="text-xs text-info font-medium">
                             {t("obsidianWebdavEnabled")}
                           </p>
-                          <p className="text-[10px] text-blue-400/70 font-mono truncate">
+                          <p className="text-[10px] text-info/70 font-mono truncate">
                             {getWebdavUrl()}
                           </p>
                         </div>
@@ -353,13 +341,13 @@ export default function ObsidianSourceCard() {
                           loading={webdavBusy}
                           variant="secondary"
                           size="sm"
-                          className="border-red-500/30! text-red-400! hover:bg-red-500/10! shrink-0"
+                          className="border-error/30! text-error! hover:bg-error/10! shrink-0"
                         >
                           {t("obsidianDisable")}
                         </Button>
                       </div>
 
-                      <div className="flex flex-col gap-2 rounded-lg border border-border/50 bg-black/10 p-3">
+                      <div className="flex flex-col gap-2 rounded-lg border border-border/50 bg-surface-2 p-3">
                         <p className="text-[11px] text-text-muted font-medium">
                           {t("obsidianConfigureMobile")}
                         </p>
@@ -368,10 +356,10 @@ export default function ObsidianSourceCard() {
                         </p>
 
                         <div className="flex flex-col gap-1.5">
-                          <label className="text-[10px] text-text-muted font-medium">
+                          <p className="text-[10px] text-text-muted font-medium">
                             {t("obsidianWebdavUrl")}
-                          </label>
-                          <div className="flex items-center gap-1.5 rounded border border-border/30 bg-black/20 px-2.5 py-1.5">
+                          </p>
+                          <div className="flex items-center gap-1.5 rounded border border-border/30 bg-surface-2 px-2.5 py-1.5">
                             <code className="text-[10px] text-text-muted font-mono flex-1 break-all select-all">
                               {getWebdavUrl()}
                             </code>
@@ -379,10 +367,10 @@ export default function ObsidianSourceCard() {
                         </div>
 
                         <div className="flex flex-col gap-1.5">
-                          <label className="text-[10px] text-text-muted font-medium">
+                          <p className="text-[10px] text-text-muted font-medium">
                             {t("obsidianUsername")}
-                          </label>
-                          <div className="flex items-center gap-1.5 rounded border border-border/30 bg-black/20 px-2.5 py-1.5">
+                          </p>
+                          <div className="flex items-center gap-1.5 rounded border border-border/30 bg-surface-2 px-2.5 py-1.5">
                             <code className="text-[10px] text-text-muted font-mono flex-1 select-all">
                               {webdavUsername ?? "—"}
                             </code>
@@ -390,11 +378,11 @@ export default function ObsidianSourceCard() {
                         </div>
 
                         <div className="flex flex-col gap-1.5">
-                          <label className="text-[10px] text-text-muted font-medium">
+                          <p className="text-[10px] text-text-muted font-medium">
                             {t("obsidianPassword")}
-                          </label>
+                          </p>
                           <div className="flex items-center gap-1.5">
-                            <div className="flex items-center gap-1.5 rounded border border-border/30 bg-black/20 px-2.5 py-1.5 flex-1">
+                            <div className="flex items-center gap-1.5 rounded border border-border/30 bg-surface-2 px-2.5 py-1.5 flex-1">
                               <code className="text-[10px] text-text-muted font-mono flex-1 select-all">
                                 {showPassword ? (webdavPassword ?? "—") : "••••••••••••"}
                               </code>
@@ -402,13 +390,12 @@ export default function ObsidianSourceCard() {
                             <Button
                               onClick={() => setShowPassword(!showPassword)}
                               variant="secondary"
-                              size="sm"
+                              size="icon-sm"
                               className="shrink-0"
-                            >
-                              <span className="material-symbols-outlined text-[16px]">
-                                {showPassword ? "visibility_off" : "visibility"}
-                              </span>
-                            </Button>
+                              aria-label={t("obsidianPassword")}
+                              aria-pressed={showPassword}
+                              icon={showPassword ? "visibility_off" : "visibility"}
+                            />
                           </div>
                         </div>
 

From 87c785adaaadf0b8645eeeb9246afd46ddec5728 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 01:30:56 -0300
Subject: [PATCH 07/13] refactor(dashboard): /dashboard/playground on the CI UI
 Kit (KEA-7886, lote 3)

---
 .../playground/components/CompareColumn.tsx   |  40 ++--
 .../playground/components/ExportCodeModal.tsx | 171 ++++++------------
 .../components/ImageResultsInline.tsx         |   4 +-
 .../components/ImprovePromptButton.tsx        |  91 +++++-----
 .../playground/components/MarkdownMessage.tsx |  47 +++--
 .../playground/components/ParamSliders.tsx    |  86 ++++-----
 .../playground/components/PresetPicker.tsx    | 121 ++++++-------
 .../components/ReasoningControls.tsx          |  56 +++---
 .../components/StructuredOutputEditor.tsx     |  69 +++----
 .../components/StudioConfigPane.tsx           | 141 ++++++++-------
 .../playground/components/StudioTopBar.tsx    |  84 ++++-----
 .../components/TokenCostCounter.tsx           |   4 +-
 .../playground/components/ToolsBuilder.tsx    |  90 ++++-----
 .../playground/components/tabs/ApiTab.tsx     | 132 +++++++-------
 .../playground/components/tabs/BuildTab.tsx   |  35 ++--
 .../playground/components/tabs/ChatTab.tsx    |  65 +++----
 .../playground/components/tabs/CompareTab.tsx |  46 +++--
 .../components/tabs/build/BuildWizard.tsx     |  81 ++++-----
 .../playground/hooks/useImprovePrompt.ts      |   2 +-
 .../dashboard/playground/hooks/usePresets.ts  |   6 +-
 .../playground/hooks/useStreamMetrics.ts      |  18 +-
 .../playground/hooks/useStructuredOutput.ts   |   2 +-
 src/i18n/messages/en.json                     |   3 +-
 src/i18n/messages/pt-BR.json                  |   3 +-
 tests/unit/ui/playground-build-tab.test.tsx   |  84 +++++----
 .../ui/playground-compare-column.test.tsx     |  46 +++--
 .../unit/ui/playground-export-modal.test.tsx  |  49 +++--
 .../playground-improve-prompt-button.test.tsx |  16 +-
 .../unit/ui/playground-preset-picker.test.tsx |  17 +-
 tests/unit/ui/playground-studio.test.tsx      |   5 +-
 .../unit/ui/playground-tools-builder.test.tsx |  71 +++++---
 31 files changed, 831 insertions(+), 854 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx b/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
index 509fa8c7a77c..c7d901fdbafa 100644
--- a/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+
 // src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
 
 import { useTranslations } from "next-intl";
@@ -45,9 +47,9 @@ export default function CompareColumn({ column, onCancel, onRemove }: CompareCol
               status === "streaming"
                 ? "bg-primary animate-pulse"
                 : status === "done"
-                  ? "bg-green-500"
+                  ? "bg-success"
                   : status === "error"
-                    ? "bg-destructive"
+                    ? "bg-error"
                     : "bg-text-muted/30"
             }`}
             aria-label={t("statusLabel", { status: t(`status.${status}`) })}
@@ -59,33 +61,35 @@ export default function CompareColumn({ column, onCancel, onRemove }: CompareCol
 
         <div className="flex items-center gap-1 shrink-0">
           {status === "streaming" && (
-            <button
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => onCancel(id)}
-              className="text-[10px] px-1.5 py-0.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+              className="h-auto min-h-0 px-1.5 py-0.5 text-[10px] text-text-muted"
               aria-label={t("cancelStream")}
             >
               {t("cancel")}
-            </button>
+            </Button>
           )}
-          <button
+          <Button
+            variant="ghost"
+            size="icon-sm"
             onClick={() => void copy(response, id)}
             disabled={response === ""}
-            className="p-0.5 rounded text-text-muted hover:text-text-main transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+            className="text-text-muted"
             title={copied === id ? t("copiedCode") : t("copy")}
             aria-label={copied === id ? t("copiedCode") : t("copy")}
-          >
-            <span className="material-symbols-outlined text-[14px]">
-              {copied === id ? "check" : "content_copy"}
-            </span>
-          </button>
-          <button
+            icon={copied === id ? "check" : "content_copy"}
+          />
+          <Button
+            variant="ghost"
+            size="icon-sm"
             onClick={() => onRemove(id)}
-            className="p-0.5 rounded text-text-muted hover:text-destructive transition-colors"
+            className="text-text-muted hover:text-error"
             title={t("removeColumn")}
             aria-label={t("removeModelColumn", { model: model || t("noModel") })}
-          >
-            <span className="material-symbols-outlined text-[14px]">close</span>
-          </button>
+            icon="close"
+          />
         </div>
       </div>
 
@@ -101,7 +105,7 @@ export default function CompareColumn({ column, onCancel, onRemove }: CompareCol
         {status === "idle" && <p className="text-text-muted text-xs italic">{t("readyToRun")}</p>}
 
         {status === "error" && (
-          <div className="text-destructive text-xs bg-destructive/10 rounded p-2">
+          <div className="text-error text-xs bg-error/10 rounded p-2">
             <span className="font-medium">{t("errorLabel")}: </span>
             {errorMessage ?? t("unknownError")}
           </div>
diff --git a/src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx b/src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx
index 08c3fee74e60..f8e4fe1b1468 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx
@@ -2,8 +2,12 @@
 
 // src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx
 
-import { useState, useEffect, useCallback } from "react";
+import { useState } from "react";
 import { useTranslations } from "next-intl";
+import { CodePreview } from "@omniroute/ui-kit/code-preview";
+import { Tabs, TabsList, TabsTrigger } from "@omniroute/ui-kit/tabs";
+import Button from "@/shared/components/Button";
+import Modal from "@/shared/components/Modal";
 import type { PlaygroundState, ExportLanguage } from "@/lib/playground/codeExport";
 import { exportAllLanguages, API_KEY_PLACEHOLDER } from "@/lib/playground/codeExport";
 
@@ -26,133 +30,78 @@ const LANGUAGE_TABS: Array<{ id: ExportLanguage; label: string }> = [
 export default function ExportCodeModal({ state, onClose }: ExportCodeModalProps) {
   const t = useTranslations("playground");
   const [activeLanguage, setActiveLanguage] = useState<ExportLanguage>("curl");
-  const [copied, setCopied] = useState(false);
 
   // Generate all snippets once (state is passed in from parent, not re-fetched).
   const snippets = exportAllLanguages(state);
   const currentCode = snippets[activeLanguage];
+  const activeLabel = LANGUAGE_TABS.find((lang) => lang.id === activeLanguage)?.label ?? "";
 
   // Verify that no real API key is embedded (assertion — Hard Rule #1 / D11).
   // The regex checks for typical API key patterns (sk-, or other 16+ char alphanumeric strings
-  // that are NOT the placeholder).
+  // that are NOT the placeholder). When one is found the code (and its copy button) is never
+  // rendered.
   const hasRealKey = /sk-[A-Za-z0-9_-]{16,}/.test(currentCode);
 
-  const handleCopy = useCallback(async () => {
-    if (hasRealKey) return; // Never copy if somehow a real key slipped through
-    try {
-      await navigator.clipboard.writeText(currentCode);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard API unavailable (e.g. insecure context) — fail silently
-    }
-  }, [currentCode, hasRealKey]);
-
-  // Close on Escape
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onClose]);
-
+  // Escape, focus trap, outside click and the portal come from the kit Dialog (Modal adapter).
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      onClick={onClose}
-      role="dialog"
-      aria-modal="true"
-      aria-label={t("exportCode")}
+    <Modal
+      isOpen
+      onClose={onClose}
+      size="full"
+      title={
+        <span className="flex items-center gap-2">
+          <span className="font-mono text-sm text-text-muted" aria-hidden="true">
+            &lt;/&gt;
+          </span>
+          {t("exportCodeTitle")}
+        </span>
+      }
+      className="w-[640px] max-w-[96vw]"
+      bodyClassName="flex flex-col gap-3 px-4 pt-3 pb-4 max-h-[calc(80vh-140px)] overflow-y-auto"
+      footer={
+        <Button variant="outline" size="sm" onClick={onClose}>
+          {t("close")}
+        </Button>
+      }
     >
-      <div
-        className="bg-surface border border-border rounded-xl w-[640px] max-w-[96vw] max-h-[80vh] flex flex-col shadow-2xl"
-        onClick={(e) => e.stopPropagation()}
+      {/* Language tabs */}
+      <Tabs
+        variant="underline"
+        value={activeLanguage}
+        onValueChange={(next) => setActiveLanguage(next as ExportLanguage)}
       >
-        {/* Modal header */}
-        <div className="flex items-center justify-between px-5 py-3.5 border-b border-border shrink-0">
-          <div className="flex items-center gap-2">
-            <span className="font-mono text-sm text-text-muted">&lt;/&gt;</span>
-            <h2 className="text-sm font-semibold text-text-main">{t("exportCodeTitle")}</h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 rounded text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-            aria-label={t("closeExportModal")}
-          >
-            <span className="material-symbols-outlined text-[18px]">close</span>
-          </button>
-        </div>
-
-        {/* Language tabs */}
-        <div className="flex items-center gap-1 px-4 pt-3 shrink-0" role="tablist">
+        <TabsList aria-label={t("exportCode")}>
           {LANGUAGE_TABS.map((lang) => (
-            <button
-              key={lang.id}
-              role="tab"
-              aria-selected={activeLanguage === lang.id}
-              onClick={() => {
-                setActiveLanguage(lang.id);
-                setCopied(false);
-              }}
-              className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
-                activeLanguage === lang.id
-                  ? "bg-primary/10 text-primary"
-                  : "text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5"
-              }`}
-            >
+            <TabsTrigger key={lang.id} value={lang.id} aria-controls={undefined}>
               {lang.label}
-            </button>
+            </TabsTrigger>
           ))}
-        </div>
+        </TabsList>
+      </Tabs>
 
-        {/* Code block */}
-        <div className="flex-1 overflow-y-auto px-4 pt-3 pb-4 min-h-0">
-          {hasRealKey ? (
-            <div className="text-xs text-destructive bg-destructive/10 rounded p-3">
-              {t("exportRealKeyWarning")}
-            </div>
-          ) : (
-            <pre className="text-xs font-mono text-text-main bg-bg-alt border border-border rounded-lg p-4 overflow-x-auto whitespace-pre-wrap break-all">
-              <code>{currentCode}</code>
-            </pre>
-          )}
-
-          {/* Placeholder hint */}
-          <p className="text-[11px] text-text-muted mt-2">
-            {t("placeholderHintPrefix")}{" "}
-            <code className="font-mono text-primary">{API_KEY_PLACEHOLDER}</code>
-            {" "}{t("placeholderHintSuffix")}
-          </p>
+      {/* Code block */}
+      {hasRealKey ? (
+        <div role="alert" className="text-xs text-error bg-error/10 rounded p-3">
+          {t("exportRealKeyWarning")}
         </div>
+      ) : (
+        <CodePreview
+          variant="surface"
+          filename={activeLabel}
+          language=""
+          code={currentCode}
+          copyLabel={t("copy")}
+          copiedLabel={t("copiedCode")}
+          aria-label={t("copyLangCode", { language: activeLanguage })}
+        />
+      )}
 
-        {/* Footer with copy button */}
-        <div className="flex items-center justify-end gap-3 px-5 py-3 border-t border-border shrink-0">
-          <button
-            onClick={onClose}
-            className="text-xs px-3 py-1.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-          >
-            {t("close")}
-          </button>
-          <button
-            onClick={handleCopy}
-            disabled={hasRealKey}
-            className={`flex items-center gap-1.5 text-xs px-3 py-1.5 rounded border transition-colors ${
-              copied
-                ? "border-green-500 text-green-500 bg-green-500/10"
-                : "border-primary text-primary hover:bg-primary/10"
-            } disabled:opacity-40 disabled:cursor-not-allowed`}
-            aria-label={t("copyLangCode", { language: activeLanguage })}
-          >
-            <span className="material-symbols-outlined text-[14px]">
-              {copied ? "check" : "content_copy"}
-            </span>
-            {copied ? t("copiedCode") : t("copy")}
-          </button>
-        </div>
-      </div>
-    </div>
+      {/* Placeholder hint */}
+      <p className="text-[11px] text-text-muted">
+        {t("placeholderHintPrefix")}{" "}
+        <code className="font-mono text-primary">{API_KEY_PLACEHOLDER}</code>{" "}
+        {t("placeholderHintSuffix")}
+      </p>
+    </Modal>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/playground/components/ImageResultsInline.tsx b/src/app/(dashboard)/dashboard/playground/components/ImageResultsInline.tsx
index 44f295e2e114..0c466f3e3250 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ImageResultsInline.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ImageResultsInline.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 import { useTranslations } from "next-intl";
 
 export interface PlaygroundImageResult {
@@ -89,7 +91,7 @@ export default function ImageResultsInline({ images }: { images: PlaygroundImage
               download={`image-${index + 1}.png`}
               className="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity flex items-center gap-1"
             >
-              <span className="material-symbols-outlined text-[13px]">download</span>
+              <Icon name="download" size={13} />
               {t("save")}
             </a>
           </div>
diff --git a/src/app/(dashboard)/dashboard/playground/components/ImprovePromptButton.tsx b/src/app/(dashboard)/dashboard/playground/components/ImprovePromptButton.tsx
index 78bf25d0aea6..935dfafacfcc 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ImprovePromptButton.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ImprovePromptButton.tsx
@@ -4,6 +4,8 @@
 
 import { useState } from "react";
 import { useTranslations } from "next-intl";
+import Button from "@/shared/components/Button";
+import { ConfirmModal } from "@/shared/components/Modal";
 import { useImprovePrompt } from "../hooks/useImprovePrompt";
 import type { ConfigState, ConfigStateSetter } from "./StudioConfigPane";
 
@@ -60,71 +62,66 @@ export default function ImprovePromptButton({
   return (
     <>
       <div className="flex flex-col gap-1">
-        <button
+        <Button
+          variant="outline"
+          size="sm"
           onClick={() => {
             setImproveError(null);
             setConfirmOpen(true);
           }}
           disabled={isDisabled}
-          className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed self-start"
+          className="gap-1.5 self-start text-xs text-text-muted"
           aria-label={t("improvePromptAria")}
           title={!configState.model.trim() ? t("setModelFirst") : t("improvePromptTitle")}
         >
-          <span className="text-[13px]">✨</span>
+          <span className="text-[13px]" aria-hidden="true">
+            ✨
+          </span>
           {loading ? t("improvingPrompt") : t("improvePrompt")}
-        </button>
+        </Button>
 
-        {improveError && <p className="text-[11px] text-destructive">{improveError}</p>}
+        {improveError && <p className="text-[11px] text-error">{improveError}</p>}
       </div>
 
-      {/* Quota confirmation modal */}
-      {confirmOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-          onClick={() => setConfirmOpen(false)}
-          role="dialog"
-          aria-modal="true"
-          aria-label={t("confirmImprovePrompt")}
-        >
-          <div
-            className="bg-surface border border-border rounded-xl p-5 w-80 shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-start gap-3 mb-4">
-              <span className="text-[24px] shrink-0">✨</span>
-              <div>
-                <h3 className="text-sm font-semibold text-text-main mb-1">{t("improvePrompt")}</h3>
-                <p className="text-xs text-text-muted">
+      {/* Quota confirmation modal (kit Dialog via the ConfirmModal adapter) */}
+      <ConfirmModal
+        isOpen={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={() => void handleConfirm()}
+        title={t("improvePrompt")}
+        variant="primary"
+        cancelText={t("cancel")}
+        confirmText={
+          <>
+            <span className="text-[12px]" aria-hidden="true">
+              ✨
+            </span>
+            {t("improveConfirm")}
+          </>
+        }
+        // Built only while open: the body renders nothing while the dialog is closed.
+        message={
+          confirmOpen && (
+            <span className="flex items-start gap-3">
+              <span className="text-[24px] shrink-0" aria-hidden="true">
+                ✨
+              </span>
+              <span className="flex flex-col">
+                <span className="text-xs text-text-muted">
                   {t.rich("improvePromptDescription", {
                     model: () => (
                       <code className="font-mono text-primary">{configState.model}</code>
                     ),
                   })}
-                </p>
-                <p className="text-xs text-text-muted mt-1.5 font-medium">
+                </span>
+                <span className="text-xs text-text-muted mt-1.5 font-medium">
                   {t("improveQuotaWarning")}
-                </p>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-end gap-2">
-              <button
-                onClick={() => setConfirmOpen(false)}
-                className="text-xs px-3 py-1.5 rounded border border-border text-text-muted hover:text-text-main transition-colors"
-              >
-                {t("cancel")}
-              </button>
-              <button
-                onClick={() => void handleConfirm()}
-                className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors"
-              >
-                <span className="text-[12px]">✨</span>
-                {t("improveConfirm")}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+                </span>
+              </span>
+            </span>
+          )
+        }
+      />
     </>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx b/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
index 38a74a88671c..ed37fffd8802 100644
--- a/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
@@ -1,6 +1,14 @@
 "use client";
 
 // src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@omniroute/ui-kit/table";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -33,7 +41,7 @@ export default function MarkdownMessage({ content, className }: MarkdownMessageP
       if (isBlock) {
         return (
           <pre
-            className="overflow-x-auto rounded bg-neutral-900 p-3 text-sm text-neutral-100 my-2"
+            className="overflow-x-auto rounded bg-surface-2 p-3 text-sm text-text-muted my-2"
             data-language={language}
           >
             <code className={codeClassName ?? ""} {...props}>
@@ -46,7 +54,7 @@ export default function MarkdownMessage({ content, className }: MarkdownMessageP
       // Inline code
       return (
         <code
-          className="rounded bg-neutral-200 dark:bg-neutral-800 px-1 py-0.5 text-sm font-mono text-neutral-800 dark:text-neutral-200"
+          className="rounded bg-bg-subtle px-1 py-0.5 text-sm font-mono text-text-muted"
           {...props}
         >
           {children}
@@ -54,30 +62,29 @@ export default function MarkdownMessage({ content, className }: MarkdownMessageP
       );
     },
 
-    // Tables (GFM)
+    // Tables (GFM) — kit Table primitives (persistent horizontal scrollbar from the kit)
     table({ children }) {
       return (
-        <div className="overflow-x-auto my-2">
-          <table className="min-w-full border-collapse text-sm">{children}</table>
-        </div>
+        // Native scrollbar only: chat bubbles stay light (no persistent-scrollbar observer).
+        <Table containerClassName="my-2" className="text-sm" persistentScrollbars={false}>
+          {children}
+        </Table>
       );
     },
     thead({ children }) {
-      return <thead className="bg-neutral-100 dark:bg-neutral-800">{children}</thead>;
+      return <TableHeader>{children}</TableHeader>;
+    },
+    tbody({ children }) {
+      return <TableBody>{children}</TableBody>;
+    },
+    tr({ children }) {
+      return <TableRow>{children}</TableRow>;
     },
     th({ children }) {
-      return (
-        <th className="border border-neutral-300 dark:border-neutral-600 px-3 py-1.5 text-left font-semibold">
-          {children}
-        </th>
-      );
+      return <TableHead>{children}</TableHead>;
     },
     td({ children }) {
-      return (
-        <td className="border border-neutral-300 dark:border-neutral-600 px-3 py-1.5">
-          {children}
-        </td>
-      );
+      return <TableCell>{children}</TableCell>;
     },
 
     // Links — open in new tab with rel noopener for security
@@ -87,7 +94,7 @@ export default function MarkdownMessage({ content, className }: MarkdownMessageP
           href={href}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-blue-600 dark:text-blue-400 underline hover:no-underline"
+          className="text-info underline hover:no-underline"
         >
           {children}
         </a>
@@ -127,7 +134,7 @@ export default function MarkdownMessage({ content, className }: MarkdownMessageP
     // Blockquotes
     blockquote({ children }) {
       return (
-        <blockquote className="border-l-4 border-neutral-400 pl-3 italic text-neutral-600 dark:text-neutral-400 my-2">
+        <blockquote className="border-l-4 border-border pl-3 italic text-text-muted my-2">
           {children}
         </blockquote>
       );
@@ -135,7 +142,7 @@ export default function MarkdownMessage({ content, className }: MarkdownMessageP
 
     // Horizontal rule
     hr() {
-      return <hr className="my-3 border-neutral-300 dark:border-neutral-600" />;
+      return <hr className="my-3 border-border" />;
     },
 
     // Strong / emphasis
diff --git a/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx b/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
index c1e738cdd4b2..157b6481b579 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
@@ -3,6 +3,9 @@
 // src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
 
 import { useTranslations } from "next-intl";
+import { Slider } from "@omniroute/ui-kit/slider";
+import Input from "@/shared/components/Input";
+import Toggle from "@/shared/components/Toggle";
 
 export interface PlaygroundParams {
   temperature: number;
@@ -49,29 +52,31 @@ interface SliderRowProps {
 function SliderRow({ label, value, min, max, step, onChange }: SliderRowProps) {
   return (
     <div className="flex flex-col gap-1">
-      <div className="flex items-center justify-between">
-        <label className="text-xs text-text-muted font-medium">{label}</label>
-        <input
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs text-text-muted font-medium">{label}</span>
+        <Input
           type="number"
           value={value}
           min={min}
           max={max}
           step={step}
+          aria-label={label}
           onChange={(e) => {
             const v = parseFloat(e.target.value);
             if (!isNaN(v)) onChange(Math.min(max, Math.max(min, v)));
           }}
-          className="w-16 text-xs text-right bg-surface border border-border rounded px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary"
+          className="w-20"
+          inputClassName="text-xs text-right"
         />
       </div>
-      <input
-        type="range"
+      <Slider
+        aria-label={label}
         min={min}
         max={max}
         step={step}
         value={value}
-        onChange={(e) => onChange(parseFloat(e.target.value))}
-        className="w-full accent-primary h-1.5"
+        showValue={false}
+        onValueChange={(next) => onChange(next)}
       />
     </div>
   );
@@ -135,50 +140,37 @@ export default function ParamSliders({ params, setParams }: ParamSlidersProps) {
       />
 
       {/* Seed input */}
-      <div className="flex flex-col gap-1">
-        <label className="text-xs text-text-muted font-medium">{t("seed")}</label>
-        <input
-          type="number"
-          value={params.seed ?? ""}
-          placeholder={t("seedPlaceholder")}
-          onChange={(e) => {
-            const raw = e.target.value;
-            update("seed", raw === "" ? null : parseInt(raw, 10));
-          }}
-          className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary"
-        />
-      </div>
+      <Input
+        label={t("seed")}
+        type="number"
+        value={params.seed ?? ""}
+        placeholder={t("seedPlaceholder")}
+        onChange={(e) => {
+          const raw = e.target.value;
+          update("seed", raw === "" ? null : parseInt(raw, 10));
+        }}
+        inputClassName="text-xs"
+      />
 
       {/* Stop sequences */}
-      <div className="flex flex-col gap-1">
-        <label className="text-xs text-text-muted font-medium">{t("stopSequences")}</label>
-        <input
-          type="text"
-          value={params.stop}
-          placeholder={t("stopSequencesPlaceholder")}
-          onChange={(e) => update("stop", e.target.value)}
-          className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary"
-        />
-      </div>
+      <Input
+        label={t("stopSequences")}
+        type="text"
+        value={params.stop}
+        placeholder={t("stopSequencesPlaceholder")}
+        onChange={(e) => update("stop", e.target.value)}
+        inputClassName="text-xs"
+      />
 
       {/* JSON mode toggle */}
       <div className="flex items-center justify-between">
-        <label className="text-xs text-text-muted font-medium">{t("jsonMode")}</label>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={params.jsonMode}
-          onClick={() => update("jsonMode", !params.jsonMode)}
-          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/30 ${
-            params.jsonMode ? "bg-primary" : "bg-neutral-300 dark:bg-neutral-600"
-          }`}
-        >
-          <span
-            className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
-              params.jsonMode ? "translate-x-4" : "translate-x-0.5"
-            }`}
-          />
-        </button>
+        <span className="text-xs text-text-muted font-medium">{t("jsonMode")}</span>
+        <Toggle
+          size="sm"
+          checked={params.jsonMode}
+          onChange={() => update("jsonMode", !params.jsonMode)}
+          ariaLabel={t("jsonMode")}
+        />
       </div>
     </div>
   );
diff --git a/src/app/(dashboard)/dashboard/playground/components/PresetPicker.tsx b/src/app/(dashboard)/dashboard/playground/components/PresetPicker.tsx
index fdb915629b7c..04125e989c43 100644
--- a/src/app/(dashboard)/dashboard/playground/components/PresetPicker.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/PresetPicker.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Input from "@/shared/components/Input";
+import Modal from "@/shared/components/Modal";
+import Select from "@/shared/components/Select";
+
 // src/app/(dashboard)/dashboard/playground/components/PresetPicker.tsx
 
 import { useEffect, useState } from "react";
@@ -94,9 +99,9 @@ export default function PresetPicker({ configState, setConfigState }: PresetPick
           {t("presetsLabel")}
         </span>
 
-        {/* Load preset select */}
+        {/* Load preset select (native kit select: the value is reset after each load) */}
         <div className="flex items-center gap-2">
-          <select
+          <Select
             disabled={loading || presets.length === 0}
             onChange={(e) => {
               if (e.target.value) {
@@ -106,7 +111,8 @@ export default function PresetPicker({ configState, setConfigState }: PresetPick
               }
             }}
             defaultValue=""
-            className="flex-1 text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex-1"
+            selectClassName="text-xs"
             aria-label={t("loadPreset")}
           >
             <option value="" disabled>
@@ -121,15 +127,17 @@ export default function PresetPicker({ configState, setConfigState }: PresetPick
                 {preset.name}
               </option>
             ))}
-          </select>
+          </Select>
 
-          <button
+          <Button
+            variant="outline"
+            size="sm"
             onClick={openSave}
-            className="text-xs px-2.5 py-1.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0"
+            className="shrink-0 text-xs"
             aria-label={t("savePreset")}
           >
             {t("save")}
-          </button>
+          </Button>
         </div>
 
         {/* Preset list with delete buttons (compact) */}
@@ -140,77 +148,62 @@ export default function PresetPicker({ configState, setConfigState }: PresetPick
                 key={preset.id}
                 className="flex items-center justify-between text-[11px] text-text-muted hover:text-text-main group"
               >
-                <button
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => handleLoad(preset.id)}
-                  className="truncate text-left flex-1 hover:text-primary transition-colors"
+                  className="h-auto min-h-0 flex-1 justify-start truncate px-1 py-0.5 text-left text-[11px] font-normal"
                   aria-label={`Load preset "${preset.name}"`}
                 >
                   {preset.name}
                   <span className="ml-1.5 opacity-60">{preset.model}</span>
-                </button>
-                <button
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => void remove(preset.id)}
-                  className="opacity-0 group-hover:opacity-100 p-0.5 text-text-muted hover:text-destructive transition-all"
+                  className="text-text-muted hover:text-error opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100"
                   aria-label={`Delete preset "${preset.name}"`}
-                >
-                  <span className="material-symbols-outlined text-[12px]">delete</span>
-                </button>
+                  icon="delete"
+                />
               </div>
             ))}
           </div>
         )}
       </div>
 
-      {/* Save preset modal */}
-      {saveModalOpen && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-          onClick={closeSave}
-          role="dialog"
-          aria-modal="true"
-          aria-label={t("savePreset")}
-        >
-          <div
-            className="bg-surface border border-border rounded-xl p-5 w-80 shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h3 className="text-sm font-semibold text-text-main mb-4">{t("savePreset")}</h3>
-
-            <div className="flex flex-col gap-3">
-              <input
-                type="text"
-                value={presetName}
-                onChange={(e) => setPresetName(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") void handleSave();
-                  if (e.key === "Escape") closeSave();
-                }}
-                placeholder={t("presetNamePlaceholder")}
-                autoFocus
-                className="text-xs bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
-              />
-
-              {saveError && <p className="text-xs text-destructive">{saveError}</p>}
-
-              <div className="flex items-center justify-end gap-2">
-                <button
-                  onClick={closeSave}
-                  className="text-xs px-3 py-1.5 rounded border border-border text-text-muted hover:text-text-main transition-colors"
-                >
-                  {t("cancel")}
-                </button>
-                <button
-                  onClick={() => void handleSave()}
-                  disabled={saving}
-                  className="text-xs px-3 py-1.5 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-                >
-                  {saving ? t("savingPreset") : t("save")}
-                </button>
-              </div>
-            </div>
-          </div>
+      {/* Save preset modal (kit Dialog via the Modal adapter: focus trap, Escape, portal) */}
+      <Modal
+        isOpen={saveModalOpen}
+        onClose={closeSave}
+        title={t("savePreset")}
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" size="sm" onClick={closeSave}>
+              {t("cancel")}
+            </Button>
+            <Button size="sm" onClick={() => void handleSave()} disabled={saving}>
+              {saving ? t("savingPreset") : t("save")}
+            </Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-3">
+          <Input
+            type="text"
+            value={presetName}
+            onChange={(e) => setPresetName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void handleSave();
+            }}
+            placeholder={t("presetNamePlaceholder")}
+            aria-label={t("presetNamePlaceholder")}
+            autoFocus
+            error={saveError ?? undefined}
+          />
         </div>
-      )}
+      </Modal>
     </>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/playground/components/ReasoningControls.tsx b/src/app/(dashboard)/dashboard/playground/components/ReasoningControls.tsx
index 2a6bb4462e30..717fc3351601 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ReasoningControls.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ReasoningControls.tsx
@@ -9,6 +9,8 @@
 import type { PlaygroundParams } from "./ParamSliders";
 import type { ReasoningControlSpec } from "./reasoningControlUtils";
 import { useTranslations } from "next-intl";
+import Select from "@/shared/components/Select";
+import Toggle from "@/shared/components/Toggle";
 
 interface ReasoningControlsProps {
   spec: ReasoningControlSpec;
@@ -37,41 +39,29 @@ export default function ReasoningControls({ spec, params, setParams }: Reasoning
 
       {/* Thinking toggle */}
       <div className="flex items-center justify-between">
-        <label className="text-xs text-text-muted font-medium">{t("thinking")}</label>
-        <button
-          type="button"
-          role="switch"
-          aria-checked={params.thinking}
-          aria-label={t("thinking")}
-          onClick={() => update("thinking", !params.thinking)}
-          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/30 ${
-            params.thinking ? "bg-primary" : "bg-neutral-300 dark:bg-neutral-600"
-          }`}
-        >
-          <span
-            className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
-              params.thinking ? "translate-x-4" : "translate-x-0.5"
-            }`}
-          />
-        </button>
+        <span className="text-xs text-text-muted font-medium">{t("thinking")}</span>
+        <Toggle
+          size="sm"
+          checked={params.thinking}
+          ariaLabel={t("thinking")}
+          onChange={() => update("thinking", !params.thinking)}
+        />
       </div>
 
-      {/* Effort selector */}
-      <div className="flex flex-col gap-1">
-        <label className="text-xs text-text-muted font-medium">{t("effort")}</label>
-        <select
-          value={params.effort}
-          onChange={(e) => update("effort", e.target.value)}
-          className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
-        >
-          <option value="">{t("effortDefault")}</option>
-          {spec.effortOptions.map((opt) => (
-            <option key={opt} value={opt}>
-              {effortLabel(opt)}
-            </option>
-          ))}
-        </select>
-      </div>
+      {/* Effort selector (native kit select: the "" default option stays a real choice) */}
+      <Select
+        label={t("effort")}
+        value={params.effort}
+        onChange={(e) => update("effort", e.target.value)}
+        selectClassName="text-xs"
+      >
+        <option value="">{t("effortDefault")}</option>
+        {spec.effortOptions.map((opt) => (
+          <option key={opt} value={opt}>
+            {effortLabel(opt)}
+          </option>
+        ))}
+      </Select>
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/playground/components/StructuredOutputEditor.tsx b/src/app/(dashboard)/dashboard/playground/components/StructuredOutputEditor.tsx
index 8b35a5e86b36..d25eab2eaf64 100644
--- a/src/app/(dashboard)/dashboard/playground/components/StructuredOutputEditor.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/StructuredOutputEditor.tsx
@@ -2,6 +2,10 @@
 
 // src/app/(dashboard)/dashboard/playground/components/StructuredOutputEditor.tsx
 
+import Button from "@/shared/components/Button";
+import Input from "@/shared/components/Input";
+import Toggle from "@/shared/components/Toggle";
+import Textarea from "@/shared/components/Textarea";
 import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { useStructuredOutput } from "../hooks/useStructuredOutput";
@@ -65,71 +69,56 @@ export default function StructuredOutputEditor({ structuredOutput }: StructuredO
           <span className="text-xs font-medium text-text-main">{t("jsonMode")}</span>
           <span className="text-[11px] text-text-muted">{t("jsonModeDescription")}</span>
         </div>
-        <button
-          role="switch"
-          aria-checked={enabled}
-          onClick={() => setEnabled(!enabled)}
-          className={`relative inline-flex w-10 h-5 rounded-full transition-colors ${
-            enabled ? "bg-primary" : "bg-text-muted/30"
-          }`}
-          aria-label={enabled ? t("disableJsonMode") : t("enableJsonMode")}
-        >
-          <span
-            className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
-              enabled ? "translate-x-5" : "translate-x-0"
-            }`}
-          />
-        </button>
+        <Toggle
+          size="sm"
+          checked={enabled}
+          onChange={() => setEnabled(!enabled)}
+          ariaLabel={enabled ? t("disableJsonMode") : t("enableJsonMode")}
+        />
       </div>
 
       {/* Schema editor (shown only when enabled) */}
       {enabled && (
         <div className="flex flex-col gap-2 border border-border rounded-lg p-3 bg-surface">
           {/* Schema name */}
-          <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted uppercase tracking-wider">
-              {t("schemaName")}
-            </label>
-            <input
-              type="text"
-              value={nameField}
-              onChange={(e) => setNameField(e.target.value)}
-              placeholder="my_schema"
-              className="text-xs bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
-            />
-          </div>
+          <Input
+            label={t("schemaName")}
+            type="text"
+            value={nameField}
+            onChange={(e) => setNameField(e.target.value)}
+            placeholder="my_schema"
+            inputClassName="text-xs"
+          />
 
           {/* Schema JSON textarea */}
           <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted uppercase tracking-wider">
+            <span
+              className="text-[10px] text-text-muted uppercase tracking-wider"
+              aria-hidden="true"
+            >
               {t("jsonSchema")}
-            </label>
-            <textarea
+            </span>
+            <Textarea
               value={schemaRaw}
               onChange={(e) => setSchemaRaw(e.target.value)}
               rows={8}
-              className="text-xs font-mono bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-y"
               aria-label={t("jsonSchemaEditor")}
+              className="text-xs font-mono resize-y"
             />
           </div>
 
           {/* Errors */}
-          {(parseError ?? error) && (
-            <p className="text-xs text-destructive">{parseError ?? error}</p>
-          )}
+          {(parseError ?? error) && <p className="text-xs text-error">{parseError ?? error}</p>}
 
           {/* Status — show when schema is set and no errors */}
           {schema != null && !parseError && !error && (
-            <p className="text-xs text-green-600 dark:text-green-400">✓ {t("schemaValidated")}</p>
+            <p className="text-xs text-success">✓ {t("schemaValidated")}</p>
           )}
 
           {/* Validate button */}
-          <button
-            onClick={handleValidate}
-            className="text-xs px-3 py-1.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors self-start"
-          >
+          <Button variant="outline" size="sm" onClick={handleValidate} className="self-start">
             {t("validateSchema")}
-          </button>
+          </Button>
         </div>
       )}
     </div>
diff --git a/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx b/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
index f7b291a9f7ee..2f6b64fc1e74 100644
--- a/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
@@ -1,8 +1,13 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Input from "@/shared/components/Input";
+import Select from "@/shared/components/Select";
+import Textarea from "@/shared/components/Textarea";
+
 // src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
 
-import { useEffect, useMemo, useState, type Dispatch, type SetStateAction } from "react";
+import { useEffect, useId, useMemo, useState, type Dispatch, type SetStateAction } from "react";
 import { useTranslations } from "next-intl";
 import ParamSliders, { type PlaygroundParams } from "./ParamSliders";
 import type { PlaygroundEndpoint } from "@/lib/playground/codeExport";
@@ -65,6 +70,8 @@ const ENDPOINT_OPTIONS: Array<{ value: PlaygroundEndpoint; labelKey: string }> =
 export default function StudioConfigPane({ configState, setConfigState }: StudioConfigPaneProps) {
   const t = useTranslations("common");
   const tp = useTranslations("playground");
+  const modelLabelId = useId();
+  const systemPromptId = useId();
   const [collapsed, setCollapsed] = useState(false);
   // #4086: search/filter query for the Model dropdown — flat provider catalogs (e.g.
   // 50+ OpenRouter models) made the plain <select> unusable without scrolling.
@@ -144,14 +151,15 @@ export default function StudioConfigPane({ configState, setConfigState }: Studio
   if (collapsed) {
     return (
       <div className="flex flex-col items-center w-8 shrink-0">
-        <button
+        <Button
+          variant="ghost"
+          size="icon-sm"
           onClick={() => setCollapsed(false)}
-          className="mt-2 p-1.5 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-text-main transition-colors"
+          className="mt-2 text-text-muted"
           title={tp("expandConfig")}
           aria-label={tp("expandConfig")}
-        >
-          <span className="material-symbols-outlined text-[18px]">settings</span>
-        </button>
+          icon="settings"
+        />
       </div>
     );
   }
@@ -166,14 +174,15 @@ export default function StudioConfigPane({ configState, setConfigState }: Studio
         <span className="text-xs font-semibold text-text-muted uppercase tracking-wider">
           {tp("configPane")}
         </span>
-        <button
+        <Button
+          variant="ghost"
+          size="icon-sm"
           onClick={() => setCollapsed(true)}
-          className="p-1 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-text-main transition-colors"
+          className="text-text-muted"
           title={tp("collapseConfig")}
           aria-label={tp("collapseConfig")}
-        >
-          <span className="material-symbols-outlined text-[16px]">chevron_right</span>
-        </button>
+          icon="chevron_right"
+        />
       </div>
 
       <div className="flex flex-col gap-5 p-4">
@@ -181,103 +190,105 @@ export default function StudioConfigPane({ configState, setConfigState }: Studio
         <PresetPicker configState={configState} setConfigState={setConfigState} />
 
         {/* Endpoint */}
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-text-muted uppercase tracking-wider">
-            {tp("endpointLabel")}
-          </label>
-          <select
-            value={configState.endpoint}
-            onChange={(e) => update("endpoint", e.target.value as PlaygroundEndpoint)}
-            className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
-          >
-            {ENDPOINT_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {tp(`endpointOptions.${opt.labelKey}`)} — {endpointToPath(opt.value)}
-              </option>
-            ))}
-          </select>
-        </div>
+        <Select
+          label={tp("endpointLabel")}
+          value={configState.endpoint}
+          onChange={(e) => update("endpoint", e.target.value as PlaygroundEndpoint)}
+          selectClassName="text-xs"
+        >
+          {ENDPOINT_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {tp(`endpointOptions.${opt.labelKey}`)} — {endpointToPath(opt.value)}
+            </option>
+          ))}
+        </Select>
 
         {/* Provider */}
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-text-muted uppercase tracking-wider">
-            {tp("provider")}
-          </label>
-          <select
-            value={provider}
-            onChange={(e) => {
-              const nextProvider = e.target.value;
-              setProvider(nextProvider);
-              setConfigState((current) => ({
-                ...current,
-                provider: nextProvider,
-                model: "",
-              }));
-            }}
-            disabled={loadingProviders}
-            className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
-          >
-            <option value="">{tp("autoProvider")}</option>
-            {providerOptions.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
+        <Select
+          label={tp("provider")}
+          value={provider}
+          onChange={(e) => {
+            const nextProvider = e.target.value;
+            setProvider(nextProvider);
+            setConfigState((current) => ({
+              ...current,
+              provider: nextProvider,
+              model: "",
+            }));
+          }}
+          disabled={loadingProviders}
+          selectClassName="text-xs"
+        >
+          <option value="">{tp("autoProvider")}</option>
+          {providerOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </Select>
 
         {/* Model */}
         <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-text-muted uppercase tracking-wider">
+          <span
+            id={modelLabelId}
+            className="text-xs font-medium text-text-muted uppercase tracking-wider"
+          >
             {tp("model")}
-          </label>
+          </span>
           {availableModels.length > 0 ? (
             <>
               {availableModels.length > 1 && (
-                <input
+                <Input
                   type="text"
                   value={modelQuery}
                   onChange={(e) => setModelQuery(e.target.value)}
                   placeholder={t("search")}
                   aria-label={t("search")}
-                  className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+                  icon="search"
+                  inputClassName="text-xs"
                 />
               )}
-              <select
+              <Select
+                aria-labelledby={modelLabelId}
                 value={configState.model}
                 onChange={(e) => update("model", e.target.value)}
                 disabled={loadingModels}
-                className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+                selectClassName="text-xs"
               >
                 {filteredModels.map((m) => (
                   <option key={m} value={m}>
                     {m}
                   </option>
                 ))}
-              </select>
+              </Select>
             </>
           ) : (
-            <input
+            <Input
               type="text"
+              aria-labelledby={modelLabelId}
               value={configState.model}
               onChange={(e) => update("model", e.target.value)}
               placeholder={tp("modelPlaceholder")}
-              className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+              inputClassName="text-xs"
             />
           )}
         </div>
 
         {/* System prompt */}
         <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-medium text-text-muted uppercase tracking-wider">
+          <label
+            htmlFor={systemPromptId}
+            className="text-xs font-medium text-text-muted uppercase tracking-wider"
+          >
             {tp("systemPrompt")}
           </label>
-          <textarea
+          <Textarea
+            id={systemPromptId}
             value={configState.systemPrompt}
             onChange={(e) => update("systemPrompt", e.target.value)}
             placeholder={tp("systemPromptPlaceholder")}
             rows={4}
-            className="w-full text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-y"
+            className="text-xs resize-y"
           />
           {/* ImprovePromptButton — injected by F7 */}
           <ImprovePromptButton configState={configState} setConfigState={setConfigState} />
diff --git a/src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx b/src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx
index 78839c938892..d12fdfef8024 100644
--- a/src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import Button from "@/shared/components/Button";
+import Modal from "@/shared/components/Modal";
+import SegmentedControl from "@/shared/components/SegmentedControl";
+
 // src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx
 
 import { useState } from "react";
@@ -36,32 +40,26 @@ const TABS: TabConfig[] = [
  * Top bar with tab switcher, token/cost counter, and export code button.
  * Export code modal uses ExportCodeModal (F7) when exportState is provided.
  */
-export default function StudioTopBar({ activeTab, onTabChange, metrics, exportState }: StudioTopBarProps) {
+export default function StudioTopBar({
+  activeTab,
+  onTabChange,
+  metrics,
+  exportState,
+}: StudioTopBarProps) {
   const t = useTranslations("playground");
   const [exportOpen, setExportOpen] = useState(false);
 
   return (
     <>
-      <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-bg-alt shrink-0">
-        {/* Tabs */}
-        <div className="flex items-center gap-1" role="tablist">
-          {TABS.map((tab) => (
-            <button
-              key={tab.id}
-              role="tab"
-              aria-selected={activeTab === tab.id}
-              onClick={() => onTabChange(tab.id)}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
-                activeTab === tab.id
-                  ? "bg-primary/10 text-primary"
-                  : "text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5"
-              }`}
-            >
-              <span className="material-symbols-outlined text-[16px]">{tab.icon}</span>
-              <span>{t(tab.labelKey)}</span>
-            </button>
-          ))}
-        </div>
+      <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-border bg-bg-alt shrink-0">
+        {/* Tabs (kit capsule tabs via the SegmentedControl adapter) */}
+        <SegmentedControl
+          options={TABS.map((tab) => ({ value: tab.id, label: t(tab.labelKey), icon: tab.icon }))}
+          value={activeTab}
+          onChange={(value) => onTabChange(value as StudioTab)}
+          aria-label={t("playgroundTabs")}
+          size="sm"
+        />
 
         {/* Right side: token counter + export button */}
         <div className="flex items-center gap-3">
@@ -71,15 +69,19 @@ export default function StudioTopBar({ activeTab, onTabChange, metrics, exportSt
             costUsd={metrics.costUsd}
           />
 
-          <button
+          <Button
+            variant="outline"
+            size="sm"
             onClick={() => setExportOpen(true)}
-            className="flex items-center gap-1 text-xs px-2.5 py-1.5 rounded border border-border hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-text-main transition-colors"
+            className="gap-1 text-xs text-text-muted"
             title={t("exportCode")}
             aria-label={t("exportCode")}
           >
-            <span className="font-mono text-[11px]">&lt;/&gt;</span>
+            <span className="font-mono text-[11px]" aria-hidden="true">
+              &lt;/&gt;
+            </span>
             <span>{t("exportShort")}</span>
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -87,31 +89,13 @@ export default function StudioTopBar({ activeTab, onTabChange, metrics, exportSt
       {exportOpen && exportState != null && (
         <ExportCodeModal state={exportState} onClose={() => setExportOpen(false)} />
       )}
-      {exportOpen && exportState == null && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
-          onClick={() => setExportOpen(false)}
-        >
-          <div
-            className="bg-surface border border-border rounded-xl p-6 w-[480px] max-w-full shadow-xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-sm font-semibold text-text-main">{t("exportCodeTitle")}</h2>
-              <button
-                onClick={() => setExportOpen(false)}
-                className="text-text-muted hover:text-text-main"
-                aria-label={t("closeExportModal")}
-              >
-                <span className="material-symbols-outlined text-[18px]">close</span>
-              </button>
-            </div>
-            <p className="text-sm text-text-muted">
-              {t("noStateToExport")}
-            </p>
-          </div>
-        </div>
-      )}
+      <Modal
+        isOpen={exportOpen && exportState == null}
+        onClose={() => setExportOpen(false)}
+        title={t("exportCodeTitle")}
+      >
+        <p className="text-sm text-text-muted">{t("noStateToExport")}</p>
+      </Modal>
     </>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/playground/components/TokenCostCounter.tsx b/src/app/(dashboard)/dashboard/playground/components/TokenCostCounter.tsx
index 5975cd769674..c1ba8ee5cded 100644
--- a/src/app/(dashboard)/dashboard/playground/components/TokenCostCounter.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/TokenCostCounter.tsx
@@ -21,9 +21,7 @@ export default function TokenCostCounter({ tokensIn, tokensOut, costUsd }: Token
     <span className="text-xs text-text-muted flex items-center gap-1 font-mono">
       {tokensIn > 0 && <span>{tokensIn}↑</span>}
       {tokensOut > 0 && <span>{tokensOut}↓</span>}
-      {costUsd !== null && costUsd > 0 && (
-        <span>· ${costUsd.toFixed(4)} (estimated)</span>
-      )}
+      {costUsd !== null && costUsd > 0 && <span>· ${costUsd.toFixed(4)} (estimated)</span>}
     </span>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/playground/components/ToolsBuilder.tsx b/src/app/(dashboard)/dashboard/playground/components/ToolsBuilder.tsx
index 942d3c0fd8f1..7c78be0fc8ac 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ToolsBuilder.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ToolsBuilder.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+import Input from "@/shared/components/Input";
+import Textarea from "@/shared/components/Textarea";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+
 // src/app/(dashboard)/dashboard/playground/components/ToolsBuilder.tsx
 
 import { useState } from "react";
@@ -125,9 +130,7 @@ export default function ToolsBuilder({ toolsBuilder }: ToolsBuilderProps) {
                 {/* Tool header */}
                 <div className="flex items-center justify-between px-3 py-2 bg-bg-alt">
                   <div className="flex items-center gap-2">
-                    <span className="material-symbols-outlined text-[14px] text-text-muted">
-                      function
-                    </span>
+                    <Icon name="function" size={14} className="text-text-muted" />
                     <code className="text-xs font-mono text-text-main">{tool.function.name}</code>
                     {tool.function.description && (
                       <span className="text-[11px] text-text-muted truncate max-w-[200px]">
@@ -137,64 +140,62 @@ export default function ToolsBuilder({ toolsBuilder }: ToolsBuilderProps) {
                   </div>
                   <div className="flex items-center gap-1">
                     {!isEditing && (
-                      <button
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
                         onClick={() => startEdit(idx)}
-                        className="p-1 rounded text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+                        className="text-text-muted"
                         aria-label={t("editTool", { name: tool.function.name })}
-                      >
-                        <span className="material-symbols-outlined text-[14px]">edit</span>
-                      </button>
+                        icon="edit"
+                      />
                     )}
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
                       onClick={() => remove(idx)}
-                      className="p-1 rounded text-text-muted hover:text-destructive transition-colors"
+                      className="text-text-muted hover:text-error"
                       aria-label={t("removeTool", { name: tool.function.name })}
-                    >
-                      <span className="material-symbols-outlined text-[14px]">delete</span>
-                    </button>
+                      icon="delete"
+                    />
                   </div>
                 </div>
 
                 {/* Edit form */}
                 {isEditing && editDraft != null && (
                   <div className="flex flex-col gap-2 p-3 bg-surface">
-                    <input
+                    <Input
                       type="text"
                       value={editDraft.name}
                       onChange={(e) => setEditDraft({ ...editDraft, name: e.target.value })}
                       placeholder={t("toolNamePlaceholder")}
-                      className="text-xs bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+                      aria-label={t("toolNamePlaceholder")}
+                      inputClassName="text-xs"
                     />
-                    <input
+                    <Input
                       type="text"
                       value={editDraft.description}
                       onChange={(e) => setEditDraft({ ...editDraft, description: e.target.value })}
                       placeholder={t("toolDescPlaceholder")}
-                      className="text-xs bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+                      aria-label={t("toolDescPlaceholder")}
+                      inputClassName="text-xs"
                     />
-                    <textarea
+                    <Textarea
                       value={editDraft.parametersRaw}
                       onChange={(e) =>
                         setEditDraft({ ...editDraft, parametersRaw: e.target.value })
                       }
                       rows={6}
-                      className="text-xs font-mono bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-y"
                       aria-label={t("toolParamsJsonSchema")}
+                      className="text-xs font-mono resize-y"
                     />
-                    {toolError && <p className="text-xs text-destructive">{toolError}</p>}
+                    {toolError && <p className="text-xs text-error">{toolError}</p>}
                     <div className="flex items-center gap-2">
-                      <button
-                        onClick={() => handleUpdate(idx)}
-                        className="text-xs px-2.5 py-1 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors"
-                      >
+                      <Button size="sm" onClick={() => handleUpdate(idx)}>
                         {t("save")}
-                      </button>
-                      <button
-                        onClick={cancelEdit}
-                        className="text-xs px-2.5 py-1 rounded border border-border text-text-muted hover:text-text-main transition-colors"
-                      >
+                      </Button>
+                      <Button variant="outline" size="sm" onClick={cancelEdit}>
                         {t("cancel")}
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 )}
@@ -210,43 +211,42 @@ export default function ToolsBuilder({ toolsBuilder }: ToolsBuilderProps) {
           {t("addTool")}
         </span>
 
-        <input
+        <Input
           type="text"
           value={form.name}
           onChange={(e) => setForm({ ...form, name: e.target.value })}
           placeholder={t("toolNameRequiredPlaceholder")}
-          className="text-xs bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+          aria-label={t("toolNameRequiredPlaceholder")}
+          inputClassName="text-xs"
         />
 
-        <input
+        <Input
           type="text"
           value={form.description}
           onChange={(e) => setForm({ ...form, description: e.target.value })}
           placeholder={t("toolDescPlaceholder")}
-          className="text-xs bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main"
+          aria-label={t("toolDescPlaceholder")}
+          inputClassName="text-xs"
         />
 
         <div className="flex flex-col gap-1">
-          <label className="text-[10px] text-text-muted uppercase tracking-wider">
+          <span className="text-[10px] text-text-muted uppercase tracking-wider" aria-hidden="true">
             {t("toolParamsLabel")}
-          </label>
-          <textarea
+          </span>
+          <Textarea
             value={form.parametersRaw}
             onChange={(e) => setForm({ ...form, parametersRaw: e.target.value })}
             rows={6}
-            className="text-xs font-mono bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-y"
             aria-label={t("toolParamsJsonSchema")}
+            className="text-xs font-mono resize-y"
           />
         </div>
 
-        {formError && <p className="text-xs text-destructive">{formError}</p>}
+        {formError && <p className="text-xs text-error">{formError}</p>}
 
-        <button
-          onClick={handleAdd}
-          className="text-xs px-3 py-1.5 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors self-start"
-        >
-          + {t("addTool")}
-        </button>
+        <Button size="sm" icon="add" onClick={handleAdd} className="self-start">
+          {t("addTool")}
+        </Button>
       </div>
     </div>
   );
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx
index f10b894009d0..c306cc4dbe58 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Icon from "@/shared/components/Icon";
+
 // src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx
 // D14: Preserves 100% of the original page.tsx Monaco multi-endpoint editor.
 // Content migrated from src/app/(dashboard)/dashboard/playground/page.tsx (889 LOC).
@@ -7,7 +9,9 @@
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { useTranslations } from "next-intl";
+// Barrel import kept on purpose: tests/unit/ui/playground-api-tab.test.tsx mocks "@/shared/components".
 import { Card, Button, Select, Badge } from "@/shared/components";
+import Input from "@/shared/components/Input";
 import { ALIAS_TO_ID } from "@/shared/constants/providers";
 import { pickDisplayValue } from "@/shared/utils/maskEmail";
 import useEmailPrivacyStore from "@/store/emailPrivacyStore";
@@ -486,9 +490,7 @@ export default function ApiTab(_props: ApiTabProps) {
     <div className="space-y-5 p-4 overflow-y-auto">
       {/* Info Banner */}
       <div className="flex items-start gap-3 px-4 py-3 rounded-lg bg-primary/5 border border-primary/10 text-sm text-text-muted">
-        <span className="material-symbols-outlined text-primary text-[20px] mt-0.5 shrink-0">
-          science
-        </span>
+        <Icon name="science" size={20} className="text-primary mt-0.5" />
         <div>
           <p className="font-medium text-text-main mb-0.5">{t("title")}</p>
           <p>{t("description")}</p>
@@ -499,10 +501,8 @@ export default function ApiTab(_props: ApiTabProps) {
       <Card>
         <div className="p-4 flex flex-col sm:flex-row items-end gap-4">
           <div className="flex-1 w-full">
-            <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
-              {t("endpoint")}
-            </label>
             <Select
+              label={t("endpoint")}
               value={selectedEndpoint}
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                 handleEndpointChange(e.target.value)
@@ -514,10 +514,8 @@ export default function ApiTab(_props: ApiTabProps) {
 
           {!isSearchEndpoint && (
             <div className="flex-1 w-full">
-              <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
-                {t("provider")}
-              </label>
               <Select
+                label={t("provider")}
                 value={selectedProvider}
                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                   handleProviderChange(e.target.value)
@@ -530,10 +528,8 @@ export default function ApiTab(_props: ApiTabProps) {
 
           {!isSearchEndpoint && (
             <div className="flex-1 w-full">
-              <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
-                {t("model")}
-              </label>
               <Select
+                label={t("model")}
                 value={selectedModel}
                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                   handleModelChange(e.target.value)
@@ -546,10 +542,8 @@ export default function ApiTab(_props: ApiTabProps) {
 
           {!isSearchEndpoint && (
             <div className="flex-1 w-full">
-              <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
-                {t("accountKey")}
-              </label>
               <Select
+                label={t("accountKey")}
                 value={selectedConnection}
                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                   setSelectedConnection(e.target.value)
@@ -600,9 +594,7 @@ export default function ApiTab(_props: ApiTabProps) {
         <Card>
           <div className="p-4 space-y-3">
             <div className="flex items-center gap-2">
-              <span className="material-symbols-outlined text-[18px] text-text-muted">
-                attach_file
-              </span>
+              <Icon name="attach_file" size={18} className="text-text-muted" />
               <h3 className="text-sm font-semibold text-text-main">
                 {isTranscriptionEndpoint ? t("audioFile") : t("attachImages")}
               </h3>
@@ -619,23 +611,22 @@ export default function ApiTab(_props: ApiTabProps) {
             </div>
             {isTranscriptionEndpoint && (
               <div>
-                <input
+                <Input
                   type="file"
                   accept="audio/*,video/*"
                   onChange={handleAudioFileChange}
-                  className="w-full px-3 py-2 rounded-lg bg-surface border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:bg-primary/10 file:text-primary file:text-sm"
+                  aria-label={t("audioFile")}
+                  inputClassName="text-sm file:mr-3 file:rounded file:border-0 file:bg-primary/10 file:px-3 file:py-1 file:text-sm"
                 />
                 {uploadedFile && (
                   <p className="text-xs text-text-muted mt-1 flex items-center gap-1">
-                    <span className="material-symbols-outlined text-[12px] text-green-500">
-                      check_circle
-                    </span>
+                    <Icon name="check_circle" size={12} className="text-success" />
                     {uploadedFile.name} ({(uploadedFile.size / 1024).toFixed(0)} KB)
                   </p>
                 )}
                 {!uploadedFile && (
-                  <p className="text-xs text-amber-500 mt-1 flex items-center gap-1">
-                    <span className="material-symbols-outlined text-[12px]">info</span>
+                  <p className="text-xs text-warning mt-1 flex items-center gap-1">
+                    <Icon name="info" size={12} />
                     {t("selectAudioFile")}
                   </p>
                 )}
@@ -643,12 +634,13 @@ export default function ApiTab(_props: ApiTabProps) {
             )}
             {supportsVision && (
               <div>
-                <input
+                <Input
                   type="file"
                   accept="image/*"
                   multiple
                   onChange={(e) => void handleImageFileChange(e)}
-                  className="w-full px-3 py-2 rounded-lg bg-surface border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:bg-primary/10 file:text-primary file:text-sm"
+                  aria-label={t("attachImages")}
+                  inputClassName="text-sm file:mr-3 file:rounded file:border-0 file:bg-primary/10 file:px-3 file:py-1 file:text-sm"
                 />
                 {uploadedImages.length > 0 && (
                   <div className="flex gap-2 mt-2 flex-wrap">
@@ -663,22 +655,26 @@ export default function ApiTab(_props: ApiTabProps) {
                           alt={`Attached ${i + 1}`}
                           className="w-full h-full object-cover"
                         />
-                        <button
+                        <Button
+                          variant="ghost"
+                          size="icon"
                           onClick={() =>
                             setUploadedImages((prev) => prev.filter((_, idx) => idx !== i))
                           }
-                          className="absolute inset-0 bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                        >
-                          <span className="material-symbols-outlined text-[16px]">close</span>
-                        </button>
+                          className="absolute inset-0 size-full rounded-none bg-bg/70 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+                          aria-label={`${t("clearAll")} ${i + 1}`}
+                          icon="close"
+                        />
                       </div>
                     ))}
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       onClick={() => setUploadedImages([])}
-                      className="text-xs text-text-muted hover:text-red-500 self-center ml-1"
+                      className="self-center ml-1 text-xs text-text-muted hover:text-error"
                     >
                       {t("clearAll")}
-                    </button>
+                    </Button>
                   </div>
                 )}
               </div>
@@ -693,41 +689,41 @@ export default function ApiTab(_props: ApiTabProps) {
           <div className="p-4 space-y-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <span className="material-symbols-outlined text-[18px] text-text-muted">
-                  upload
-                </span>
+                <Icon name="upload" size={18} className="text-text-muted" />
                 <h3 className="text-sm font-semibold text-text-main">{t("request")}</h3>
                 <Badge variant="info" size="sm">
                   POST {ENDPOINT_PATHS[selectedEndpoint]}
                 </Badge>
               </div>
               <div className="flex items-center gap-1">
-                <button
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => void handleCopy(requestBody)}
-                  className="p-1.5 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-text-main transition-colors"
+                  className="text-text-muted"
                   title={t("copy")}
-                >
-                  <span className="material-symbols-outlined text-[16px]">content_copy</span>
-                </button>
-                <button
+                  aria-label={t("copy")}
+                  icon="content_copy"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => {
                     const template = { ...DEFAULT_BODIES[selectedEndpoint] };
                     if ("model" in template)
                       (template as Record<string, unknown>).model = selectedModel;
                     setRequestBody(JSON.stringify(template, null, 2));
                   }}
-                  className="p-1.5 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-text-main transition-colors"
+                  className="text-text-muted"
                   title={t("resetToDefault")}
-                >
-                  <span className="material-symbols-outlined text-[16px]">restart_alt</span>
-                </button>
+                  aria-label={t("resetToDefault")}
+                  icon="restart_alt"
+                />
               </div>
             </div>
             {isTranscriptionEndpoint && (
-              <p className="text-xs text-text-muted bg-amber-500/10 border border-amber-500/20 rounded px-2 py-1.5 flex items-start gap-1">
-                <span className="material-symbols-outlined text-[12px] text-amber-500 mt-0.5">
-                  info
-                </span>
+              <p className="text-xs text-text-muted bg-warning/10 border border-warning/20 rounded px-2 py-1.5 flex items-start gap-1">
+                <Icon name="info" size={12} className="text-warning mt-0.5" />
                 {t("transcriptionHint")}
               </p>
             )}
@@ -756,9 +752,7 @@ export default function ApiTab(_props: ApiTabProps) {
           <div className="p-4 space-y-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <span className="material-symbols-outlined text-[18px] text-text-muted">
-                  download
-                </span>
+                <Icon name="download" size={18} className="text-text-muted" />
                 <h3 className="text-sm font-semibold text-text-main">{t("response")}</h3>
                 {responseStatus !== null && (
                   <Badge
@@ -772,19 +766,19 @@ export default function ApiTab(_props: ApiTabProps) {
                   <span className="text-xs text-text-muted">{responseDuration}ms</span>
                 )}
                 {loading && (
-                  <span className="material-symbols-outlined text-[14px] text-primary animate-spin">
-                    progress_activity
-                  </span>
+                  <Icon name="progress_activity" size={14} className="text-primary animate-spin" />
                 )}
               </div>
               <div className="flex items-center gap-1">
-                <button
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => void handleCopy(responseBody)}
-                  className="p-1.5 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-text-main transition-colors"
+                  className="text-text-muted"
                   title={t("copy")}
-                >
-                  <span className="material-symbols-outlined text-[16px]">content_copy</span>
-                </button>
+                  aria-label={t("copy")}
+                  icon="content_copy"
+                />
               </div>
             </div>
             <div className="border border-border rounded-lg overflow-hidden">
@@ -796,7 +790,7 @@ export default function ApiTab(_props: ApiTabProps) {
                     download="speech.mp3"
                     className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
                   >
-                    <span className="material-symbols-outlined text-[16px]">download</span>
+                    <Icon name="download" size={16} />
                     {t("downloadAudio")}
                   </a>
                 </div>
@@ -810,13 +804,15 @@ export default function ApiTab(_props: ApiTabProps) {
                   <div className="bg-surface/50 rounded p-3 text-sm text-text-main leading-relaxed whitespace-pre-wrap">
                     {transcriptionText}
                   </div>
-                  <button
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    icon="content_copy"
                     onClick={() => void handleCopy(transcriptionText)}
-                    className="text-xs text-primary hover:underline flex items-center gap-1"
+                    className="text-xs"
                   >
-                    <span className="material-symbols-outlined text-[12px]">content_copy</span>
                     {t("copyText")}
-                  </button>
+                  </Button>
                 </div>
               ) : (
                 <Editor
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx
index 9a55f68a335d..1ea2f899c25a 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import Textarea from "@/shared/components/Textarea";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+
 // src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx
 
 import { useRef, useState } from "react";
@@ -228,7 +232,7 @@ export default function BuildTab({ configState }: BuildTabProps) {
               msg.role === "user"
                 ? "bg-primary text-accent-foreground"
                 : msg.role === "tool"
-                  ? "bg-yellow-500/10 border border-yellow-500/30 text-text-main"
+                  ? "bg-warning/10 border border-warning/30 text-text-main"
                   : "bg-bg-alt border border-border text-text-main"
             }`}
           >
@@ -247,21 +251,22 @@ export default function BuildTab({ configState }: BuildTabProps) {
           {toolCalls.map((tc) => {
             const draft = toolResultDrafts.find((d) => d.toolCallId === tc.id);
             return (
-              <div key={tc.id} className="border border-amber-500/40 rounded-lg p-3 bg-amber-500/5">
+              <div key={tc.id} className="border border-warning/40 rounded-lg p-3 bg-warning/5">
                 <div className="flex items-center gap-2 mb-2">
-                  <span className="material-symbols-outlined text-[14px] text-amber-500">
-                    function
-                  </span>
+                  <Icon name="function" size={14} className="text-warning" />
                   <code className="text-xs font-mono text-text-main">{tc.function.name}</code>
                 </div>
                 <pre className="text-[11px] font-mono text-text-muted bg-bg-alt rounded p-2 overflow-x-auto mb-2 whitespace-pre-wrap break-all">
                   {tc.function.arguments}
                 </pre>
                 <div className="flex flex-col gap-2">
-                  <label className="text-[10px] text-text-muted uppercase tracking-wider">
+                  <span
+                    className="text-[10px] text-text-muted uppercase tracking-wider"
+                    aria-hidden="true"
+                  >
                     Tool result
-                  </label>
-                  <textarea
+                  </span>
+                  <Textarea
                     value={draft?.draft ?? ""}
                     onChange={(e) =>
                       setToolResultDrafts((prev) =>
@@ -272,14 +277,16 @@ export default function BuildTab({ configState }: BuildTabProps) {
                     }
                     rows={3}
                     placeholder={t("enterToolResult")}
-                    className="text-xs font-mono bg-bg-alt border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-y"
+                    aria-label={t("enterToolResult")}
+                    className="text-xs font-mono resize-y"
                   />
-                  <button
+                  <Button
+                    size="sm"
                     onClick={() => void sendToolResult(tc.id)}
-                    className="text-xs px-2.5 py-1 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors self-start"
+                    className="self-start"
                   >
                     Send tool result
-                  </button>
+                  </Button>
                 </div>
               </div>
             );
@@ -292,8 +299,8 @@ export default function BuildTab({ configState }: BuildTabProps) {
         <div
           className={`text-xs rounded-lg px-3 py-2 border ${
             validationResult.valid
-              ? "border-green-500/40 bg-green-500/5 text-green-600 dark:text-green-400"
-              : "border-destructive/40 bg-destructive/5 text-destructive"
+              ? "border-success/40 bg-success/5 text-success"
+              : "border-error/40 bg-error/5 text-error"
           }`}
         >
           {validationResult.valid
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
index 744f5a072c0f..6bb8b32b73cf 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import Textarea from "@/shared/components/Textarea";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+
 // src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
 
 import { useState, useRef, useEffect } from "react";
@@ -371,14 +375,12 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
       {/* Status bar */}
       <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-bg-alt text-xs text-text-muted">
         <div className="flex items-center gap-2">
-          <span className="material-symbols-outlined text-[16px]">chat</span>
+          <Icon name="chat" size={16} />
           <span className="font-medium">{t("tabChat")}</span>
           {responseStatus !== null && (
             <span
               className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
-                responseStatus < 400
-                  ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
-                  : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+                responseStatus < 400 ? "bg-success-bg text-success" : "bg-error-bg text-error"
               }`}
             >
               {responseStatus}
@@ -388,22 +390,26 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
         </div>
         <div className="flex items-center gap-2">
           {hasAssistantMessage && !loading && (
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
+              icon="refresh"
               onClick={() => void handleRegenerate()}
-              className="flex items-center gap-1 text-xs text-text-muted hover:text-text-main transition-colors"
+              className="text-xs text-text-muted"
               title={t("regenerateLastResponse")}
             >
-              <span className="material-symbols-outlined text-[14px]">refresh</span>
               {t("regenerate")}
-            </button>
+            </Button>
           )}
-          <button
+          <Button
+            variant="ghost"
+            size="icon-sm"
             onClick={handleClear}
-            className="p-1 rounded hover:bg-red-500/10 text-text-muted hover:text-red-500 transition-colors"
+            className="text-text-muted hover:text-error"
             title={t("clearChat")}
-          >
-            <span className="material-symbols-outlined text-[16px]">delete</span>
-          </button>
+            aria-label={t("clearChat")}
+            icon="delete"
+          />
         </div>
       </div>
 
@@ -412,10 +418,10 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
         {messages.length === 0 && !loading && (
           <div className="flex items-center justify-center h-full text-text-muted text-sm">
             <div className="text-center space-y-2">
-              <span className="material-symbols-outlined text-[48px] text-text-muted/30">chat</span>
+              <Icon name="chat" size={48} className="text-text-muted/30" />
               <p>{t("startConversation")}</p>
               {!configState.model && (
-                <p className="text-amber-500 text-xs">{t("setModelInConfigFirst")}</p>
+                <p className="text-warning text-xs">{t("setModelInConfigFirst")}</p>
               )}
             </div>
           </div>
@@ -436,7 +442,7 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
               <div
                 className={`px-4 py-2.5 rounded-2xl text-sm ${
                   msg.role === "user"
-                    ? "bg-primary text-primary-foreground rounded-tr-sm"
+                    ? "bg-primary text-accent-foreground rounded-tr-sm"
                     : "bg-bg-alt border border-border text-text-main rounded-tl-sm"
                 }`}
               >
@@ -469,16 +475,14 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
               {t("role.assistant")}
             </span>
             <div className="px-4 py-2 rounded-2xl text-sm bg-bg-alt border border-border rounded-tl-sm text-text-muted flex items-center gap-2">
-              <span className="material-symbols-outlined text-[16px] animate-spin">
-                progress_activity
-              </span>
+              <Icon name="progress_activity" size={16} className="animate-spin" />
               {t("generating")}
             </div>
           </div>
         )}
 
         {error && (
-          <div className="text-center p-2 text-sm text-red-500 bg-red-500/10 rounded border border-red-500/20">
+          <div className="text-center p-2 text-sm text-error bg-error/10 rounded border border-error/20">
             {error}
           </div>
         )}
@@ -488,32 +492,29 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
 
       {/* Input area */}
       <div className="p-3 border-t border-border bg-bg-alt flex gap-2 shrink-0">
-        <textarea
+        <Textarea
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder={t("typeMessageWithShortcut")}
-          className="flex-1 min-h-[44px] max-h-[120px] bg-surface border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary resize-y"
           rows={1}
           disabled={loading}
+          aria-label={t("typeMessageWithShortcut")}
+          className="text-sm resize-y flex-1"
         />
         {loading ? (
-          <button
-            onClick={handleCancel}
-            className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-border text-sm text-text-muted hover:text-text-main hover:bg-black/5 transition-colors shrink-0"
-          >
-            <span className="material-symbols-outlined text-[16px]">stop</span>
+          <Button variant="outline" icon="stop" onClick={handleCancel} className="shrink-0">
             {t("stop")}
-          </button>
+          </Button>
         ) : (
-          <button
+          <Button
+            icon="send"
             onClick={() => void handleSend()}
             disabled={!input.trim()}
-            className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors shrink-0"
+            className="shrink-0"
           >
-            <span className="material-symbols-outlined text-[16px]">send</span>
             {t("send")}
-          </button>
+          </Button>
         )}
       </div>
     </div>
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
index 903773679793..3abafd5d83df 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+import Input from "@/shared/components/Input";
+import Textarea from "@/shared/components/Textarea";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+
 // src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
 
 import { useEffect, useRef, useState } from "react";
@@ -354,13 +359,13 @@ export default function CompareTab({ configState }: CompareTabProps) {
     <div className="flex flex-col h-full">
       {/* Prompt input area */}
       <div className="px-4 pt-3 pb-2 border-b border-border bg-bg-alt shrink-0">
-        <textarea
+        <Textarea
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           placeholder={t("comparePromptPlaceholder")}
           rows={3}
-          className="w-full text-sm bg-surface border border-border rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-y"
           aria-label={t("userPrompt")}
+          className="text-sm resize-y w-full"
         />
       </div>
 
@@ -368,29 +373,31 @@ export default function CompareTab({ configState }: CompareTabProps) {
       <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-bg-alt shrink-0">
         {/* Run / Cancel all */}
         {isAnyStreaming ? (
-          <button
+          <Button
+            variant="outline"
+            size="sm"
+            icon="stop"
             onClick={cancelAll}
-            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded bg-destructive/10 text-destructive border border-destructive/30 hover:bg-destructive/20 transition-colors"
+            className="border-error/30 text-error hover:bg-error/10"
             aria-label={t("cancelAllStreams")}
           >
-            <span className="material-symbols-outlined text-[14px]">stop</span>
             {t("cancelAll")}
-          </button>
+          </Button>
         ) : (
-          <button
+          <Button
+            size="sm"
+            icon="play_arrow"
             onClick={() => void runAll()}
             disabled={columns.length === 0 || !prompt.trim()}
-            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
             aria-label={t("runAllColumns")}
           >
-            <span className="material-symbols-outlined text-[14px]">play_arrow</span>
             {t("runAll")}
-          </button>
+          </Button>
         )}
 
         {/* Add column */}
         <div className="flex items-center gap-1.5 ml-2">
-          <input
+          <Input
             ref={addInputRef}
             type="text"
             value={newModel}
@@ -400,19 +407,22 @@ export default function CompareTab({ configState }: CompareTabProps) {
             }}
             placeholder={t("modelPlaceholderCompare")}
             disabled={atColumnLimit}
-            className="text-xs bg-surface border border-border rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary text-text-main w-40 disabled:opacity-40"
             aria-label={t("newColumnModelName")}
+            inputClassName="text-xs"
+            className="w-40"
           />
-          <button
+          <Button
+            variant="outline"
+            size="sm"
+            icon="add"
             onClick={addColumn}
             disabled={atColumnLimit}
-            className="flex items-center gap-1 text-xs px-2.5 py-1.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            className="text-text-muted"
             title={atColumnLimit ? t("maxColumnsReached", { max: MAX_COLUMNS }) : t("addColumn")}
             aria-label={t("addModelColumn")}
           >
-            <span className="material-symbols-outlined text-[14px]">add</span>
             {t("addModel")}
-          </button>
+          </Button>
         </div>
 
         {/* Column count indicator */}
@@ -440,9 +450,7 @@ export default function CompareTab({ configState }: CompareTabProps) {
         {columns.length === 0 && (
           <div className="flex items-center justify-center h-full text-text-muted col-span-4">
             <div className="text-center space-y-2">
-              <span className="material-symbols-outlined text-[48px] text-text-muted/30">
-                compare
-              </span>
+              <Icon name="compare" size={48} className="text-text-muted/30" />
               <p className="text-sm">{t("addModelToCompare")}</p>
               <p className="text-xs text-text-muted/60">
                 {t("modelsSimultaneously", { max: MAX_COLUMNS })}
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/build/BuildWizard.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/build/BuildWizard.tsx
index f8341317617d..f1b2f51d9cb9 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/build/BuildWizard.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/build/BuildWizard.tsx
@@ -1,5 +1,10 @@
 "use client";
 
+import Textarea from "@/shared/components/Textarea";
+import Button from "@/shared/components/Button";
+import Icon from "@/shared/components/Icon";
+import { cn } from "@/shared/utils/cn";
+
 // src/app/(dashboard)/dashboard/playground/components/tabs/build/BuildWizard.tsx
 
 import { useState } from "react";
@@ -55,11 +60,7 @@ function Stepper({ currentStep }: StepperProps) {
                     : "bg-border text-text-muted"
               }`}
             >
-              {currentStep > step.num ? (
-                <span className="material-symbols-outlined text-[12px]">check</span>
-              ) : (
-                step.num
-              )}
+              {currentStep > step.num ? <Icon name="check" size={12} /> : step.num}
             </span>
             <span
               className={`text-xs font-medium transition-colors ${
@@ -85,20 +86,21 @@ interface ModeCardProps {
 
 function ModeCard({ icon, title, description, selected, onClick }: ModeCardProps) {
   return (
-    <button
+    <Button
+      variant="outline"
+      aria-pressed={selected}
       onClick={onClick}
-      className={`flex flex-col gap-2 p-4 rounded-xl border-2 text-left transition-all hover:shadow-sm ${
-        selected
-          ? "border-primary bg-primary/5"
-          : "border-border bg-surface hover:border-primary/40"
-      }`}
+      className={cn(
+        "h-auto flex-col items-start gap-2 whitespace-normal rounded-xl border-2 p-4 text-left font-normal",
+        selected ? "border-primary bg-primary/5" : "bg-surface"
+      )}
     >
-      <span className="text-2xl">{icon}</span>
-      <span className={`text-sm font-semibold ${selected ? "text-primary" : "text-text-main"}`}>
-        {title}
+      <span className="text-2xl" aria-hidden="true">
+        {icon}
       </span>
+      <span className="text-sm font-semibold text-text-main">{title}</span>
       <span className="text-xs text-text-muted leading-relaxed">{description}</span>
-    </button>
+    </Button>
   );
 }
 
@@ -170,13 +172,9 @@ export default function BuildWizard({
           </div>
 
           <div className="flex justify-end pt-2">
-            <button
-              onClick={goToStep2}
-              className="flex items-center gap-1.5 text-sm px-4 py-2 rounded-lg bg-primary text-accent-foreground hover:bg-primary/90 transition-colors"
-            >
+            <Button iconRight="arrow_forward" onClick={goToStep2}>
               {tb("nextButton")}
-              <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -208,20 +206,12 @@ export default function BuildWizard({
           )}
 
           <div className="flex items-center justify-between pt-2">
-            <button
-              onClick={goBack}
-              className="flex items-center gap-1.5 text-sm px-4 py-2 rounded-lg border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-            >
-              <span className="material-symbols-outlined text-[16px]">arrow_back</span>
+            <Button variant="outline" icon="arrow_back" onClick={goBack}>
               {tb("backButton")}
-            </button>
-            <button
-              onClick={goToStep3}
-              className="flex items-center gap-1.5 text-sm px-4 py-2 rounded-lg bg-primary text-accent-foreground hover:bg-primary/90 transition-colors"
-            >
+            </Button>
+            <Button iconRight="arrow_forward" onClick={goToStep3}>
               {tb("nextButton")}
-              <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -231,24 +221,20 @@ export default function BuildWizard({
         <div className="flex-1 flex flex-col overflow-hidden">
           {/* Toolbar */}
           <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-bg-alt shrink-0">
-            <button
-              onClick={goBack}
-              className="flex items-center gap-1 text-xs px-2.5 py-1.5 rounded border border-border text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-            >
-              <span className="material-symbols-outlined text-[14px]">arrow_back</span>
+            <Button variant="outline" size="sm" icon="arrow_back" onClick={goBack}>
               {tb("backButton")}
-            </button>
+            </Button>
 
             <div className="w-px h-4 bg-border mx-1" />
 
-            <button
+            <Button
+              size="sm"
+              icon="play_arrow"
               onClick={onRun}
               disabled={running || !prompt.trim()}
-              className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded bg-primary text-accent-foreground hover:bg-primary/90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
             >
-              <span className="material-symbols-outlined text-[14px]">play_arrow</span>
               {running ? t("running") : tb("runButton")}
-            </button>
+            </Button>
 
             <div className="ml-auto flex items-center gap-2 text-[11px] text-text-muted">
               {includesTools && toolsBuilder.tools.length > 0 && (
@@ -257,9 +243,7 @@ export default function BuildWizard({
                 </span>
               )}
               {includesJson && structuredOutput.enabled && (
-                <span className="px-1.5 py-0.5 rounded bg-green-500/10 text-green-600 dark:text-green-400">
-                  JSON mode
-                </span>
+                <span className="px-1.5 py-0.5 rounded bg-success/10 text-success">JSON mode</span>
               )}
             </div>
           </div>
@@ -270,7 +254,7 @@ export default function BuildWizard({
           {/* Prompt input */}
           <div className="px-4 py-3 border-t border-border shrink-0">
             <div className="flex items-end gap-2">
-              <textarea
+              <Textarea
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}
                 onKeyDown={(e) => {
@@ -281,7 +265,8 @@ export default function BuildWizard({
                 }}
                 placeholder={tb("promptPlaceholder")}
                 rows={2}
-                className="flex-1 text-sm bg-surface border border-border rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary text-text-main resize-none"
+                aria-label={tb("promptPlaceholder")}
+                className="text-sm resize-none flex-1"
               />
             </div>
           </div>
diff --git a/src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts b/src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts
index 07564d239ba4..45f23f94eeb5 100644
--- a/src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts
+++ b/src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts
@@ -58,7 +58,7 @@ export function useImprovePrompt(): UseImprovePrompt {
         setLoading(false);
       }
     },
-    [],
+    []
   );
 
   return {
diff --git a/src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts b/src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts
index b1f57c8ed666..76fb0c8ad11d 100644
--- a/src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts
+++ b/src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts
@@ -81,7 +81,7 @@ export function usePresets(): UsePresets {
         setLoading(false);
       }
     },
-    [list],
+    [list]
   );
 
   const update = useCallback(
@@ -111,7 +111,7 @@ export function usePresets(): UsePresets {
         setLoading(false);
       }
     },
-    [list],
+    [list]
   );
 
   const remove = useCallback(
@@ -136,7 +136,7 @@ export function usePresets(): UsePresets {
         setLoading(false);
       }
     },
-    [list],
+    [list]
   );
 
   return {
diff --git a/src/app/(dashboard)/dashboard/playground/hooks/useStreamMetrics.ts b/src/app/(dashboard)/dashboard/playground/hooks/useStreamMetrics.ts
index 243707dc61f2..65e73beae28e 100644
--- a/src/app/(dashboard)/dashboard/playground/hooks/useStreamMetrics.ts
+++ b/src/app/(dashboard)/dashboard/playground/hooks/useStreamMetrics.ts
@@ -72,10 +72,8 @@ export function useStreamMetrics(modelPricing?: {
         finishedAt: null,
         tokensIn: 0,
         tokensOut: 0,
-        pricing: modelPricing
-          ? { ...modelPricing, estimated: true }
-          : undefined,
-      }),
+        pricing: modelPricing ? { ...modelPricing, estimated: true } : undefined,
+      })
     );
   }
 
@@ -89,10 +87,8 @@ export function useStreamMetrics(modelPricing?: {
     setMetrics(
       computeMetrics({
         ...refs.current,
-        pricing: modelPricing
-          ? { ...modelPricing, estimated: true }
-          : undefined,
-      }),
+        pricing: modelPricing ? { ...modelPricing, estimated: true } : undefined,
+      })
     );
   }
 
@@ -117,10 +113,8 @@ export function useStreamMetrics(modelPricing?: {
     setMetrics(
       computeMetrics({
         ...refs.current,
-        pricing: modelPricing
-          ? { ...modelPricing, estimated: true }
-          : undefined,
-      }),
+        pricing: modelPricing ? { ...modelPricing, estimated: true } : undefined,
+      })
     );
   }
 
diff --git a/src/app/(dashboard)/dashboard/playground/hooks/useStructuredOutput.ts b/src/app/(dashboard)/dashboard/playground/hooks/useStructuredOutput.ts
index 7eb621600a5a..f2a895fd361d 100644
--- a/src/app/(dashboard)/dashboard/playground/hooks/useStructuredOutput.ts
+++ b/src/app/(dashboard)/dashboard/playground/hooks/useStructuredOutput.ts
@@ -110,7 +110,7 @@ export function useStructuredOutput(): UseStructuredOutput {
 
       return { valid: true };
     },
-    [schema],
+    [schema]
   );
 
   return {
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 461217f3e4df..0ba5b58eb84a 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -11815,7 +11815,8 @@
       "nextButton": "Next",
       "runButton": "Run",
       "promptPlaceholder": "Enter your message… (Enter to send, Shift+Enter for newline)"
-    }
+    },
+    "playgroundTabs": "Playground modes"
   },
   "miniPlayground": {
     "endpoint": "Endpoint",
diff --git a/src/i18n/messages/pt-BR.json b/src/i18n/messages/pt-BR.json
index 1347e3bb1fef..29371f7f266f 100644
--- a/src/i18n/messages/pt-BR.json
+++ b/src/i18n/messages/pt-BR.json
@@ -11815,7 +11815,8 @@
       "nextButton": "Próximo",
       "runButton": "Executar",
       "promptPlaceholder": "Digite sua mensagem… (Enter para enviar, Shift+Enter para nova linha)"
-    }
+    },
+    "playgroundTabs": "Modos do playground"
   },
   "miniPlayground": {
     "endpoint": "Endpoint",
diff --git a/tests/unit/ui/playground-build-tab.test.tsx b/tests/unit/ui/playground-build-tab.test.tsx
index ea65faf4f836..3614556c3284 100644
--- a/tests/unit/ui/playground-build-tab.test.tsx
+++ b/tests/unit/ui/playground-build-tab.test.tsx
@@ -17,10 +17,7 @@ vi.mock("react-markdown", () => ({
   ),
 }));
 
-function setInputValue(
-  el: HTMLTextAreaElement | HTMLInputElement,
-  value: string,
-): void {
+function setInputValue(el: HTMLTextAreaElement | HTMLInputElement, value: string): void {
   const nativeSetter =
     el instanceof HTMLTextAreaElement
       ? Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")?.set
@@ -30,12 +27,10 @@ function setInputValue(
   el.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-const { DEFAULT_PARAMS } = await import(
-  "../../../src/app/(dashboard)/dashboard/playground/components/ParamSliders"
-);
-const { default: BuildTab } = await import(
-  "../../../src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab"
-);
+const { DEFAULT_PARAMS } =
+  await import("../../../src/app/(dashboard)/dashboard/playground/components/ParamSliders");
+const { default: BuildTab } =
+  await import("../../../src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab");
 
 const BASE_CONFIG = {
   endpoint: "chat.completions" as const,
@@ -82,7 +77,7 @@ type BuildMode = "tools" | "json" | "both";
 
 function clickNext(el: HTMLDivElement): void {
   const nextBtn = Array.from(el.querySelectorAll("button")).find((b) =>
-    b.textContent?.includes("Next"),
+    b.textContent?.includes("Next")
   ) as HTMLButtonElement;
   act(() => {
     nextBtn.click();
@@ -95,7 +90,7 @@ function selectMode(el: HTMLDivElement, mode: BuildMode): void {
   if (mode === "tools") return;
   const label = mode === "json" ? "JSON" : "Tools + JSON";
   const card = Array.from(el.querySelectorAll("button")).find((b) =>
-    b.textContent?.includes(label),
+    b.textContent?.includes(label)
   ) as HTMLButtonElement;
   act(() => {
     card.click();
@@ -128,7 +123,7 @@ describe("BuildTab", () => {
     const el = renderBuildTab();
     goToStep3(el);
     const runBtn = Array.from(el.querySelectorAll("button")).find((b) =>
-      b.textContent?.includes("Run"),
+      b.textContent?.includes("Run")
     );
     expect(runBtn).not.toBeUndefined();
   });
@@ -159,11 +154,15 @@ describe("BuildTab", () => {
 
     const addBtns = el.querySelectorAll("button");
     const addToolBtn = Array.from(addBtns).find(
-      (b) => b.textContent?.trim() === "+ Add tool",
+      // KEA-7886: the "+" is the Lucide add icon of the kit button (no text).
+      (b) =>
+        b.textContent?.trim() === "Add tool" && b.querySelector("svg[data-icon='add']") !== null
     ) as HTMLButtonElement;
     expect(addToolBtn).not.toBeNull();
 
-    await act(async () => { addToolBtn.click(); });
+    await act(async () => {
+      addToolBtn.click();
+    });
 
     expect(el.textContent).toContain("search_web");
     expect(el.textContent).toContain("Tools (1)");
@@ -178,17 +177,21 @@ describe("BuildTab", () => {
 
     // The parameters textarea is in the Add tool form section — it has default valid JSON.
     const paramsTextareas = Array.from(el.querySelectorAll("textarea")).filter(
-      (t) => t.getAttribute("aria-label") === "JSON schema for parameters",
+      (t) => t.getAttribute("aria-label") === "JSON schema for parameters"
     );
     const paramsTextarea = paramsTextareas[paramsTextareas.length - 1] as HTMLTextAreaElement;
     act(() => setInputValue(paramsTextarea, "NOT JSON {{{"));
 
     const addBtns = el.querySelectorAll("button");
     const addToolBtn = Array.from(addBtns).find(
-      (b) => b.textContent?.trim() === "+ Add tool",
+      // KEA-7886: the "+" is the Lucide add icon of the kit button (no text).
+      (b) =>
+        b.textContent?.trim() === "Add tool" && b.querySelector("svg[data-icon='add']") !== null
     ) as HTMLButtonElement;
 
-    await act(async () => { addToolBtn.click(); });
+    await act(async () => {
+      addToolBtn.click();
+    });
 
     expect(el.textContent).toContain("valid JSON");
   });
@@ -200,7 +203,9 @@ describe("BuildTab", () => {
     const toggle = el.querySelector("[role='switch']") as HTMLButtonElement;
     expect(toggle).not.toBeNull();
 
-    await act(async () => { toggle.click(); });
+    await act(async () => {
+      toggle.click();
+    });
 
     // JSON mode should be enabled
     expect(toggle.getAttribute("aria-checked")).toBe("true");
@@ -216,9 +221,13 @@ describe("BuildTab", () => {
 
     const addBtns = el.querySelectorAll("button");
     const addToolBtn = Array.from(addBtns).find(
-      (b) => b.textContent?.trim() === "+ Add tool",
+      // KEA-7886: the "+" is the Lucide add icon of the kit button (no text).
+      (b) =>
+        b.textContent?.trim() === "Add tool" && b.querySelector("svg[data-icon='add']") !== null
     ) as HTMLButtonElement;
-    await act(async () => { addToolBtn.click(); });
+    await act(async () => {
+      addToolBtn.click();
+    });
 
     clickNext(el); // step 2 -> step 3
 
@@ -235,10 +244,10 @@ describe("BuildTab", () => {
             JSON.stringify({
               choices: [{ message: { content: "Result", role: "assistant" } }],
             }),
-            { status: 200, headers: { "content-type": "application/json" } },
-          ),
-        ),
-      ) as typeof fetch,
+            { status: 200, headers: { "content-type": "application/json" } }
+          )
+        )
+      ) as typeof fetch
     );
 
     const el = renderBuildTab();
@@ -249,9 +258,13 @@ describe("BuildTab", () => {
     act(() => setInputValue(allInputs[0], "tool_one"));
     const addBtns = el.querySelectorAll("button");
     const addToolBtn = Array.from(addBtns).find(
-      (b) => b.textContent?.trim() === "+ Add tool",
+      // KEA-7886: the "+" is the Lucide add icon of the kit button (no text).
+      (b) =>
+        b.textContent?.trim() === "Add tool" && b.querySelector("svg[data-icon='add']") !== null
     ) as HTMLButtonElement;
-    await act(async () => { addToolBtn.click(); });
+    await act(async () => {
+      addToolBtn.click();
+    });
 
     clickNext(el); // step 2 -> step 3
 
@@ -261,10 +274,12 @@ describe("BuildTab", () => {
 
     // Click Run (playground.build.runButton = "Run" in en.json)
     const runBtns = el.querySelectorAll("button");
-    const runBtn = Array.from(runBtns).find(
-      (b) => b.textContent?.includes("Run"),
+    const runBtn = Array.from(runBtns).find((b) =>
+      b.textContent?.includes("Run")
     ) as HTMLButtonElement;
-    await act(async () => { runBtn.click(); });
+    await act(async () => {
+      runBtn.click();
+    });
     await act(async () => {
       await Promise.resolve();
       await Promise.resolve();
@@ -272,7 +287,10 @@ describe("BuildTab", () => {
 
     // fetch should be called
     expect(vi.mocked(fetch)).toHaveBeenCalledTimes(1);
-    const [, opts] = (vi.mocked(fetch) as ReturnType<typeof vi.fn>).mock.calls[0] as [string, RequestInit];
+    const [, opts] = (vi.mocked(fetch) as ReturnType<typeof vi.fn>).mock.calls[0] as [
+      string,
+      RequestInit,
+    ];
     const body = JSON.parse(opts.body as string) as Record<string, unknown>;
     expect(body["tools"]).toBeDefined();
     expect(Array.isArray(body["tools"])).toBe(true);
@@ -282,7 +300,9 @@ describe("BuildTab", () => {
     const el = renderBuildTab();
     goToStep2(el, "json");
     const toggle = el.querySelector("[role='switch']") as HTMLButtonElement;
-    await act(async () => { toggle.click(); });
+    await act(async () => {
+      toggle.click();
+    });
 
     clickNext(el); // step 2 -> step 3
 
diff --git a/tests/unit/ui/playground-compare-column.test.tsx b/tests/unit/ui/playground-compare-column.test.tsx
index af39218546b9..36b999e8e133 100644
--- a/tests/unit/ui/playground-compare-column.test.tsx
+++ b/tests/unit/ui/playground-compare-column.test.tsx
@@ -12,9 +12,8 @@ vi.mock("react-markdown", () => ({
   ),
 }));
 
-const { default: CompareColumn } = await import(
-  "../../../src/app/(dashboard)/dashboard/playground/components/CompareColumn"
-);
+const { default: CompareColumn } =
+  await import("../../../src/app/(dashboard)/dashboard/playground/components/CompareColumn");
 
 type ColumnStatus = "idle" | "streaming" | "done" | "error";
 
@@ -27,14 +26,16 @@ const BASE_METRICS = {
   costUsd: null,
 };
 
-function makeColumn(overrides: Partial<{
-  id: string;
-  model: string;
-  status: ColumnStatus;
-  metrics: typeof BASE_METRICS;
-  response: string;
-  errorMessage: string;
-}> = {}) {
+function makeColumn(
+  overrides: Partial<{
+    id: string;
+    model: string;
+    status: ColumnStatus;
+    metrics: typeof BASE_METRICS;
+    response: string;
+    errorMessage: string;
+  }> = {}
+) {
   return {
     id: "col-1",
     model: "openai/gpt-4o",
@@ -50,15 +51,13 @@ const containers: Array<{ root: ReturnType<typeof createRoot>; el: HTMLDivElemen
 function renderColumn(
   column: ReturnType<typeof makeColumn>,
   onCancel = vi.fn(),
-  onRemove = vi.fn(),
+  onRemove = vi.fn()
 ): HTMLDivElement {
   const el = document.createElement("div");
   document.body.appendChild(el);
   const root = createRoot(el);
   act(() => {
-    root.render(
-      <CompareColumn column={column} onCancel={onCancel} onRemove={onRemove} />,
-    );
+    root.render(<CompareColumn column={column} onCancel={onCancel} onRemove={onRemove} />);
   });
   containers.push({ root, el });
   return el;
@@ -99,18 +98,14 @@ describe("CompareColumn", () => {
   });
 
   it("renders markdown response when streaming and response is non-empty", () => {
-    const el = renderColumn(
-      makeColumn({ status: "streaming", response: "Hello from model" }),
-    );
+    const el = renderColumn(makeColumn({ status: "streaming", response: "Hello from model" }));
     const markdown = el.querySelector("[data-testid='markdown-content']");
     expect(markdown).not.toBeNull();
     expect(markdown?.textContent).toContain("Hello from model");
   });
 
   it("shows error message when status=error", () => {
-    const el = renderColumn(
-      makeColumn({ status: "error", errorMessage: "Rate limit exceeded" }),
-    );
+    const el = renderColumn(makeColumn({ status: "error", errorMessage: "Rate limit exceeded" }));
     expect(el.textContent).toContain("Rate limit exceeded");
   });
 
@@ -142,7 +137,9 @@ describe("CompareColumn", () => {
   it("calls onRemove when remove button clicked", () => {
     const onRemove = vi.fn();
     const el = renderColumn(makeColumn(), vi.fn(), onRemove);
-    const removeBtn = el.querySelector("[aria-label='Remove column for openai/gpt-4o']") as HTMLButtonElement;
+    const removeBtn = el.querySelector(
+      "[aria-label='Remove column for openai/gpt-4o']"
+    ) as HTMLButtonElement;
     expect(removeBtn).not.toBeNull();
     act(() => removeBtn.click());
     expect(onRemove).toHaveBeenCalledWith("col-1");
@@ -169,7 +166,8 @@ describe("CompareColumn", () => {
     });
 
     expect(writeText).toHaveBeenCalledWith("Column-specific answer");
-    expect(copyBtn.textContent).toContain("check");
+    // KEA-7886: icons are Lucide svgs (no ligature text); the copied state shows the check icon.
+    expect(copyBtn.querySelector("svg[data-icon='check']")).not.toBeNull();
   });
 
   it("disables response copy while the column has no response", () => {
@@ -183,7 +181,7 @@ describe("CompareColumn", () => {
   it("updates metrics displayed when metrics change (TTFT after first chunk)", () => {
     const metricsWithTtft = { ...BASE_METRICS, ttftMs: 187 };
     const el = renderColumn(
-      makeColumn({ status: "streaming", metrics: metricsWithTtft, response: "Hi" }),
+      makeColumn({ status: "streaming", metrics: metricsWithTtft, response: "Hi" })
     );
     expect(el.textContent).toContain("187ms");
   });
diff --git a/tests/unit/ui/playground-export-modal.test.tsx b/tests/unit/ui/playground-export-modal.test.tsx
index c33ee6e855aa..a14a68231d96 100644
--- a/tests/unit/ui/playground-export-modal.test.tsx
+++ b/tests/unit/ui/playground-export-modal.test.tsx
@@ -19,9 +19,8 @@ vi.mock("next-intl", () => ({
 
 import { API_KEY_PLACEHOLDER } from "../../../src/lib/playground/codeExport";
 
-const { default: ExportCodeModal } = await import(
-  "../../../src/app/(dashboard)/dashboard/playground/components/ExportCodeModal"
-);
+const { default: ExportCodeModal } =
+  await import("../../../src/app/(dashboard)/dashboard/playground/components/ExportCodeModal");
 
 const BASE_STATE = {
   endpoint: "chat.completions" as const,
@@ -34,7 +33,9 @@ const BASE_STATE = {
 
 const containers: Array<{ root: ReturnType<typeof createRoot>; el: HTMLDivElement }> = [];
 
-function renderModal(state = BASE_STATE, onClose = vi.fn()): HTMLDivElement {
+// KEA-7886: the modal is the kit Dialog (Modal adapter), portaled to document.body — queries
+// go to the body, not to the render container.
+function renderModal(state = BASE_STATE, onClose = vi.fn()): HTMLElement {
   const el = document.createElement("div");
   document.body.appendChild(el);
   const root = createRoot(el);
@@ -42,7 +43,7 @@ function renderModal(state = BASE_STATE, onClose = vi.fn()): HTMLDivElement {
     root.render(<ExportCodeModal state={state} onClose={onClose} />);
   });
   containers.push({ root, el });
-  return el;
+  return document.body;
 }
 
 afterEach(() => {
@@ -82,7 +83,9 @@ describe("ExportCodeModal", () => {
     const tabs = el.querySelectorAll("[role='tab']") as NodeListOf<HTMLButtonElement>;
 
     for (const tab of Array.from(tabs)) {
-      await act(async () => { tab.click(); });
+      await act(async () => {
+        tab.click();
+      });
       const pre = el.querySelector("pre");
       const code = pre?.textContent ?? "";
       // Real key regex — must not match
@@ -99,10 +102,15 @@ describe("ExportCodeModal", () => {
     });
 
     const el = renderModal();
-    const copyBtn = el.querySelector("[aria-label='copyLangCode']") as HTMLButtonElement;
+    // The copy action is the CodePreview's own button inside the labelled code region.
+    const copyBtn = el.querySelector(
+      "[aria-label='copyLangCode'] .ci-code-preview__copy"
+    ) as HTMLButtonElement;
     expect(copyBtn).not.toBeNull();
 
-    await act(async () => { copyBtn.click(); });
+    await act(async () => {
+      copyBtn.click();
+    });
 
     expect(writeTextMock).toHaveBeenCalledTimes(1);
     const copiedText = writeTextMock.mock.calls[0][0] as string;
@@ -123,7 +131,9 @@ describe("ExportCodeModal", () => {
     const pythonTab = Array.from(tabs).find((t) => t.textContent?.trim() === "Python");
     expect(pythonTab).not.toBeNull();
 
-    await act(async () => { pythonTab!.click(); });
+    await act(async () => {
+      pythonTab!.click();
+    });
 
     const newPre = el.querySelector("pre");
     const pythonCode = newPre?.textContent ?? "";
@@ -139,7 +149,9 @@ describe("ExportCodeModal", () => {
 
     const tabs = el.querySelectorAll("[role='tab']") as NodeListOf<HTMLButtonElement>;
     const tsTab = Array.from(tabs).find((t) => t.textContent?.trim() === "TypeScript");
-    await act(async () => { tsTab!.click(); });
+    await act(async () => {
+      tsTab!.click();
+    });
 
     const pre = el.querySelector("pre");
     const code = pre?.textContent ?? "";
@@ -148,18 +160,25 @@ describe("ExportCodeModal", () => {
     expect(code).not.toMatch(/sk-[A-Za-z0-9_-]{16,}/);
   });
 
-  it("calls onClose when backdrop is clicked", () => {
+  it("calls onClose when backdrop is clicked", async () => {
     const onClose = vi.fn();
-    const el = renderModal(BASE_STATE, onClose);
-    const backdrop = el.querySelector("[role='dialog']") as HTMLDivElement;
-    act(() => backdrop.click());
+    renderModal(BASE_STATE, onClose);
+    expect(document.querySelector("[role='dialog']")).not.toBeNull();
+    // Radix arms its outside-pointer listener on a setTimeout(0); a real outside click is
+    // pointerdown + click on something outside the dialog content (the backdrop).
+    await act(() => new Promise<void>((resolve) => setTimeout(resolve, 0)));
+    act(() => {
+      document.body.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true }));
+      document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it("calls onClose when Close button is clicked", () => {
     const onClose = vi.fn();
     const el = renderModal(BASE_STATE, onClose);
-    const closeBtn = el.querySelector("[aria-label='closeExportModal']") as HTMLButtonElement;
+    // The dialog's close (X) button comes from the Modal adapter (common "close" label).
+    const closeBtn = el.querySelector("[role='dialog'] [aria-label='close']") as HTMLButtonElement;
     act(() => closeBtn.click());
     expect(onClose).toHaveBeenCalledTimes(1);
   });
diff --git a/tests/unit/ui/playground-improve-prompt-button.test.tsx b/tests/unit/ui/playground-improve-prompt-button.test.tsx
index f14070ec00e5..4e2f04e353a5 100644
--- a/tests/unit/ui/playground-improve-prompt-button.test.tsx
+++ b/tests/unit/ui/playground-improve-prompt-button.test.tsx
@@ -47,6 +47,8 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
+// KEA-7886: the confirmation is the kit Dialog (ConfirmModal adapter), portaled to
+// document.body — dialog queries go to the document, not to the render container.
 describe("ImprovePromptButton", () => {
   it("renders the Improve prompt button", () => {
     const el = renderButton();
@@ -76,7 +78,7 @@ describe("ImprovePromptButton", () => {
       btn.click();
     });
 
-    const modal = el.querySelector("[role='dialog']");
+    const modal = document.querySelector("[role='dialog']");
     expect(modal).not.toBeNull();
     expect(modal?.textContent).toContain("Improve prompt");
   });
@@ -89,7 +91,7 @@ describe("ImprovePromptButton", () => {
       btn.click();
     });
 
-    const modal = el.querySelector("[role='dialog']");
+    const modal = document.querySelector("[role='dialog']");
     expect(modal?.textContent).toContain("quota");
   });
 
@@ -101,7 +103,7 @@ describe("ImprovePromptButton", () => {
       btn.click();
     });
 
-    const modal = el.querySelector("[role='dialog']");
+    const modal = document.querySelector("[role='dialog']");
     expect(modal?.textContent).toContain("openai/gpt-4o");
   });
 
@@ -114,13 +116,15 @@ describe("ImprovePromptButton", () => {
       btn.click();
     });
 
-    const cancelBtn = el.querySelector("[role='dialog'] button:first-child") as HTMLButtonElement;
+    const cancelBtn = document.querySelector(
+      "[role='dialog'] button:first-child"
+    ) as HTMLButtonElement;
     await act(async () => {
       cancelBtn.click();
     });
 
     // Modal should close
-    expect(el.querySelector("[role='dialog']")).toBeNull();
+    expect(document.querySelector("[role='dialog']")).toBeNull();
     expect(vi.mocked(fetch)).not.toHaveBeenCalled();
   });
 
@@ -152,7 +156,7 @@ describe("ImprovePromptButton", () => {
     });
 
     // Click confirm (Improve button)
-    const modal = el.querySelector("[role='dialog']");
+    const modal = document.querySelector("[role='dialog']");
     const allBtns = modal?.querySelectorAll("button") ?? [];
     const improveBtn = Array.from(allBtns).find(
       (b) => b.textContent?.includes("Improve") && !b.textContent?.includes("Improve prompt")
diff --git a/tests/unit/ui/playground-preset-picker.test.tsx b/tests/unit/ui/playground-preset-picker.test.tsx
index 77cbed1037d8..ab90daba2825 100644
--- a/tests/unit/ui/playground-preset-picker.test.tsx
+++ b/tests/unit/ui/playground-preset-picker.test.tsx
@@ -180,7 +180,8 @@ describe("PresetPicker", () => {
     });
 
     // Modal should appear
-    const modal = el.querySelector("[role='dialog']");
+    // KEA-7886: the save modal is the kit Dialog, portaled to document.body.
+    const modal = document.querySelector("[role='dialog']");
     expect(modal).not.toBeNull();
     expect(modal?.textContent).toContain("savePreset");
   });
@@ -197,11 +198,15 @@ describe("PresetPicker", () => {
     });
 
     // Enter name
-    const nameInput = el.querySelector("input[type='text']") as HTMLInputElement;
+    const nameInput = document.querySelector(
+      "[role='dialog'] input[type='text']"
+    ) as HTMLInputElement;
     act(() => setInputValue(nameInput, "Test preset"));
 
     // Submit
-    const submitBtn = el.querySelector("[role='dialog'] button:last-child") as HTMLButtonElement;
+    const submitBtn = document.querySelector(
+      "[role='dialog'] [data-slot='dialog-footer'] button:last-child"
+    ) as HTMLButtonElement;
     await act(async () => {
       submitBtn.click();
     });
@@ -229,11 +234,13 @@ describe("PresetPicker", () => {
     });
 
     // Submit without entering a name
-    const submitBtn = el.querySelector("[role='dialog'] button:last-child") as HTMLButtonElement;
+    const submitBtn = document.querySelector(
+      "[role='dialog'] [data-slot='dialog-footer'] button:last-child"
+    ) as HTMLButtonElement;
     await act(async () => {
       submitBtn.click();
     });
 
-    expect(el.textContent).toContain("nameRequired");
+    expect(document.querySelector("[role='dialog']")?.textContent).toContain("nameRequired");
   });
 });
diff --git a/tests/unit/ui/playground-studio.test.tsx b/tests/unit/ui/playground-studio.test.tsx
index 101b7baa9c95..772a7a1f1b4f 100644
--- a/tests/unit/ui/playground-studio.test.tsx
+++ b/tests/unit/ui/playground-studio.test.tsx
@@ -277,8 +277,9 @@ describe("PlaygroundStudio", () => {
       exportBtn?.click();
     });
 
-    // mock returns i18n key as text — assert on the key
-    expect(el.textContent).toContain("exportCode");
+    // mock returns i18n key as text — assert on the key. KEA-7886: the modal is the kit Dialog,
+    // portaled to document.body.
+    expect(document.querySelector("[role='dialog']")?.textContent).toContain("exportCode");
   });
 });
 
diff --git a/tests/unit/ui/playground-tools-builder.test.tsx b/tests/unit/ui/playground-tools-builder.test.tsx
index ad24c35cae0b..482466e07d96 100644
--- a/tests/unit/ui/playground-tools-builder.test.tsx
+++ b/tests/unit/ui/playground-tools-builder.test.tsx
@@ -4,12 +4,10 @@ import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-const { useToolsBuilder } = await import(
-  "../../../src/app/(dashboard)/dashboard/playground/hooks/useToolsBuilder"
-);
-const { default: ToolsBuilder } = await import(
-  "../../../src/app/(dashboard)/dashboard/playground/components/ToolsBuilder"
-);
+const { useToolsBuilder } =
+  await import("../../../src/app/(dashboard)/dashboard/playground/hooks/useToolsBuilder");
+const { default: ToolsBuilder } =
+  await import("../../../src/app/(dashboard)/dashboard/playground/components/ToolsBuilder");
 
 if (typeof Element.prototype.scrollIntoView === "undefined") {
   Object.defineProperty(Element.prototype, "scrollIntoView", {
@@ -19,10 +17,7 @@ if (typeof Element.prototype.scrollIntoView === "undefined") {
   });
 }
 
-function setInputValue(
-  el: HTMLTextAreaElement | HTMLInputElement,
-  value: string,
-): void {
+function setInputValue(el: HTMLTextAreaElement | HTMLInputElement, value: string): void {
   const nativeSetter =
     el instanceof HTMLTextAreaElement
       ? Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value")?.set
@@ -33,7 +28,11 @@ function setInputValue(
 }
 
 // Wrapper component to expose the useToolsBuilder hook
-function ToolsBuilderWrapper({ onReady }: { onReady?: (builder: ReturnType<typeof useToolsBuilder>) => void }) {
+function ToolsBuilderWrapper({
+  onReady,
+}: {
+  onReady?: (builder: ReturnType<typeof useToolsBuilder>) => void;
+}) {
   const builder = useToolsBuilder();
   React.useEffect(() => {
     onReady?.(builder);
@@ -43,7 +42,9 @@ function ToolsBuilderWrapper({ onReady }: { onReady?: (builder: ReturnType<typeo
 
 const containers: Array<{ root: ReturnType<typeof createRoot>; el: HTMLDivElement }> = [];
 
-function renderToolsBuilder(onReady?: (b: ReturnType<typeof useToolsBuilder>) => void): HTMLDivElement {
+function renderToolsBuilder(
+  onReady?: (b: ReturnType<typeof useToolsBuilder>) => void
+): HTMLDivElement {
   const el = document.createElement("div");
   document.body.appendChild(el);
   const root = createRoot(el);
@@ -72,13 +73,19 @@ describe("ToolsBuilder", () => {
   it("shows error when name is empty and Add is clicked", async () => {
     const el = renderToolsBuilder();
 
-    const addBtn = el.querySelector("button[class*='bg-primary']") as HTMLButtonElement;
-    expect(addBtn?.textContent?.trim()).toBe("+ Add tool");
+    const addBtn = el.querySelector("button.ci-button--default") as HTMLButtonElement;
+    // KEA-7886: the "+" is now the Lucide add icon (aria-hidden svg) of the kit primary button.
+    expect(addBtn?.textContent?.trim()).toBe("Add tool");
+    expect(addBtn?.querySelector("svg[data-icon='add']")).not.toBeNull();
 
-    await act(async () => { addBtn.click(); });
+    await act(async () => {
+      addBtn.click();
+    });
 
     // Zod validation should show error
-    expect(el.textContent).toMatch(/String must contain at least 1 character|Too small|name|required/i);
+    expect(el.textContent).toMatch(
+      /String must contain at least 1 character|Too small|name|required/i
+    );
   });
 
   it("adds a valid tool to the list", async () => {
@@ -95,8 +102,10 @@ describe("ToolsBuilder", () => {
     });
 
     // Parameters textarea already has valid JSON by default
-    const addBtn = el.querySelector("button[class*='bg-primary']") as HTMLButtonElement;
-    await act(async () => { addBtn.click(); });
+    const addBtn = el.querySelector("button.ci-button--default") as HTMLButtonElement;
+    await act(async () => {
+      addBtn.click();
+    });
 
     // Should show the tool in the list
     expect(el.textContent).toContain("get_weather");
@@ -115,8 +124,10 @@ describe("ToolsBuilder", () => {
     const paramsTextarea = textareas[0]; // parameters textarea
     act(() => setInputValue(paramsTextarea, "not valid json"));
 
-    const addBtn = el.querySelector("button[class*='bg-primary']") as HTMLButtonElement;
-    await act(async () => { addBtn.click(); });
+    const addBtn = el.querySelector("button.ci-button--default") as HTMLButtonElement;
+    await act(async () => {
+      addBtn.click();
+    });
 
     // Should show JSON parse error
     expect(el.textContent).toContain("valid JSON");
@@ -128,15 +139,19 @@ describe("ToolsBuilder", () => {
     // Add a tool first
     const inputs = el.querySelectorAll("input[type='text']") as NodeListOf<HTMLInputElement>;
     act(() => setInputValue(inputs[0], "to_remove"));
-    const addBtn = el.querySelector("button[class*='bg-primary']") as HTMLButtonElement;
-    await act(async () => { addBtn.click(); });
+    const addBtn = el.querySelector("button.ci-button--default") as HTMLButtonElement;
+    await act(async () => {
+      addBtn.click();
+    });
 
     expect(el.textContent).toContain("to_remove");
 
     // Click delete button
     const deleteBtn = el.querySelector("[aria-label='Remove tool to_remove']") as HTMLButtonElement;
     expect(deleteBtn).not.toBeNull();
-    await act(async () => { deleteBtn.click(); });
+    await act(async () => {
+      deleteBtn.click();
+    });
 
     expect(el.textContent).not.toContain("to_remove");
     expect(el.textContent).not.toContain("Tools (1)");
@@ -148,13 +163,17 @@ describe("ToolsBuilder", () => {
     // Add a tool
     const inputs = el.querySelectorAll("input[type='text']") as NodeListOf<HTMLInputElement>;
     act(() => setInputValue(inputs[0], "edit_me"));
-    const addBtn = el.querySelector("button[class*='bg-primary']") as HTMLButtonElement;
-    await act(async () => { addBtn.click(); });
+    const addBtn = el.querySelector("button.ci-button--default") as HTMLButtonElement;
+    await act(async () => {
+      addBtn.click();
+    });
 
     // Click edit button
     const editBtn = el.querySelector("[aria-label='Edit tool edit_me']") as HTMLButtonElement;
     expect(editBtn).not.toBeNull();
-    await act(async () => { editBtn.click(); });
+    await act(async () => {
+      editBtn.click();
+    });
 
     // Should show Save/Cancel buttons
     expect(el.textContent).toContain("Save");

From 1b96446e0570d8ba304c89b22c124fdc6ea96194 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 02:03:59 -0300
Subject: [PATCH 08/13] refactor(dashboard): lote 3 icon names mapped to Lucide
 in ICON_MAP (KEA-7886, lote 3)

---
 src/shared/constants/iconMap.ts | 118 +++++++++++++++++++++-----------
 1 file changed, 77 insertions(+), 41 deletions(-)

diff --git a/src/shared/constants/iconMap.ts b/src/shared/constants/iconMap.ts
index 15d672641654..1b9a5cfb27b3 100644
--- a/src/shared/constants/iconMap.ts
+++ b/src/shared/constants/iconMap.ts
@@ -135,6 +135,40 @@ import {
   Wrench,
   X,
   Zap,
+  // lote 3 (KEA-7886)
+  ArrowUpDown,
+  ArchiveRestore,
+  BadgeDollarSign,
+  Banknote,
+  Brackets,
+  Cable,
+  CalendarX,
+  CirclePlay,
+  CloudOff,
+  CloudSync,
+  Columns2,
+  Gavel,
+  GlobeOff,
+  Hand,
+  LockKeyhole,
+  MessageSquare,
+  Mic,
+  Monitor,
+  MonitorSmartphone,
+  Music,
+  Paperclip,
+  RefreshCcw,
+  SearchX,
+  Send,
+  ShieldOff,
+  Speech,
+  Split,
+  SquareFunction,
+  SquarePen,
+  ToggleRight,
+  Type,
+  Video,
+  Waves,
 } from "lucide-react";
 
 /**
@@ -158,6 +192,8 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   chevron_left: ChevronLeft,
   push_pin: Pin,
   left_panel_open: PanelLeftOpen,
+  // lote 3 (onboarding STEP_ICONS — an array literal the generator does not scan)
+  waving_hand: Hand,
   left_panel_close: PanelLeftClose,
   view_sidebar: PanelLeft,
   light_mode: Sun,
@@ -296,10 +332,10 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   add_task: null,
   air: null,
   alarm_add: null,
-  alt_route: null,
+  alt_route: Split,
   article: null,
   assignment: null,
-  attach_file: null,
+  attach_file: Paperclip,
   attach_money: null,
   auto_delete: null,
   auto_fix_normal: null,
@@ -313,39 +349,39 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   battery_status_good: null,
   blur_on: null,
   brush: null,
-  build: null,
+  build: Wrench,
   build_circle: Wrench,
   business: null,
   business_center: null,
-  cable: null,
+  cable: Cable,
   call_split: null,
   casino: null,
   category: null,
-  chat: null,
+  chat: MessageSquare,
   chat_bubble: null,
   checklist: null,
   cleaning_services: null,
   cloud_done: null,
-  cloud_off: null,
-  cloud_queue: null,
-  cloud_sync: null,
+  cloud_off: CloudOff,
+  cloud_queue: Cloud,
+  cloud_sync: CloudSync,
   code_blocks: null,
   collapse_all: null,
-  compare: null,
+  compare: Columns2,
   compare_arrows: null,
-  computer: null,
+  computer: Monitor,
   construction: Construction,
   contrast: null,
   cookie: null,
   dashboard: null,
-  data_array: null,
+  data_array: Brackets,
   data_usage: null,
   date_range: null,
   delete_forever: null,
   delete_sweep: null,
   deployed_code_history: null,
   developer_board: null,
-  devices: null,
+  devices: MonitorSmartphone,
   diamond: null,
   diversity_3: null,
   do_not_disturb: null,
@@ -357,11 +393,11 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   dynamic_feed: null,
   eco: null,
   edit_note: null,
-  edit_square: null,
+  edit_square: SquarePen,
   electrical_services: null,
   error_outline: null,
   event_available: null,
-  event_busy: null,
+  event_busy: CalendarX,
   event_repeat: null,
   expand_all: null,
   explore: null,
@@ -379,9 +415,9 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   folder_off: null,
   folder_open: null,
   folder_zip: null,
-  function: null,
+  function: SquareFunction,
   gate: null,
-  gavel: null,
+  gavel: Gavel,
   generating_tokens: null,
   gpp_bad: ShieldX,
   gpp_maybe: null,
@@ -391,16 +427,16 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   handshake: null,
   handyman: null,
   hearing: null,
-  history: null,
+  history: History,
   hourglass_empty: null,
   hourglass_top: Hourglass,
-  image: null,
+  image: Image,
   input: null,
   insert_drive_file: null,
   install_desktop: null,
   inventory_2: null,
-  key_off: null,
-  key_vertical: null,
+  key_off: SearchX,
+  key_vertical: KeyRound,
   keyboard_arrow_down: null,
   keyboard_arrow_up: null,
   keyboard_capslock: null,
@@ -408,7 +444,7 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   library_books: null,
   linear_scale: null,
   link_off: null,
-  list: null,
+  list: List,
   local_fire_department: null,
   local_florist: null,
   location_on: null,
@@ -422,40 +458,40 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   manage_accounts: null,
   manage_history: null,
   merge: null,
-  mic: null,
+  mic: Mic,
   minimize: null,
   model_training: null,
   move_up: null,
   movie: null,
-  music_note: null,
+  music_note: Music,
   my_location: null,
-  network_node: null,
+  network_node: Network,
   network_ping: null,
   neurology: null,
   notifications_off: null,
   open_in_browser: null,
   output: null,
-  paid: null,
+  paid: BadgeDollarSign,
   passkey: null,
   pause_circle: null,
-  payments: null,
+  payments: Banknote,
   pending: null,
   pending_actions: null,
   percent: null,
   pets: null,
   photo_size_select_large: null,
   pin: null,
-  play_circle: null,
+  play_circle: CirclePlay,
   playlist_add: null,
   precision_manufacturing: null,
   priority_high: null,
   psychology_alt: null,
-  public_off: null,
+  public_off: GlobeOff,
   query_stats: null,
   radio_button_checked: null,
   radio_button_unchecked: null,
   receipt_long: null,
-  record_voice_over: null,
+  record_voice_over: Speech,
   redeem: null,
   remove: null,
   replay: null,
@@ -469,29 +505,29 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   scatter_plot: null,
   schema: null,
   score: null,
-  search_off: null,
+  search_off: SearchX,
   select_all: null,
   sell: null,
-  send: null,
+  send: Send,
   sensors: null,
-  settings_backup_restore: null,
+  settings_backup_restore: ArchiveRestore,
   shield_lock: null,
   shield_person: ShieldUser,
   shield_with_heart: null,
   show_chart: null,
   shuffle: null,
   skip_next: null,
-  sort: null,
+  sort: ArrowUpDown,
   spatial_audio: null,
   stacked_line_chart: null,
   stop_circle: null,
   storefront: null,
-  stream: null,
+  stream: Waves,
   subdirectory_arrow_right: null,
   support: null,
   swap_horiz: ArrowLeftRight,
   swap_vert: null,
-  sync: null,
+  sync: RefreshCcw,
   sync_alt: null,
   sync_disabled: null,
   sync_problem: null,
@@ -499,13 +535,13 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   table_chart: null,
   tag: null,
   task_alt: null,
-  text_fields: null,
+  text_fields: Type,
   text_snippet: null,
   timer: null,
   tips_and_updates: null,
   today: null,
   toggle_off: null,
-  toggle_on: null,
+  toggle_on: ToggleRight,
   token: null,
   touch_app: null,
   trending_down: null,
@@ -519,17 +555,17 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   verified_user: null,
   vertical_align_bottom: null,
   vertical_align_top: null,
-  videocam: null,
+  videocam: Video,
   view_agenda: null,
   view_in_ar: null,
   view_module: null,
   voice_chat: null,
   volume_up: null,
   volunteer_activism: null,
-  vpn_key_off: null,
-  vpn_lock: null,
+  vpn_key_off: ShieldOff,
+  vpn_lock: LockKeyhole,
   water_drop: null,
-  web: null,
+  web: Globe,
   width_normal: null,
   wifi: Wifi,
   wifi_off: WifiOff,

From 663becc0165b797c429cdb28b5a25e757263d7ca Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 02:04:52 -0300
Subject: [PATCH 09/13] refactor(dashboard): /dashboard/playground fixed-width
 inputs shrink below the kit field minimum (KEA-7886, lote 3)

---
 .../dashboard/playground/components/ParamSliders.tsx            | 2 +-
 .../dashboard/playground/components/tabs/CompareTab.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx b/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
index 157b6481b579..151aa3c2bbb8 100644
--- a/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/ParamSliders.tsx
@@ -65,7 +65,7 @@ function SliderRow({ label, value, min, max, step, onChange }: SliderRowProps) {
             const v = parseFloat(e.target.value);
             if (!isNaN(v)) onChange(Math.min(max, Math.max(min, v)));
           }}
-          className="w-20"
+          className="w-20 min-w-0"
           inputClassName="text-xs text-right"
         />
       </div>
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
index 3abafd5d83df..8d5c67de48ec 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
@@ -409,7 +409,7 @@ export default function CompareTab({ configState }: CompareTabProps) {
             disabled={atColumnLimit}
             aria-label={t("newColumnModelName")}
             inputClassName="text-xs"
-            className="w-40"
+            className="w-40 min-w-0"
           />
           <Button
             variant="outline"

From ffdc955f127529a49485a62f39e03b2d0d43e253 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 02:26:14 -0300
Subject: [PATCH 10/13] refactor(dashboard): /dashboard/playground chat
 send/stop buttons keep the kit height (KEA-7886, lote 3)

---
 .../dashboard/playground/components/tabs/ChatTab.tsx     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
index 6bb8b32b73cf..d84e944455fd 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx
@@ -503,7 +503,12 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
           className="text-sm resize-y flex-1"
         />
         {loading ? (
-          <Button variant="outline" icon="stop" onClick={handleCancel} className="shrink-0">
+          <Button
+            variant="outline"
+            icon="stop"
+            onClick={handleCancel}
+            className="shrink-0 self-end"
+          >
             {t("stop")}
           </Button>
         ) : (
@@ -511,7 +516,7 @@ export default function ChatTab({ configState, onMetricsUpdate }: ChatTabProps)
             icon="send"
             onClick={() => void handleSend()}
             disabled={!input.trim()}
-            className="shrink-0"
+            className="shrink-0 self-end"
           >
             {t("send")}
           </Button>

From f28d19d171691091e714bb9b05e4da608b580381 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 04:53:49 -0300
Subject: [PATCH 11/13] test(dashboard): lote 3 e2e locators follow the kit
 dialog markup (KEA-7886, lote 3)

---
 tests/e2e/api-key-model-scope.spec.ts | 9 +++++++--
 tests/e2e/api-keys-flow.spec.ts       | 5 +++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/api-key-model-scope.spec.ts b/tests/e2e/api-key-model-scope.spec.ts
index 7043582a0d6b..200ebc9bb1b2 100644
--- a/tests/e2e/api-key-model-scope.spec.ts
+++ b/tests/e2e/api-key-model-scope.spec.ts
@@ -258,8 +258,10 @@ test.describe("API key model scope", () => {
 
     // Exact OpenAI model selection coexists with the provider scope.
     await modelSearch.fill("openai/gpt-4.1");
+    // exact: the selected-models summary chip has its own "Remove openai/gpt-4.1" button (KEA-7886).
     const openaiModelButton = permissionsEditor.getByRole("button", {
       name: "openai/gpt-4.1",
+      exact: true,
     });
     await expect(openaiModelButton).toBeVisible({ timeout: UI_STABILITY_TIMEOUT_MS });
     await openaiModelButton.click();
@@ -301,13 +303,16 @@ test.describe("API key model scope", () => {
 
     // Child models under the provider scope are inherited and not individually toggleable.
     for (const childId of ["ollamacloud/llama3", "ollamacloud/qwen"]) {
-      const child = reopened.getByRole("button", { name: childId });
+      const child = reopened.getByRole("button", { name: childId, exact: true });
       await expect(child).toBeVisible({ timeout: UI_STABILITY_TIMEOUT_MS });
       await expect(child).toBeDisabled();
     }
 
     // Exact OpenAI selection remains individually selected/toggleable.
-    const reopenedOpenAiModel = reopened.getByRole("button", { name: "openai/gpt-4.1" });
+    const reopenedOpenAiModel = reopened.getByRole("button", {
+      name: "openai/gpt-4.1",
+      exact: true,
+    });
     await expect(reopenedOpenAiModel).toBeEnabled();
 
     // Explicit Restrict with no provider/model selections is a persistent deny-all state.
diff --git a/tests/e2e/api-keys-flow.spec.ts b/tests/e2e/api-keys-flow.spec.ts
index 2c6eae6f72ac..bfeaa8436051 100644
--- a/tests/e2e/api-keys-flow.spec.ts
+++ b/tests/e2e/api-keys-flow.spec.ts
@@ -282,8 +282,9 @@ test.describe("API keys flow", () => {
     const createKeyButton = createDialog.getByRole("button", { name: /create api key/i });
     await createKeyButton.click({ force: true });
 
-    // The validation error must appear as an inline <p role="alert"> INSIDE the modal
-    const inlineError = createDialog.locator("p[role='alert']");
+    // The validation error must appear as an inline role="alert" message INSIDE the modal
+    // (KEA-7886: the Input adapter renders it in the kit Field message slot).
+    const inlineError = createDialog.locator("[data-slot='field'] [role='alert']");
     await expect(inlineError).toBeVisible({ timeout: UI_STABILITY_TIMEOUT_MS });
 
     // The error must be visible — i.e. not obscured by the backdrop.

From 93ff93bf208c4fd62bf6b2573b9aa587f1510e66 Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 05:21:18 -0300
Subject: [PATCH 12/13] =?UTF-8?q?fix(dashboard):=20lote=203=20=E2=80=94=20?=
 =?UTF-8?q?icon=20map=20duplicate=20import,=20category=20picker=20on=20Che?=
 =?UTF-8?q?ckboxGroup,=20tokens=20shell,=20table=20scrollbar=20labels=20(K?=
 =?UTF-8?q?EA-7886,=20lote=203)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/access/tabs/GeneralTab.tsx           |  53 ++++-----
 .../dashboard/endpoint/EndpointPageClient.tsx |   4 +-
 .../endpoint/components/A2ADashboard.tsx      |   2 +-
 .../endpoint/components/MCPDashboard.tsx      |   4 +-
 .../components/StudioConfigPane.tsx           |  31 +++--
 src/app/(dashboard)/dashboard/tokens/page.tsx | 106 +++++++++---------
 src/i18n/messages/en.json                     |   5 +-
 src/i18n/messages/pt-BR.json                  |   5 +-
 src/shared/constants/iconMap.ts               |  11 +-
 tests/unit/api-manager-page-static.test.ts    |   3 +-
 10 files changed, 110 insertions(+), 114 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx
index c271de660dfe..33358ea2dbe7 100644
--- a/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/[id]/access/tabs/GeneralTab.tsx
@@ -5,8 +5,8 @@ import Icon from "@/shared/components/Icon";
 import Toggle from "@/shared/components/Toggle";
 
 import { useTranslations } from "next-intl";
+import { Checkbox, CheckboxGroup } from "@omniroute/ui-kit/checkbox";
 import Input from "@/shared/components/Input";
-import { cn } from "@/shared/utils/cn";
 import { ENDPOINT_CATEGORIES } from "@/shared/constants/endpointCategories";
 import { toLocalDateTimeInputValue } from "@/app/(dashboard)/dashboard/api-manager/apiManagerPageUtils";
 import RoutingEntryLink from "@/shared/components/routing/RoutingEntryLink";
@@ -249,38 +249,27 @@ function EndpointCategoryPicker({
   formState,
   toggleEndpoint,
 }: GeneralSectionProps<"toggleEndpoint">) {
+  const t = useTranslations("apiManager");
+
+  // Multi-select list: kit CheckboxGroup + card checkboxes (label + description per category).
+  // The visible section heading ("Endpoint restrictions") sits right above, so the group is
+  // named by aria-label instead of repeating it as a second visible label.
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 pt-1 max-h-56 overflow-y-auto">
-      {ENDPOINT_CATEGORIES.map((cat) => {
-        const isSelected = formState.selectedEndpoints.includes(cat.id);
-        return (
-          <Button
-            key={cat.id}
-            variant="outline"
-            aria-pressed={isSelected}
-            onClick={() => toggleEndpoint(cat.id)}
-            className={cn(
-              "h-auto justify-start gap-2 p-2 text-left text-xs font-normal",
-              isSelected ? "bg-primary/10 border-primary/30" : "text-text-muted"
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={cn(
-                "w-4 h-4 rounded border flex items-center justify-center shrink-0",
-                isSelected ? "bg-primary border-primary text-accent-foreground" : "border-border"
-              )}
-            >
-              {isSelected && <Icon name="check" size={11} />}
-            </span>
-            <div className="flex flex-col min-w-0 flex-1">
-              <span className="font-medium truncate text-text-main">{cat.label}</span>
-              <span className="text-[10px] text-text-muted truncate">{cat.description}</span>
-            </div>
-          </Button>
-        );
-      })}
-    </div>
+    <CheckboxGroup
+      aria-label={t("endpointRestrictions")}
+      className="pt-1 [&_.ci-checkbox-group__items]:grid [&_.ci-checkbox-group__items]:max-h-56 [&_.ci-checkbox-group__items]:grid-cols-1 [&_.ci-checkbox-group__items]:gap-2 [&_.ci-checkbox-group__items]:overflow-y-auto sm:[&_.ci-checkbox-group__items]:grid-cols-2"
+    >
+      {ENDPOINT_CATEGORIES.map((cat) => (
+        <Checkbox
+          key={cat.id}
+          card
+          checked={formState.selectedEndpoints.includes(cat.id)}
+          onChange={() => toggleEndpoint(cat.id)}
+          label={<span className="text-xs font-medium">{cat.label}</span>}
+          description={<span className="text-[10px]">{cat.description}</span>}
+        />
+      ))}
+    </CheckboxGroup>
   );
 }
 
diff --git a/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx b/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
index b49394ea8542..d53f7808fad3 100644
--- a/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
@@ -1567,8 +1567,8 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                           e.stopPropagation();
                           void copy(tailscaleIpUrl, "tailscale_ip_inline");
                         }}
-                        title={`Copy ${tailscaleIpUrl}`}
-                        aria-label={`Copy ${tailscaleIpUrl}`}
+                        title={`${tc("copy")} ${tailscaleIpUrl}`}
+                        aria-label={`${tc("copy")} ${tailscaleIpUrl}`}
                         className="h-auto min-h-0 gap-0.5 px-1 py-0 text-[10px] font-normal text-text-muted"
                       >
                         <code className="font-mono">
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx b/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx
index 495bd3ea2260..0f9c1dffdb44 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/components/A2ADashboard.tsx
@@ -443,7 +443,7 @@ export default function A2ADashboardPage() {
           <p className="text-sm text-text-muted">{t("noTasksForFilters")}</p>
         ) : (
           <div className="overflow-x-auto">
-            <Table>
+            <Table scrollbarLabel={t("taskManagement")}>
               <TableHeader>
                 <TableRow>
                   <TableHead>{t("tableTask")}</TableHead>
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx b/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx
index d0410acdac0a..c7ab92146261 100644
--- a/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/components/MCPDashboard.tsx
@@ -533,7 +533,7 @@ export default function McpDashboardPage() {
       <Card className="p-5">
         <h2 className="text-lg font-semibold mb-4">{t("toolsAndScopes")}</h2>
         <div className="overflow-x-auto">
-          <Table>
+          <Table scrollbarLabel={t("toolsAndScopes")}>
             <TableHeader>
               <TableRow>
                 <TableHead>{t("tableTool")}</TableHead>
@@ -610,7 +610,7 @@ export default function McpDashboardPage() {
           <p className="text-sm text-text-muted">{t("noAuditEntriesForFilters")}</p>
         ) : (
           <div className="overflow-x-auto">
-            <Table>
+            <Table scrollbarLabel={t("auditLog")}>
               <TableHeader>
                 <TableRow>
                   <TableHead>{t("tableTimestamp")}</TableHead>
diff --git a/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx b/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
index 2f6b64fc1e74..78761d5660ec 100644
--- a/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Field } from "@omniroute/ui-kit/field";
 import Button from "@/shared/components/Button";
 import Input from "@/shared/components/Input";
 import Select from "@/shared/components/Select";
@@ -229,10 +230,8 @@ export default function StudioConfigPane({ configState, setConfigState }: Studio
 
         {/* Model */}
         <div className="flex flex-col gap-1.5">
-          <span
-            id={modelLabelId}
-            className="text-xs font-medium text-text-muted uppercase tracking-wider"
-          >
+          {/* Same typography as the kit Field labels of Endpoint/Provider/System prompt. */}
+          <span id={modelLabelId} className="ci-label">
             {tp("model")}
           </span>
           {availableModels.length > 0 ? (
@@ -276,20 +275,16 @@ export default function StudioConfigPane({ configState, setConfigState }: Studio
 
         {/* System prompt */}
         <div className="flex flex-col gap-1.5">
-          <label
-            htmlFor={systemPromptId}
-            className="text-xs font-medium text-text-muted uppercase tracking-wider"
-          >
-            {tp("systemPrompt")}
-          </label>
-          <Textarea
-            id={systemPromptId}
-            value={configState.systemPrompt}
-            onChange={(e) => update("systemPrompt", e.target.value)}
-            placeholder={tp("systemPromptPlaceholder")}
-            rows={4}
-            className="text-xs resize-y"
-          />
+          <Field label={tp("systemPrompt")} htmlFor={systemPromptId}>
+            <Textarea
+              id={systemPromptId}
+              value={configState.systemPrompt}
+              onChange={(e) => update("systemPrompt", e.target.value)}
+              placeholder={tp("systemPromptPlaceholder")}
+              rows={4}
+              className="text-xs resize-y"
+            />
+          </Field>
           {/* ImprovePromptButton — injected by F7 */}
           <ImprovePromptButton configState={configState} setConfigState={setConfigState} />
         </div>
diff --git a/src/app/(dashboard)/dashboard/tokens/page.tsx b/src/app/(dashboard)/dashboard/tokens/page.tsx
index e1561dbd5c0f..59a2693ab6ea 100644
--- a/src/app/(dashboard)/dashboard/tokens/page.tsx
+++ b/src/app/(dashboard)/dashboard/tokens/page.tsx
@@ -11,7 +11,8 @@ import {
   TableHeader,
   TableRow,
 } from "@omniroute/ui-kit/table";
-import { TableLoadingState } from "@omniroute/ui-kit/table-loading";
+import { DataTableShell } from "@omniroute/ui-kit/data-table-shell";
+import { PageHeader } from "@omniroute/ui-kit/page-header";
 import Badge from "@/shared/components/Badge";
 import Button from "@/shared/components/Button";
 import Card from "@/shared/components/Card";
@@ -301,6 +302,8 @@ export default function TokensPage() {
 
   return (
     <div className="flex flex-col gap-6">
+      <PageHeader compact title={t("tokensPageTitle")} description={t("tokensPageDescription")} />
+
       {/* Balance */}
       <Card>
         <div className="flex items-center justify-between">
@@ -357,54 +360,57 @@ export default function TokensPage() {
 
       {/* Transaction History */}
       <Card title={t("tokensTransactionHistory")} icon="history">
-        {historyLoading ? (
-          <TableLoadingState label={t("loading")} />
-        ) : history.length === 0 ? (
-          <EmptyState icon="history" title={t("tokensNoTransactionsYet")} />
-        ) : (
-          <Table scrollbarLabel={t("tokensTransactionHistory")}>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t("type")}</TableHead>
-                <TableHead>{t("tokensFrom")}</TableHead>
-                <TableHead>{t("tokensTo")}</TableHead>
-                <TableHead className="text-right">{t("tokensAmount")}</TableHead>
-                <TableHead>{t("tokensReason")}</TableHead>
-                <TableHead className="text-right">{t("tokensDate")}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {history.map((entry) => {
-                const isSent = entry.fromApiKeyId !== "current";
-                return (
-                  <TableRow key={entry.id}>
-                    <TableCell>
-                      <Badge variant={isSent ? "error" : "success"} size="sm">
-                        {isSent ? t("tokensSent") : t("tokensReceived")}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-sm font-mono">
-                      {entry.fromApiKeyId.slice(0, 8)}...
-                    </TableCell>
-                    <TableCell className="text-sm font-mono">
-                      {entry.toApiKeyId.slice(0, 8)}...
-                    </TableCell>
-                    <TableCell
-                      className={`text-right font-mono ${isSent ? "text-error" : "text-success"}`}
-                    >
-                      {isSent ? "-" : "+"}
-                      {entry.amount.toLocaleString(locale)}
-                    </TableCell>
-                    <TableCell className="text-sm text-text-muted">{entry.reason || "-"}</TableCell>
-                    <TableCell className="text-right text-sm text-text-muted">
-                      {new Date(entry.createdAt).toLocaleDateString(locale)}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        )}
+        {/* Kit DataTableShell owns the loading overlay; no filters/pagination on this ledger. */}
+        <DataTableShell loading={historyLoading} loadingLabel={t("loading")}>
+          {!historyLoading && history.length === 0 ? (
+            <EmptyState icon="history" title={t("tokensNoTransactionsYet")} />
+          ) : (
+            <Table scrollbarLabel={t("tokensTransactionHistory")}>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("type")}</TableHead>
+                  <TableHead>{t("tokensFrom")}</TableHead>
+                  <TableHead>{t("tokensTo")}</TableHead>
+                  <TableHead className="text-right">{t("tokensAmount")}</TableHead>
+                  <TableHead>{t("tokensReason")}</TableHead>
+                  <TableHead className="text-right">{t("tokensDate")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {history.map((entry) => {
+                  const isSent = entry.fromApiKeyId !== "current";
+                  return (
+                    <TableRow key={entry.id}>
+                      <TableCell>
+                        <Badge variant={isSent ? "error" : "success"} size="sm">
+                          {isSent ? t("tokensSent") : t("tokensReceived")}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-sm font-mono">
+                        {entry.fromApiKeyId.slice(0, 8)}...
+                      </TableCell>
+                      <TableCell className="text-sm font-mono">
+                        {entry.toApiKeyId.slice(0, 8)}...
+                      </TableCell>
+                      <TableCell
+                        className={`text-right font-mono ${isSent ? "text-error" : "text-success"}`}
+                      >
+                        {isSent ? "-" : "+"}
+                        {entry.amount.toLocaleString(locale)}
+                      </TableCell>
+                      <TableCell className="text-sm text-text-muted">
+                        {entry.reason || "-"}
+                      </TableCell>
+                      <TableCell className="text-right text-sm text-text-muted">
+                        {new Date(entry.createdAt).toLocaleDateString(locale)}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </DataTableShell>
       </Card>
 
       {/* Invite Panel */}
@@ -515,7 +521,7 @@ export default function TokensPage() {
                 value={serverUrl}
                 onChange={(e) => setServerUrl(e.target.value)}
                 placeholder="https://server.example.com"
-                aria-label="URL"
+                aria-label={t("tokensServerUrlLabel")}
                 required
               />
               <Input
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 0ba5b58eb84a..5bde296a187d 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -1000,7 +1000,10 @@
     "batchFileUsedByCount": "Used by {count, plural, one {# batch} other {# batches}}",
     "batchFilePreview": "Preview",
     "batchFilePreviewTruncated": "Showing first {shown} lines ({total} total lines)",
-    "batchFileDownloadFull": "Download Full File"
+    "batchFileDownloadFull": "Download Full File",
+    "tokensPageTitle": "Tokens",
+    "tokensPageDescription": "Send tokens between API keys, share invite codes and connect community servers.",
+    "tokensServerUrlLabel": "Server URL"
   },
   "disabled": "Disabled",
   "featureFlagOmnirouteEmergencyFallbackDescription": "Route budget-exhausted requests to the emergency free fallback provider/model.",
diff --git a/src/i18n/messages/pt-BR.json b/src/i18n/messages/pt-BR.json
index 29371f7f266f..e7988ed8a7d7 100644
--- a/src/i18n/messages/pt-BR.json
+++ b/src/i18n/messages/pt-BR.json
@@ -1000,7 +1000,10 @@
     "batchFileUsedByCount": "Usado por {count, plural, one {# lote} other {# lotes}}",
     "batchFilePreview": "Prévia",
     "batchFilePreviewTruncated": "Mostrando as primeiras {shown} linhas ({total} linhas no total)",
-    "batchFileDownloadFull": "Baixar Arquivo Completo"
+    "batchFileDownloadFull": "Baixar Arquivo Completo",
+    "tokensPageTitle": "Tokens",
+    "tokensPageDescription": "Envie tokens entre chaves de API, compartilhe códigos de convite e conecte servidores da comunidade.",
+    "tokensServerUrlLabel": "URL do servidor"
   },
   "disabled": "Desabilitado",
   "featureFlagOmnirouteEmergencyFallbackDescription": "Roteie solicitações com orçamento esgotado para o provedor/modelo de fallback gratuito de emergência.",
diff --git a/src/shared/constants/iconMap.ts b/src/shared/constants/iconMap.ts
index 841c31e7bcb5..18565a05faa1 100644
--- a/src/shared/constants/iconMap.ts
+++ b/src/shared/constants/iconMap.ts
@@ -142,7 +142,6 @@ import {
   Zap,
   // lote 3 (KEA-7886)
   ArrowUpDown,
-  ArchiveRestore,
   BadgeDollarSign,
   Banknote,
   Brackets,
@@ -155,8 +154,7 @@ import {
   Gavel,
   GlobeOff,
   Hand,
-  LockKeyhole,
-  MessageSquare,
+  GlobeLock,
   Mic,
   Monitor,
   MonitorSmartphone,
@@ -439,7 +437,8 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   insert_drive_file: null,
   install_desktop: null,
   inventory_2: null,
-  key_off: SearchX,
+  // Lucide has no key-off glyph; KeyRound is the closest key icon (the "no key" meaning comes from the label).
+  key_off: KeyRound,
   key_vertical: KeyRound,
   keyboard_arrow_down: null,
   keyboard_arrow_up: null,
@@ -514,7 +513,7 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   sell: null,
   send: Send,
   sensors: null,
-  settings_backup_restore: ArchiveRestore,
+  settings_backup_restore: RotateCcw,
   shield_lock: null,
   shield_person: ShieldUser,
   shield_with_heart: null,
@@ -567,7 +566,7 @@ export const ICON_MAP: Record<string, LucideIcon | null> = {
   volume_up: null,
   volunteer_activism: null,
   vpn_key_off: ShieldOff,
-  vpn_lock: LockKeyhole,
+  vpn_lock: GlobeLock,
   water_drop: null,
   web: AppWindow,
   width_normal: null,
diff --git a/tests/unit/api-manager-page-static.test.ts b/tests/unit/api-manager-page-static.test.ts
index 4f562357139f..b8b2c8a51913 100644
--- a/tests/unit/api-manager-page-static.test.ts
+++ b/tests/unit/api-manager-page-static.test.ts
@@ -216,7 +216,8 @@ test("behaviour tab persists the per-key prompt-compression switch", () => {
   assert.match(component, /useTranslations\("settings"\)/);
   assert.match(component, /tSettings\("compressionTitle"\)/);
   assert.match(component, /tSettings\("compressionDesc"\)/);
-  assert.match(component, /checked=\{enabled\}/);
+  assert.match(component, /[^-]checked=\{enabled\}/);
+  assert.doesNotMatch(component, /aria-checked=\{enabled\}/);
 });
 
 test("access editor exposes Claude Code default wildcard model", () => {

From 4c750993ccb2c35b7f9c0d22a528c743504bf01a Mon Sep 17 00:00:00 2001
From: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Date: Wed, 21 Oct 2026 10:30:20 -0300
Subject: [PATCH 13/13] fix(i18n): lote 3 keys in vi (KEA-7886, lote 3)

---
 src/i18n/messages/vi.json | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/i18n/messages/vi.json b/src/i18n/messages/vi.json
index 36a90202cbe2..368a7ec867cd 100644
--- a/src/i18n/messages/vi.json
+++ b/src/i18n/messages/vi.json
@@ -1000,7 +1000,10 @@
     "batchFileUsedByCount": "{count, plural, one {# batch} other {# batch}}",
     "batchFilePreview": "Bản xem trước",
     "batchFilePreviewTruncated": "Hiển thị {shown} dòng đầu tiên (tổng cộng {total} dòng)",
-    "batchFileDownloadFull": "Tải xuống toàn bộ tệp"
+    "batchFileDownloadFull": "Tải xuống toàn bộ tệp",
+    "tokensPageTitle": "Token",
+    "tokensPageDescription": "Gửi token giữa các khóa API, chia sẻ mã mời và kết nối máy chủ cộng đồng.",
+    "tokensServerUrlLabel": "URL máy chủ"
   },
   "disabled": "Đã tắt",
   "featureFlagOmnirouteEmergencyFallbackDescription": "Định tuyến các yêu cầu đã hết ngân sách đến nhà cung cấp/mô hình dự phòng khẩn cấp miễn phí.",
@@ -2500,7 +2503,8 @@
     "onlySelectedConnections": "Chỉ các kết nối đã chọn",
     "selectAtLeastOneConnection": "Chọn ít nhất một kết nối hoặc chọn Tất cả kết nối.",
     "allConnectionsDesc": "Khóa này có thể dùng bất kỳ kết nối đang hoạt động nào.",
-    "restrictedToConnections": "Giới hạn ở {count, plural, one {# kết nối} other {# kết nối}}."
+    "restrictedToConnections": "Giới hạn ở {count, plural, one {# kết nối} other {# kết nối}}.",
+    "removeSelection": "Xóa {name}"
   },
   "auditLog": {
     "title": "Nhật ký kiểm tra",
@@ -5293,7 +5297,8 @@
         "skipped": "đã được cấu hình",
         "failed": "thất bại"
       }
-    }
+    },
+    "stepProgress": "Tiến độ thiết lập"
   },
   "providers": {
     "tosAvoidNoticeTitle": "Nhà cung cấp này mặc định bị loại khỏi auto",
@@ -11813,7 +11818,8 @@
       "nextButton": "Tiếp theo",
       "runButton": "Chạy",
       "promptPlaceholder": "Nhập tin nhắn của bạn… (Enter để gửi, Shift+Enter để xuống dòng)"
-    }
+    },
+    "playgroundTabs": "Chế độ playground"
   },
   "miniPlayground": {
     "endpoint": "Điểm cuối",