diff --git a/apps/cloud/src/routes/billing.tsx b/apps/cloud/src/routes/billing.tsx
index cbdf013bb1..ca90c50795 100644
--- a/apps/cloud/src/routes/billing.tsx
+++ b/apps/cloud/src/routes/billing.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useCustomer, useListPlans } from "autumn-js/react";
 import { Button } from "@executor/react/components/button";
+import { Badge } from "@executor/react/components/badge";
 
 type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];
 
@@ -68,14 +69,14 @@ function BillingPage() {
                 {planName}
               </p>
               {isSwitching && (
-                <span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
+                <Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
                   Switching
-                </span>
+                </Badge>
               )}
               {isCanceling && !isSwitching && (
-                <span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
+                <Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
                   Canceling
-                </span>
+                </Badge>
               )}
             </div>
             <p className="mt-1 text-[0.75rem] text-muted-foreground/70 leading-none">
diff --git a/apps/cloud/src/routes/billing_.plans.tsx b/apps/cloud/src/routes/billing_.plans.tsx
index 8b941d0b60..9bba213343 100644
--- a/apps/cloud/src/routes/billing_.plans.tsx
+++ b/apps/cloud/src/routes/billing_.plans.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useCustomer, useListPlans } from "autumn-js/react";
 import { Button } from "@executor/react/components/button";
+import { Badge } from "@executor/react/components/badge";
 
 type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];
 
@@ -120,19 +121,19 @@ function PlansPage() {
                       {plan.name}
                     </p>
                     {isCurrent && (
-                      <span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
+                      <Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
                         Your plan
-                      </span>
+                      </Badge>
                     )}
                     {isCanceling && (
-                      <span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
+                      <Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
                         Canceling
-                      </span>
+                      </Badge>
                     )}
                     {isScheduled && (
-                      <span className="rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-emerald-600 dark:text-emerald-400 leading-none">
+                      <Badge className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                         Scheduled
-                      </span>
+                      </Badge>
                     )}
                   </div>
                   <p className="mt-1 text-[0.75rem] text-muted-foreground/70">{meta.tagline}</p>
diff --git a/apps/cloud/src/routes/team.tsx b/apps/cloud/src/routes/team.tsx
index f2c65b1a19..e8fa47d520 100644
--- a/apps/cloud/src/routes/team.tsx
+++ b/apps/cloud/src/routes/team.tsx
@@ -13,6 +13,7 @@ import {
   DialogClose,
 } from "@executor/react/components/dialog";
 import { Button } from "@executor/react/components/button";
+import { Badge } from "@executor/react/components/badge";
 import { Input } from "@executor/react/components/input";
 import { Label } from "@executor/react/components/label";
 import {
@@ -214,14 +215,12 @@ function TeamPage() {
                           {member.name ?? member.email}
                         </p>
                         {member.isCurrentUser && (
-                          <span className="rounded bg-muted px-1.5 py-0.5 text-[0.625rem] font-medium text-muted-foreground leading-none">
-                            You
-                          </span>
+                          <Badge className="bg-muted text-muted-foreground">You</Badge>
                         )}
                         {member.status === "pending" && (
-                          <span className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
+                          <Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
                             Invited
-                          </span>
+                          </Badge>
                         )}
                       </div>
                       {member.name && (
diff --git a/packages/react/src/pages/source-detail.tsx b/packages/react/src/pages/source-detail.tsx
index 1e9822d886..a18f61278c 100644
--- a/packages/react/src/pages/source-detail.tsx
+++ b/packages/react/src/pages/source-detail.tsx
@@ -14,6 +14,7 @@ import type { ToolSummary } from "../components/tool-tree";
 import { useScope } from "../hooks/use-scope";
 import type { SourcePlugin } from "../plugins/source-plugin";
 import { Button } from "../components/button";
+import { Badge } from "../components/badge";
 
 export function SourceDetailPage(props: {
   namespace: string;
@@ -116,13 +117,9 @@ export function SourceDetailPage(props: {
             {sourceData?.name ?? namespace}
           </h2>
           {sourceData?.runtime && (
-            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-              built-in
-            </span>
+            <Badge className="bg-muted text-muted-foreground">built-in</Badge>
           )}
-          <span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-secondary-foreground">
-            {sourceData?.kind ?? "source"}
-          </span>
+          <Badge variant="secondary">{sourceData?.kind ?? "source"}</Badge>
           {Result.isSuccess(tools) && !editing && (
             <span className="hidden text-[11px] tabular-nums text-muted-foreground/50 sm:block">
               {sourceTools.length} {sourceTools.length === 1 ? "tool" : "tools"}
@@ -208,7 +205,7 @@ export function SourceDetailPage(props: {
           onSuccess: () => (
             <div className="flex min-h-0 flex-1 overflow-hidden">
               {/* Left: tool tree */}
-              <div className="flex w-72 shrink-0 flex-col border-r border-border bg-card/30 lg:w-80 xl:w-[22rem]">
+              <div className="flex w-72 shrink-0 flex-col border-r border-border/60 lg:w-80 xl:w-[22rem]">
                 <ToolTree
                   tools={sourceTools}
                   selectedToolId={selectedToolId}
diff --git a/packages/react/src/pages/tools.tsx b/packages/react/src/pages/tools.tsx
index caa6ccf266..e1da3495f4 100644
--- a/packages/react/src/pages/tools.tsx
+++ b/packages/react/src/pages/tools.tsx
@@ -1,6 +1,7 @@
 import { useAtomValue, Result } from "@effect-atom/atom-react";
 import { toolsAtom } from "../api/atoms";
 import { useScope } from "../hooks/use-scope";
+import { Badge } from "../components/badge";
 
 export function ToolsPage() {
   const scopeId = useScope();
@@ -61,9 +62,7 @@ export function ToolsPage() {
                         </p>
                       )}
                     </div>
-                    <span className="shrink-0 rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-secondary-foreground">
-                      {t.sourceId}
-                    </span>
+                    <Badge variant="secondary">{t.sourceId}</Badge>
                   </div>
                 ))}
               </div>