diff --git a/apps/web/src/pages/tools-page.tsx b/apps/web/src/pages/tools-page.tsx
index 7fbc1830d..107de0ba2 100644
--- a/apps/web/src/pages/tools-page.tsx
+++ b/apps/web/src/pages/tools-page.tsx
@@ -5,13 +5,11 @@ import { useState } from "react";
 
 import "../tools/tools-page.css";
 import {
-  Badge,
   Button,
   Card,
   CardDescription,
   CardTitle,
   Input,
-  PageShell,
   RichEmptyState,
   Section,
   Table,
@@ -72,7 +70,7 @@ function ToolTile({
       </div>
       <h3 className="tool-tile-title">
         {name}
-        <Badge tone="neutral">{official ? "Official" : "Custom"}</Badge>
+        <span className="tool-kind">{official ? "Official" : "Custom"}</span>
       </h3>
       <p className="tool-tile-desc">{desc}</p>
       {children}
@@ -99,7 +97,7 @@ function ConnectedTile({
       official={official}
     >
       <div className="tool-tile-foot">
-        <Badge tone="success">{`${String(server.tools.length)} tools live`}</Badge>
+        <span className="tool-live">{`${String(server.tools.length)} tools live`}</span>
         <span style={{ flex: 1 }} />
         <ConfirmButton
           size="sm"
@@ -264,9 +262,7 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
       <div className="flex h-full min-h-0 flex-col">
         <StageTopBar crumbs={crumbs} />
         <div className="min-h-0 flex-1 overflow-y-auto">
-          <PageShell width="full" className="page-fill">
-            {body}
-          </PageShell>
+          <div className="tools-page">{body}</div>
         </div>
       </div>
     );
@@ -290,7 +286,11 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
   }
 
   return stage(
-    <div className="flex flex-col gap-8 px-4 pb-5 sm:px-7">
+    <div className="flex flex-col gap-8">
+      <header className="tools-head">
+        <h1>Tools</h1>
+        <p>Official servers first. Secrets never touch your workers.</p>
+      </header>
       <Input
         className="tools-filter"
         aria-label="Filter tools"
diff --git a/apps/web/src/tools/tools-page.css b/apps/web/src/tools/tools-page.css
index 5dede4f18..96256b2b3 100644
--- a/apps/web/src/tools/tools-page.css
+++ b/apps/web/src/tools/tools-page.css
@@ -1,7 +1,51 @@
+.tools-page {
+  width: 100%;
+  max-width: 864px;
+  margin: 0 auto;
+  padding: 24px 24px 40px;
+}
+
+.tools-head h1 {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.tools-head p {
+  margin: 6px 0 0;
+  max-width: 60ch;
+  font-size: 15px;
+  color: var(--ink-2);
+}
+
+/* Quiet, token-only pills: no filled green, no vendor colour. */
+.tool-live,
+.tool-kind {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.tool-live {
+  background: var(--success-wash);
+}
+
+.tool-kind {
+  background: var(--surface-sunk);
+  color: var(--ink-2);
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+
 .tools-grid {
   display: grid;
   gap: 16px;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 }
 
 .tools-filter {