diff --git a/src/app/admin/clients/page.tsx b/src/app/admin/clients/page.tsx
new file mode 100644
index 0000000..b2db361
--- /dev/null
+++ b/src/app/admin/clients/page.tsx
@@ -0,0 +1,53 @@
+import { AppShell } from "@/components/shell/app-shell";
+import { TopBar } from "@/components/shell/top-bar";
+import { AdminTable, AdminCell } from "@/components/admin/admin-table";
+import { NewClientForm, ToggleClientActive } from "@/components/admin/client-form";
+import { Pill } from "@/components/ui/pill";
+import { loadClients } from "@/lib/data/admin";
+
+export default async function AdminClientsPage() {
+  const rows = await loadClients();
+
+  return (
+    <AppShell role="owner" currentPath="/admin/clients">
+      <TopBar title="Clients" subtitle="The companies you build for">
+        <NewClientForm />
+      </TopBar>
+
+      <div className="flex-1 overflow-y-auto p-6">
+        <AdminTable
+          headers={["Client", "Projects", "Managers", "Status", ""]}
+          empty="No clients yet. Create one to get started."
+        >
+          {rows.map(({ client, projectCount, managerCount }) => (
+            <tr key={client.id}>
+              <AdminCell>
+                <div className="flex items-center gap-2.5">
+                  <span
+                    aria-hidden
+                    className="h-2.5 w-2.5 rounded-full"
+                    style={{ background: client.brand_color || "var(--brand)" }}
+                  />
+                  <span className="font-medium text-text-primary">
+                    {client.name}
+                  </span>
+                  <code className="text-xs text-text-muted">{client.slug}</code>
+                </div>
+              </AdminCell>
+              <AdminCell className="tabular">{projectCount}</AdminCell>
+              <AdminCell className="tabular">{managerCount}</AdminCell>
+              <AdminCell>
+                <Pill tone={client.active ? "brand" : "neutral"}>
+                  {client.active ? "Active" : "Inactive"}
+                </Pill>
+              </AdminCell>
+              <AdminCell align="right">
+                <ToggleClientActive client={client} />
+              </AdminCell>
+            </tr>
+          ))}
+        </AdminTable>
+      </div>
+    </AppShell>
+  );
+}
\ No newline at end of file
diff --git a/src/components/admin/client-form.tsx b/src/components/admin/client-form.tsx
new file mode 100644
index 0000000..edac38f
--- /dev/null
+++ b/src/components/admin/client-form.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Plus } from "lucide-react";
+
+import { createClient, updateClient } from "@/app/actions/clients";
+import type { ClientRecord } from "@/lib/pb/types";
+
+export function NewClientForm() {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [brandColor, setBrandColor] = useState("#2f6dad");
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!name.trim()) return;
+    setError(null);
+
+    startTransition(async () => {
+      try {
+        await createClient({ name, brandColor });
+        setName("");
+        setOpen(false);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Could not create that client");
+      }
+    });
+  }
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-sm font-medium text-brand-fg transition-colors hover:bg-brand-hover"
+      >
+        <Plus size={14} strokeWidth={2} />
+        New client
+      </button>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={submit}
+      className="flex items-end gap-3 rounded-[var(--radius-tile)] border border-border-subtle bg-surface p-4"
+    >
+      <label className="flex-1 space-y-1">
+        <span className="text-xs text-text-muted">Company name</span>
+        <input
+          autoFocus
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          className="w-full rounded-lg border border-border-subtle bg-panel px-3 py-2 text-sm text-text-primary outline-none focus:border-brand"
+        />
+      </label>
+
+      <label className="space-y-1">
+        <span className="text-xs text-text-muted">Colour</span>
+        <input
+          type="color"
+          value={brandColor}
+          onChange={(event) => setBrandColor(event.target.value)}
+          className="block h-9 w-14 cursor-pointer rounded-lg border border-border-subtle bg-panel"
+        />
+      </label>
+
+      <button
+        type="submit"
+        disabled={pending || !name.trim()}
+        className="rounded-lg bg-brand px-3 py-2 text-sm font-medium text-brand-fg disabled:opacity-50"
+      >
+        {pending ? "Creating…" : "Create"}
+      </button>
+      <button
+        type="button"
+        onClick={() => setOpen(false)}
+        className="px-2 py-2 text-sm text-text-muted hover:text-text-secondary"
+      >
+        Cancel
+      </button>
+
+      {error && (
+        <p role="alert" className="text-xs text-accent">
+          {error}
+        </p>
+      )}
+    </form>
+  );
+}
+
+export function ToggleClientActive({ client }: { client: ClientRecord }) {
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <button
+      type="button"
+      disabled={pending}
+      onClick={() =>
+        startTransition(async () => {
+          await updateClient({ clientId: client.id, active: !client.active });
+        })
+      }
+      className="text-xs text-text-muted underline-offset-2 hover:text-text-secondary hover:underline disabled:opacity-50"
+    >
+      {client.active ? "Deactivate" : "Reactivate"}
+    </button>
+  );
+}
\ No newline at end of file