diff --git a/public/llms.txt b/public/llms.txt
index 32a2b13..729c0e7 100644
--- a/public/llms.txt
+++ b/public/llms.txt
@@ -60,6 +60,34 @@ To get the higher limit, authenticate with an API key (recommended for any autom
 
 ---
 
+## Web URLs (for linking humans to a view)
+
+The API paths above are for fetching data. When you need to point a person at
+something in the browser, use these page URLs. The rule: a version is a path
+prefix, a view is a path segment, and omitting the version prefix means "latest".
+Semver appears WITHOUT the leading "v" in page URLs (/v/1.2.0), unlike API paths
+(/versions/v1.2.0). Both forms resolve, but the bare form is canonical.
+
+https://underlay.org/:owner                             → account/organization profile
+https://underlay.org/:owner/:slug                       → collection overview (latest): README, record types, stats
+https://underlay.org/:owner/:slug/records               → browse records (latest) — add ?type=TypeName to pick a type
+https://underlay.org/:owner/:slug/schemas               → schemas (latest)
+https://underlay.org/:owner/:slug/files                 → files (latest)
+https://underlay.org/:owner/:slug/versions              → version history
+https://underlay.org/:owner/:slug/versions/compare?from=v1.0.0&to=v1.1.0 → diff two versions
+https://underlay.org/:owner/:slug/v/1.2.0               → overview pinned to v1.2.0
+https://underlay.org/:owner/:slug/v/1.2.0/records       → records in v1.2.0 (?type=TypeName)
+https://underlay.org/:owner/:slug/v/1.2.0/schemas       → schemas as pinned in v1.2.0
+https://underlay.org/:owner/:slug/v/1.2.0/files         → files in v1.2.0
+https://underlay.org/records/:hash                      → a record's content-addressed permalink + provenance
+https://underlay.org/schemas/:id                        → a schema's detail page + which collections use it
+
+Prefer a version-pinned URL when citing data, since /records (no prefix) follows
+the latest version and its contents will change on the next push. ARK identifiers
+(ark:NAAN/id.v1.2.0) also resolve to these pages and are the most durable option.
+
+---
+
 ## Reading Data
 
 ### Browse collections
diff --git a/src/App.tsx b/src/App.tsx
index edfd22b..ffc3eee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import type { LoaderFunctionArgs, RouteObject } from 'react-router'
 
+import { RouteErrorBoundary } from '~/components/NotFound'
 import Root from '~/components/Root'
 import { fetchBase } from '~/lib/fetch-base'
 import { buildDataRoutes } from '~/route-gen'
@@ -32,6 +33,7 @@ export const routes: RouteObject[] = [
   {
     id: 'root',
     Component: Root,
+    ErrorBoundary: RouteErrorBoundary,
     loader: rootLoader,
     children: [...buildDataRoutes(components, dataModules), { path: '*', lazy: NotFound }],
   },
diff --git a/src/api/ark.ts b/src/api/ark.ts
index e53e4f7..82536d9 100644
--- a/src/api/ark.ts
+++ b/src/api/ark.ts
@@ -270,7 +270,8 @@ export async function resolve(c: Context<AuthEnv>) {
   }
 
   if (version !== undefined && versionRow) {
-    const url = `/${ownerSlug}/${collectionSlug}/v/${versionRow.semver}`
+    // Page URLs use the bare semver form (/v/1.0.0); stored semver is "v1.0.0".
+    const url = `/${ownerSlug}/${collectionSlug}/v/${versionRow.semver.replace(/^v/, '')}`
     return c.json({
       type: 'redirect' as const,
       url,
diff --git a/src/api/collections.ts b/src/api/collections.ts
index 0117200..1d36528 100644
--- a/src/api/collections.ts
+++ b/src/api/collections.ts
@@ -774,7 +774,7 @@ const app = new Hono<AuthEnv>()
         })
         .from(schema.collections)
         .where(and(...conditions))
-        .orderBy(schema.collections.updatedAt)
+        .orderBy(desc(schema.collections.updatedAt))
 
       return c.json(results)
     },
diff --git a/src/components/ApiPlayground.tsx b/src/components/ApiPlayground.tsx
index 5eb59cf..a5c2fc6 100644
--- a/src/components/ApiPlayground.tsx
+++ b/src/components/ApiPlayground.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useState } from 'react'
 
+import { Button } from '~/components/ui'
+
 interface Collection {
   id: string
   slug: string
@@ -152,7 +154,7 @@ export function ApiPlayground({ slug, collections }: ApiPlaygroundProps) {
                 setSelectedEndpoint(0)
                 setResponse(null)
               }}
-              className="bg-parchment border-rule focus:border-ink border px-2 py-1 text-sm focus:outline-none"
+              className="bg-parchment border-rule focus:border-ink rounded-control cursor-pointer border px-2 py-1 text-sm focus:outline-none"
             >
               {collections.map((c) => (
                 <option key={c.id} value={c.slug}>
@@ -169,7 +171,7 @@ export function ApiPlayground({ slug, collections }: ApiPlaygroundProps) {
             value={token}
             onChange={(e) => setToken(e.target.value)}
             placeholder="Paste key to test it (optional)"
-            className="bg-parchment border-rule focus:border-ink w-52 border px-2 py-1 font-mono text-xs focus:outline-none"
+            className="bg-parchment border-rule focus:border-ink rounded-control w-52 border px-2 py-1 font-mono text-xs focus:outline-none"
           />
         </div>
       </div>
@@ -186,7 +188,7 @@ export function ApiPlayground({ slug, collections }: ApiPlaygroundProps) {
                   setSelectedEndpoint(i)
                   setResponse(null)
                 }}
-                className={`block w-full rounded px-2 py-1.5 text-left text-xs transition-colors ${
+                className={`rounded-control block w-full cursor-pointer px-2 py-1.5 text-left text-xs transition-colors ${
                   selectedEndpoint === i
                     ? 'bg-parchment-dark font-medium'
                     : 'hover:bg-parchment-dark'
@@ -244,20 +246,17 @@ export function ApiPlayground({ slug, collections }: ApiPlaygroundProps) {
 
               {/* Action bar */}
               <div className="border-rule flex items-center gap-2 border-b px-3 py-2">
-                <button
-                  onClick={sendRequest}
-                  disabled={loading}
-                  className="bg-ink text-parchment px-3 py-1 text-xs font-medium hover:opacity-90 disabled:opacity-50"
-                >
+                <Button size="sm" onClick={sendRequest} disabled={loading}>
                   {loading ? 'Sending…' : 'Send'}
-                </button>
-                <button
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
                   onClick={copyAsCurl}
-                  className="border-rule text-ink-muted hover:text-ink border px-2 py-1 text-xs"
                   title="Copy as cURL (with Bearer token placeholder)"
                 >
                   {copied ? 'Copied!' : 'Copy cURL'}
-                </button>
+                </Button>
                 <span className="text-ink-muted ml-auto hidden text-[10px] sm:inline">
                   {token.trim() ? 'Using API key' : 'Using your session'}
                 </span>
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index b3004d7..2689a3b 100644
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -74,7 +74,10 @@ export default function BaseLayout({ children }: { children: React.ReactNode })
             </a>
           </div>
           <div>
-            <a href="https://github.com/knowledgefutures/underlay" className="hover:text-ink">
+            <a
+              href="https://github.com/knowledgefutures/underlay"
+              className="hover:text-ink underline"
+            >
               GitHub
             </a>
           </div>
diff --git a/src/components/CollectionExplorer.tsx b/src/components/CollectionExplorer.tsx
index 4ab15e5..3ed3069 100644
--- a/src/components/CollectionExplorer.tsx
+++ b/src/components/CollectionExplorer.tsx
@@ -174,7 +174,7 @@ export default function CollectionExplorer() {
                 <li>
                   <button
                     onClick={() => handleTagClick(null)}
-                    className={`w-full rounded-sm px-2.5 py-1.5 text-left text-sm transition-colors ${
+                    className={`rounded-control w-full px-2.5 py-1.5 text-left text-sm transition-colors ${
                       !selectedTag
                         ? 'bg-parchment-dark text-ink font-medium'
                         : 'text-ink-muted hover:bg-parchment-dark/50 hover:text-ink'
@@ -187,7 +187,7 @@ export default function CollectionExplorer() {
                   <li key={tag}>
                     <button
                       onClick={() => handleTagClick(tag)}
-                      className={`w-full rounded-sm px-2.5 py-1.5 text-left text-sm transition-colors ${
+                      className={`rounded-control w-full px-2.5 py-1.5 text-left text-sm transition-colors ${
                         selectedTag === tag
                           ? 'bg-parchment-dark text-ink font-medium'
                           : 'text-ink-muted hover:bg-parchment-dark/50 hover:text-ink'
@@ -221,7 +221,7 @@ export default function CollectionExplorer() {
             <input
               type="search"
               placeholder="Search collections..."
-              className="bg-parchment border-rule placeholder:text-ink-muted focus:border-ink w-full rounded-sm border py-2 pr-3 pl-10 text-sm focus:outline-none"
+              className="bg-parchment border-rule placeholder:text-ink-muted focus:border-ink rounded-control w-full border py-2 pr-3 pl-10 text-sm focus:outline-none"
               value={query}
               onChange={(e) => handleInput(e.target.value)}
             />
@@ -229,7 +229,7 @@ export default function CollectionExplorer() {
           <select
             value={sort}
             onChange={(e) => handleSortChange(e.target.value)}
-            className="bg-parchment border-rule text-ink-muted rounded-sm border px-3 py-2 text-sm focus:outline-none"
+            className="bg-parchment border-rule text-ink-muted focus:border-ink rounded-control cursor-pointer border px-3 py-2 text-sm focus:outline-none"
           >
             <option value="featured">Featured</option>
             <option value="records">Most records</option>
@@ -249,7 +249,7 @@ export default function CollectionExplorer() {
                 <Link
                   key={`feat-${c.ownerSlug}/${c.slug}`}
                   to={`/${c.ownerSlug}/${c.slug}`}
-                  className="border-rule hover:border-ink-muted/50 group rounded-sm border p-4 transition-all hover:shadow-sm"
+                  className="border-rule hover:border-ink-muted/50 rounded-surface group border p-4 transition-all hover:shadow-sm"
                 >
                   <div className="flex items-baseline gap-1.5">
                     <span className="text-ink-muted text-xs">{c.ownerSlug}/</span>
@@ -263,7 +263,7 @@ export default function CollectionExplorer() {
                   <div className="text-ink-muted mt-3 flex items-center gap-3 text-xs tabular-nums">
                     {c.recordCount != null && <span>{formatCount(c.recordCount)} records</span>}
                     {c.tags && c.tags.length > 0 && (
-                      <span className="bg-parchment-dark rounded px-1.5 py-0.5 text-[10px] leading-none">
+                      <span className="bg-parchment-dark rounded-control px-1.5 py-0.5 text-[10px] leading-none">
                         {c.tags[0]}
                       </span>
                     )}
@@ -279,7 +279,7 @@ export default function CollectionExplorer() {
           <div className="mb-4 flex flex-wrap gap-1.5 md:hidden">
             <button
               onClick={() => handleOwnerClick(null)}
-              className={`rounded-full px-3 py-1 text-xs transition-colors ${
+              className={`rounded-control px-3 py-1 text-xs transition-colors ${
                 !selectedOwner
                   ? 'bg-ink text-parchment'
                   : 'bg-parchment-dark text-ink-muted hover:text-ink'
@@ -291,7 +291,7 @@ export default function CollectionExplorer() {
               <button
                 key={o.slug}
                 onClick={() => handleOwnerClick(o.slug)}
-                className={`rounded-full px-3 py-1 text-xs transition-colors ${
+                className={`rounded-control px-3 py-1 text-xs transition-colors ${
                   selectedOwner === o.slug
                     ? 'bg-ink text-parchment'
                     : 'bg-parchment-dark text-ink-muted hover:text-ink'
@@ -326,7 +326,7 @@ export default function CollectionExplorer() {
                 <Link
                   key={`${c.ownerSlug}/${c.slug}`}
                   to={`/${c.ownerSlug}/${c.slug}`}
-                  className="border-rule hover:border-ink-muted/50 group flex items-start gap-4 rounded-sm border px-3 py-2.5 transition-all hover:shadow-sm"
+                  className="border-rule hover:border-ink-muted/50 rounded-surface group flex items-start gap-4 border px-3 py-2.5 transition-all hover:shadow-sm"
                 >
                   <div className="min-w-0 flex-1">
                     <div className="flex items-baseline gap-1.5">
@@ -337,7 +337,7 @@ export default function CollectionExplorer() {
                           {c.tags.slice(0, 2).map((tag) => (
                             <span
                               key={tag}
-                              className="bg-parchment-dark text-ink-muted rounded px-1.5 py-0.5 text-[10px] leading-none"
+                              className="bg-parchment-dark text-ink-muted rounded-control px-1.5 py-0.5 text-[10px] leading-none"
                             >
                               {tag}
                             </span>
diff --git a/src/components/CreateMenu.tsx b/src/components/CreateMenu.tsx
index 20d4577..80db050 100644
--- a/src/components/CreateMenu.tsx
+++ b/src/components/CreateMenu.tsx
@@ -1,30 +1,31 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { Link } from 'react-router'
 
+import { useDismissable } from '~/lib/use-dismissable'
+
 export default function CreateMenu() {
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (!open) return
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', handleClick)
-    return () => document.removeEventListener('mousedown', handleClick)
-  }, [open])
+  useDismissable(
+    open,
+    useCallback(() => setOpen(false), []),
+    ref,
+  )
 
   return (
     <div ref={ref} className="relative">
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
-        className="border-rule bg-parchment-dark hover:bg-rule/30 cursor-pointer rounded border px-2.5 py-1 text-xs transition-colors"
+        aria-expanded={open}
+        aria-haspopup="menu"
+        className="border-rule bg-parchment-dark hover:bg-rule/30 rounded-control cursor-pointer border px-2.5 py-1 text-xs transition-colors"
       >
         New +
       </button>
       {open && (
-        <div className="bg-parchment border-rule absolute top-full right-0 z-50 mt-1.5 min-w-[10rem] overflow-hidden rounded border shadow-sm">
+        <div className="bg-parchment border-rule rounded-control absolute top-full right-0 z-50 mt-1.5 min-w-[10rem] overflow-hidden border shadow-sm">
           <Link
             to="/new"
             onClick={() => setOpen(false)}
diff --git a/src/components/DiscussionDrawer.tsx b/src/components/DiscussionDrawer.tsx
index 0eb1c9e..96fdd5f 100644
--- a/src/components/DiscussionDrawer.tsx
+++ b/src/components/DiscussionDrawer.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import { Button, Input, Textarea } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 interface Comment {
@@ -165,7 +166,7 @@ export default function DiscussionDrawer({
   if (!anchor) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex justify-end">
+    <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true">
       <div className="absolute inset-0 bg-black/20" onClick={onClose} />
       <div
         ref={drawerRef}
@@ -175,14 +176,19 @@ export default function DiscussionDrawer({
           <h3 className="text-sm font-semibold">
             Discussion: <span className="font-mono text-xs">{anchor}</span>
           </h3>
-          <button onClick={onClose} className="text-ink-muted hover:text-ink text-lg leading-none">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            className="text-lg leading-none"
+            aria-label="Close discussion"
+          >
             &times;
-          </button>
+          </Button>
         </div>
 
         <div className="flex-1 overflow-y-auto px-4 py-3">
           {initialQuote && (
-            <div className="border-rule bg-parchment-dark mb-4 rounded border-l-2 px-3 py-2 text-xs italic">
+            <div className="border-rule bg-parchment-dark rounded-surface mb-4 border-l-2 px-3 py-2 text-xs italic">
               "{initialQuote}"
             </div>
           )}
@@ -229,12 +235,14 @@ export default function DiscussionDrawer({
 
           {closedThreads.length > 0 && (
             <div className="mt-4">
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setShowClosed(!showClosed)}
-                className="text-ink-muted hover:text-ink mb-2 text-xs"
+                className="mb-2"
               >
                 {showClosed ? 'Hide' : 'Show'} closed ({closedThreads.length})
-              </button>
+              </Button>
               {showClosed &&
                 closedThreads.map((thread) => (
                   <ThreadView
@@ -275,23 +283,18 @@ export default function DiscussionDrawer({
         {currentUser && (
           <div className="border-rule border-t px-4 py-3">
             <form onSubmit={handleSubmit}>
-              <textarea
+              <Textarea
                 value={body}
                 onChange={(e) => setBody(e.target.value)}
-                placeholder="Leave a comment..."
+                placeholder="Leave a comment…"
                 rows={3}
                 maxLength={8192}
-                className="border-rule bg-parchment w-full resize-none rounded border px-3 py-2 text-sm focus:outline-none"
               />
               <div className="mt-2 flex items-center justify-between">
                 <span className="text-ink-muted text-xs">Markdown supported</span>
-                <button
-                  type="submit"
-                  disabled={!body.trim() || submitting}
-                  className="bg-ink text-parchment hover:bg-ink/80 disabled:bg-ink/40 rounded px-3 py-1 text-xs font-medium transition-colors"
-                >
-                  {submitting ? 'Submitting...' : 'Comment'}
-                </button>
+                <Button type="submit" size="sm" disabled={!body.trim() || submitting}>
+                  {submitting ? 'Submitting…' : 'Comment'}
+                </Button>
               </div>
             </form>
           </div>
@@ -356,7 +359,7 @@ function ThreadView({
   const isClosed = thread.status !== 'open'
 
   return (
-    <div className={`border-rule mb-3 rounded border p-3 ${isClosed ? 'opacity-70' : ''}`}>
+    <div className={`border-rule rounded-surface mb-3 border p-3 ${isClosed ? 'opacity-70' : ''}`}>
       {thread.quote && (
         <div className="border-rule mb-2 border-l-2 pl-2 text-xs text-amber-800 italic">
           "{thread.quote}"
@@ -367,12 +370,14 @@ function ThreadView({
         <span className="text-xs font-medium">{thread.authorName}</span>
         <span className="text-ink-muted text-xs">{formatDate(thread.createdAt)}</span>
         {isPending && (
-          <span className="rounded bg-yellow-100 px-1.5 py-0.5 text-xs text-yellow-800">
+          <span className="rounded-control bg-yellow-100 px-1.5 py-0.5 text-xs text-yellow-800">
             Awaiting review
           </span>
         )}
         {isClosed && thread.status && (
-          <span className={`rounded px-1.5 py-0.5 text-xs ${statusColor[thread.status] ?? ''}`}>
+          <span
+            className={`rounded-control px-1.5 py-0.5 text-xs ${statusColor[thread.status] ?? ''}`}
+          >
             {statusLabel[thread.status] ?? thread.status}
           </span>
         )}
@@ -381,25 +386,19 @@ function ThreadView({
       <div className="prose prose-sm mb-2 text-sm">{thread.body}</div>
 
       {thread.resolutionNote && (
-        <div className="border-rule mt-2 rounded border bg-gray-50 px-2 py-1.5 text-xs">
+        <div className="border-rule rounded-surface bg-parchment-dark/40 mt-2 border px-2 py-1.5 text-xs">
           <span className="font-medium">Resolution:</span> {thread.resolutionNote}
         </div>
       )}
 
       {isSteward && isPending && (
         <div className="mt-2 flex gap-2">
-          <button
-            onClick={() => onApprove(thread.id)}
-            className="rounded bg-green-600 px-2 py-0.5 text-xs text-white hover:bg-green-700"
-          >
+          <Button variant="success" size="sm" onClick={() => onApprove(thread.id)}>
             Approve
-          </button>
-          <button
-            onClick={() => onDecline(thread.id)}
-            className="rounded bg-red-600 px-2 py-0.5 text-xs text-white hover:bg-red-700"
-          >
+          </Button>
+          <Button variant="danger" size="sm" onClick={() => onDecline(thread.id)}>
             Decline
-          </button>
+          </Button>
         </div>
       )}
 
@@ -409,7 +408,7 @@ function ThreadView({
             <span className="text-xs font-medium">{reply.authorName}</span>
             <span className="text-ink-muted text-xs">{formatDate(reply.createdAt)}</span>
             {!reply.approvedAt && (
-              <span className="rounded bg-yellow-100 px-1.5 py-0.5 text-xs text-yellow-800">
+              <span className="rounded-control bg-yellow-100 px-1.5 py-0.5 text-xs text-yellow-800">
                 Awaiting review
               </span>
             )}
@@ -417,18 +416,12 @@ function ThreadView({
           <div className="text-sm">{reply.body}</div>
           {isSteward && !reply.approvedAt && (
             <div className="mt-1 flex gap-2">
-              <button
-                onClick={() => onApprove(reply.id)}
-                className="rounded bg-green-600 px-2 py-0.5 text-xs text-white hover:bg-green-700"
-              >
+              <Button variant="success" size="sm" onClick={() => onApprove(reply.id)}>
                 Approve
-              </button>
-              <button
-                onClick={() => onDecline(reply.id)}
-                className="rounded bg-red-600 px-2 py-0.5 text-xs text-white hover:bg-red-700"
-              >
+              </Button>
+              <Button variant="danger" size="sm" onClick={() => onDecline(reply.id)}>
                 Decline
-              </button>
+              </Button>
             </div>
           )}
         </div>
@@ -437,88 +430,74 @@ function ThreadView({
       {!isClosed && thread.approvedAt && (
         <div className="mt-2 flex gap-2">
           {currentUserId && replyTo !== thread.id && (
-            <button
-              onClick={() => onReplyTo(thread.id)}
-              className="text-ink-muted hover:text-ink text-xs"
-            >
+            <Button variant="ghost" size="sm" onClick={() => onReplyTo(thread.id)}>
               Reply
-            </button>
+            </Button>
           )}
           {isSteward && resolveId !== thread.id && (
-            <button
-              onClick={() => onResolveStart(thread.id)}
-              className="text-ink-muted hover:text-ink text-xs"
-            >
+            <Button variant="ghost" size="sm" onClick={() => onResolveStart(thread.id)}>
               Resolve
-            </button>
+            </Button>
           )}
         </div>
       )}
 
       {replyTo === thread.id && (
         <form onSubmit={onReplySubmit} className="mt-2">
-          <textarea
+          <Textarea
             value={replyBody}
             onChange={(e) => onReplyBody(e.target.value)}
-            placeholder="Write a reply..."
+            placeholder="Write a reply…"
             rows={2}
             maxLength={8192}
-            className="border-rule bg-parchment w-full resize-none rounded border px-2 py-1.5 text-sm focus:outline-none"
+            className="px-2 py-1.5"
           />
           <div className="mt-1 flex gap-2">
-            <button
-              type="submit"
-              disabled={!replyBody.trim() || submitting}
-              className="bg-ink text-parchment hover:bg-ink/80 disabled:bg-ink/40 rounded px-2 py-0.5 text-xs font-medium"
-            >
+            <Button type="submit" size="sm" disabled={!replyBody.trim() || submitting}>
               Reply
-            </button>
-            <button
-              type="button"
-              onClick={() => onReplyTo(null)}
-              className="text-ink-muted text-xs"
-            >
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => onReplyTo(null)}>
               Cancel
-            </button>
+            </Button>
           </div>
         </form>
       )}
 
       {resolveId === thread.id && (
-        <form onSubmit={onResolveSubmit} className="border-rule mt-2 rounded border bg-gray-50 p-2">
+        <form
+          onSubmit={onResolveSubmit}
+          className="border-rule rounded-surface bg-parchment-dark/40 mt-2 border p-2"
+        >
           <div className="mb-2 flex gap-2">
             {(['answered', 'decided', 'changed'] as const).map((s) => (
               <button
                 key={s}
                 type="button"
                 onClick={() => onResolveStatusChange(s)}
-                className={`rounded px-2 py-0.5 text-xs font-medium ${
+                className={`rounded-control cursor-pointer px-2 py-0.5 text-xs font-medium transition-colors ${
                   resolveStatus === s
                     ? 'bg-ink text-parchment'
-                    : 'bg-parchment text-ink border-rule border'
+                    : 'bg-parchment text-ink border-rule hover:bg-parchment-dark border'
                 }`}
               >
                 {s.charAt(0).toUpperCase() + s.slice(1)}
               </button>
             ))}
           </div>
-          <input
+          <Input
             type="text"
             value={resolveNote}
             onChange={(e) => onResolveNoteChange(e.target.value)}
             placeholder="Resolution note (optional)"
-            className="border-rule bg-parchment w-full rounded border px-2 py-1 text-sm focus:outline-none"
+            className="px-2 py-1"
           />
           <div className="mt-2 flex gap-2">
-            <button
-              type="submit"
-              className="bg-ink text-parchment hover:bg-ink/80 rounded px-2 py-0.5 text-xs font-medium"
-            >
+            <Button type="submit" size="sm">
               Close thread
-            </button>
-            <button type="button" onClick={onResolveCancel} className="text-ink-muted text-xs">
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onResolveCancel}>
               Cancel
-            </button>
+            </Button>
           </div>
         </form>
       )}
diff --git a/src/components/ExploreTagsAdmin.tsx b/src/components/ExploreTagsAdmin.tsx
index eca81da..b2a2ebd 100644
--- a/src/components/ExploreTagsAdmin.tsx
+++ b/src/components/ExploreTagsAdmin.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 
+import { Button, Input } from '~/components/ui'
+
 export default function ExploreTagsAdmin() {
   const [tags, setTags] = useState<string[]>([])
   const [newTag, setNewTag] = useState('')
@@ -58,7 +60,7 @@ export default function ExploreTagsAdmin() {
   }
 
   if (loading) {
-    return <p className="text-ink-muted text-sm">Loading...</p>
+    return <p className="text-ink-muted text-sm">Loading…</p>
   }
 
   return (
@@ -78,29 +80,32 @@ export default function ExploreTagsAdmin() {
           </p>
         )}
         {tags.map((tag, i) => (
-          <div key={tag} className="border-rule flex items-center gap-2 rounded border px-3 py-2">
+          <div
+            key={tag}
+            className="border-rule rounded-surface flex items-center gap-2 border px-3 py-2"
+          >
             <span className="flex-1 text-sm">{tag}</span>
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={() => moveTag(i, -1)}
               disabled={i === 0 || saving}
-              className="text-ink-muted hover:text-ink text-xs disabled:opacity-30"
+              aria-label={`Move ${tag} up`}
             >
               &uarr;
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={() => moveTag(i, 1)}
               disabled={i === tags.length - 1 || saving}
-              className="text-ink-muted hover:text-ink text-xs disabled:opacity-30"
+              aria-label={`Move ${tag} down`}
             >
               &darr;
-            </button>
-            <button
-              onClick={() => removeTag(tag)}
-              disabled={saving}
-              className="text-ink-muted text-xs hover:text-red-600"
-            >
+            </Button>
+            <Button variant="dangerLink" size="sm" onClick={() => removeTag(tag)} disabled={saving}>
               Remove
-            </button>
+            </Button>
           </div>
         ))}
       </div>
@@ -112,20 +117,16 @@ export default function ExploreTagsAdmin() {
         }}
         className="flex gap-2"
       >
-        <input
+        <Input
           type="text"
           value={newTag}
           onChange={(e) => setNewTag(e.target.value)}
-          placeholder="New tag name..."
-          className="bg-parchment border-rule placeholder:text-ink-muted flex-1 rounded border px-3 py-2 text-sm focus:outline-none"
+          placeholder="New tag name…"
+          className="placeholder:text-ink-muted flex-1"
         />
-        <button
-          type="submit"
-          disabled={!newTag.trim() || saving}
-          className="bg-ink text-parchment disabled:bg-ink/50 rounded px-4 py-2 text-sm"
-        >
+        <Button type="submit" disabled={!newTag.trim() || saving}>
           Add
-        </button>
+        </Button>
       </form>
 
       {message && <p className="text-ink-muted text-xs">{message}</p>}
diff --git a/src/components/FeaturedCollectionsAdmin.tsx b/src/components/FeaturedCollectionsAdmin.tsx
index b3490f1..90317de 100644
--- a/src/components/FeaturedCollectionsAdmin.tsx
+++ b/src/components/FeaturedCollectionsAdmin.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 
+import { Button, Select } from '~/components/ui'
+
 interface CollectionOption {
   ownerSlug: string
   slug: string
@@ -74,7 +76,7 @@ export default function FeaturedCollectionsAdmin() {
   const available = allCollections.filter((c) => !featured.includes(`${c.ownerSlug}/${c.slug}`))
 
   if (loading) {
-    return <p className="text-ink-muted text-sm">Loading...</p>
+    return <p className="text-ink-muted text-sm">Loading…</p>
   }
 
   return (
@@ -98,7 +100,7 @@ export default function FeaturedCollectionsAdmin() {
           return (
             <div
               key={slug}
-              className="border-rule flex items-center gap-2 rounded border px-3 py-2"
+              className="border-rule rounded-surface flex items-center gap-2 border px-3 py-2"
             >
               <div className="flex-1">
                 <span className="text-sm font-medium">{slug}</span>
@@ -106,27 +108,32 @@ export default function FeaturedCollectionsAdmin() {
                   <p className="text-ink-muted line-clamp-1 text-xs">{col.description}</p>
                 )}
               </div>
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => moveCollection(i, -1)}
                 disabled={i === 0 || saving}
-                className="text-ink-muted hover:text-ink text-xs disabled:opacity-30"
+                aria-label={`Move ${slug} up`}
               >
                 &uarr;
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => moveCollection(i, 1)}
                 disabled={i === featured.length - 1 || saving}
-                className="text-ink-muted hover:text-ink text-xs disabled:opacity-30"
+                aria-label={`Move ${slug} down`}
               >
                 &darr;
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="dangerLink"
+                size="sm"
                 onClick={() => removeCollection(slug)}
                 disabled={saving}
-                className="text-ink-muted text-xs hover:text-red-600"
               >
                 Remove
-              </button>
+              </Button>
             </div>
           )
         })}
@@ -135,13 +142,12 @@ export default function FeaturedCollectionsAdmin() {
       {available.length > 0 && (
         <div>
           <label className="text-ink-muted mb-1 block text-xs font-medium">Add a collection</label>
-          <select
+          <Select
             onChange={(e) => {
               if (e.target.value) addCollection(e.target.value)
               e.target.value = ''
             }}
             disabled={saving}
-            className="bg-parchment border-rule text-ink-muted w-full rounded border px-3 py-2 text-sm focus:outline-none"
             defaultValue=""
           >
             <option value="" disabled>
@@ -152,7 +158,7 @@ export default function FeaturedCollectionsAdmin() {
                 {c.ownerSlug}/{c.slug} — {c.name}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
       )}
 
diff --git a/src/components/MirrorAdmin.tsx b/src/components/MirrorAdmin.tsx
index 0522d10..a6246ac 100644
--- a/src/components/MirrorAdmin.tsx
+++ b/src/components/MirrorAdmin.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router'
 
+import { Alert, Button, Table, Td, Textarea, Th, Tr } from '~/components/ui'
+
 interface Props {
   upstream: string
   nodeName: string
@@ -67,50 +69,52 @@ function PaginatedCollections({ collections }: { collections: MirrorStatus['coll
 
   return (
     <div>
-      <table className="w-full text-sm">
+      <Table>
         <thead>
-          <tr className="border-rule text-ink-muted border-b text-left">
-            <th className="pb-2 font-medium">Collection</th>
-            <th className="pb-2 font-medium">Version</th>
-            <th className="pb-2 font-medium">Last Updated</th>
+          <tr>
+            <Th>Collection</Th>
+            <Th>Version</Th>
+            <Th>Last Updated</Th>
           </tr>
         </thead>
         <tbody>
           {visible.map((c) => (
-            <tr key={`${c.ownerSlug}/${c.slug}`} className="border-rule/50 border-b">
-              <td className="py-2">
+            <Tr key={`${c.ownerSlug}/${c.slug}`}>
+              <Td>
                 <Link to={`/${c.ownerSlug}/${c.slug}`} className="text-ink hover:underline">
                   {c.ownerSlug}/{c.slug}
                 </Link>
                 <span className="text-ink-muted ml-2">— {c.name}</span>
-              </td>
-              <td className="py-2 font-mono">{c.localVersion}</td>
-              <td className="text-ink-muted py-2">{new Date(c.updatedAt).toLocaleDateString()}</td>
-            </tr>
+              </Td>
+              <Td className="font-mono">{c.localVersion}</Td>
+              <Td className="text-ink-muted">{new Date(c.updatedAt).toLocaleDateString()}</Td>
+            </Tr>
           ))}
         </tbody>
-      </table>
+      </Table>
       {totalPages > 1 && (
         <div className="text-ink-muted mt-3 flex items-center justify-between text-xs">
           <span>{collections.length} collections</span>
           <div className="flex items-center gap-2">
-            <button
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={() => setPage((p) => Math.max(0, p - 1))}
               disabled={page === 0}
-              className="border-rule hover:bg-parchment-dark rounded border px-2 py-1 disabled:opacity-30"
             >
               ← Prev
-            </button>
+            </Button>
             <span>
               {page + 1} / {totalPages}
             </span>
-            <button
+            <Button
+              variant="secondary"
+              size="sm"
               onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
               disabled={page >= totalPages - 1}
-              className="border-rule hover:bg-parchment-dark rounded border px-2 py-1 disabled:opacity-30"
             >
               Next →
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -255,7 +259,7 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
   return (
     <div className="space-y-8">
       {/* Server Identity */}
-      <section className="border-rule rounded-lg border p-5">
+      <section className="border-rule rounded-surface border p-5">
         <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
           Server Identity
         </h2>
@@ -272,30 +276,20 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
       </section>
 
       {/* Upstream Configuration */}
-      <section className="border-rule rounded-lg border p-5">
+      <section className="border-rule rounded-surface border p-5">
         <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
           Upstream Server
         </h2>
         <div className="mb-4 flex items-center gap-3">
-          <code className="bg-parchment-dark flex-1 rounded px-2 py-1 font-mono text-sm">
+          <code className="bg-parchment-dark rounded-surface flex-1 px-2 py-1 font-mono text-sm">
             {upstream}
           </code>
-          <button
-            onClick={handleTest}
-            disabled={loading === 'test'}
-            className="bg-ink text-parchment hover:bg-ink/90 rounded px-3 py-1.5 text-sm disabled:opacity-50"
-          >
-            {loading === 'test' ? 'Testing...' : 'Test Connection'}
-          </button>
+          <Button size="sm" onClick={handleTest} disabled={loading === 'test'}>
+            {loading === 'test' ? 'Testing…' : 'Test Connection'}
+          </Button>
         </div>
         {testResult && (
-          <div
-            className={`rounded p-3 text-sm ${
-              testResult.ok
-                ? 'border border-green-200 bg-green-50 text-green-800'
-                : 'border border-red-200 bg-red-50 text-red-800'
-            }`}
-          >
+          <Alert variant={testResult.ok ? 'success' : 'error'}>
             {testResult.ok ? (
               <span>
                 ✓ Valid Underlay server — {testResult.collectionCount} public collection
@@ -304,12 +298,12 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
             ) : (
               <span>✗ {testResult.error}</span>
             )}
-          </div>
+          </Alert>
         )}
       </section>
 
       {/* Sync Controls + History */}
-      <section className="border-rule rounded-lg border p-5">
+      <section className="border-rule rounded-surface border p-5">
         <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">Sync</h2>
         <div className="mb-4 flex items-center justify-between">
           <div className="text-sm">
@@ -324,20 +318,13 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
           </div>
           <div className="flex items-center gap-2">
             {syncing && (
-              <button
-                onClick={handleStop}
-                className="rounded bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700"
-              >
+              <Button variant="danger" size="sm" onClick={handleStop}>
                 Stop
-              </button>
+              </Button>
             )}
-            <button
-              onClick={handleSync}
-              disabled={syncing}
-              className="bg-ink text-parchment hover:bg-ink/90 rounded px-3 py-1.5 text-sm disabled:opacity-50"
-            >
-              {syncing ? 'Syncing...' : 'Sync Now'}
-            </button>
+            <Button size="sm" onClick={handleSync} disabled={syncing}>
+              {syncing ? 'Syncing…' : 'Sync Now'}
+            </Button>
           </div>
         </div>
 
@@ -383,7 +370,7 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
         {progressEvents.length > 0 && (
           <div
             ref={logRef}
-            className="bg-parchment-dark border-rule mb-4 max-h-48 space-y-0.5 overflow-y-auto rounded border p-3 font-mono text-xs"
+            className="bg-parchment-dark border-rule rounded-surface mb-4 max-h-48 space-y-0.5 overflow-y-auto border p-3 font-mono text-xs"
           >
             {progressEvents.map((evt, i) => (
               <div
@@ -408,15 +395,15 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
             <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
               History
             </h3>
-            <table className="w-full text-sm">
+            <Table>
               <thead>
-                <tr className="border-rule text-ink-muted border-b text-left">
-                  <th className="pb-2 font-medium">When</th>
-                  <th className="pb-2 font-medium">Trigger</th>
-                  <th className="pb-2 font-medium">Status</th>
-                  <th className="pb-2 font-medium">Duration</th>
-                  <th className="pb-2 font-medium">Summary</th>
-                  <th className="pb-2 font-medium"></th>
+                <tr>
+                  <Th>When</Th>
+                  <Th>Trigger</Th>
+                  <Th>Status</Th>
+                  <Th>Duration</Th>
+                  <Th>Summary</Th>
+                  <Th />
                 </tr>
               </thead>
               <tbody>
@@ -427,13 +414,13 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
                       )
                     : null
                   return (
-                    <tr key={h.id} className="border-rule/50 border-b align-top">
-                      <td className="text-ink-muted py-2 text-xs">
+                    <Tr key={h.id}>
+                      <Td className="text-ink-muted text-xs">
                         {new Date(h.startedAt).toLocaleString()}
-                      </td>
-                      <td className="py-2">
+                      </Td>
+                      <Td>
                         <span
-                          className={`inline-block rounded px-1.5 py-0.5 text-xs font-medium ${
+                          className={`rounded-control inline-block px-1.5 py-0.5 text-xs font-medium ${
                             h.trigger === 'cron'
                               ? 'border border-blue-200 bg-blue-50 text-blue-700'
                               : 'border border-purple-200 bg-purple-50 text-purple-700'
@@ -441,8 +428,8 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
                         >
                           {h.trigger}
                         </span>
-                      </td>
-                      <td className="py-2">
+                      </Td>
+                      <Td>
                         <span
                           className={`text-xs font-medium ${
                             h.status === 'completed'
@@ -454,47 +441,45 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
                         >
                           {h.status}
                         </span>
-                      </td>
-                      <td className="py-2 font-mono text-xs">
+                      </Td>
+                      <Td className="font-mono text-xs">
                         {duration !== null ? `${duration}s` : '—'}
-                      </td>
-                      <td className="py-2 text-xs">
+                      </Td>
+                      <Td className="text-xs">
                         {h.collectionsSynced} synced, {h.versionsPulled} ver, {h.filesDownloaded}↓{' '}
                         {h.filesSkipped}✓
                         {h.collectionsFailed > 0 && (
                           <span className="ml-1 text-red-600">({h.collectionsFailed} failed)</span>
                         )}
-                      </td>
-                      <td className="space-x-2 py-2 text-right text-xs">
+                      </Td>
+                      <Td className="space-x-2 text-right text-xs">
                         {h.status === 'running' && (
-                          <button
-                            onClick={handleStop}
-                            className="rounded bg-red-600 px-2 py-0.5 text-xs text-white hover:bg-red-700"
-                          >
+                          <Button variant="danger" size="sm" onClick={handleStop}>
                             Stop
-                          </button>
+                          </Button>
                         )}
                         {h.logs && h.logs.length > 0 && (
-                          <button
+                          <Button
+                            variant="secondary"
+                            size="sm"
                             onClick={() => setExpandedRun(expandedRun === h.id ? null : h.id)}
-                            className="border-rule hover:bg-parchment-dark rounded border px-2 py-0.5 text-xs"
                           >
                             {expandedRun === h.id ? 'Hide' : 'Logs'}
-                          </button>
+                          </Button>
                         )}
-                      </td>
-                    </tr>
+                      </Td>
+                    </Tr>
                   )
                 })}
               </tbody>
-            </table>
+            </Table>
             {/* Expanded logs for a history entry */}
             {expandedRun &&
               (() => {
                 const run = history.find((h) => h.id === expandedRun)
                 if (!run?.logs?.length) return null
                 return (
-                  <div className="bg-parchment-dark border-rule mt-2 max-h-48 space-y-0.5 overflow-y-auto rounded border p-3 font-mono text-xs">
+                  <div className="bg-parchment-dark border-rule rounded-surface mt-2 max-h-48 space-y-0.5 overflow-y-auto border p-3 font-mono text-xs">
                     {run.logs.map((msg, i) => (
                       <div key={i} className="text-ink-muted">
                         {msg}
@@ -508,7 +493,7 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
       </section>
 
       {/* Mirrored Collections */}
-      <section className="border-rule rounded-lg border p-5">
+      <section className="border-rule rounded-surface border p-5">
         <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
           Mirrored Collections
         </h2>
@@ -519,12 +504,12 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
             No collections mirrored yet. Click "Sync Now" to pull from upstream.
           </p>
         ) : (
-          <p className="text-ink-muted text-sm">Loading...</p>
+          <p className="text-ink-muted text-sm">Loading…</p>
         )}
       </section>
 
       {/* Account Filters */}
-      <section className="border-rule rounded-lg border p-5">
+      <section className="border-rule rounded-surface border p-5">
         <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
           Account Filters
         </h2>
@@ -537,8 +522,9 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
             <label className="text-ink-muted mb-1 block text-xs font-medium">
               Include accounts (one per line)
             </label>
-            <textarea
-              className="border-rule bg-parchment min-h-[80px] w-full resize-y rounded border px-3 py-2 font-mono text-sm"
+            <Textarea
+              resize="y"
+              className="min-h-[80px] font-mono"
               placeholder={'adapt\nkf'}
               disabled
             />
@@ -547,8 +533,9 @@ export default function MirrorAdmin({ upstream, nodeName, syncSchedule }: Props)
             <label className="text-ink-muted mb-1 block text-xs font-medium">
               Exclude accounts (one per line)
             </label>
-            <textarea
-              className="border-rule bg-parchment min-h-[80px] w-full resize-y rounded border px-3 py-2 font-mono text-sm"
+            <Textarea
+              resize="y"
+              className="min-h-[80px] font-mono"
               placeholder={'test-user\nsandbox'}
               disabled
             />
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 2749ef1..2bdd181 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -1,4 +1,5 @@
 import { Component, type ReactNode } from 'react'
+import { isRouteErrorResponse, useRouteError, useRouteLoaderData } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
 
@@ -23,6 +24,41 @@ export default function NotFound({ message }: { message?: string }) {
   )
 }
 
+/**
+ * Route-level error boundary for the data router. Loader-thrown Responses
+ * (404s and friends) land here — without this, react-router renders its
+ * built-in developer error page.
+ */
+export function RouteErrorBoundary() {
+  const error = useRouteError()
+  // BaseLayout reads the root loader's data; fall back to bare content if it's absent.
+  const rootData = useRouteLoaderData('root')
+
+  const content =
+    isRouteErrorResponse(error) && error.status === 404 ? (
+      <NotFound />
+    ) : (
+      <div className="flex flex-col items-center justify-center px-4 py-24">
+        <p className="text-ink-muted mb-6 text-5xl font-extralight tracking-tight select-none">
+          {isRouteErrorResponse(error) ? error.status : 'Error'}
+        </p>
+        <h1 className="text-ink mb-2 text-lg font-medium">Something went wrong</h1>
+        <p className="text-ink-muted mb-6 text-sm">
+          {isRouteErrorResponse(error)
+            ? error.statusText
+            : error instanceof Error
+              ? error.message
+              : ''}
+        </p>
+        <a href="/" className="text-ink-muted hover:text-ink text-sm transition-colors">
+          &larr; Back to home
+        </a>
+      </div>
+    )
+
+  return rootData ? <BaseLayout>{content}</BaseLayout> : content
+}
+
 interface Props {
   children: ReactNode
 }
diff --git a/src/components/QueryExplorer.tsx b/src/components/QueryExplorer.tsx
index c8a845a..698c4f0 100644
--- a/src/components/QueryExplorer.tsx
+++ b/src/components/QueryExplorer.tsx
@@ -750,7 +750,7 @@ export default function QueryExplorer() {
                   setShowCollections(true)
                   setCollectionSearch('')
                 }}
-                className="border-rule hover:bg-parchment-dark text-ink-muted border px-1.5 py-0.5 font-mono text-[11px]"
+                className="border-rule hover:bg-parchment-dark text-ink-muted rounded-control cursor-pointer border px-1.5 py-0.5 font-mono text-[11px] transition-colors"
               >
                 + add collection
               </button>
@@ -847,7 +847,7 @@ export default function QueryExplorer() {
                   <div className="max-h-40 space-y-0.5 overflow-y-auto">
                     {availableVersions.length === 0 ? (
                       <div className="text-ink-muted px-2 py-1 font-mono text-xs">
-                        Loading versions...
+                        Loading versions…
                       </div>
                     ) : (
                       availableVersions.map((v) => {
@@ -924,7 +924,7 @@ export default function QueryExplorer() {
               {sqlJsError ? (
                 <span className="text-red-700">{sqlJsError}</span>
               ) : !sqlJsReady ? (
-                'Loading SQL engine...'
+                'Loading SQL engine…'
               ) : loadedCollections.length === 0 ? (
                 'Add a collection above, then type a SQL query.'
               ) : (
@@ -999,7 +999,7 @@ export default function QueryExplorer() {
                       onClick={() =>
                         downloadCsv(selectedEntry.result!, `query-${selectedEntry.id}.csv`)
                       }
-                      className="border-rule hover:bg-parchment-dark text-ink-muted hover:text-ink border px-2 py-0.5 font-mono text-[11px]"
+                      className="border-rule hover:bg-parchment-dark text-ink-muted hover:text-ink rounded-control cursor-pointer border px-2 py-0.5 font-mono text-[11px] transition-colors"
                     >
                       ↓ CSV
                     </button>
@@ -1007,7 +1007,7 @@ export default function QueryExplorer() {
                   {selectedEntry.sql && (
                     <button
                       onClick={() => shareQuery(selectedEntry.sql)}
-                      className="border-rule hover:bg-parchment-dark text-ink-muted hover:text-ink border px-2 py-0.5 font-mono text-[11px]"
+                      className="border-rule hover:bg-parchment-dark text-ink-muted hover:text-ink rounded-control cursor-pointer border px-2 py-0.5 font-mono text-[11px] transition-colors"
                     >
                       {copied ? '✓ Copied' : 'Share'}
                     </button>
@@ -1039,7 +1039,7 @@ export default function QueryExplorer() {
             <div className="min-h-0 flex-1 overflow-auto">
               {/* Error display */}
               {selectedEntry.error && (
-                <div className="border-b border-red-200 bg-red-50 px-4 py-3 font-mono text-sm text-red-800">
+                <div className="border-b border-red-200 bg-red-50 px-4 py-3 font-mono text-sm text-red-700">
                   {selectedEntry.error}
                 </div>
               )}
@@ -1061,11 +1061,13 @@ export default function QueryExplorer() {
                 <div className="px-4 py-3">
                   <table className="w-full font-mono text-xs">
                     <thead>
-                      <tr className="border-rule border-b">
+                      <tr>
                         {selectedEntry.result.columns.map((col, i) => (
+                          // border-b lives on the cell: a collapsed row border does not
+                          // travel with a sticky header when the body scrolls under it.
                           <th
                             key={i}
-                            className="text-ink-light bg-parchment sticky top-0 px-2 py-1.5 text-left font-medium"
+                            className="text-ink-muted bg-parchment-dark border-rule sticky top-0 border-b px-2 py-1.5 text-left font-medium"
                           >
                             {col}
                           </th>
diff --git a/src/components/SchemaBrowser.tsx b/src/components/SchemaBrowser.tsx
index 0947fc9..eba2070 100644
--- a/src/components/SchemaBrowser.tsx
+++ b/src/components/SchemaBrowser.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router'
 
+import { Badge } from '~/components/ui'
+
 interface SchemaResult {
   id: string
   schema: Record<string, unknown>
@@ -61,14 +63,14 @@ export default function SchemaBrowser() {
                 ? 'Search by label...'
                 : 'Search by type name...'
           }
-          className="bg-parchment border-rule placeholder:text-ink-muted focus:border-ink flex-1 border px-3 py-2 font-mono text-sm focus:outline-none"
+          className="bg-parchment border-rule placeholder:text-ink-muted focus:border-ink rounded-control flex-1 border px-3 py-2 font-mono text-sm focus:outline-none"
           value={query}
           onChange={(e) => handleInput(e.target.value)}
         />
-        <div className="border-rule flex overflow-hidden rounded border text-xs">
+        <div className="border-rule rounded-control flex overflow-hidden border text-xs">
           <button
             onClick={() => handleFilterChange('q')}
-            className={`px-3 py-2 transition-colors ${
+            className={`cursor-pointer px-3 py-2 transition-colors ${
               filterType === 'q' ? 'bg-ink text-parchment' : 'hover:bg-parchment-dark'
             }`}
           >
@@ -76,7 +78,7 @@ export default function SchemaBrowser() {
           </button>
           <button
             onClick={() => handleFilterChange('slug')}
-            className={`border-rule border-l px-3 py-2 transition-colors ${
+            className={`border-rule cursor-pointer border-l px-3 py-2 transition-colors ${
               filterType === 'slug' ? 'bg-ink text-parchment' : 'hover:bg-parchment-dark'
             }`}
           >
@@ -84,7 +86,7 @@ export default function SchemaBrowser() {
           </button>
           <button
             onClick={() => handleFilterChange('label')}
-            className={`border-rule border-l px-3 py-2 transition-colors ${
+            className={`border-rule cursor-pointer border-l px-3 py-2 transition-colors ${
               filterType === 'label' ? 'bg-ink text-parchment' : 'hover:bg-parchment-dark'
             }`}
           >
@@ -108,18 +110,14 @@ export default function SchemaBrowser() {
               <Link
                 key={s.id}
                 to={`/schemas/${s.id}`}
-                className="border-rule hover:bg-parchment-dark/50 block border p-4 transition-colors"
+                className="border-rule rounded-surface hover:bg-parchment-dark/50 block border p-4 transition-colors"
               >
                 <div className="mb-2 flex items-center justify-between">
                   <div className="flex items-center gap-2">
                     <code className="text-ink-muted font-mono text-xs">
                       {s.schemaHash.slice(0, 12)}…
                     </code>
-                    {isPrivate && (
-                      <span className="border-rule text-ink-muted border px-1.5 py-0.5 text-[11px]">
-                        private
-                      </span>
-                    )}
+                    {isPrivate && <Badge>private</Badge>}
                   </div>
                   <span className="text-ink-muted text-[11px]">
                     {new Date(s.createdAt).toLocaleDateString('en-US', {
@@ -135,7 +133,7 @@ export default function SchemaBrowser() {
                   {fieldNames.slice(0, 8).map((name) => (
                     <span
                       key={name}
-                      className="bg-parchment-dark border-rule rounded border px-1.5 py-0.5 font-mono text-[11px]"
+                      className="bg-parchment-dark border-rule rounded-control border px-1.5 py-0.5 font-mono text-[11px]"
                     >
                       {name}
                     </span>
@@ -153,7 +151,7 @@ export default function SchemaBrowser() {
                     {s.labels.map((label) => (
                       <span
                         key={label}
-                        className="text-link rounded border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[11px]"
+                        className="text-link rounded-control border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[11px]"
                       >
                         {label}
                       </span>
diff --git a/src/components/SchemaLabelManager.tsx b/src/components/SchemaLabelManager.tsx
index 2664b3e..a1364b7 100644
--- a/src/components/SchemaLabelManager.tsx
+++ b/src/components/SchemaLabelManager.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react'
 
+import { Button, Input } from '~/components/ui'
+
 interface Label {
   label: string
   createdAt: string
@@ -83,7 +85,7 @@ export default function SchemaLabelManager({ schemaId, initialLabels }: Props) {
           {labels.map((l) => (
             <span
               key={l.label}
-              className="bg-parchment border-rule group inline-flex items-center gap-2 rounded border px-3 py-1.5 text-sm"
+              className="bg-parchment border-rule rounded-control group inline-flex items-center gap-2 border px-3 py-1.5 text-sm"
             >
               <span className="text-ink">{l.label}</span>
               <span className="text-ink-muted text-[11px]">
@@ -92,10 +94,13 @@ export default function SchemaLabelManager({ schemaId, initialLabels }: Props) {
                   day: 'numeric',
                 })}
               </span>
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => removeLabel(l.label)}
-                className="text-ink-muted ml-1 opacity-0 transition-colors group-hover:opacity-100 hover:text-red-600"
+                className="ml-1 opacity-0 group-hover:opacity-100 hover:text-red-600"
                 title="Remove label"
+                aria-label={`Remove label ${l.label}`}
               >
                 <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -105,7 +110,7 @@ export default function SchemaLabelManager({ schemaId, initialLabels }: Props) {
                     d="M6 18L18 6M6 6l12 12"
                   />
                 </svg>
-              </button>
+              </Button>
             </span>
           ))}
         </div>
@@ -115,20 +120,16 @@ export default function SchemaLabelManager({ schemaId, initialLabels }: Props) {
 
       {/* Add label form */}
       <form onSubmit={addLabel} className="flex items-center gap-2">
-        <input
+        <Input
           type="text"
           placeholder="Add label (e.g. schema.org/Person)"
-          className="bg-parchment border-rule placeholder:text-ink-muted focus:border-ink w-64 border px-2.5 py-1.5 font-mono text-xs focus:outline-none"
+          className="placeholder:text-ink-muted w-64 px-2.5 py-1.5 font-mono text-xs"
           value={newLabel}
           onChange={(e) => setNewLabel(e.target.value)}
         />
-        <button
-          type="submit"
-          disabled={adding || !newLabel.trim()}
-          className="border-rule hover:bg-parchment-dark border px-2.5 py-1.5 text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {adding ? 'Adding...' : 'Add'}
-        </button>
+        <Button type="submit" variant="secondary" size="sm" disabled={adding || !newLabel.trim()}>
+          {adding ? 'Adding…' : 'Add'}
+        </Button>
       </form>
 
       {error && <p className="mt-1.5 text-xs text-red-600">{error}</p>}
diff --git a/src/components/SchemaList.tsx b/src/components/SchemaList.tsx
new file mode 100644
index 0000000..814b3d1
--- /dev/null
+++ b/src/components/SchemaList.tsx
@@ -0,0 +1,264 @@
+import { type FormEvent, useEffect, useState } from 'react'
+import { Link } from 'react-router'
+
+import { Alert, Button } from '~/components/ui'
+
+/**
+ * The schema browser for one version of a collection: per-type cards with
+ * field tables, plus the owner-only per-type ARK redirect config. Shared by
+ * the latest schemas page and the version-pinned one.
+ */
+export default function SchemaList({
+  owner,
+  collection,
+  schemasData,
+  isOwner,
+}: {
+  owner: string
+  collection: string
+  schemasData: any
+  isOwner: boolean
+}) {
+  const schemas: any[] = schemasData?.schemas ?? []
+
+  const [arkRecordTypes, setArkRecordTypes] = useState<Record<string, string>>({})
+  const [arkSuccess, setArkSuccess] = useState('')
+  const [arkError, setArkError] = useState('')
+
+  useEffect(() => {
+    if (!isOwner || !owner || !collection) return
+    fetch(`/api/collections/${owner}/${collection}/ark/record-types`, {
+      credentials: 'include',
+    })
+      .then((r) => (r.ok ? r.json() : []))
+      .then((arkTypes: any[]) => {
+        const types: Record<string, string> = {}
+        for (const entry of arkTypes) {
+          types[entry.recordType] = entry.redirectUrlField
+        }
+        setArkRecordTypes(types)
+      })
+  }, [isOwner, owner, collection])
+
+  async function handleUpdateArkType(e: FormEvent, slug: string) {
+    e.preventDefault()
+    setArkSuccess('')
+    setArkError('')
+    const form = e.target as HTMLFormElement
+    const formData = new FormData(form)
+    const redirectUrlField = (formData.get('redirectUrlField') as string) || null
+
+    const res = await fetch(`/api/collections/${owner}/${collection}/ark/record-types`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ recordType: slug, redirectUrlField }),
+    })
+    if (res.ok) {
+      setArkSuccess(`ARK settings updated for ${slug}.`)
+      setArkRecordTypes((prev) => {
+        const next = { ...prev }
+        if (redirectUrlField) {
+          next[slug] = redirectUrlField
+        } else {
+          delete next[slug]
+        }
+        return next
+      })
+    } else {
+      const body = await res.json().catch(() => ({}))
+      setArkError(body.error ?? 'Failed to update ARK settings.')
+    }
+  }
+
+  return (
+    <>
+      {arkSuccess && (
+        <Alert variant="success" className="mb-4">
+          {arkSuccess}
+        </Alert>
+      )}
+      {arkError && (
+        <Alert variant="error" className="mb-4">
+          {arkError}
+        </Alert>
+      )}
+
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-ink-muted text-sm font-semibold">
+          {schemas.length} type{schemas.length !== 1 ? 's' : ''}
+          {schemasData?.semver && <span className="ml-1 font-normal">in {schemasData.semver}</span>}
+        </h2>
+      </div>
+
+      {schemas.length === 0 ? (
+        <p className="text-ink-muted py-8 text-center text-sm">No schemas in this version.</p>
+      ) : (
+        <div className="space-y-4">
+          {schemas.map((s: any) => {
+            const properties = (s.schema as any)?.properties ?? {}
+            const fields = Object.entries(properties)
+            const isPrivate = (s.schema as any)?.private === true
+            const labels: string[] = (s.schema as any)?.['x-underlay-labels'] ?? []
+
+            const urlFields = fields
+              .filter(
+                ([, def]: [string, any]) =>
+                  def.type === 'string' && (def.format === 'uri' || def.format === 'url'),
+              )
+              .map(([name]: [string, any]) => name)
+            const currentField = arkRecordTypes[s.slug] ?? ''
+
+            return (
+              <div key={s.slug} className="border-rule rounded-surface overflow-hidden border">
+                {/* Header */}
+                <div className="bg-parchment-dark border-rule flex items-center justify-between border-b px-4 py-3">
+                  <div className="flex items-center gap-3">
+                    <svg
+                      className="text-ink-muted h-4 w-4 shrink-0"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                      />
+                    </svg>
+                    <span className="text-sm font-medium">{s.slug}</span>
+                    {isPrivate && (
+                      <span className="border-rule text-ink-muted rounded-control border px-1.5 py-0.5 text-[11px]">
+                        private
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-3">
+                    {labels.length > 0 && (
+                      <div className="flex items-center gap-1">
+                        {labels.map((label: string) => (
+                          <span
+                            key={label}
+                            className="bg-parchment border-rule text-ink-muted rounded-control border px-1.5 py-0.5 text-[11px]"
+                          >
+                            {label}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    <Link
+                      to={`/schemas/${s.schemaId}`}
+                      className="text-link text-[11px] hover:underline"
+                      title="View global schema detail"
+                    >
+                      {s.schemaHash.slice(0, 10)}…
+                    </Link>
+                  </div>
+                </div>
+
+                {/* Fields table */}
+                <table className="w-full text-xs">
+                  <thead>
+                    <tr className="border-rule border-b">
+                      <th className="w-48 p-2.5 text-left font-medium">Field</th>
+                      <th className="w-32 p-2.5 text-left font-medium">Type</th>
+                      <th className="p-2.5 text-left font-medium">Annotations</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {fields.map(([name, def]: [string, any]) => {
+                      const fieldType = def.type ?? 'unknown'
+                      const format = def.format ? ` (${def.format})` : ''
+                      const refType = def['x-ref-type']
+                      const isFieldPrivate = def.private === true
+
+                      return (
+                        <tr key={name} className="border-rule hover:bg-parchment-dark/50 border-t">
+                          <td className="p-2.5 font-mono">{name}</td>
+                          <td className="text-ink-muted p-2.5">
+                            {fieldType}
+                            {format}
+                          </td>
+                          <td className="p-2.5">
+                            <div className="flex items-center gap-2">
+                              {refType && (
+                                <span className="bg-parchment-dark border-rule rounded-control inline-flex items-center gap-1 border px-1.5 py-0.5 text-[11px]">
+                                  <svg
+                                    className="text-ink-muted h-3 w-3"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"
+                                    />
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                                    />
+                                  </svg>
+                                  → {refType}
+                                </span>
+                              )}
+                              {isFieldPrivate && (
+                                <span className="border-rule text-ink-muted rounded-control border px-1.5 py-0.5 text-[11px]">
+                                  private
+                                </span>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+
+                {/* ARK section for this type (owner only) */}
+                {isOwner && urlFields.length > 0 && (
+                  <div className="border-rule bg-parchment-dark/30 border-t px-4 py-3">
+                    <p className="text-ink-muted mb-2 text-xs font-medium tracking-wide uppercase">
+                      ARK identifiers for this type
+                    </p>
+                    <form
+                      onSubmit={(e) => handleUpdateArkType(e, s.slug)}
+                      className="flex items-center gap-3"
+                    >
+                      <label
+                        htmlFor={`ark-field-${s.slug}`}
+                        className="text-ink-muted shrink-0 text-xs"
+                      >
+                        Redirect URL field:
+                      </label>
+                      <select
+                        id={`ark-field-${s.slug}`}
+                        name="redirectUrlField"
+                        defaultValue={currentField}
+                        className="bg-parchment border-rule focus:border-ink rounded-control cursor-pointer border px-2 py-1 text-xs focus:outline-none"
+                      >
+                        <option value="">Disabled</option>
+                        {urlFields.map((f: string) => (
+                          <option key={f} value={f}>
+                            {f}
+                          </option>
+                        ))}
+                      </select>
+                      <Button type="submit" size="sm">
+                        Save
+                      </Button>
+                    </form>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/SettingsLayout.tsx b/src/components/SettingsLayout.tsx
new file mode 100644
index 0000000..1421ca6
--- /dev/null
+++ b/src/components/SettingsLayout.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react'
+import { Link, useLocation } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+
+/**
+ * Shared shell for every settings surface (user, org, collection): a sticky
+ * left rail of sections, one title style, one content width.
+ *
+ * Rail items navigate routes (`to: '/settings/keys'`) or in-page anchors
+ * (`to: '#webhooks'`). Anchor rails get scrollspy: wrap each section in an
+ * element with `id` and `data-settings-section` and the rail tracks scroll.
+ */
+
+export interface SettingsRailItem {
+  label: string
+  to: string
+  danger?: boolean
+}
+
+export interface SettingsRailGroup {
+  heading?: string
+  items: SettingsRailItem[]
+}
+
+export const userSettingsRail: SettingsRailGroup[] = [
+  {
+    heading: 'Account',
+    items: [
+      { label: 'Profile', to: '/settings' },
+      { label: 'API keys', to: '/settings/keys' },
+      { label: 'Sessions', to: '/settings/sessions' },
+    ],
+  },
+]
+
+export function orgSettingsRail(owner: string): SettingsRailGroup[] {
+  return [
+    {
+      heading: 'Organization',
+      items: [
+        { label: 'Profile', to: `/${owner}/settings` },
+        { label: 'Members', to: `/${owner}/settings/members` },
+      ],
+    },
+    {
+      heading: 'Access',
+      items: [{ label: 'API keys', to: `/${owner}/settings/keys` }],
+    },
+  ]
+}
+
+export const collectionSettingsRail: SettingsRailGroup[] = [
+  {
+    heading: 'Collection',
+    items: [
+      { label: 'Basics', to: '#basics' },
+      { label: 'Metadata', to: '#metadata' },
+      { label: 'Export', to: '#export' },
+    ],
+  },
+  {
+    heading: 'Integrations',
+    items: [
+      { label: 'ARK identifiers', to: '#ark' },
+      { label: 'Webhooks', to: '#webhooks' },
+    ],
+  },
+  {
+    heading: 'Advanced',
+    items: [
+      { label: 'Transfer', to: '#transfer' },
+      { label: 'Danger zone', to: '#danger', danger: true },
+    ],
+  },
+]
+
+const itemBase = 'block border-l-2 px-2.5 py-1.5 text-sm transition-colors'
+const itemActive = `${itemBase} border-ink bg-parchment-dark text-ink font-medium`
+const itemInactive = `${itemBase} border-transparent text-ink-light hover:text-ink`
+const itemDanger = `${itemBase} border-transparent text-red-700/80 hover:text-red-700`
+
+function RailLink({ item, active }: { item: SettingsRailItem; active: boolean }) {
+  const className = active ? itemActive : item.danger ? itemDanger : itemInactive
+  if (item.to.startsWith('#')) {
+    return (
+      <a href={item.to} className={className}>
+        {item.label}
+      </a>
+    )
+  }
+  return (
+    <Link to={item.to} className={className}>
+      {item.label}
+    </Link>
+  )
+}
+
+export default function SettingsLayout({
+  crumb,
+  title,
+  description,
+  groups,
+  children,
+}: {
+  /** Breadcrumb above the rail+content area, e.g. owner / collection. */
+  crumb?: React.ReactNode
+  title: string
+  description?: string
+  groups: SettingsRailGroup[]
+  children: React.ReactNode
+}) {
+  const location = useLocation()
+  const anchorIds = groups.flatMap((g) =>
+    g.items.filter((i) => i.to.startsWith('#')).map((i) => i.to.slice(1)),
+  )
+  const [activeAnchor, setActiveAnchor] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (anchorIds.length === 0) return
+    const sections = Array.from(document.querySelectorAll('[data-settings-section]'))
+    if (sections.length === 0) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) setActiveAnchor(entry.target.id)
+        }
+      },
+      { rootMargin: '-10% 0px -70% 0px' },
+    )
+    sections.forEach((s) => observer.observe(s))
+    return () => observer.disconnect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorIds.length])
+
+  function isActive(item: SettingsRailItem): boolean {
+    if (item.to.startsWith('#')) {
+      const id = item.to.slice(1)
+      return activeAnchor ? activeAnchor === id : anchorIds[0] === id
+    }
+    return location.pathname === item.to
+  }
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        {crumb && <div className="mb-4 text-sm">{crumb}</div>}
+        <div className="flex items-start gap-8">
+          <nav className="sticky top-6 hidden w-44 shrink-0 md:block" aria-label="Settings">
+            {groups.map((group, i) => (
+              <div key={i} className="mb-5">
+                {group.heading && (
+                  <p className="text-ink-muted mb-1.5 px-2.5 text-[11px] font-semibold tracking-wide uppercase">
+                    {group.heading}
+                  </p>
+                )}
+                <div className="space-y-0.5">
+                  {group.items.map((item) => (
+                    <RailLink key={item.to} item={item} active={isActive(item)} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </nav>
+
+          <div className="max-w-2xl min-w-0 flex-1">
+            {/* Mobile: the rail collapses to a scrollable row above the content. */}
+            <nav
+              className="border-rule mb-6 flex gap-1 overflow-x-auto border-b pb-2 md:hidden"
+              aria-label="Settings"
+            >
+              {groups
+                .flatMap((g) => g.items)
+                .map((item) => (
+                  <RailLink key={item.to} item={item} active={isActive(item)} />
+                ))}
+            </nav>
+
+            <h1 className="mb-1 text-xl font-semibold tracking-tight">{title}</h1>
+            {description ? (
+              <p className="text-ink-muted mb-6 text-sm">{description}</p>
+            ) : (
+              <div className="mb-6" />
+            )}
+            {children}
+          </div>
+        </div>
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
index c45bb11..b4631ea 100644
--- a/src/components/UserMenu.tsx
+++ b/src/components/UserMenu.tsx
@@ -1,6 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { Link } from 'react-router'
 
+import { useDismissable } from '~/lib/use-dismissable'
+
 interface Org {
   slug: string
   displayName: string
@@ -25,24 +27,30 @@ export default function UserMenu({
   const [open, setOpen] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
-        setOpen(false)
-      }
-    }
-    document.addEventListener('click', handleClickOutside)
-    return () => document.removeEventListener('click', handleClickOutside)
-  }, [])
+  useDismissable(
+    open,
+    useCallback(() => setOpen(false), []),
+    rootRef,
+  )
 
   const initial = (displayName || slug || '?').charAt(0).toUpperCase()
 
+  // Personal org first, then alphabetical — the raw membership order is arbitrary.
+  const sortedOrgs = [...orgs].sort(
+    (a, b) =>
+      Number(b.isDefault ?? false) - Number(a.isDefault ?? false) ||
+      a.displayName.localeCompare(b.displayName),
+  )
+
   return (
     <div ref={rootRef} className="relative">
       <button
         className="bg-ink text-parchment flex h-7 w-7 cursor-pointer items-center justify-center overflow-hidden rounded-full text-xs font-semibold transition-opacity hover:opacity-80"
         type="button"
         onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label="Account menu"
       >
         {avatarUrl ? (
           <img src={avatarUrl} alt="" className="h-full w-full object-cover" />
@@ -52,7 +60,7 @@ export default function UserMenu({
       </button>
       {open && (
         <div className="absolute top-full right-0 z-50 pt-1">
-          <div className="bg-parchment border-rule min-w-48 border shadow-sm">
+          <div className="bg-parchment border-rule rounded-control min-w-48 overflow-hidden border shadow-sm">
             <Link
               to="/dashboard"
               className="text-ink-light hover:bg-parchment-dark block px-3 py-2 text-sm transition-colors"
@@ -76,25 +84,27 @@ export default function UserMenu({
                 Admin
               </Link>
             )}
-            {orgs.length > 0 && (
+            {sortedOrgs.length > 0 && (
               <>
                 <hr className="border-rule" />
                 <p className="text-ink-muted px-3 pt-2 pb-1 text-[10px] font-semibold tracking-wide uppercase">
                   Your organizations
                 </p>
-                {orgs.map((org) => (
-                  <Link
-                    key={org.slug}
-                    to={`/${org.slug}`}
-                    className="text-ink-light hover:bg-parchment-dark block px-3 py-1.5 text-sm transition-colors"
-                    onClick={() => setOpen(false)}
-                  >
-                    {org.displayName}
-                    {org.isDefault && (
-                      <span className="text-ink-muted ml-1 text-xs">(personal)</span>
-                    )}
-                  </Link>
-                ))}
+                <div className="max-h-64 overflow-y-auto">
+                  {sortedOrgs.map((org) => (
+                    <Link
+                      key={org.slug}
+                      to={`/${org.slug}`}
+                      className="text-ink-light hover:bg-parchment-dark block px-3 py-1.5 text-sm transition-colors"
+                      onClick={() => setOpen(false)}
+                    >
+                      {org.displayName}
+                      {org.isDefault && (
+                        <span className="text-ink-muted ml-1 text-xs">(personal)</span>
+                      )}
+                    </Link>
+                  ))}
+                </div>
               </>
             )}
             <hr className="border-rule" />
diff --git a/src/components/WebhooksSettings.tsx b/src/components/WebhooksSettings.tsx
index 3323dde..7d3ee2f 100644
--- a/src/components/WebhooksSettings.tsx
+++ b/src/components/WebhooksSettings.tsx
@@ -1,5 +1,7 @@
 import { type FormEvent, useState } from 'react'
 
+import { Alert, Badge, Button, Checkbox, Input, Table, Td, Th } from '~/components/ui'
+
 const BUMP_TYPES = ['major', 'minor', 'patch'] as const
 type BumpType = (typeof BUMP_TYPES)[number]
 
@@ -156,10 +158,7 @@ export default function WebhooksSettings({
   }
 
   return (
-    <div className="border-rule mb-10 border-t pt-6">
-      <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-        Webhooks
-      </h2>
+    <div>
       <p className="text-ink-muted mb-3 text-sm">
         POST a signed payload to a URL whenever a new version is created. Choose which version bump
         types trigger each endpoint. Requests are signed with{' '}
@@ -168,42 +167,44 @@ export default function WebhooksSettings({
       </p>
 
       {newSecret && (
-        <div className="mb-4 border border-green-300 bg-green-50 p-4">
-          <p className="mb-1 text-sm font-semibold">Webhook created</p>
+        <Alert variant="success" className="mb-4">
+          <p className="mb-1 font-semibold">Webhook created</p>
           <p className="text-ink-muted mb-2 text-xs">
             Copy the signing secret now — it won't be shown again.
           </p>
-          <code className="bg-ink text-parchment block p-2 font-mono text-xs break-all">
+          <code className="bg-ink text-parchment rounded-surface block p-2 font-mono text-xs break-all">
             {newSecret}
           </code>
-        </div>
+        </Alert>
       )}
 
       {error && (
-        <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+        <Alert variant="error" className="mb-4">
           {error}
-        </p>
+        </Alert>
       )}
       {notice && (
-        <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
+        <Alert variant="success" className="mb-4">
           {notice}
-        </p>
+        </Alert>
       )}
 
       {/* Create form */}
-      <form onSubmit={handleCreate} className="border-rule mb-6 space-y-4 border p-4">
+      <form
+        onSubmit={handleCreate}
+        className="border-rule rounded-surface mb-6 space-y-4 border p-4"
+      >
         <div>
           <label htmlFor="webhookUrl" className="mb-1 block text-sm font-medium">
             Endpoint URL
           </label>
-          <input
+          <Input
             type="url"
             id="webhookUrl"
             required
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             placeholder="https://example.org/hooks/underlay"
-            className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
           />
         </div>
         <div>
@@ -211,24 +212,15 @@ export default function WebhooksSettings({
           <div className="flex flex-wrap gap-4">
             {BUMP_TYPES.map((bump) => (
               <label key={bump} className="flex items-center gap-2 text-sm">
-                <input
-                  type="checkbox"
-                  checked={filter.includes(bump)}
-                  onChange={() => toggleFilter(bump)}
-                  className="accent-ink"
-                />
+                <Checkbox checked={filter.includes(bump)} onChange={() => toggleFilter(bump)} />
                 {bump}
               </label>
             ))}
           </div>
         </div>
-        <button
-          type="submit"
-          disabled={submitting}
-          className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-        >
+        <Button type="submit" disabled={submitting}>
           {submitting ? 'Adding…' : 'Add webhook'}
-        </button>
+        </Button>
       </form>
 
       {/* List */}
@@ -237,15 +229,13 @@ export default function WebhooksSettings({
       ) : (
         <div className="space-y-3">
           {webhooks.map((hook) => (
-            <div key={hook.id} className="border-rule border p-3">
+            <div key={hook.id} className="border-rule rounded-surface border p-3">
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                   <p className="truncate font-mono text-sm">{hook.url}</p>
                   <div className="text-ink-muted mt-1 flex flex-wrap items-center gap-2 text-xs">
                     {hook.bumpFilter.map((b) => (
-                      <span key={b} className="border-rule border px-1 py-0.5">
-                        {b}
-                      </span>
+                      <Badge key={b}>{b}</Badge>
                     ))}
                     {!hook.enabled && <span className="text-amber-700">· disabled</span>}
                     {hook.lastDeliveryAt && (
@@ -254,21 +244,15 @@ export default function WebhooksSettings({
                   </div>
                 </div>
                 <div className="flex shrink-0 items-center gap-3 text-xs">
-                  <button onClick={() => handleTest(hook.id)} className="text-link hover:underline">
+                  <Button variant="link" size="sm" onClick={() => handleTest(hook.id)}>
                     Test
-                  </button>
-                  <button
-                    onClick={() => handleToggle(hook)}
-                    className="text-ink-muted hover:text-ink hover:underline"
-                  >
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => handleToggle(hook)}>
                     {hook.enabled ? 'Disable' : 'Enable'}
-                  </button>
-                  <button
-                    onClick={() => handleDelete(hook.id)}
-                    className="text-red-700 hover:underline"
-                  >
+                  </Button>
+                  <Button variant="dangerLink" size="sm" onClick={() => handleDelete(hook.id)}>
                     Delete
-                  </button>
+                  </Button>
                 </div>
               </div>
 
@@ -290,53 +274,50 @@ export default function WebhooksSettings({
                   ) : (deliveries[hook.id]?.length ?? 0) === 0 ? (
                     <p className="text-ink-muted text-xs">No deliveries yet.</p>
                   ) : (
-                    <div className="overflow-x-auto">
-                      <table className="w-full text-left text-xs">
-                        <thead className="text-ink-muted">
-                          <tr className="border-rule border-b">
-                            <th className="py-1 pr-3 font-medium">When</th>
-                            <th className="py-1 pr-3 font-medium">Event</th>
-                            <th className="py-1 pr-3 font-medium">Status</th>
-                            <th className="py-1 pr-3 font-medium">Code</th>
-                            <th className="py-1 pr-3 font-medium">Attempts</th>
-                            <th className="py-1 font-medium"></th>
+                    <Table dense>
+                      <thead>
+                        <tr>
+                          <Th>When</Th>
+                          <Th>Event</Th>
+                          <Th>Status</Th>
+                          <Th>Code</Th>
+                          <Th>Attempts</Th>
+                          <Th></Th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {deliveries[hook.id]!.map((d) => (
+                          <tr key={d.id} className="align-top">
+                            <Td className="text-ink-muted whitespace-nowrap">
+                              {new Date(d.createdAt).toLocaleString()}
+                            </Td>
+                            <Td>
+                              {d.event}
+                              {d.semver && <span className="text-ink-muted"> · {d.semver}</span>}
+                            </Td>
+                            <Td className={`font-medium ${STATUS_STYLES[d.status]}`}>
+                              {d.status}
+                              {d.error && d.status === 'failed' && (
+                                <span className="text-ink-muted block font-normal">{d.error}</span>
+                              )}
+                            </Td>
+                            <Td>{d.responseCode ?? '—'}</Td>
+                            <Td>{d.attempts}</Td>
+                            <Td>
+                              {d.status !== 'success' && (
+                                <Button
+                                  variant="link"
+                                  size="sm"
+                                  onClick={() => handleRetry(hook.id, d.id)}
+                                >
+                                  Retry
+                                </Button>
+                              )}
+                            </Td>
                           </tr>
-                        </thead>
-                        <tbody>
-                          {deliveries[hook.id]!.map((d) => (
-                            <tr key={d.id} className="border-rule/50 border-b align-top">
-                              <td className="text-ink-muted py-1 pr-3 whitespace-nowrap">
-                                {new Date(d.createdAt).toLocaleString()}
-                              </td>
-                              <td className="py-1 pr-3">
-                                {d.event}
-                                {d.semver && <span className="text-ink-muted"> · {d.semver}</span>}
-                              </td>
-                              <td className={`py-1 pr-3 font-medium ${STATUS_STYLES[d.status]}`}>
-                                {d.status}
-                                {d.error && d.status === 'failed' && (
-                                  <span className="text-ink-muted block font-normal">
-                                    {d.error}
-                                  </span>
-                                )}
-                              </td>
-                              <td className="py-1 pr-3">{d.responseCode ?? '—'}</td>
-                              <td className="py-1 pr-3">{d.attempts}</td>
-                              <td className="py-1">
-                                {d.status !== 'success' && (
-                                  <button
-                                    onClick={() => handleRetry(hook.id, d.id)}
-                                    className="text-link hover:underline"
-                                  >
-                                    Retry
-                                  </button>
-                                )}
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
+                        ))}
+                      </tbody>
+                    </Table>
                   )}
                 </div>
               </details>
diff --git a/src/components/collection-overview.tsx b/src/components/collection-overview.tsx
new file mode 100644
index 0000000..f532524
--- /dev/null
+++ b/src/components/collection-overview.tsx
@@ -0,0 +1,387 @@
+import DOMPurify from 'isomorphic-dompurify'
+import { marked } from 'marked'
+import { useMemo } from 'react'
+import { Link } from 'react-router'
+
+import { bareSemver, formatBytes } from '~/lib/format'
+import { TokenLink } from '~/lib/share-token'
+
+/**
+ * The one collection overview layout, shared by the latest page
+ * (/:owner/:collection) and pinned versions (/:owner/:collection/v/:n).
+ * Everything version-scoped (counts, types, README, description, tags) comes
+ * from the `version` being shown; collection-wide blocks (subscribe, share,
+ * collection ARK, version count) come from `data`.
+ */
+
+function normalizeTypeCounts(tc: unknown): { type: string; count: number }[] {
+  if (!tc) return []
+  const list = Array.isArray(tc)
+    ? (tc as { type: string; count: number }[])
+    : Object.entries(tc as Record<string, number>).map(([type, count]) => ({ type, count }))
+  return [...list].sort((a, b) => a.type.localeCompare(b.type))
+}
+
+export default function CollectionOverviewBody({
+  owner,
+  collection,
+  data,
+  version,
+  isLatest,
+  /** Rendered SharePanel (owner-only), passed in to keep it beside its API calls. */
+  share,
+}: {
+  owner: string
+  collection: string
+  data: any
+  version: any | null
+  isLatest: boolean
+  share?: React.ReactNode
+}) {
+  const readmeHtml = useMemo(() => {
+    const meta = version?.metadata as Record<string, unknown> | null | undefined
+    const source = (meta?.readme as string) || version?.message || null
+    return source ? DOMPurify.sanitize(marked.parse(source) as string) : null
+  }, [version])
+
+  const base = `/${owner}/${collection}`
+  const recordsPath = isLatest
+    ? `${base}/records`
+    : `${base}/v/${bareSemver(version?.semver ?? '')}/records`
+
+  const totalVersions = data.versionCount ?? 0
+  const allTypes = normalizeTypeCounts(version?.typeCounts)
+  const collectionArkPath: string | null = data.ark ? new URL(data.ark).pathname : null
+  const versionArkPath: string | null = version?.ark ? new URL(version.ark).pathname : null
+
+  const meta = version?.metadata as Record<string, unknown> | null | undefined
+  const description = (meta?.description as string) || data.description
+  const tags = Array.isArray(meta?.tags) ? (meta.tags as string[]) : []
+
+  return (
+    <div className="grid grid-cols-1 gap-8 md:grid-cols-[1fr_260px]">
+      {/* Main column */}
+      <div className="min-w-0">
+        {/* Version bar */}
+        {version && (
+          <div className="border-rule bg-parchment-dark rounded-surface mb-6 flex items-center justify-between border px-4 py-2.5">
+            <div className="flex items-center gap-3 text-sm">
+              <TokenLink
+                to={`${base}/v/${bareSemver(version.semver)}`}
+                className="text-link font-medium hover:underline"
+              >
+                {version.semver}
+              </TokenLink>
+              {isLatest && <span className="text-ink-muted text-xs">latest</span>}
+              <span className="text-ink-muted">·</span>
+              <span className="text-ink-muted">{version.recordCount.toLocaleString()} records</span>
+              <span className="text-ink-muted">·</span>
+              <span className="text-ink-muted">{version.fileCount.toLocaleString()} files</span>
+              <span className="text-ink-muted">·</span>
+              <span className="text-ink-muted">{formatBytes(version.totalBytes)}</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-ink-muted text-xs">
+                {new Date(version.createdAt).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                  timeZone: 'UTC',
+                })}
+              </span>
+              <TokenLink
+                to={`${base}/versions`}
+                className="text-ink-muted hover:text-ink flex items-center gap-1 text-xs transition-colors"
+                title="Version history"
+              >
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span>{totalVersions}</span>
+              </TokenLink>
+            </div>
+          </div>
+        )}
+
+        {/* Type TOC */}
+        {allTypes.length > 0 && (
+          <div className="border-rule rounded-surface mb-6 overflow-hidden border">
+            {allTypes.map((t, i) => (
+              <TokenLink
+                key={t.type}
+                to={`${recordsPath}?type=${t.type}`}
+                className={`hover:bg-parchment-dark/50 flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${
+                  i < allTypes.length - 1 ? 'border-rule border-b' : ''
+                }`}
+              >
+                <div className="flex items-center gap-2.5">
+                  <svg
+                    className="text-ink-muted h-4 w-4 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                    />
+                  </svg>
+                  <span className="font-medium">{t.type}</span>
+                </div>
+                <span className="text-ink-muted text-xs">{t.count.toLocaleString()} records</span>
+              </TokenLink>
+            ))}
+          </div>
+        )}
+
+        {/* README */}
+        {readmeHtml ? (
+          <div className="border-rule rounded-surface mb-6 overflow-hidden border">
+            <div className="bg-parchment-dark border-rule text-ink-muted border-b px-4 py-2.5 text-xs font-medium">
+              README
+            </div>
+            <div
+              className="prose prose-sm max-w-none px-6 py-5"
+              dangerouslySetInnerHTML={{ __html: readmeHtml }}
+            />
+          </div>
+        ) : (
+          <div className="border-rule text-ink-muted rounded-surface mb-6 border px-4 py-8 text-center text-sm">
+            {isLatest ? 'No README yet.' : 'No README in this version.'}
+          </div>
+        )}
+      </div>
+
+      {/* Sidebar */}
+      <aside className="text-sm">
+        {/* About */}
+        <div className="mb-6">
+          <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
+            About
+          </h3>
+          <p className="text-ink text-sm leading-relaxed">{description || 'No description.'}</p>
+          <div className="text-ink-muted mt-2 text-xs">
+            by{' '}
+            <Link to={`/${data.ownerSlug}`} className="text-link hover:underline">
+              {data.ownerName}
+            </Link>
+          </div>
+          {tags.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              {tags.map((tag: string) => (
+                <Link
+                  key={tag}
+                  to={`/explore?tag=${encodeURIComponent(tag)}`}
+                  className="bg-parchment-dark text-ink-muted hover:text-ink rounded-control px-2 py-0.5 text-xs transition-colors"
+                >
+                  {tag}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Stats */}
+        {version && (
+          <div className="mb-6">
+            <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
+              Stats
+            </h3>
+            <div className="space-y-1.5 text-xs">
+              <div className="flex items-center gap-2">
+                <svg
+                  className="text-ink-muted h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span>
+                  <strong className="text-ink">{totalVersions}</strong> versions
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <svg
+                  className="text-ink-muted h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V9c0-2-1-3-3-3h-4l-2-2H7c-2 0-3 1-3 3z"
+                  />
+                </svg>
+                <span>
+                  <strong className="text-ink">{version.recordCount.toLocaleString()}</strong>{' '}
+                  records
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <svg
+                  className="text-ink-muted h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  />
+                </svg>
+                <span>
+                  <strong className="text-ink">{version.fileCount.toLocaleString()}</strong> files
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <svg
+                  className="text-ink-muted h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V9c0-2-1-3-3-3h-4l-2-2H7c-2 0-3 1-3 3z"
+                  />
+                </svg>
+                <span>
+                  <strong className="text-ink">{formatBytes(version.totalBytes)}</strong> total
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* This version: message, provenance, integrity */}
+        {version && (
+          <div className="mb-6">
+            <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
+              This version
+            </h3>
+            <dl className="space-y-2 text-xs">
+              {version.message && (
+                <div>
+                  <dt className="text-ink-muted">Message</dt>
+                  <dd className="text-ink">{version.message}</dd>
+                </div>
+              )}
+              {version.baseSemver && (
+                <div>
+                  <dt className="text-ink-muted">Base version</dt>
+                  <dd>
+                    <TokenLink
+                      to={`${base}/v/${bareSemver(version.baseSemver)}`}
+                      className="text-link font-mono hover:underline"
+                    >
+                      {version.baseSemver}
+                    </TokenLink>
+                  </dd>
+                </div>
+              )}
+              {(version.appId || version.pushedBy) && (
+                <div>
+                  <dt className="text-ink-muted">Pushed</dt>
+                  <dd className="text-ink font-mono text-[11px]">
+                    {[version.appId, version.pushedBy].filter(Boolean).join(' · ')}
+                  </dd>
+                </div>
+              )}
+              <div>
+                <dt className="text-ink-muted">Hash</dt>
+                <dd>
+                  <code
+                    className="text-ink-muted bg-parchment-dark rounded-control block px-2 py-1 font-mono text-[11px] break-all"
+                    title={`sha256:${version.hash}`}
+                  >
+                    sha256:{version.hash.slice(0, 24)}…
+                  </code>
+                </dd>
+              </div>
+              {versionArkPath && (
+                <div>
+                  <dt className="text-ink-muted">ARK</dt>
+                  <dd>
+                    <Link
+                      to={versionArkPath}
+                      className="text-link bg-parchment-dark rounded-control block px-2 py-1 font-mono text-[11px] break-all hover:underline"
+                    >
+                      {versionArkPath.slice(1)}
+                    </Link>
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        )}
+
+        {/* Subscribe / Export */}
+        <div className="mb-6">
+          <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
+            Subscribe
+          </h3>
+          <div className="space-y-2 text-xs">
+            <div>
+              <p className="mb-0.5 font-medium">AT Protocol</p>
+              <code className="text-ink-muted bg-parchment-dark rounded-control block px-2 py-1 text-[11px] break-all">
+                {`at://did:web:underlay.org:${owner}/org.underlay.collection.${collection}`}
+              </code>
+            </div>
+            <div>
+              <p className="mb-0.5 font-medium">API</p>
+              <code className="text-ink-muted bg-parchment-dark rounded-control block px-2 py-1 text-[11px] break-all">
+                {`GET /api/collections/${owner}/${collection}/versions`}
+              </code>
+            </div>
+            {version && (
+              <TokenLink
+                to={`/api/collections/${owner}/${collection}/export`}
+                className="text-link inline-block hover:underline"
+                reloadDocument
+              >
+                Download .tar.gz
+              </TokenLink>
+            )}
+          </div>
+        </div>
+
+        {/* Share (owner only, passed in) */}
+        {share}
+
+        {/* Collection ARK */}
+        {collectionArkPath && (
+          <div className="mb-6">
+            <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
+              ARK Identifier
+            </h3>
+            <Link
+              to={collectionArkPath}
+              className="text-link bg-parchment-dark rounded-control block px-2 py-1 font-mono text-[11px] break-all hover:underline"
+            >
+              {collectionArkPath.slice(1)}
+            </Link>
+          </div>
+        )}
+      </aside>
+    </div>
+  )
+}
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
new file mode 100644
index 0000000..6ad979b
--- /dev/null
+++ b/src/components/ui.tsx
@@ -0,0 +1,368 @@
+import { Link } from 'react-router'
+
+import { TokenLink } from '~/lib/share-token'
+
+/**
+ * Shared UI primitives. One visual voice for the whole app:
+ * - controls (buttons, inputs, chips, menus) round at --radius-control (4px)
+ * - surfaces (tables, panels, alerts) round at --radius-surface (2px)
+ * - one hover treatment per variant, one disabled treatment, 100ms color transitions
+ * - keyboard focus comes from the global :focus-visible rule in global.css
+ */
+
+// ---------------------------------------------------------------- Button
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'success'
+  | 'ghost'
+  | 'link'
+  | 'dangerLink'
+/** `lg` is for hero/landing calls to action, not general page actions. */
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+const solidButtonBase =
+  'inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-control transition-colors disabled:pointer-events-none disabled:opacity-50'
+const textButtonBase =
+  'inline-flex cursor-pointer items-center gap-1 rounded-control transition-colors disabled:pointer-events-none disabled:opacity-50'
+
+const buttonVariants: Record<ButtonVariant, string> = {
+  primary: `${solidButtonBase} bg-ink text-parchment font-medium hover:bg-ink-light`,
+  secondary: `${solidButtonBase} border border-rule bg-parchment text-ink hover:bg-parchment-dark`,
+  danger: `${solidButtonBase} bg-red-700 font-medium text-white hover:bg-red-800`,
+  // For affirmative actions that must read as distinct from the neutral primary
+  // (approve, accept) — not for general submit buttons.
+  success: `${solidButtonBase} bg-green-700 font-medium text-white hover:bg-green-800`,
+  ghost: `${textButtonBase} text-ink-muted hover:text-ink`,
+  link: `${textButtonBase} text-link hover:underline`,
+  dangerLink: `${textButtonBase} text-red-700 hover:underline`,
+}
+
+const solidButtonSizes: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-xs',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-5 py-2.5 text-sm',
+}
+const textButtonSizes: Record<ButtonSize, string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+}
+
+export function buttonClasses(
+  variant: ButtonVariant = 'primary',
+  size: ButtonSize = 'md',
+  className?: string,
+): string {
+  const isText = variant === 'ghost' || variant === 'link' || variant === 'dangerLink'
+  const sizes = isText ? textButtonSizes[size] : solidButtonSizes[size]
+  return `${buttonVariants[variant]} ${sizes}${className ? ` ${className}` : ''}`
+}
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  className,
+  type,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button type={type ?? 'button'} className={buttonClasses(variant, size, className)} {...rest} />
+  )
+}
+
+interface ButtonLinkProps extends React.ComponentProps<typeof Link> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /** Carry the collection share token across navigation (TokenLink). */
+  token?: boolean
+}
+
+export function ButtonLink({
+  variant = 'primary',
+  size = 'md',
+  className,
+  token,
+  ...rest
+}: ButtonLinkProps) {
+  const Component = token ? TokenLink : Link
+  // Solid variants need the visited color pinned: global CSS sets a:visited to inherit.
+  const visited =
+    variant === 'primary'
+      ? 'visited:text-parchment'
+      : variant === 'danger'
+        ? 'visited:text-white'
+        : ''
+  const combined = visited ? `${visited}${className ? ` ${className}` : ''}` : className
+  return <Component className={buttonClasses(variant, size, combined)} {...rest} />
+}
+
+// ---------------------------------------------------------------- Form controls
+
+export const inputClasses =
+  'w-full rounded-control border border-rule bg-parchment px-3 py-2 text-sm focus:border-ink focus:outline-none'
+
+export function Input({ className, ...rest }: React.InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={className ? `${inputClasses} ${className}` : inputClasses} {...rest} />
+}
+
+export function Select({ className, ...rest }: React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      className={`${inputClasses} cursor-pointer${className ? ` ${className}` : ''}`}
+      {...rest}
+    />
+  )
+}
+
+export function Textarea({
+  className,
+  resize = 'none',
+  ...rest
+}: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  /** 'y' allows vertical dragging; default is a fixed height. */
+  resize?: 'none' | 'y'
+}) {
+  return (
+    <textarea
+      className={`${inputClasses} ${resize === 'y' ? 'resize-y' : 'resize-none'}${className ? ` ${className}` : ''}`}
+      {...rest}
+    />
+  )
+}
+
+export function Checkbox({ className, ...rest }: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input type="checkbox" className={`accent-ink${className ? ` ${className}` : ''}`} {...rest} />
+  )
+}
+
+interface FieldProps {
+  label: React.ReactNode
+  htmlFor?: string
+  hint?: React.ReactNode
+  className?: string
+  children: React.ReactNode
+}
+
+/** A labeled form control with an optional hint line below. */
+export function Field({ label, htmlFor, hint, className, children }: FieldProps) {
+  return (
+    <div className={className}>
+      <label htmlFor={htmlFor} className="text-ink mb-1.5 block text-sm font-medium">
+        {label}
+      </label>
+      {children}
+      {hint && <p className="text-ink-muted mt-1 text-xs">{hint}</p>}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------- Alert
+
+type AlertVariant = 'success' | 'error' | 'info'
+
+const alertVariants: Record<AlertVariant, string> = {
+  success: 'border-green-200 bg-green-50 text-green-800',
+  error: 'border-red-200 bg-red-50 text-red-700',
+  info: 'border-rule bg-parchment-dark/40 text-ink-light',
+}
+
+export function Alert({
+  variant = 'info',
+  className,
+  children,
+}: {
+  variant?: AlertVariant
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div
+      className={`rounded-surface border px-3 py-2 text-sm ${alertVariants[variant]}${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------- Table
+
+interface TableProps {
+  className?: string
+  /** text-xs instead of text-sm; for dense data tables like records. */
+  dense?: boolean
+  children: React.ReactNode
+}
+
+/** Bordered, horizontally scrollable table container. Children: thead/tbody built from Th/Td/Tr. */
+export function Table({ className, dense, children }: TableProps) {
+  return (
+    <div
+      className={`border-rule rounded-surface overflow-x-auto border${className ? ` ${className}` : ''}`}
+    >
+      <table className={`w-full ${dense ? 'text-xs' : 'text-sm'}`}>{children}</table>
+    </div>
+  )
+}
+
+export function Th({ className, ...rest }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={`border-rule bg-parchment-dark text-ink-muted border-b px-2.5 py-2 text-left text-xs font-medium${className ? ` ${className}` : ''}`}
+      {...rest}
+    />
+  )
+}
+
+export function Td({ className, ...rest }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      className={`border-rule border-b px-2.5 py-2 align-top${className ? ` ${className}` : ''}`}
+      {...rest}
+    />
+  )
+}
+
+export function Tr({ className, ...rest }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      className={`hover:bg-parchment-dark/50 transition-colors${className ? ` ${className}` : ''}`}
+      {...rest}
+    />
+  )
+}
+
+// ---------------------------------------------------------------- Tabs
+
+export interface TabItem {
+  label: React.ReactNode
+  /** Renders a link when set; use onClick for state-driven tabs. */
+  to?: string
+  onClick?: () => void
+  active?: boolean
+  /** Push this item (and those after it) to the right edge. */
+  right?: boolean
+  /** Carry the collection share token (TokenLink) instead of a plain Link. */
+  token?: boolean
+}
+
+const tabBase = '-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors'
+export const tabActiveClasses = `${tabBase} border-ink text-ink`
+export const tabInactiveClasses = `${tabBase} border-transparent text-ink-muted hover:border-rule hover:text-ink`
+
+export function Tabs({
+  items,
+  className,
+  children,
+}: {
+  items: TabItem[]
+  className?: string
+  /** Extra content on the right edge of the bar (e.g. a version picker). */
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      className={`border-rule mb-6 flex items-center border-b${className ? ` ${className}` : ''}`}
+    >
+      {items.map((item, i) => {
+        const classes = `${item.active ? tabActiveClasses : tabInactiveClasses}${item.right ? ' ml-auto' : ''}`
+        if (item.to) {
+          const Component = item.token ? TokenLink : Link
+          return (
+            <Component key={i} to={item.to} className={classes}>
+              {item.label}
+            </Component>
+          )
+        }
+        return (
+          <button
+            key={i}
+            type="button"
+            onClick={item.onClick}
+            className={`${classes} cursor-pointer`}
+          >
+            {item.label}
+          </button>
+        )
+      })}
+      {children}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------- Text & structure
+
+/** Page title: the one h1 style. */
+export function PageTitle({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <h1 className={`mb-6 text-xl font-semibold tracking-tight${className ? ` ${className}` : ''}`}>
+      {children}
+    </h1>
+  )
+}
+
+/** Uppercase section eyebrow: the one h2 style for in-page sections. */
+export function SectionHeading({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <h2
+      className={`text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </h2>
+  )
+}
+
+export function Badge({
+  className,
+  title,
+  children,
+}: {
+  className?: string
+  title?: string
+  children: React.ReactNode
+}) {
+  return (
+    <span
+      title={title}
+      className={`border-rule text-ink-muted rounded-control inline-flex items-center border px-1.5 py-px font-mono text-[10px]${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </span>
+  )
+}
+
+export function EmptyState({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div
+      className={`border-rule text-ink-muted rounded-surface border px-4 py-8 text-center text-sm${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/version-views.tsx b/src/components/version-views.tsx
new file mode 100644
index 0000000..6af9fe1
--- /dev/null
+++ b/src/components/version-views.tsx
@@ -0,0 +1,555 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useSearchParams } from 'react-router'
+
+import { formatBytes } from '~/lib/format'
+import { TokenLink, useShareToken, withToken } from '~/lib/share-token'
+
+/**
+ * The version-scoped content views (records, files, overview), shared by the
+ * latest-context routes (/:owner/:collection/records, /files) and the pinned
+ * routes (/:owner/:collection/v/:n/...). Each takes the loaded version object
+ * plus the page's own path (`basePath`) so pagination and type links stay on
+ * whichever route is rendering.
+ */
+
+export function VersionInfoBar({
+  version,
+  typeCount,
+  showMessage = true,
+}: {
+  version: any
+  typeCount: number
+  showMessage?: boolean
+}) {
+  const versionArkPath: string | null = version.ark ? new URL(version.ark).pathname : null
+  return (
+    <>
+      {showMessage && version.message ? (
+        <p className="text-ink-muted mb-4 text-sm">{version.message}</p>
+      ) : (
+        <div className="mb-4" />
+      )}
+      <div className="text-ink-muted border-rule bg-parchment-dark rounded-surface mb-6 flex flex-wrap items-center justify-between gap-y-1 border px-4 py-2.5 text-xs">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span>
+            <strong className="text-ink">{version.recordCount.toLocaleString()}</strong> records
+          </span>
+          <span>
+            <strong className="text-ink">{version.fileCount.toLocaleString()}</strong> files
+          </span>
+          <span>
+            <strong className="text-ink">{formatBytes(version.totalBytes)}</strong> total
+          </span>
+          <span>
+            <strong className="text-ink">{typeCount}</strong> types
+          </span>
+        </div>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          {version.appId && (
+            <span>
+              via <strong className="text-ink">{version.appId}</strong>
+            </span>
+          )}
+          <span>
+            {new Date(version.createdAt).toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+              year: 'numeric',
+            })}
+          </span>
+          <code className="text-ink-muted font-mono text-[11px]" title={version.hash}>
+            sha256:{version.hash.slice(0, 12)}…
+          </code>
+          {versionArkPath && (
+            <Link to={versionArkPath} className="text-link font-mono text-[11px] hover:underline">
+              {versionArkPath.slice(1)}
+            </Link>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export function RecordsView({
+  owner,
+  collection,
+  version,
+  basePath,
+}: {
+  owner: string
+  collection: string
+  version: any
+  /** The page's own path, e.g. `/acme/pubs/records` or `/acme/pubs/v/1.0.0/records`. */
+  basePath: string
+}) {
+  const [searchParams] = useSearchParams()
+  const shareToken = useShareToken()
+  const selectedType = searchParams.get('type') ?? null
+
+  const [records, setRecords] = useState<any[]>([])
+  const [totalRecords, setTotalRecords] = useState(0)
+  const [recordsLoading, setRecordsLoading] = useState(false)
+
+  const schemasMap = useMemo(
+    () => (version.schemas ?? {}) as Record<string, any>,
+    [version.schemas],
+  )
+  const allTypes = useMemo(() => Object.keys(schemasMap).sort(), [schemasMap])
+  const currentType = selectedType || (allTypes.length > 0 ? allTypes[0] : null)
+
+  const page = parseInt(searchParams.get('page') ?? '1', 10)
+  const pageSize = 100
+  const semver = version.semver as string
+
+  useEffect(() => {
+    if (!currentType) return
+    const offset = (page - 1) * pageSize
+    setRecordsLoading(true)
+    fetch(
+      withToken(
+        `/api/collections/${owner}/${collection}/versions/${semver}/records?type=${currentType}&limit=${pageSize}&offset=${offset}`,
+        shareToken,
+      ),
+      { credentials: 'include' },
+    )
+      .then((r) => (r.ok ? r.json() : { records: [], pagination: {} }))
+      .then((body) => {
+        setRecords(body.records ?? body)
+        setTotalRecords(body.pagination?.total ?? version.recordCount ?? 0)
+      })
+      .finally(() => setRecordsLoading(false))
+  }, [version, currentType, page, owner, collection, semver, shareToken])
+
+  const currentTypeFields: string[] = currentType
+    ? schemasMap[currentType]?.properties
+      ? Object.keys(schemasMap[currentType].properties)
+      : // No schema properties: derive columns from the whole page of records,
+        // sorted, so column order doesn't change with whichever record is first.
+        [...new Set(records.flatMap((r: any) => Object.keys(r.data ?? {})))].sort()
+    : []
+
+  const hasArkColumn = records.some((r: any) => r.ark)
+
+  const offset = (page - 1) * pageSize
+  const totalPages = Math.ceil(totalRecords / pageSize) || 1
+
+  const pageNumbers: number[] = []
+  if (totalPages > 1) {
+    const maxVisible = Math.min(totalPages, 7)
+    for (let i = 0; i < maxVisible; i++) {
+      let p: number
+      if (totalPages <= 7) {
+        p = i + 1
+      } else if (page <= 4) {
+        p = i + 1
+      } else if (page >= totalPages - 3) {
+        p = totalPages - 6 + i
+      } else {
+        p = page - 3 + i
+      }
+      pageNumbers.push(p)
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-[180px_1fr]">
+      {/* Type nav: a scrolling row on small screens, a sidebar from md up */}
+      <nav className="min-w-0">
+        <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">Types</h3>
+        <div className="flex gap-1 overflow-x-auto pb-1 md:block md:space-y-0.5 md:overflow-x-visible md:pb-0">
+          {allTypes.map((t) => (
+            <TokenLink
+              key={t}
+              to={`${basePath}?type=${t}`}
+              className={`rounded-control block shrink-0 px-3 py-1.5 text-sm whitespace-nowrap transition-colors ${
+                t === currentType
+                  ? 'bg-ink text-parchment visited:text-parchment font-medium'
+                  : 'text-ink-muted hover:bg-parchment-dark hover:text-ink'
+              }`}
+            >
+              {t}
+            </TokenLink>
+          ))}
+        </div>
+      </nav>
+
+      {/* Table area */}
+      <div className="min-w-0">
+        {currentType && records.length > 0 ? (
+          <div>
+            <div className="border-rule rounded-surface max-h-[75vh] overflow-auto border">
+              {/* border-separate: collapsed borders don't travel with sticky cells,
+                  so all row/column rules live on the cells themselves. */}
+              <table className="w-full border-separate border-spacing-0 text-xs">
+                <thead>
+                  <tr>
+                    <th className="border-rule bg-parchment-dark sticky top-0 z-10 border-b p-2 text-left font-medium">
+                      id
+                    </th>
+                    {currentTypeFields.map((f: string) => (
+                      <th
+                        key={f}
+                        className="border-rule bg-parchment-dark sticky top-0 z-10 border-b p-2 text-left font-medium"
+                      >
+                        {f}
+                      </th>
+                    ))}
+                    {hasArkColumn && (
+                      <th className="border-rule bg-parchment-dark sticky top-0 z-10 border-b p-2 text-left font-medium">
+                        ARK
+                      </th>
+                    )}
+                    {/* after: covers the subpixel gap sticky right-0 can leave at the scrollport edge */}
+                    <th className="border-rule bg-parchment-dark sticky top-0 right-0 z-20 w-8 border-b border-l after:absolute after:inset-y-0 after:left-full after:w-0.5 after:bg-inherit" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {records.map((r: any) => (
+                    <tr key={r.id} className="group hover:bg-parchment-dark transition-colors">
+                      <td
+                        className="text-ink-muted border-rule max-w-56 truncate border-b p-2 font-mono"
+                        title={r.id}
+                      >
+                        {r.id}
+                      </td>
+                      {currentTypeFields.map((f: string) => {
+                        const val = r.data?.[f]
+                        if (val && typeof val === 'object' && '$file' in val) {
+                          const hash = ((val as any).$file as string).replace('sha256:', '')
+                          // Route through the API so access is checked and
+                          // a presigned URL is minted (files are private).
+                          const fileUrl = withToken(
+                            `/api/collections/${owner}/${collection}/files/${hash}`,
+                            shareToken,
+                          )
+                          const label = f === 'pdf' ? 'PDF' : 'File'
+                          return (
+                            <td key={f} className="border-rule border-b p-2">
+                              <a
+                                href={fileUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-link inline-flex items-center gap-1 hover:underline"
+                              >
+                                <svg
+                                  className="h-3.5 w-3.5"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                                  />
+                                </svg>
+                                {label}
+                              </a>
+                            </td>
+                          )
+                        }
+                        if (typeof val === 'string' && val.match(/^https?:\/\//)) {
+                          return (
+                            <td
+                              key={f}
+                              className="border-rule max-w-56 truncate border-b p-2"
+                              title={val}
+                            >
+                              <Link
+                                to={val}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-link hover:underline"
+                              >
+                                {val}
+                              </Link>
+                            </td>
+                          )
+                        }
+                        const display =
+                          val === null || val === undefined
+                            ? ''
+                            : typeof val === 'object'
+                              ? JSON.stringify(val)
+                              : String(val)
+                        return (
+                          <td
+                            key={f}
+                            className="border-rule max-w-56 truncate border-b p-2"
+                            title={display || undefined}
+                          >
+                            {display}
+                          </td>
+                        )
+                      })}
+                      {hasArkColumn && (
+                        <td className="border-rule border-b p-2">
+                          {r.ark && (
+                            <Link
+                              to={new URL(r.ark).pathname}
+                              className="text-link font-mono text-[11px] hover:underline"
+                            >
+                              ark
+                            </Link>
+                          )}
+                        </td>
+                      )}
+                      <td className="border-rule bg-parchment group-hover:bg-parchment-dark sticky right-0 w-8 border-b border-l p-2 transition-colors after:absolute after:inset-y-0 after:left-full after:w-0.5 after:bg-inherit">
+                        {r.hash && (
+                          <TokenLink
+                            to={`/records/${r.hash}`}
+                            className="text-ink-muted hover:text-ink inline-flex items-center"
+                            title="View record provenance"
+                          >
+                            <svg
+                              className="h-3.5 w-3.5"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                              />
+                            </svg>
+                          </TokenLink>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {totalPages > 1 && (
+              <nav className="flex items-center justify-between py-3 text-xs">
+                <span className="text-ink-muted">
+                  Showing {offset + 1}–{Math.min(offset + pageSize, totalRecords)} of{' '}
+                  {totalRecords.toLocaleString()}
+                </span>
+                <div className="flex items-center gap-1">
+                  {page > 1 && (
+                    <TokenLink
+                      to={`${basePath}?type=${currentType}&page=${page - 1}`}
+                      className="border-rule hover:bg-parchment-dark rounded-control border px-2 py-1"
+                    >
+                      ← Prev
+                    </TokenLink>
+                  )}
+                  {pageNumbers.map((p) => (
+                    <TokenLink
+                      key={p}
+                      to={`${basePath}?type=${currentType}&page=${p}`}
+                      className={
+                        p === page
+                          ? 'border-ink bg-ink text-parchment visited:text-parchment rounded-control border px-2 py-1 font-medium'
+                          : 'border-rule hover:bg-parchment-dark rounded-control border px-2 py-1'
+                      }
+                    >
+                      {p}
+                    </TokenLink>
+                  ))}
+                  {page < totalPages && (
+                    <TokenLink
+                      to={`${basePath}?type=${currentType}&page=${page + 1}`}
+                      className="border-rule hover:bg-parchment-dark rounded-control border px-2 py-1"
+                    >
+                      Next →
+                    </TokenLink>
+                  )}
+                </div>
+              </nav>
+            )}
+          </div>
+        ) : (
+          <p className="text-ink-muted py-8 text-center text-sm">
+            {!currentType
+              ? 'Select a type to view records.'
+              : recordsLoading
+                ? 'Loading records…'
+                : 'No records of this type in this version.'}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function FilesView({
+  owner,
+  collection,
+  version,
+  recordsPath,
+}: {
+  owner: string
+  collection: string
+  version: any
+  /** The sibling records page path, for "referenced by" links. */
+  recordsPath: string
+}) {
+  const shareToken = useShareToken()
+  const [files, setFiles] = useState<any[]>([])
+  const [filesLoading, setFilesLoading] = useState(false)
+  const semver = version.semver as string
+
+  useEffect(() => {
+    setFilesLoading(true)
+    fetch(
+      withToken(`/api/collections/${owner}/${collection}/versions/${semver}/files`, shareToken),
+      { credentials: 'include' },
+    )
+      .then((r) => (r.ok ? r.json() : []))
+      .then(setFiles)
+      .finally(() => setFilesLoading(false))
+  }, [owner, collection, semver, shareToken])
+
+  if (files.length === 0) {
+    return (
+      <p className="text-ink-muted py-8 text-center text-sm">
+        {filesLoading ? 'Loading files…' : 'No files in this version.'}
+      </p>
+    )
+  }
+
+  return (
+    <div>
+      <p className="text-ink-muted mb-3 text-xs">
+        {files.length} file{files.length !== 1 ? 's' : ''} ·{' '}
+        {formatBytes(files.reduce((sum: number, f: any) => sum + (f.size ?? 0), 0))} total
+      </p>
+      <div className="border-rule rounded-surface overflow-x-auto border">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="bg-parchment-dark border-rule border-b">
+              <th className="p-2.5 text-left font-medium">File</th>
+              <th className="p-2.5 text-left font-medium">Referenced by</th>
+              <th className="p-2.5 text-right font-medium">Size</th>
+              <th className="p-2.5 text-right font-medium"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {files.map((f: any) => {
+              const refs: any[] = f.references ?? []
+              const isPdf = f.mimeType === 'application/pdf'
+              const isImage = f.mimeType?.startsWith('image/')
+              return (
+                <tr key={f.hash} className="border-rule hover:bg-parchment-dark/50 border-t">
+                  <td className="p-2.5">
+                    <div className="flex items-center gap-2">
+                      {isPdf ? (
+                        <svg
+                          className="h-4 w-4 shrink-0 text-red-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+                          />
+                        </svg>
+                      ) : isImage ? (
+                        <svg
+                          className="h-4 w-4 shrink-0 text-blue-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                      ) : (
+                        <svg
+                          className="text-ink-muted h-4 w-4 shrink-0"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                          />
+                        </svg>
+                      )}
+                      <div>
+                        <code className="text-ink-muted font-mono text-[11px]">
+                          {f.hash.slice(0, 12)}…
+                        </code>
+                        <span className="text-ink-muted ml-2">{f.mimeType}</span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="p-2.5">
+                    {refs.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {refs.slice(0, 3).map((ref: any, idx: number) => (
+                          <TokenLink
+                            key={idx}
+                            to={`${recordsPath}?type=${ref.type}`}
+                            className="bg-parchment-dark border-rule hover:border-ink-muted rounded-control inline-flex items-center gap-1 border px-1.5 py-0.5 text-[11px] transition-colors"
+                          >
+                            <span className="text-ink-muted">{ref.type}</span>
+                            <span className="font-mono">
+                              {ref.recordId.length > 20
+                                ? ref.recordId.slice(0, 20) + '…'
+                                : ref.recordId}
+                            </span>
+                          </TokenLink>
+                        ))}
+                        {refs.length > 3 && (
+                          <span className="text-ink-muted px-1.5 py-0.5 text-[11px]">
+                            +{refs.length - 3} more
+                          </span>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-ink-muted">—</span>
+                    )}
+                  </td>
+                  <td className="p-2.5 text-right whitespace-nowrap">{formatBytes(f.size)}</td>
+                  <td className="p-2.5 text-right">
+                    <a
+                      href={withToken(
+                        `/api/collections/${owner}/${collection}/files/${f.hash}`,
+                        shareToken,
+                      )}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-link hover:underline"
+                    >
+                      <svg
+                        className="inline h-4 w-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                    </a>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/src/global.css b/src/global.css
index dfcc6c3..acf0d44 100644
--- a/src/global.css
+++ b/src/global.css
@@ -15,6 +15,10 @@
   --color-accent: #2d5a27;
   --color-accent-light: #3a7433;
   --color-link: #1a4a6e;
+
+  /* Corner policy: controls people touch round more than structural surfaces. */
+  --radius-control: 4px;
+  --radius-surface: 2px;
 }
 
 @layer base {
@@ -25,6 +29,22 @@
   a:visited {
     color: inherit;
   }
+  /* Universal keyboard focus. Text inputs override with focus:outline-none + focus:border-ink. */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 1px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 /* Prose styles for rendered markdown (README, etc.) */
@@ -75,14 +95,14 @@
   font-size: 0.85em;
   background: var(--color-parchment-dark);
   padding: 0.15rem 0.35rem;
-  border-radius: 3px;
+  border-radius: var(--radius-surface);
 }
 .prose pre {
   background: var(--color-ink);
   color: var(--color-parchment);
   padding: 1rem;
   overflow-x: auto;
-  border-radius: 4px;
+  border-radius: var(--radius-surface);
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
diff --git a/src/lib/api-keys.ts b/src/lib/api-keys.ts
new file mode 100644
index 0000000..df57a5e
--- /dev/null
+++ b/src/lib/api-keys.ts
@@ -0,0 +1,19 @@
+/** Shared helpers for the user- and org-level API key settings pages. */
+
+export function isExpiringSoon(expiresAt: string | null): boolean {
+  if (!expiresAt) return false
+  const daysLeft = (new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
+  return daysLeft > 0 && daysLeft < 7
+}
+
+export function isExpired(expiresAt: string | null): boolean {
+  if (!expiresAt) return false
+  return new Date(expiresAt) < new Date()
+}
+
+export function getScope(permissions?: Record<string, string[]>): string {
+  const perms = permissions?.['collections'] ?? []
+  if (perms.includes('admin')) return 'admin'
+  if (perms.includes('write')) return 'write'
+  return 'read'
+}
diff --git a/src/lib/format.ts b/src/lib/format.ts
new file mode 100644
index 0000000..1b8d78a
--- /dev/null
+++ b/src/lib/format.ts
@@ -0,0 +1,29 @@
+/**
+ * Stored semvers carry a leading 'v' ("v1.0.0"). Page URLs use the bare form
+ * (/v/1.0.0); the API normalizes both via parseSemver, so either resolves.
+ */
+export function bareSemver(semver: string): string {
+  return semver.replace(/^v/, '')
+}
+
+export function formatBytes(bytes: number): string {
+  if (!bytes || bytes < 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1)
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
+export function timeAgo(dateStr: string): string {
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days}d ago`
+  const months = Math.floor(days / 30)
+  if (months < 12) return `${months}mo ago`
+  return `${Math.floor(months / 12)}y ago`
+}
diff --git a/src/lib/use-dismissable.ts b/src/lib/use-dismissable.ts
new file mode 100644
index 0000000..faff447
--- /dev/null
+++ b/src/lib/use-dismissable.ts
@@ -0,0 +1,36 @@
+import { useEffect, type RefObject } from 'react'
+
+/**
+ * Closes a popover (menu, dropdown, modal) on outside click or Escape, and
+ * returns focus to whatever opened it. Keyboard users can always get out.
+ */
+export function useDismissable(
+  open: boolean,
+  onClose: () => void,
+  ref: RefObject<HTMLElement | null>,
+) {
+  useEffect(() => {
+    if (!open) return
+
+    // Remember the trigger so focus can return to it on close.
+    const previouslyFocused = document.activeElement as HTMLElement | null
+
+    function handlePointer(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose()
+    }
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        onClose()
+        previouslyFocused?.focus?.()
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointer)
+    document.addEventListener('keydown', handleKey)
+    return () => {
+      document.removeEventListener('mousedown', handlePointer)
+      document.removeEventListener('keydown', handleKey)
+    }
+  }, [open, onClose, ref])
+}
diff --git a/src/lib/use-is-owner.ts b/src/lib/use-is-owner.ts
new file mode 100644
index 0000000..17ecec4
--- /dev/null
+++ b/src/lib/use-is-owner.ts
@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+
+import { useAppContext } from '~/lib/app-context'
+
+/**
+ * Whether the current user can administer collections under `owner`:
+ * their personal account, an org they belong to, or KF admin.
+ * One definition so the Settings tab doesn't appear and disappear
+ * between collection pages.
+ */
+export function useIsOwner(owner: string | undefined): boolean {
+  const { currentUser } = useAppContext()
+  return useMemo(
+    () =>
+      !!currentUser &&
+      (currentUser.kfRole === 'admin' ||
+        currentUser.slug === owner ||
+        !!currentUser.orgs?.some((o: { slug: string }) => o.slug === owner)),
+    [currentUser, owner],
+  )
+}
diff --git a/src/routes/[owner]/[collection]/diff.data.ts b/src/routes/[owner]/[collection]/diff.data.ts
index c6b384a..4ab7e9d 100644
--- a/src/routes/[owner]/[collection]/diff.data.ts
+++ b/src/routes/[owner]/[collection]/diff.data.ts
@@ -1,23 +1,7 @@
-import type { LoaderFunctionArgs } from 'react-router'
-
-import { fetchBase } from '~/lib/fetch-base'
-import { apiUrlBuilder } from '~/lib/share-token'
-
-export const handle = {
-  title: (params: Record<string, string>) =>
-    `Diff — ${params.owner}/${params.collection} · Underlay`,
-}
+import { redirect, type LoaderFunctionArgs } from 'react-router'
 
+/** Legacy route: diff moved to /versions/compare. */
 export async function loader({ params, request }: LoaderFunctionArgs) {
-  const api = apiUrlBuilder(request, fetchBase(request.url))
-  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
-  const prefix = `/api/collections/${params.owner}/${params.collection}`
-
-  const [data, versions] = await Promise.all([
-    fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null)),
-    fetch(api(`${prefix}/versions?limit=100`), { headers }).then((r) => (r.ok ? r.json() : [])),
-  ])
-
-  if (!data) throw new Response('Not Found', { status: 404 })
-  return { data, versions }
+  const url = new URL(request.url)
+  throw redirect(`/${params.owner}/${params.collection}/versions/compare${url.search}`)
 }
diff --git a/src/routes/[owner]/[collection]/diff.tsx b/src/routes/[owner]/[collection]/diff.tsx
index 127fc43..3381630 100644
--- a/src/routes/[owner]/[collection]/diff.tsx
+++ b/src/routes/[owner]/[collection]/diff.tsx
@@ -1,369 +1,4 @@
-import { useEffect, useState } from 'react'
-import { useLoaderData, useParams, useSearchParams } from 'react-router'
-
-import BaseLayout from '~/components/BaseLayout'
-import { useAppContext } from '~/lib/app-context'
-import { useShareToken, withToken } from '~/lib/share-token'
-
-import { CollectionNav } from '.'
-
-function groupByType(records: any[]) {
-  const groups: Record<string, any[]> = {}
-  for (const r of records) {
-    if (!groups[r.type]) groups[r.type] = []
-    groups[r.type]!.push(r)
-  }
-  return groups
-}
-
-export default function CollectionDiffPage() {
-  const { owner, collection } = useParams()
-  const [searchParams, setSearchParams] = useSearchParams()
-  const { currentUser } = useAppContext()
-  const { data, versions } = useLoaderData() as { data: any; versions: any[] }
-
-  const isOwner =
-    currentUser?.slug === owner || currentUser?.orgs?.some((o: any) => o.slug === owner)
-  const shareToken = useShareToken()
-
-  const [diff, setDiff] = useState<any>(null)
-  const [diffError, setDiffError] = useState<string | null>(null)
-  const [diffLoading, setDiffLoading] = useState(false)
-
-  const latestSemver = versions.length > 0 ? versions[0].semver : ''
-  const [fromVer, setFromVer] = useState<string>(searchParams.get('from') ?? '')
-  const [toVer, setToVer] = useState<string>(searchParams.get('to') || latestSemver)
-
-  useEffect(() => {
-    if (!toVer) return
-    setDiffLoading(true)
-    setDiff(null)
-    setDiffError(null)
-
-    const fromParam = fromVer ? `?from=${fromVer}` : ''
-    fetch(
-      withToken(
-        `/api/collections/${owner}/${collection}/versions/${toVer}/diff${fromParam}`,
-        shareToken,
-      ),
-      { credentials: 'include' },
-    )
-      .then(async (r) => {
-        if (r.ok) {
-          setDiff(await r.json())
-        } else {
-          const body = await r.json().catch(() => ({}))
-          setDiffError(body.error ?? 'Failed to load diff')
-        }
-      })
-      .finally(() => setDiffLoading(false))
-  }, [fromVer, toVer, owner, collection, shareToken])
-
-  function handleCompare(e: React.FormEvent) {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const fd = new FormData(form)
-    const f = fd.get('from') as string
-    const t = fd.get('to') as string
-    setFromVer(f)
-    setToVer(t)
-    const params: Record<string, string> = { to: t }
-    if (f) params.from = f
-    if (shareToken) params.token = shareToken
-    setSearchParams(params)
-  }
-
-  const targetVersion = versions.find((v: any) => v.semver === toVer)
-  const baseVersion = versions.find((v: any) => v.semver === fromVer)
-
-  const addedByType = diff ? groupByType(diff.added) : {}
-  const updatedByType = diff ? groupByType(diff.updated) : {}
-  const removedCount = diff?.removed?.length ?? 0
-
-  const totalAdded = diff?.added?.length ?? 0
-  const totalUpdated = diff?.updated?.length ?? 0
-  const totalRemoved = removedCount
-  const totalChanges = totalAdded + totalUpdated + totalRemoved
-
-  const meta = diff?.meta ?? {}
-  const hasMetaChanges =
-    meta.schemaChanged || meta.readmeChanged || meta.filesAdded > 0 || meta.filesRemoved > 0
-
-  return (
-    <BaseLayout>
-      <div className="mx-auto max-w-5xl px-4 py-8">
-        <CollectionNav
-          owner={owner!}
-          collection={collection!}
-          isPublic={data.public}
-          isOwner={!!isOwner}
-          active="versions"
-        />
-
-        {/* Version selector */}
-        <div className="mb-6 flex items-center gap-3">
-          <form onSubmit={handleCompare} className="flex items-center gap-2 text-sm">
-            <label className="text-ink-muted">Comparing</label>
-            <select
-              name="from"
-              defaultValue={fromVer}
-              className="border-rule bg-parchment rounded border px-2 py-1 text-sm"
-            >
-              <option value="">∅ (empty)</option>
-              {versions.map((v: any) => (
-                <option key={v.semver} value={v.semver}>
-                  {v.semver}
-                </option>
-              ))}
-            </select>
-            <span className="text-ink-muted">→</span>
-            <select
-              name="to"
-              defaultValue={toVer}
-              className="border-rule bg-parchment rounded border px-2 py-1 text-sm"
-            >
-              {versions.map((v: any) => (
-                <option key={v.semver} value={v.semver}>
-                  {v.semver}
-                </option>
-              ))}
-            </select>
-            <button
-              type="submit"
-              className="bg-ink text-parchment rounded px-3 py-1 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              Compare
-            </button>
-          </form>
-        </div>
-
-        {diffError && (
-          <div className="mb-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-            {diffError}
-          </div>
-        )}
-
-        {diffLoading && <p className="text-ink-muted py-8 text-center text-sm">Loading diff…</p>}
-
-        {diff && (
-          <div>
-            {/* Summary bar */}
-            <div className="border-rule bg-parchment-dark mb-6 flex items-center gap-4 rounded border px-4 py-2.5 text-sm">
-              <span className="text-ink-muted">
-                {baseVersion ? baseVersion.semver : '∅'} → {targetVersion?.semver}
-              </span>
-              <span className="text-ink-muted">·</span>
-              <span>
-                <strong className="text-ink">{totalChanges.toLocaleString()}</strong> changes
-              </span>
-              {totalAdded > 0 && (
-                <span className="text-green-700">+{totalAdded.toLocaleString()} added</span>
-              )}
-              {totalUpdated > 0 && (
-                <span className="text-amber-700">~{totalUpdated.toLocaleString()} updated</span>
-              )}
-              {totalRemoved > 0 && (
-                <span className="text-red-700">-{totalRemoved.toLocaleString()} removed</span>
-              )}
-              {meta.schemaChanged && <span className="text-purple-700">schema</span>}
-              {meta.readmeChanged && <span className="text-blue-700">readme</span>}
-              {meta.filesAdded > 0 && (
-                <span className="text-green-700">+{meta.filesAdded} files</span>
-              )}
-              {meta.filesRemoved > 0 && (
-                <span className="text-red-700">-{meta.filesRemoved} files</span>
-              )}
-            </div>
-
-            {/* Metadata changes */}
-            {hasMetaChanges && (
-              <div className="mb-8">
-                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
-                  <span className="h-2 w-2 rounded-full bg-blue-600"></span>
-                  Metadata changes
-                </h3>
-                <div className="border-rule overflow-hidden rounded border">
-                  <table className="w-full text-sm">
-                    <tbody>
-                      {meta.schemaChanged && (
-                        <tr className="border-rule border-b">
-                          <td className="text-ink-muted w-32 p-3 font-medium">Schema</td>
-                          <td className="p-3 text-purple-700">Modified</td>
-                        </tr>
-                      )}
-                      {meta.readmeChanged && (
-                        <tr className="border-rule border-b">
-                          <td className="text-ink-muted w-32 p-3 font-medium">README</td>
-                          <td className="p-3">
-                            {!meta.readmeFrom && meta.readmeTo ? (
-                              <span className="text-green-700">Added</span>
-                            ) : meta.readmeFrom && !meta.readmeTo ? (
-                              <span className="text-red-700">Removed</span>
-                            ) : (
-                              <span className="text-blue-700">Modified</span>
-                            )}
-                          </td>
-                        </tr>
-                      )}
-                      {meta.filesAdded > 0 && (
-                        <tr className="border-rule border-b">
-                          <td className="text-ink-muted w-32 p-3 font-medium">Files added</td>
-                          <td className="p-3 text-green-700">+{meta.filesAdded}</td>
-                        </tr>
-                      )}
-                      {meta.filesRemoved > 0 && (
-                        <tr className="border-rule border-b last:border-b-0">
-                          <td className="text-ink-muted w-32 p-3 font-medium">Files removed</td>
-                          <td className="p-3 text-red-700">-{meta.filesRemoved}</td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            )}
-
-            {totalChanges === 0 && !hasMetaChanges && (
-              <p className="text-ink-muted py-8 text-center text-sm">
-                No changes between these versions.
-              </p>
-            )}
-
-            {/* Added records */}
-            {totalAdded > 0 && (
-              <div className="mb-8">
-                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
-                  <span className="h-2 w-2 rounded-full bg-green-600"></span>
-                  Added ({totalAdded.toLocaleString()})
-                </h3>
-                {Object.entries(addedByType).map(([type, records]: [string, any[]]) => (
-                  <div key={type} className="mb-4">
-                    <div className="text-ink-muted mb-1.5 text-xs font-medium">
-                      {type} ({records.length})
-                    </div>
-                    <div className="border-rule overflow-hidden rounded border">
-                      <table className="w-full text-xs">
-                        <thead>
-                          <tr className="border-rule border-b bg-green-50">
-                            <th className="w-48 p-2 text-left font-medium">ID</th>
-                            <th className="p-2 text-left font-medium">Data</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {records.slice(0, 50).map((r: any) => (
-                            <tr key={r.id} className="border-rule border-t hover:bg-green-50/50">
-                              <td className="text-ink-muted p-2 align-top font-mono text-[11px]">
-                                {r.id.length > 30 ? r.id.slice(0, 30) + '…' : r.id}
-                              </td>
-                              <td className="p-2">
-                                <pre className="max-h-24 overflow-y-auto font-mono text-[11px] break-all whitespace-pre-wrap">
-                                  {JSON.stringify(r.data, null, 2)}
-                                </pre>
-                              </td>
-                            </tr>
-                          ))}
-                          {records.length > 50 && (
-                            <tr className="border-rule border-t">
-                              <td colSpan={2} className="text-ink-muted p-2 text-center">
-                                … and {records.length - 50} more
-                              </td>
-                            </tr>
-                          )}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Updated records */}
-            {totalUpdated > 0 && (
-              <div className="mb-8">
-                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
-                  <span className="h-2 w-2 rounded-full bg-amber-500"></span>
-                  Updated ({totalUpdated.toLocaleString()})
-                </h3>
-                {Object.entries(updatedByType).map(([type, records]: [string, any[]]) => (
-                  <div key={type} className="mb-4">
-                    <div className="text-ink-muted mb-1.5 text-xs font-medium">
-                      {type} ({records.length})
-                    </div>
-                    <div className="border-rule overflow-hidden rounded border">
-                      <table className="w-full text-xs">
-                        <thead>
-                          <tr className="border-rule border-b bg-amber-50">
-                            <th className="w-48 p-2 text-left font-medium">ID</th>
-                            <th className="p-2 text-left font-medium">New data</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {records.slice(0, 50).map((r: any) => (
-                            <tr key={r.id} className="border-rule border-t hover:bg-amber-50/50">
-                              <td className="text-ink-muted p-2 align-top font-mono text-[11px]">
-                                {r.id.length > 30 ? r.id.slice(0, 30) + '…' : r.id}
-                              </td>
-                              <td className="p-2">
-                                <pre className="max-h-24 overflow-y-auto font-mono text-[11px] break-all whitespace-pre-wrap">
-                                  {JSON.stringify(r.data, null, 2)}
-                                </pre>
-                              </td>
-                            </tr>
-                          ))}
-                          {records.length > 50 && (
-                            <tr className="border-rule border-t">
-                              <td colSpan={2} className="text-ink-muted p-2 text-center">
-                                … and {records.length - 50} more
-                              </td>
-                            </tr>
-                          )}
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* Removed records */}
-            {totalRemoved > 0 && (
-              <div className="mb-8">
-                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
-                  <span className="h-2 w-2 rounded-full bg-red-600"></span>
-                  Removed ({totalRemoved.toLocaleString()})
-                </h3>
-                <div className="border-rule overflow-hidden rounded border">
-                  <table className="w-full text-xs">
-                    <thead>
-                      <tr className="border-rule border-b bg-red-50">
-                        <th className="p-2 text-left font-medium">Record ID</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {diff.removed.slice(0, 100).map((id: string) => (
-                        <tr key={id} className="border-rule border-t hover:bg-red-50/50">
-                          <td className="text-ink-muted p-2 font-mono text-[11px]">{id}</td>
-                        </tr>
-                      ))}
-                      {diff.removed.length > 100 && (
-                        <tr className="border-rule border-t">
-                          <td className="text-ink-muted p-2 text-center">
-                            … and {diff.removed.length - 100} more
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {!diff && !diffError && !diffLoading && (
-          <p className="text-ink-muted py-8 text-center text-sm">Select versions to compare.</p>
-        )}
-      </div>
-    </BaseLayout>
-  )
+/** Legacy route: the loader redirects to /versions/compare before this renders. */
+export default function LegacyDiffRedirect() {
+  return null
 }
diff --git a/src/routes/[owner]/[collection]/files.data.ts b/src/routes/[owner]/[collection]/files.data.ts
new file mode 100644
index 0000000..56e68d6
--- /dev/null
+++ b/src/routes/[owner]/[collection]/files.data.ts
@@ -0,0 +1,28 @@
+import type { LoaderFunctionArgs } from 'react-router'
+
+import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
+
+export const handle = {
+  title: (params: Record<string, string>) =>
+    `Files — ${params.owner}/${params.collection} · Underlay`,
+}
+
+/** The latest-context files page: resolve the latest ready version, then load it. */
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const api = apiUrlBuilder(request, fetchBase(request.url))
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+  const prefix = `/api/collections/${params.owner}/${params.collection}`
+
+  const collectionData = await fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null))
+  if (!collectionData) throw new Response('Not Found', { status: 404 })
+
+  const latest = collectionData.latestVersion?.semver
+  const version = latest
+    ? await fetch(api(`${prefix}/versions/${latest}`), { headers }).then((r) =>
+        r.ok ? r.json() : null,
+      )
+    : null
+
+  return { version, collectionData }
+}
diff --git a/src/routes/[owner]/[collection]/files.tsx b/src/routes/[owner]/[collection]/files.tsx
new file mode 100644
index 0000000..71ca7e9
--- /dev/null
+++ b/src/routes/[owner]/[collection]/files.tsx
@@ -0,0 +1,46 @@
+import { useLoaderData, useParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import { EmptyState } from '~/components/ui'
+import { FilesView, VersionInfoBar } from '~/components/version-views'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav } from '.'
+
+export default function CollectionFilesPage() {
+  const { owner, collection } = useParams()
+  const { version, collectionData } = useLoaderData() as { version: any; collectionData: any }
+  const isOwner = useIsOwner(owner)
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={collectionData?.public}
+          isOwner={!!isOwner}
+          active="files"
+          version={version?.semver}
+          isLatest
+        />
+        {version ? (
+          <>
+            <VersionInfoBar
+              version={version}
+              typeCount={Object.keys(version.schemas ?? {}).length}
+            />
+            <FilesView
+              owner={owner!}
+              collection={collection!}
+              version={version}
+              recordsPath={`/${owner}/${collection}/records`}
+            />
+          </>
+        ) : (
+          <EmptyState>No versions yet — push data to browse files.</EmptyState>
+        )}
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/[collection]/index.tsx b/src/routes/[owner]/[collection]/index.tsx
index dcaf53c..091d3fe 100644
--- a/src/routes/[owner]/[collection]/index.tsx
+++ b/src/routes/[owner]/[collection]/index.tsx
@@ -1,124 +1,250 @@
-import DOMPurify from 'isomorphic-dompurify'
-import { marked } from 'marked'
-import { useCallback, useMemo, useState } from 'react'
-import { Link, useLoaderData, useParams } from 'react-router'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Link, useLoaderData, useParams, useSearchParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import CollectionOverviewBody from '~/components/collection-overview'
+import { Badge, Button } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 import { authClient } from '~/lib/auth-client'
+import { bareSemver } from '~/lib/format'
 import { TokenLink, useShareToken, withToken } from '~/lib/share-token'
+import { useDismissable } from '~/lib/use-dismissable'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+/**
+ * Dropdown for switching between versions of a collection while staying on
+ * the same kind of page. Fetches the version list lazily on first open.
+ */
+function VersionPicker({
+  owner,
+  collection,
+  current,
+  isLatest = false,
+  to,
+}: {
+  owner: string
+  collection: string
+  current: string
+  isLatest?: boolean
+  /** Build the target URL for a version, preserving the current view. */
+  to: (semver: string, targetIsLatest: boolean) => string
+}) {
+  const [open, setOpen] = useState(false)
+  const [versions, setVersions] = useState<any[] | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+  const shareToken = useShareToken()
+
+  useDismissable(
+    open,
+    useCallback(() => setOpen(false), []),
+    ref,
+  )
+
+  useEffect(() => {
+    if (!open || versions !== null) return
+    fetch(withToken(`/api/collections/${owner}/${collection}/versions?limit=20`, shareToken), {
+      credentials: 'include',
+    })
+      .then((r) => (r.ok ? r.json() : []))
+      .then((body) => setVersions(Array.isArray(body) ? body : (body?.versions ?? [])))
+  }, [open, versions, owner, collection, shareToken])
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        className="border-rule bg-parchment-dark hover:bg-rule/30 rounded-control cursor-pointer border px-2 py-0.5 font-mono text-xs transition-colors"
+        title="Switch version"
+      >
+        {current}
+        {isLatest && <span className="text-ink-muted font-sans"> · latest</span>}{' '}
+        <span className="text-ink-muted">▾</span>
+      </button>
+      {open && (
+        <div className="bg-parchment border-rule rounded-control absolute top-full right-0 z-50 mt-1.5 max-h-72 min-w-[11rem] overflow-y-auto border shadow-sm">
+          {versions === null ? (
+            <p className="text-ink-muted px-3 py-2 text-xs">Loading…</p>
+          ) : (
+            <>
+              {versions.map((v: any, i: number) => (
+                <TokenLink
+                  key={v.semver}
+                  to={to(v.semver, i === 0)}
+                  onClick={() => setOpen(false)}
+                  className={`hover:bg-parchment-dark block px-3 py-1.5 font-mono text-xs transition-colors ${
+                    v.semver === current ? 'text-ink font-semibold' : 'text-ink-light'
+                  }`}
+                >
+                  {v.semver}
+                  {i === 0 && <span className="text-ink-muted ml-1.5 font-sans">latest</span>}
+                  {v.semver === current && <span className="text-ink-muted ml-1.5">✓</span>}
+                </TokenLink>
+              ))}
+              <TokenLink
+                to={`/${owner}/${collection}/versions`}
+                onClick={() => setOpen(false)}
+                className="text-link border-rule hover:bg-parchment-dark block border-t px-3 py-1.5 text-xs transition-colors"
+              >
+                All versions →
+              </TokenLink>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
 
+/**
+ * Collection header, two rows:
+ * - Top row is collection-wide: breadcrumb, visibility, Settings.
+ * - Tab row is content: Overview / Records / Schemas / Files / Versions, with
+ *   the version picker on its right edge scoping the version-aware tabs
+ *   (Overview, Records, Schemas, Files). Versions is the full history.
+ */
 function CollectionNav({
   owner,
   collection,
   isPublic,
   isOwner = false,
   active,
-  versionLabel,
+  version,
+  isLatest = true,
 }: {
   owner: string
   collection: string
   isPublic?: boolean
   isOwner?: boolean
-  active: 'overview' | 'versions' | 'schemas' | 'settings'
-  versionLabel?: string
+  active: 'overview' | 'records' | 'schemas' | 'files' | 'versions'
+  /** The version currently in context (defaults to latest). Absent on empty collections. */
+  version?: string
+  /** Whether the version in context is the latest ready version. */
+  isLatest?: boolean
 }) {
   const linkClass = 'px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors'
   const activeClass = `${linkClass} border-ink text-ink`
   const inactiveClass = `${linkClass} border-transparent text-ink-muted hover:text-ink hover:border-rule`
   const shareToken = useShareToken()
+  const [searchParams] = useSearchParams()
+
+  // Version is a path prefix; views are path segments; latest is the default
+  // when the prefix is absent. /acme/pubs/records vs /acme/pubs/v/1.0.0/records.
+  const base = `/${owner}/${collection}`
+  const prefix = isLatest || !version ? base : `${base}/v/${bareSemver(version)}`
+
+  // Switching versions keeps you on the view you're looking at.
+  function versionTo(semver: string, targetIsLatest: boolean): string {
+    const target = targetIsLatest ? base : `${base}/v/${bareSemver(semver)}`
+    switch (active) {
+      case 'records': {
+        const type = searchParams.get('type')
+        return `${target}/records${type ? `?type=${encodeURIComponent(type)}` : ''}`
+      }
+      case 'schemas':
+        return `${target}/schemas`
+      case 'files':
+        return `${target}/files`
+      default:
+        // overview, or a collection-level page like /versions
+        return target
+    }
+  }
 
   return (
     <>
-      <div className="mb-2 flex items-center justify-between">
-        <nav className="flex items-center gap-1.5 text-lg">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <nav className="flex min-w-0 items-center gap-1.5 text-lg">
           <Link to={`/${owner}`} className="text-link hover:underline">
             {owner}
           </Link>
           <span className="text-ink-muted">/</span>
-          <TokenLink to={`/${owner}/${collection}`} className="font-semibold hover:underline">
+          <TokenLink to={base} className="min-w-0 truncate font-semibold hover:underline">
             {collection}
           </TokenLink>
           {isPublic !== undefined && (
-            <span className="border-rule text-ink-muted ml-2 border px-1.5 py-0.5 text-xs">
-              {isPublic ? 'public' : 'private'}
-            </span>
+            <Badge className="ml-2">{isPublic ? 'public' : 'private'}</Badge>
           )}
           {shareToken && !isOwner && (
-            <span
-              className="border-rule text-ink-muted bg-parchment-dark border px-1.5 py-0.5 text-xs"
+            <Badge
+              className="bg-parchment-dark"
               title="You are viewing this collection through a read-only shared link"
             >
               shared link
-            </span>
+            </Badge>
           )}
         </nav>
+        <div className="flex shrink-0 items-center gap-4 text-sm">
+          <TokenLink
+            to={`${base}/versions`}
+            className={
+              active === 'versions'
+                ? 'text-ink font-medium'
+                : 'text-ink-muted hover:text-ink transition-colors'
+            }
+          >
+            Versions
+          </TokenLink>
+          {isOwner && (
+            <Link
+              to={`${base}/settings`}
+              className="text-ink-muted hover:text-ink transition-colors"
+            >
+              Settings
+            </Link>
+          )}
+        </div>
       </div>
-      <div className="border-rule mb-6 flex items-center gap-0 border-b">
-        <TokenLink
-          to={`/${owner}/${collection}`}
-          className={active === 'overview' ? activeClass : inactiveClass}
-        >
+      <div className="border-rule mb-6 flex items-center gap-0 overflow-x-auto border-b">
+        <TokenLink to={prefix} className={active === 'overview' ? activeClass : inactiveClass}>
           Overview
         </TokenLink>
+        {version && (
+          <TokenLink
+            to={`${prefix}/records`}
+            className={active === 'records' ? activeClass : inactiveClass}
+          >
+            Records
+          </TokenLink>
+        )}
         <TokenLink
-          to={`/${owner}/${collection}/versions`}
-          className={active === 'versions' && !versionLabel ? activeClass : inactiveClass}
-        >
-          Versions
-        </TokenLink>
-        {versionLabel && <span className={activeClass}>{versionLabel}</span>}
-        <TokenLink
-          to={`/${owner}/${collection}/schemas`}
+          to={`${prefix}/schemas`}
           className={active === 'schemas' ? activeClass : inactiveClass}
         >
           Schemas
         </TokenLink>
-        {isOwner && (
-          <Link
-            to={`/${owner}/${collection}/settings`}
-            className={`${active === 'settings' ? activeClass : inactiveClass} ml-auto`}
+        {version && (
+          <TokenLink
+            to={`${prefix}/files`}
+            className={active === 'files' ? activeClass : inactiveClass}
           >
-            Settings
-          </Link>
+            Files
+          </TokenLink>
+        )}
+        {version && (
+          <div className="mb-1.5 ml-auto">
+            <VersionPicker
+              owner={owner}
+              collection={collection}
+              current={version}
+              isLatest={isLatest}
+              to={versionTo}
+            />
+          </div>
         )}
       </div>
     </>
   )
 }
 
-function formatBytes(bytes: number): string {
-  if (!bytes || bytes < 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
-  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1)
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
-}
-
 export default function CollectionPage() {
   const { owner, collection } = useParams()
-  const { currentUser, mirrorConfig } = useAppContext()
+  const { mirrorConfig } = useAppContext()
   const data = useLoaderData() as any
 
-  const isOwner = useMemo(
-    () =>
-      !!currentUser &&
-      (currentUser.kfRole === 'admin' ||
-        currentUser.slug === owner ||
-        currentUser.orgs?.some((o: any) => o.slug === owner)),
-    [currentUser, owner],
-  )
-
-  const readmeHtml = useMemo(() => {
-    const meta = data?.latestVersion?.metadata as Record<string, unknown> | null | undefined
-    const source = (meta?.readme as string) || data?.latestVersion?.message || null
-    return source ? DOMPurify.sanitize(marked.parse(source) as string) : null
-  }, [data])
-
-  const totalVersions = data.versionCount ?? 0
-  const typeCounts: { type: string; count: number }[] = data.latestVersion?.typeCounts ?? []
-  const allTypes = typeCounts.sort((a: any, b: any) => a.type.localeCompare(b.type))
-  const collectionArkPath: string | null = data.ark ? new URL(data.ark).pathname : null
+  const isOwner = useIsOwner(owner)
 
   return (
     <BaseLayout>
@@ -129,10 +255,12 @@ export default function CollectionPage() {
           isPublic={data.public}
           isOwner={isOwner}
           active="overview"
+          version={data.latestVersion?.semver}
+          isLatest
         />
 
         {mirrorConfig?.enabled && (
-          <div className="text-ink-muted bg-parchment-dark border-rule mb-4 flex items-center gap-2 rounded border px-3 py-2 text-xs">
+          <div className="text-ink-muted bg-parchment-dark border-rule rounded-surface mb-4 flex items-center gap-2 border px-3 py-2 text-xs">
             <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -155,12 +283,12 @@ export default function CollectionPage() {
 
         {/* Empty state for new collections */}
         {!data.latestVersion && isOwner && (
-          <div className="border-rule mb-6 rounded border px-6 py-10 text-center">
+          <div className="border-rule rounded-surface mb-6 border px-6 py-10 text-center">
             <h2 className="mb-2 text-base font-semibold">Get started with {collection}</h2>
             <p className="text-ink-muted mx-auto mb-6 max-w-md text-sm leading-relaxed">
               This collection is empty. Push your first version using the CLI or API.
             </p>
-            <div className="bg-ink text-parchment mx-auto max-w-md overflow-hidden rounded text-left font-mono text-[13px] leading-relaxed">
+            <div className="bg-ink text-parchment rounded-surface mx-auto max-w-md overflow-hidden text-left font-mono text-[13px] leading-relaxed">
               <div className="p-4">
                 <div className="text-ink-muted mb-1 text-[11px] select-none">
                   # initialize and push
@@ -189,7 +317,7 @@ export default function CollectionPage() {
               <span className="text-rule">&middot;</span>
               <span className="text-ink-muted">
                 API:{' '}
-                <code className="bg-parchment-dark rounded px-1.5 py-0.5 text-[11px]">
+                <code className="bg-parchment-dark rounded-control px-1.5 py-0.5 text-[11px]">
                   POST /api/collections/{owner}/{collection}/versions/negotiate
                 </code>
               </span>
@@ -197,300 +325,23 @@ export default function CollectionPage() {
           </div>
         )}
 
-        {/* Two-column layout */}
-        <div className="grid grid-cols-[1fr_260px] gap-8">
-          {/* Main column */}
-          <div className="min-w-0">
-            {/* Latest version bar */}
-            {data.latestVersion && (
-              <div className="border-rule bg-parchment-dark mb-6 flex items-center justify-between rounded border px-4 py-2.5">
-                <div className="flex items-center gap-3 text-sm">
-                  <TokenLink
-                    to={`/${owner}/${collection}/v/${data.latestVersion.semver}`}
-                    className="text-link font-medium hover:underline"
-                  >
-                    {data.latestVersion.semver}
-                  </TokenLink>
-                  <span className="text-ink-muted">·</span>
-                  <span className="text-ink-muted">
-                    {data.latestVersion.recordCount.toLocaleString()} records
-                  </span>
-                  <span className="text-ink-muted">·</span>
-                  <span className="text-ink-muted">
-                    {data.latestVersion.fileCount.toLocaleString()} files
-                  </span>
-                  <span className="text-ink-muted">·</span>
-                  <span className="text-ink-muted">
-                    {formatBytes(data.latestVersion.totalBytes)}
-                  </span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <span className="text-ink-muted text-xs">
-                    {new Date(data.latestVersion.createdAt).toLocaleDateString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                      year: 'numeric',
-                      timeZone: 'UTC',
-                    })}
-                  </span>
-                  <TokenLink
-                    to={`/${owner}/${collection}/versions`}
-                    className="text-ink-muted hover:text-ink flex items-center gap-1 text-xs transition-colors"
-                    title="Version history"
-                  >
-                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      />
-                    </svg>
-                    <span>{totalVersions}</span>
-                  </TokenLink>
-                </div>
-              </div>
-            )}
-
-            {/* Type TOC */}
-            {allTypes.length > 0 && (
-              <div className="border-rule mb-6 overflow-hidden rounded border">
-                {allTypes.map((t: any, i: number) => (
-                  <TokenLink
-                    key={t.type}
-                    to={`/${owner}/${collection}/v/${data.latestVersion.semver}?type=${t.type}`}
-                    className={`hover:bg-parchment-dark/50 flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${
-                      i < allTypes.length - 1 ? 'border-rule border-b' : ''
-                    }`}
-                  >
-                    <div className="flex items-center gap-2.5">
-                      <svg
-                        className="text-ink-muted h-4 w-4 shrink-0"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                        />
-                      </svg>
-                      <span className="font-medium">{t.type}</span>
-                    </div>
-                    <span className="text-ink-muted text-xs">
-                      {t.count.toLocaleString()} records
-                    </span>
-                  </TokenLink>
-                ))}
-              </div>
-            )}
-
-            {/* README */}
-            {readmeHtml ? (
-              <div className="border-rule mb-6 overflow-hidden rounded border">
-                <div className="bg-parchment-dark border-rule text-ink-muted border-b px-4 py-2.5 text-xs font-medium">
-                  README
-                </div>
-                <div
-                  className="prose prose-sm max-w-none px-6 py-5"
-                  dangerouslySetInnerHTML={{ __html: readmeHtml }}
-                />
-              </div>
-            ) : (
-              <div className="border-rule text-ink-muted mb-6 rounded border px-4 py-8 text-center text-sm">
-                No README yet.
-              </div>
-            )}
-          </div>
-
-          {/* Sidebar */}
-          <aside className="text-sm">
-            {/* About */}
-            <div className="mb-6">
-              <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-                About
-              </h3>
-              <p className="text-ink text-sm leading-relaxed">
-                {data.description || 'No description.'}
-              </p>
-              <div className="text-ink-muted mt-2 text-xs">
-                by{' '}
-                <Link to={`/${data.ownerSlug}`} className="text-link hover:underline">
-                  {data.ownerName}
-                </Link>
-              </div>
-              {(() => {
-                const meta = data.latestVersion?.metadata as
-                  | Record<string, unknown>
-                  | null
-                  | undefined
-                const tags = Array.isArray(meta?.tags) ? (meta.tags as string[]) : []
-                return tags.length > 0 ? (
-                  <div className="mt-3 flex flex-wrap gap-1.5">
-                    {tags.map((tag: string) => (
-                      <Link
-                        key={tag}
-                        to={`/explore?tag=${encodeURIComponent(tag)}`}
-                        className="bg-parchment-dark text-ink-muted hover:text-ink rounded px-2 py-0.5 text-xs transition-colors"
-                      >
-                        {tag}
-                      </Link>
-                    ))}
-                  </div>
-                ) : null
-              })()}
-            </div>
-
-            {/* Stats */}
-            {data.latestVersion && (
-              <div className="mb-6">
-                <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-                  Stats
-                </h3>
-                <div className="space-y-1.5 text-xs">
-                  <div className="flex items-center gap-2">
-                    <svg
-                      className="text-ink-muted h-3.5 w-3.5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      />
-                    </svg>
-                    <span>
-                      <strong className="text-ink">{totalVersions}</strong> versions
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <svg
-                      className="text-ink-muted h-3.5 w-3.5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V9c0-2-1-3-3-3h-4l-2-2H7c-2 0-3 1-3 3z"
-                      />
-                    </svg>
-                    <span>
-                      <strong className="text-ink">
-                        {data.latestVersion.recordCount.toLocaleString()}
-                      </strong>{' '}
-                      records
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <svg
-                      className="text-ink-muted h-3.5 w-3.5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                      />
-                    </svg>
-                    <span>
-                      <strong className="text-ink">
-                        {data.latestVersion.fileCount.toLocaleString()}
-                      </strong>{' '}
-                      files
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <svg
-                      className="text-ink-muted h-3.5 w-3.5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V9c0-2-1-3-3-3h-4l-2-2H7c-2 0-3 1-3 3z"
-                      />
-                    </svg>
-                    <span>
-                      <strong className="text-ink">
-                        {formatBytes(data.latestVersion.totalBytes)}
-                      </strong>{' '}
-                      total
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Subscribe / Export */}
-            <div className="mb-6">
-              <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-                Subscribe
-              </h3>
-              <div className="space-y-2 text-xs">
-                <div>
-                  <p className="mb-0.5 font-medium">AT Protocol</p>
-                  <code className="text-ink-muted bg-parchment-dark block rounded px-2 py-1 text-[11px] break-all">
-                    {`at://did:web:underlay.org:${owner}/org.underlay.collection.${collection}`}
-                  </code>
-                </div>
-                <div>
-                  <p className="mb-0.5 font-medium">API</p>
-                  <code className="text-ink-muted bg-parchment-dark block rounded px-2 py-1 text-[11px] break-all">
-                    {`GET /api/collections/${owner}/${collection}/versions`}
-                  </code>
-                </div>
-                {data.latestVersion && (
-                  <TokenLink
-                    to={`/api/collections/${owner}/${collection}/export`}
-                    className="text-link inline-block hover:underline"
-                    reloadDocument
-                  >
-                    Download .tar.gz
-                  </TokenLink>
-                )}
-              </div>
-            </div>
-
-            {/* Share */}
-            {isOwner && (
+        <CollectionOverviewBody
+          owner={owner!}
+          collection={collection!}
+          data={data}
+          version={data.latestVersion}
+          isLatest
+          share={
+            isOwner ? (
               <SharePanel
                 owner={owner!}
                 collection={collection!}
                 collectionId={data.id}
                 isPublic={!!data.public}
               />
-            )}
-
-            {/* ARK */}
-            {collectionArkPath && (
-              <div className="mb-6">
-                <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-                  ARK Identifier
-                </h3>
-                <Link
-                  to={collectionArkPath}
-                  className="text-link bg-parchment-dark block rounded px-2 py-1 font-mono text-[11px] break-all hover:underline"
-                >
-                  {collectionArkPath.slice(1)}
-                </Link>
-              </div>
-            )}
-          </aside>
-        </div>
+            ) : undefined
+          }
+        />
       </div>
     </BaseLayout>
   )
@@ -515,6 +366,16 @@ function SharePanel({
   const [loading, setLoading] = useState<'view' | 'agent' | null>(null)
   const [copied, setCopied] = useState<'link' | 'blurb' | null>(null)
 
+  // Escape closes the share dialogs (backdrop click already does).
+  useEffect(() => {
+    if (!modal) return
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setModal(null)
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [modal])
+
   const generateView = useCallback(async () => {
     setLoading('view')
     setCopied(null)
@@ -585,20 +446,24 @@ function SharePanel({
               : 'Create a read-only link that lets anyone view this collection without signing in or becoming a member.'}
           </p>
           {isPublic ? (
-            <button
+            <Button
+              variant="link"
+              size="sm"
+              className="font-medium"
               onClick={() => copy(`${window.location.origin}/${owner}/${collection}`, 'link')}
-              className="text-link text-xs font-medium hover:underline"
             >
               {copied === 'link' && modal === null ? 'Copied!' : 'Copy collection URL'}
-            </button>
+            </Button>
           ) : (
-            <button
+            <Button
+              variant="link"
+              size="sm"
+              className="font-medium"
               onClick={generateView}
               disabled={loading !== null}
-              className="text-link text-xs font-medium hover:underline"
             >
               {loading === 'view' ? 'Generating...' : 'Create view link →'}
-            </button>
+            </Button>
           )}
         </div>
 
@@ -606,29 +471,35 @@ function SharePanel({
           <p className="text-ink-muted mb-1.5 text-xs leading-relaxed">
             Or generate a temporary link that lets an AI agent push updates to this collection.
           </p>
-          <button
+          <Button
+            variant="link"
+            size="sm"
+            className="font-medium"
             onClick={generateAgent}
             disabled={loading !== null}
-            className="text-link text-xs font-medium hover:underline"
           >
             {loading === 'agent' ? 'Generating...' : 'Generate agent link →'}
-          </button>
+          </Button>
         </div>
       </div>
 
       {modal === 'view' && viewUrl && (
         <div
+          role="dialog"
+          aria-modal="true"
           className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
           onClick={(e) => {
             if (e.target === e.currentTarget) setModal(null)
           }}
         >
-          <div className="bg-parchment border-rule mx-4 w-full max-w-2xl rounded border p-6 shadow-lg">
+          <div className="bg-parchment border-rule rounded-surface mx-4 w-full max-w-2xl border p-6 shadow-lg">
             <div className="mb-4 flex items-center justify-between">
               <h2 className="text-sm font-semibold">View-only Link</h2>
               <button
+                type="button"
+                aria-label="Close"
                 onClick={() => setModal(null)}
-                className="text-ink-muted hover:text-ink text-lg leading-none"
+                className="text-ink-muted hover:text-ink cursor-pointer text-lg leading-none"
               >
                 &times;
               </button>
@@ -644,15 +515,12 @@ function SharePanel({
               <label className="text-ink-muted mb-1 block text-[11px] font-medium tracking-wide uppercase">
                 Link
               </label>
-              <div className="bg-parchment-dark border-rule rounded border px-3 py-2 font-mono text-[11px] break-all">
+              <div className="bg-parchment-dark border-rule rounded-surface border px-3 py-2 font-mono text-[11px] break-all">
                 {viewUrl}
               </div>
-              <button
-                onClick={() => copy(viewUrl, 'link')}
-                className="bg-ink text-parchment mt-2 rounded px-3 py-1 text-xs font-medium transition-opacity hover:opacity-90"
-              >
+              <Button size="sm" className="mt-2" onClick={() => copy(viewUrl, 'link')}>
                 {copied === 'link' ? 'Copied!' : 'Copy link'}
-              </button>
+              </Button>
             </div>
 
             <div className="flex items-center justify-between">
@@ -675,17 +543,21 @@ function SharePanel({
 
       {modal === 'agent' && agentUrl && (
         <div
+          role="dialog"
+          aria-modal="true"
           className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
           onClick={(e) => {
             if (e.target === e.currentTarget) setModal(null)
           }}
         >
-          <div className="bg-parchment border-rule mx-4 w-full max-w-2xl rounded border p-6 shadow-lg">
+          <div className="bg-parchment border-rule rounded-surface mx-4 w-full max-w-2xl border p-6 shadow-lg">
             <div className="mb-4 flex items-center justify-between">
               <h2 className="text-sm font-semibold">Agent Update Link</h2>
               <button
+                type="button"
+                aria-label="Close"
                 onClick={() => setModal(null)}
-                className="text-ink-muted hover:text-ink text-lg leading-none"
+                className="text-ink-muted hover:text-ink cursor-pointer text-lg leading-none"
               >
                 &times;
               </button>
@@ -702,30 +574,24 @@ function SharePanel({
               <label className="text-ink-muted mb-1 block text-[11px] font-medium tracking-wide uppercase">
                 Link
               </label>
-              <div className="bg-parchment-dark border-rule rounded border px-3 py-2 font-mono text-[11px] break-all">
+              <div className="bg-parchment-dark border-rule rounded-surface border px-3 py-2 font-mono text-[11px] break-all">
                 {agentUrl}
               </div>
-              <button
-                onClick={() => copy(agentUrl, 'link')}
-                className="bg-ink text-parchment mt-2 rounded px-3 py-1 text-xs font-medium transition-opacity hover:opacity-90"
-              >
+              <Button size="sm" className="mt-2" onClick={() => copy(agentUrl, 'link')}>
                 {copied === 'link' ? 'Copied!' : 'Copy link'}
-              </button>
+              </Button>
             </div>
 
             <div className="mb-4">
               <label className="text-ink-muted mb-1 block text-[11px] font-medium tracking-wide uppercase">
                 Prompt
               </label>
-              <div className="bg-parchment-dark border-rule overflow-hidden rounded border px-3 py-2 text-xs leading-relaxed break-all">
+              <div className="bg-parchment-dark border-rule rounded-surface overflow-hidden border px-3 py-2 text-xs leading-relaxed break-all">
                 {agentBlurb}
               </div>
-              <button
-                onClick={() => copy(agentBlurb, 'blurb')}
-                className="bg-ink text-parchment mt-2 rounded px-3 py-1 text-xs font-medium transition-opacity hover:opacity-90"
-              >
+              <Button size="sm" className="mt-2" onClick={() => copy(agentBlurb, 'blurb')}>
                 {copied === 'blurb' ? 'Copied!' : 'Copy prompt'}
-              </button>
+              </Button>
             </div>
 
             <div className="flex items-center justify-between">
@@ -747,4 +613,5 @@ function SharePanel({
   )
 }
 
-export { CollectionNav, formatBytes }
+export { CollectionNav, SharePanel }
+export { formatBytes } from '~/lib/format'
diff --git a/src/routes/[owner]/[collection]/records.data.ts b/src/routes/[owner]/[collection]/records.data.ts
new file mode 100644
index 0000000..0d3053f
--- /dev/null
+++ b/src/routes/[owner]/[collection]/records.data.ts
@@ -0,0 +1,28 @@
+import type { LoaderFunctionArgs } from 'react-router'
+
+import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
+
+export const handle = {
+  title: (params: Record<string, string>) =>
+    `Records — ${params.owner}/${params.collection} · Underlay`,
+}
+
+/** The latest-context records page: resolve the latest ready version, then load it. */
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const api = apiUrlBuilder(request, fetchBase(request.url))
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+  const prefix = `/api/collections/${params.owner}/${params.collection}`
+
+  const collectionData = await fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null))
+  if (!collectionData) throw new Response('Not Found', { status: 404 })
+
+  const latest = collectionData.latestVersion?.semver
+  const version = latest
+    ? await fetch(api(`${prefix}/versions/${latest}`), { headers }).then((r) =>
+        r.ok ? r.json() : null,
+      )
+    : null
+
+  return { version, collectionData }
+}
diff --git a/src/routes/[owner]/[collection]/records.tsx b/src/routes/[owner]/[collection]/records.tsx
new file mode 100644
index 0000000..01018dd
--- /dev/null
+++ b/src/routes/[owner]/[collection]/records.tsx
@@ -0,0 +1,46 @@
+import { useLoaderData, useParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import { EmptyState } from '~/components/ui'
+import { RecordsView, VersionInfoBar } from '~/components/version-views'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav } from '.'
+
+export default function CollectionRecordsPage() {
+  const { owner, collection } = useParams()
+  const { version, collectionData } = useLoaderData() as { version: any; collectionData: any }
+  const isOwner = useIsOwner(owner)
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={collectionData?.public}
+          isOwner={!!isOwner}
+          active="records"
+          version={version?.semver}
+          isLatest
+        />
+        {version ? (
+          <>
+            <VersionInfoBar
+              version={version}
+              typeCount={Object.keys(version.schemas ?? {}).length}
+            />
+            <RecordsView
+              owner={owner!}
+              collection={collection!}
+              version={version}
+              basePath={`/${owner}/${collection}/records`}
+            />
+          </>
+        ) : (
+          <EmptyState>No versions yet — push data to browse records.</EmptyState>
+        )}
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/[collection]/schemas.data.ts b/src/routes/[owner]/[collection]/schemas.data.ts
index d74a50f..c37ff87 100644
--- a/src/routes/[owner]/[collection]/schemas.data.ts
+++ b/src/routes/[owner]/[collection]/schemas.data.ts
@@ -1,4 +1,4 @@
-import type { LoaderFunctionArgs } from 'react-router'
+import { redirect, type LoaderFunctionArgs } from 'react-router'
 
 import { fetchBase } from '~/lib/fetch-base'
 import { apiUrlBuilder } from '~/lib/share-token'
@@ -9,6 +9,18 @@ export const handle = {
 }
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
+  const url = new URL(request.url)
+
+  // Legacy: version-pinned schemas used to live here as ?version=.
+  const versionParam = url.searchParams.get('version')
+  if (versionParam) {
+    const token = url.searchParams.get('token')
+    const tokenQuery = token ? `?token=${encodeURIComponent(token)}` : ''
+    throw redirect(
+      `/${params.owner}/${params.collection}/v/${versionParam.replace(/^v/, '')}/schemas${tokenQuery}`,
+    )
+  }
+
   const api = apiUrlBuilder(request, fetchBase(request.url))
   const headers = { Cookie: request.headers.get('Cookie') ?? '' }
   const prefix = `/api/collections/${params.owner}/${params.collection}`
diff --git a/src/routes/[owner]/[collection]/schemas.tsx b/src/routes/[owner]/[collection]/schemas.tsx
index 1e953e4..beecd02 100644
--- a/src/routes/[owner]/[collection]/schemas.tsx
+++ b/src/routes/[owner]/[collection]/schemas.tsx
@@ -1,70 +1,15 @@
-import { type FormEvent, useEffect, useState } from 'react'
-import { Link, useLoaderData, useParams } from 'react-router'
+import { useLoaderData, useParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
-import { useAppContext } from '~/lib/app-context'
+import SchemaList from '~/components/SchemaList'
+import { useIsOwner } from '~/lib/use-is-owner'
 
 import { CollectionNav } from '.'
 
 export default function CollectionSchemasPage() {
   const { owner, collection } = useParams()
-  const { currentUser } = useAppContext()
   const { data, schemas: schemasData } = useLoaderData() as { data: any; schemas: any }
-
-  const isOwner =
-    currentUser?.slug === owner || currentUser?.orgs?.some((o: any) => o.slug === owner)
-
-  const schemas: any[] = schemasData?.schemas ?? []
-
-  const [arkRecordTypes, setArkRecordTypes] = useState<Record<string, string>>({})
-  const [arkSuccess, setArkSuccess] = useState('')
-  const [arkError, setArkError] = useState('')
-
-  useEffect(() => {
-    if (!isOwner || !owner || !collection) return
-    fetch(`/api/collections/${owner}/${collection}/ark/record-types`, {
-      credentials: 'include',
-    })
-      .then((r) => (r.ok ? r.json() : []))
-      .then((arkTypes: any[]) => {
-        const types: Record<string, string> = {}
-        for (const entry of arkTypes) {
-          types[entry.recordType] = entry.redirectUrlField
-        }
-        setArkRecordTypes(types)
-      })
-  }, [isOwner, owner, collection])
-
-  async function handleUpdateArkType(e: FormEvent, slug: string) {
-    e.preventDefault()
-    setArkSuccess('')
-    setArkError('')
-    const form = e.target as HTMLFormElement
-    const formData = new FormData(form)
-    const redirectUrlField = (formData.get('redirectUrlField') as string) || null
-
-    const res = await fetch(`/api/collections/${owner}/${collection}/ark/record-types`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'include',
-      body: JSON.stringify({ recordType: slug, redirectUrlField }),
-    })
-    if (res.ok) {
-      setArkSuccess(`ARK settings updated for ${slug}.`)
-      setArkRecordTypes((prev) => {
-        const next = { ...prev }
-        if (redirectUrlField) {
-          next[slug] = redirectUrlField
-        } else {
-          delete next[slug]
-        }
-        return next
-      })
-    } else {
-      const body = await res.json().catch(() => ({}))
-      setArkError(body.error ?? 'Failed to update ARK settings.')
-    }
-  }
+  const isOwner = useIsOwner(owner)
 
   return (
     <BaseLayout>
@@ -75,202 +20,15 @@ export default function CollectionSchemasPage() {
           isPublic={data.public}
           isOwner={!!isOwner}
           active="schemas"
+          version={schemasData?.semver ?? data.latestVersion?.semver}
+          isLatest
+        />
+        <SchemaList
+          owner={owner!}
+          collection={collection!}
+          schemasData={schemasData}
+          isOwner={!!isOwner}
         />
-
-        {arkSuccess && (
-          <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-            {arkSuccess}
-          </p>
-        )}
-        {arkError && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {arkError}
-          </p>
-        )}
-
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-ink-muted text-sm font-semibold">
-            {schemas.length} type{schemas.length !== 1 ? 's' : ''}
-            {schemasData?.semver && (
-              <span className="ml-1 font-normal">in {schemasData.semver}</span>
-            )}
-          </h2>
-        </div>
-
-        {schemas.length === 0 ? (
-          <p className="text-ink-muted py-8 text-center text-sm">No schemas in this version.</p>
-        ) : (
-          <div className="space-y-4">
-            {schemas.map((s: any) => {
-              const properties = (s.schema as any)?.properties ?? {}
-              const fields = Object.entries(properties)
-              const isPrivate = (s.schema as any)?.private === true
-              const labels: string[] = (s.schema as any)?.['x-underlay-labels'] ?? []
-
-              const urlFields = fields
-                .filter(
-                  ([, def]: [string, any]) =>
-                    def.type === 'string' && (def.format === 'uri' || def.format === 'url'),
-                )
-                .map(([name]: [string, any]) => name)
-              const currentField = arkRecordTypes[s.slug] ?? ''
-
-              return (
-                <div key={s.slug} className="border-rule overflow-hidden rounded border">
-                  {/* Header */}
-                  <div className="bg-parchment-dark border-rule flex items-center justify-between border-b px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <svg
-                        className="text-ink-muted h-4 w-4 shrink-0"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                        />
-                      </svg>
-                      <span className="text-sm font-medium">{s.slug}</span>
-                      {isPrivate && (
-                        <span className="border-rule text-ink-muted border px-1.5 py-0.5 text-[11px]">
-                          private
-                        </span>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-3">
-                      {labels.length > 0 && (
-                        <div className="flex items-center gap-1">
-                          {labels.map((label: string) => (
-                            <span
-                              key={label}
-                              className="bg-parchment border-rule text-ink-muted rounded border px-1.5 py-0.5 text-[11px]"
-                            >
-                              {label}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                      <Link
-                        to={`/schemas/${s.schemaId}`}
-                        className="text-link text-[11px] hover:underline"
-                        title="View global schema detail"
-                      >
-                        {s.schemaHash.slice(0, 10)}…
-                      </Link>
-                    </div>
-                  </div>
-
-                  {/* Fields table */}
-                  <table className="w-full text-xs">
-                    <thead>
-                      <tr className="border-rule border-b">
-                        <th className="w-48 p-2.5 text-left font-medium">Field</th>
-                        <th className="w-32 p-2.5 text-left font-medium">Type</th>
-                        <th className="p-2.5 text-left font-medium">Annotations</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {fields.map(([name, def]: [string, any]) => {
-                        const fieldType = def.type ?? 'unknown'
-                        const format = def.format ? ` (${def.format})` : ''
-                        const refType = def['x-ref-type']
-                        const isFieldPrivate = def.private === true
-
-                        return (
-                          <tr
-                            key={name}
-                            className="border-rule hover:bg-parchment-dark/50 border-t"
-                          >
-                            <td className="p-2.5 font-mono">{name}</td>
-                            <td className="text-ink-muted p-2.5">
-                              {fieldType}
-                              {format}
-                            </td>
-                            <td className="p-2.5">
-                              <div className="flex items-center gap-2">
-                                {refType && (
-                                  <span className="bg-parchment-dark border-rule inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px]">
-                                    <svg
-                                      className="text-ink-muted h-3 w-3"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"
-                                      />
-                                      <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-                                      />
-                                    </svg>
-                                    → {refType}
-                                  </span>
-                                )}
-                                {isFieldPrivate && (
-                                  <span className="border-rule text-ink-muted rounded border px-1.5 py-0.5 text-[11px]">
-                                    private
-                                  </span>
-                                )}
-                              </div>
-                            </td>
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </table>
-
-                  {/* ARK section for this type (owner only) */}
-                  {isOwner && urlFields.length > 0 && (
-                    <div className="border-rule bg-parchment-dark/30 border-t px-4 py-3">
-                      <p className="text-ink-muted mb-2 text-xs font-medium tracking-wide uppercase">
-                        ARK identifiers for this type
-                      </p>
-                      <form
-                        onSubmit={(e) => handleUpdateArkType(e, s.slug)}
-                        className="flex items-center gap-3"
-                      >
-                        <label
-                          htmlFor={`ark-field-${s.slug}`}
-                          className="text-ink-muted shrink-0 text-xs"
-                        >
-                          Redirect URL field:
-                        </label>
-                        <select
-                          id={`ark-field-${s.slug}`}
-                          name="redirectUrlField"
-                          defaultValue={currentField}
-                          className="bg-parchment border-rule focus:border-ink border px-2 py-1 text-xs focus:outline-none"
-                        >
-                          <option value="">Disabled</option>
-                          {urlFields.map((f: string) => (
-                            <option key={f} value={f}>
-                              {f}
-                            </option>
-                          ))}
-                        </select>
-                        <button
-                          type="submit"
-                          className="bg-ink text-parchment px-3 py-1 text-xs font-medium transition-opacity hover:opacity-90"
-                        >
-                          Save
-                        </button>
-                      </form>
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        )}
       </div>
     </BaseLayout>
   )
diff --git a/src/routes/[owner]/[collection]/settings.data.ts b/src/routes/[owner]/[collection]/settings.data.ts
index 76411a5..3673eb4 100644
--- a/src/routes/[owner]/[collection]/settings.data.ts
+++ b/src/routes/[owner]/[collection]/settings.data.ts
@@ -1,7 +1,10 @@
 import type { LoaderFunctionArgs } from 'react-router'
 
+import { requireAuth } from '~/lib/auth-middleware'
 import { fetchBase } from '~/lib/fetch-base'
 
+export const middleware = [requireAuth]
+
 export const handle = {
   title: (params: Record<string, string>) =>
     `Settings — ${params.owner}/${params.collection} · Underlay`,
diff --git a/src/routes/[owner]/[collection]/settings.tsx b/src/routes/[owner]/[collection]/settings.tsx
index 07a6efb..db3600d 100644
--- a/src/routes/[owner]/[collection]/settings.tsx
+++ b/src/routes/[owner]/[collection]/settings.tsx
@@ -1,12 +1,20 @@
 import { type FormEvent, useState } from 'react'
 import { Link, useLoaderData, useParams } from 'react-router'
 
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { collectionSettingsRail } from '~/components/SettingsLayout'
+import {
+  Alert,
+  Badge,
+  Button,
+  buttonClasses,
+  Checkbox,
+  Input,
+  SectionHeading,
+  Select,
+} from '~/components/ui'
 import WebhooksSettings from '~/components/WebhooksSettings'
 import { useAppContext } from '~/lib/app-context'
 
-import { CollectionNav } from '.'
-
 export default function CollectionSettingsPage() {
   const { owner, collection } = useParams()
   const { currentUser } = useAppContext()
@@ -43,11 +51,6 @@ export default function CollectionSettingsPage() {
   // Transfer form
   const [transferTarget, setTransferTarget] = useState('')
 
-  if (!currentUser) {
-    window.location.href = '/login'
-    return null
-  }
-
   function clearMessages() {
     setSuccess('')
     setError('')
@@ -183,385 +186,381 @@ export default function CollectionSettingsPage() {
 
   const arkPath: string | null = arkSettings.arkUrl ? new URL(arkSettings.arkUrl).pathname : null
 
-  return (
-    <BaseLayout>
-      <div className="mx-auto max-w-5xl px-4 py-8">
-        <CollectionNav
-          owner={owner!}
-          collection={collection!}
-          isPublic={data.public}
-          isOwner={true}
-          active="settings"
-        />
+  const crumb = (
+    <nav className="flex items-center gap-1.5">
+      <Link to={`/${owner}`} className="text-link hover:underline">
+        {owner}
+      </Link>
+      <span className="text-ink-muted">/</span>
+      <Link to={`/${owner}/${collection}`} className="text-link font-medium hover:underline">
+        {collection}
+      </Link>
+      <span className="text-ink-muted">/</span>
+      <span className="text-ink-muted">settings</span>
+      <Badge className="ml-2">{data.public ? 'public' : 'private'}</Badge>
+    </nav>
+  )
 
-        <div className="max-w-xl">
-          {success && (
-            <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-              {success}
-            </p>
-          )}
-          {error && (
-            <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-              {error}
-            </p>
-          )}
+  return (
+    <SettingsLayout
+      crumb={crumb}
+      title="Collection settings"
+      description="Identity, metadata, and integrations for this collection."
+      groups={collectionSettingsRail}
+    >
+      {success && (
+        <Alert variant="success" className="mb-4">
+          {success}
+        </Alert>
+      )}
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
 
-          {/* Update form */}
-          <form onSubmit={handleUpdate} className="mb-10 space-y-4">
-            <div>
-              <label htmlFor="name" className="mb-1 block text-sm font-medium">
-                Name
-              </label>
-              <input
-                type="text"
-                id="name"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                required
-                className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-              />
-            </div>
+      {/* Basics */}
+      <section id="basics" data-settings-section className="mb-10 scroll-mt-6">
+        <SectionHeading>Basics</SectionHeading>
+        <form onSubmit={handleUpdate} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="mb-1 block text-sm font-medium">
+              Name
+            </label>
+            <Input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+            />
+          </div>
 
-            <div>
-              <label htmlFor="collSlug" className="mb-1 block text-sm font-medium">
-                Slug
-              </label>
-              <input
-                type="text"
-                id="collSlug"
-                value={slugValue}
-                onChange={(e) =>
-                  setSlugValue(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))
-                }
-                pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
-                className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 font-mono text-sm focus:outline-none"
-              />
-              {slugValue !== collection && (
-                <p className="mt-1 text-xs text-amber-700">
-                  Changing the slug will update this collection's URL.
-                </p>
-              )}
-            </div>
+          <div>
+            <label htmlFor="collSlug" className="mb-1 block text-sm font-medium">
+              Slug
+            </label>
+            <Input
+              type="text"
+              id="collSlug"
+              value={slugValue}
+              onChange={(e) =>
+                setSlugValue(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))
+              }
+              pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
+              className="font-mono"
+            />
+            {slugValue !== collection && (
+              <p className="mt-1 text-xs text-amber-700">
+                Changing the slug will update this collection's URL.
+              </p>
+            )}
+          </div>
 
-            <div className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                id="public"
-                checked={isPublic}
-                onChange={(e) => setIsPublic(e.target.checked)}
-                className="accent-ink"
-              />
-              <label htmlFor="public" className="text-sm">
-                Public — visible to everyone
-              </label>
-            </div>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="public"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+            />
+            <label htmlFor="public" className="text-sm">
+              Public — visible to everyone
+            </label>
+          </div>
 
-            <div className="pt-2">
-              <button
-                type="submit"
-                disabled={submitting === 'update'}
-                className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-              >
-                Save changes
-              </button>
-            </div>
-          </form>
+          <div className="pt-2">
+            <Button type="submit" disabled={submitting === 'update'}>
+              {submitting === 'update' ? 'Saving…' : 'Save changes'}
+            </Button>
+          </div>
+        </form>
+      </section>
 
-          {/* Metadata */}
-          <div className="border-rule mb-10 border-t pt-6">
-            <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-              Metadata
-            </h2>
-            <p className="text-ink-muted mb-3 text-sm">
-              Description, readme, and license are versioned — saving creates a patch version.
-            </p>
-            <form onSubmit={handleUpdateMetadata} className="space-y-4">
-              <div>
-                <label htmlFor="description" className="mb-1 block text-sm font-medium">
-                  Description
-                </label>
-                <input
-                  type="text"
-                  id="description"
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  placeholder="A short description of this collection"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label htmlFor="readme" className="mb-1 block text-sm font-medium">
-                  Readme <span className="text-ink-muted font-normal">(Markdown)</span>
-                </label>
-                <textarea
-                  id="readme"
-                  value={readme}
-                  onChange={(e) => setReadme(e.target.value)}
-                  rows={8}
-                  placeholder="# My Collection&#10;&#10;Detailed description in Markdown..."
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 font-mono text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label htmlFor="license" className="mb-1 block text-sm font-medium">
-                  License
-                </label>
-                <input
-                  type="text"
-                  id="license"
-                  value={license}
-                  onChange={(e) => setLicense(e.target.value)}
-                  placeholder="e.g. CC-BY-4.0, MIT, Public Domain"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-medium">Tags</label>
-                {tags.length > 0 && (
-                  <div className="mb-2 flex flex-wrap gap-1.5">
-                    {tags.map((tag) => (
-                      <span
-                        key={tag}
-                        className="bg-parchment-dark text-ink-muted flex items-center gap-1 rounded px-2 py-0.5 text-xs"
-                      >
-                        {tag}
-                        <button
-                          type="button"
-                          onClick={() => setTags(tags.filter((t) => t !== tag))}
-                          className="text-ink-muted hover:text-ink cursor-pointer text-sm leading-none"
-                        >
-                          &times;
-                        </button>
-                      </span>
-                    ))}
-                  </div>
-                )}
-                <div className="flex gap-2">
-                  <input
-                    type="text"
-                    value={tagInput}
-                    onChange={(e) => setTagInput(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        e.preventDefault()
-                        const val = tagInput.trim().toLowerCase()
-                        if (val && !tags.includes(val)) {
-                          setTags([...tags, val])
-                        }
-                        setTagInput('')
-                      }
-                    }}
-                    placeholder="Add a tag and press Enter"
-                    className="bg-parchment border-rule focus:border-ink min-w-0 flex-1 border px-3 py-2 text-sm focus:outline-none"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => {
-                      const val = tagInput.trim().toLowerCase()
-                      if (val && !tags.includes(val)) {
-                        setTags([...tags, val])
-                      }
-                      setTagInput('')
-                    }}
-                    className="border-rule bg-parchment hover:bg-parchment-dark border px-3 py-2 text-sm transition-colors"
+      {/* Metadata */}
+      <section
+        id="metadata"
+        data-settings-section
+        className="border-rule mb-10 scroll-mt-6 border-t pt-6"
+      >
+        <SectionHeading>Metadata</SectionHeading>
+        <p className="text-ink-muted mb-3 text-sm">
+          Description, readme, and license are versioned — saving creates a patch version.
+        </p>
+        <form onSubmit={handleUpdateMetadata} className="space-y-4">
+          <div>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium">
+              Description
+            </label>
+            <Input
+              type="text"
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="A short description of this collection"
+            />
+          </div>
+          <div>
+            <label htmlFor="readme" className="mb-1 block text-sm font-medium">
+              Readme <span className="text-ink-muted font-normal">(Markdown)</span>
+            </label>
+            <textarea
+              id="readme"
+              value={readme}
+              onChange={(e) => setReadme(e.target.value)}
+              rows={8}
+              placeholder="# My Collection&#10;&#10;Detailed description in Markdown..."
+              className="bg-parchment border-rule focus:border-ink rounded-control w-full border px-3 py-2 font-mono text-sm focus:outline-none"
+            />
+          </div>
+          <div>
+            <label htmlFor="license" className="mb-1 block text-sm font-medium">
+              License
+            </label>
+            <Input
+              type="text"
+              id="license"
+              value={license}
+              onChange={(e) => setLicense(e.target.value)}
+              placeholder="e.g. CC-BY-4.0, MIT, Public Domain"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium">Tags</label>
+            {tags.length > 0 && (
+              <div className="mb-2 flex flex-wrap gap-1.5">
+                {tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="bg-parchment-dark text-ink-muted rounded-control flex items-center gap-1 px-2 py-0.5 text-xs"
                   >
-                    Add
-                  </button>
-                </div>
-              </div>
-              <div className="pt-2">
-                <button
-                  type="submit"
-                  disabled={submitting === 'metadata'}
-                  className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-                >
-                  Save metadata
-                </button>
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => setTags(tags.filter((t) => t !== tag))}
+                      className="text-ink-muted hover:text-ink cursor-pointer text-sm leading-none"
+                    >
+                      &times;
+                    </button>
+                  </span>
+                ))}
               </div>
-            </form>
+            )}
+            <div className="flex gap-2">
+              <Input
+                type="text"
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault()
+                    const val = tagInput.trim().toLowerCase()
+                    if (val && !tags.includes(val)) {
+                      setTags([...tags, val])
+                    }
+                    setTagInput('')
+                  }
+                }}
+                placeholder="Add a tag and press Enter"
+                className="min-w-0 flex-1"
+              />
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  const val = tagInput.trim().toLowerCase()
+                  if (val && !tags.includes(val)) {
+                    setTags([...tags, val])
+                  }
+                  setTagInput('')
+                }}
+              >
+                Add
+              </Button>
+            </div>
           </div>
+          <div className="pt-2">
+            <Button type="submit" disabled={submitting === 'metadata'}>
+              {submitting === 'metadata' ? 'Saving…' : 'Save changes'}
+            </Button>
+          </div>
+        </form>
+      </section>
 
-          {/* Export */}
-          <div className="border-rule mb-10 border-t pt-6">
-            <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-              Export
-            </h2>
-            <p className="text-ink-muted mb-3 text-sm">
-              Download a <code className="bg-parchment-dark px-1">.tar.gz</code> archive containing
-              the manifest, schema, records, and files for the latest version.
-            </p>
-            <Link
-              to={`/api/collections/${owner}/${collection}/export`}
-              className="bg-parchment border-rule hover:bg-parchment-dark inline-block border px-4 py-2 text-sm font-medium transition-colors"
-            >
-              Download archive
+      {/* Export */}
+      <section
+        id="export"
+        data-settings-section
+        className="border-rule mb-10 scroll-mt-6 border-t pt-6"
+      >
+        <SectionHeading>Export</SectionHeading>
+        <p className="text-ink-muted mb-3 text-sm">
+          Download a <code className="bg-parchment-dark px-1">.tar.gz</code> archive containing the
+          manifest, schema, records, and files for the latest version.
+        </p>
+        <a
+          href={`/api/collections/${owner}/${collection}/export`}
+          className={buttonClasses('secondary')}
+        >
+          Download archive
+        </a>
+      </section>
+
+      {/* ARK Identifiers */}
+      <section
+        id="ark"
+        data-settings-section
+        className="border-rule mb-10 scroll-mt-6 border-t pt-6"
+      >
+        <SectionHeading>ARK Identifiers</SectionHeading>
+        {arkPath && arkSettings.enabled && (
+          <p className="text-ink-muted mb-3 text-sm">
+            Current ARK:{' '}
+            <Link to={arkPath} className="text-link font-mono text-sm hover:underline">
+              {arkPath.slice(1)}
             </Link>
+          </p>
+        )}
+        <form onSubmit={handleUpdateArk} className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="arkEnabled"
+              checked={arkEnabled}
+              onChange={(e) => setArkEnabled(e.target.checked)}
+            />
+            <label htmlFor="arkEnabled" className="text-sm">
+              Enable ARK identifier
+            </label>
           </div>
-
-          {/* ARK Identifiers */}
-          <div className="border-rule mb-10 border-t pt-6">
-            <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-              ARK Identifiers
-            </h2>
-            {arkPath && arkSettings.enabled && (
-              <p className="text-ink-muted mb-3 text-sm">
-                Current ARK:{' '}
-                <Link to={arkPath} className="text-link font-mono text-sm hover:underline">
-                  {arkPath.slice(1)}
-                </Link>
-              </p>
-            )}
-            <form onSubmit={handleUpdateArk} className="space-y-4">
-              <div className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  id="arkEnabled"
-                  checked={arkEnabled}
-                  onChange={(e) => setArkEnabled(e.target.checked)}
-                  className="accent-ink"
-                />
-                <label htmlFor="arkEnabled" className="text-sm">
-                  Enable ARK identifier
-                </label>
-              </div>
-              <div>
-                <label htmlFor="arkCustomUrl" className="mb-1 block text-sm font-medium">
-                  Custom redirect URL{' '}
-                  <span className="text-ink-muted font-normal">
-                    (optional — leave blank to redirect to collection page)
-                  </span>
-                </label>
-                <input
-                  type="url"
-                  id="arkCustomUrl"
-                  value={arkCustomUrl}
-                  onChange={(e) => setArkCustomUrl(e.target.value)}
-                  placeholder="https://example.org/my-collection"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                />
-              </div>
-              <div className="pt-2">
-                <button
-                  type="submit"
-                  disabled={submitting === 'ark'}
-                  className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-                >
-                  Save ARK settings
-                </button>
-              </div>
-            </form>
+          <div>
+            <label htmlFor="arkCustomUrl" className="mb-1 block text-sm font-medium">
+              Custom redirect URL{' '}
+              <span className="text-ink-muted font-normal">
+                (optional — leave blank to redirect to collection page)
+              </span>
+            </label>
+            <Input
+              type="url"
+              id="arkCustomUrl"
+              value={arkCustomUrl}
+              onChange={(e) => setArkCustomUrl(e.target.value)}
+              placeholder="https://example.org/my-collection"
+            />
+          </div>
+          <div className="pt-2">
+            <Button type="submit" disabled={submitting === 'ark'}>
+              {submitting === 'ark' ? 'Saving…' : 'Save changes'}
+            </Button>
           </div>
+        </form>
+      </section>
 
-          {/* Webhooks */}
-          <WebhooksSettings
-            owner={owner!}
-            collection={collection!}
-            initialWebhooks={loaderData.webhooks ?? []}
-          />
+      {/* Webhooks */}
+      <section
+        id="webhooks"
+        data-settings-section
+        className="border-rule mb-10 scroll-mt-6 border-t pt-6"
+      >
+        <SectionHeading>Webhooks</SectionHeading>
+        <WebhooksSettings
+          owner={owner!}
+          collection={collection!}
+          initialWebhooks={loaderData.webhooks ?? []}
+        />
+      </section>
 
-          {/* Transfer */}
-          <div className="border-rule mb-10 border-t pt-6">
-            <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-              Transfer Collection
-            </h2>
-            <p className="text-ink-muted mb-3 text-sm">
-              Move this collection to another account you have access to.
-            </p>
-            <form
-              onSubmit={async (e: FormEvent) => {
-                e.preventDefault()
-                clearMessages()
-                if (!transferTarget) return
-                setSubmitting('transfer')
-                try {
-                  const res = await fetch(`/api/collections/${owner}/${collection}/transfer`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    credentials: 'include',
-                    body: JSON.stringify({ targetOrgSlug: transferTarget }),
-                  })
-                  if (res.ok) {
-                    window.location.href = `/${transferTarget}/${data?.slug ?? collection}/settings`
-                  } else {
-                    const body = await res.json().catch(() => ({}))
-                    setError(body.error ?? 'Transfer failed.')
-                  }
-                } finally {
-                  setSubmitting('')
-                }
-              }}
-              className="space-y-3"
+      {/* Transfer */}
+      <section
+        id="transfer"
+        data-settings-section
+        className="border-rule mb-10 scroll-mt-6 border-t pt-6"
+      >
+        <SectionHeading>Transfer Collection</SectionHeading>
+        <p className="text-ink-muted mb-3 text-sm">
+          Move this collection to another account you have access to.
+        </p>
+        <form
+          onSubmit={async (e: FormEvent) => {
+            e.preventDefault()
+            clearMessages()
+            if (!transferTarget) return
+            setSubmitting('transfer')
+            try {
+              const res = await fetch(`/api/collections/${owner}/${collection}/transfer`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ targetOrgSlug: transferTarget }),
+              })
+              if (res.ok) {
+                window.location.href = `/${transferTarget}/${data?.slug ?? collection}/settings`
+              } else {
+                const body = await res.json().catch(() => ({}))
+                setError(body.error ?? 'Transfer failed.')
+              }
+            } finally {
+              setSubmitting('')
+            }
+          }}
+          className="space-y-3"
+        >
+          <div>
+            <label htmlFor="transferTarget" className="mb-1 block text-xs font-medium">
+              Target organization
+            </label>
+            <Select
+              id="transferTarget"
+              value={transferTarget}
+              onChange={(e) => setTransferTarget(e.target.value)}
             >
+              <option value="">— Select —</option>
+              {currentUser?.orgs
+                ?.filter((o: any) => o.slug !== owner && (o.role === 'owner' || o.role === 'admin'))
+                .map((o: any) => (
+                  <option key={o.slug} value={o.slug}>
+                    {o.displayName ?? o.slug}
+                  </option>
+                ))}
+            </Select>
+          </div>
+          <Button type="submit" disabled={!transferTarget || submitting === 'transfer'}>
+            {submitting === 'transfer' ? 'Transferring…' : 'Transfer'}
+          </Button>
+        </form>
+      </section>
+
+      {/* Danger zone */}
+      <section id="danger" data-settings-section className="scroll-mt-6">
+        <div className="rounded-surface border border-red-200 p-4">
+          <h2 className="mb-2 text-sm font-semibold text-red-700">Danger zone</h2>
+          <p className="text-ink-muted mb-3 text-sm">
+            Permanently delete this collection and all its versions, records, and files. This cannot
+            be undone.
+          </p>
+          <details className="group">
+            <summary className="cursor-pointer text-sm text-red-700 hover:underline">
+              Delete this collection…
+            </summary>
+            <form onSubmit={handleDelete} className="mt-3 space-y-3">
               <div>
-                <label htmlFor="transferTarget" className="mb-1 block text-xs font-medium">
-                  Target organization
+                <label htmlFor="confirmSlug" className="text-ink-muted mb-1 block text-sm">
+                  Type <strong>{data.slug}</strong> to confirm:
                 </label>
-                <select
-                  id="transferTarget"
-                  value={transferTarget}
-                  onChange={(e) => setTransferTarget(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                >
-                  <option value="">— Select —</option>
-                  {currentUser?.orgs
-                    ?.filter(
-                      (o: any) => o.slug !== owner && (o.role === 'owner' || o.role === 'admin'),
-                    )
-                    .map((o: any) => (
-                      <option key={o.slug} value={o.slug}>
-                        {o.displayName ?? o.slug}
-                      </option>
-                    ))}
-                </select>
+                <input
+                  type="text"
+                  id="confirmSlug"
+                  value={confirmSlug}
+                  onChange={(e) => setConfirmSlug(e.target.value)}
+                  required
+                  autoComplete="off"
+                  className="bg-parchment rounded-control w-full border border-red-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none"
+                />
               </div>
-              <button
-                type="submit"
-                disabled={!transferTarget || submitting === 'transfer'}
-                className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-              >
-                Transfer
-              </button>
+              <Button type="submit" variant="danger" disabled={submitting === 'delete'}>
+                {submitting === 'delete' ? 'Deleting…' : 'Delete collection'}
+              </Button>
             </form>
-          </div>
-
-          {/* Danger zone */}
-          <div className="border border-red-200 p-4">
-            <h2 className="mb-2 text-sm font-semibold text-red-700">Danger Zone</h2>
-            <p className="text-ink-muted mb-3 text-sm">
-              Permanently delete this collection and all its versions, records, and files. This
-              cannot be undone.
-            </p>
-            <details className="group">
-              <summary className="cursor-pointer text-sm text-red-700 hover:underline">
-                Delete this collection…
-              </summary>
-              <form onSubmit={handleDelete} className="mt-3 space-y-3">
-                <div>
-                  <label htmlFor="confirmSlug" className="text-ink-muted mb-1 block text-sm">
-                    Type <strong>{data.slug}</strong> to confirm:
-                  </label>
-                  <input
-                    type="text"
-                    id="confirmSlug"
-                    value={confirmSlug}
-                    onChange={(e) => setConfirmSlug(e.target.value)}
-                    required
-                    autoComplete="off"
-                    className="bg-parchment w-full border border-red-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none"
-                  />
-                </div>
-                <button
-                  type="submit"
-                  disabled={submitting === 'delete'}
-                  className="bg-red-700 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-800"
-                >
-                  Delete collection
-                </button>
-              </form>
-            </details>
-          </div>
+          </details>
         </div>
-      </div>
-    </BaseLayout>
+      </section>
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/[owner]/[collection]/v/[n].tsx b/src/routes/[owner]/[collection]/v/[n].tsx
deleted file mode 100644
index f84d3d8..0000000
--- a/src/routes/[owner]/[collection]/v/[n].tsx
+++ /dev/null
@@ -1,743 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { Link, useLoaderData, useParams, useSearchParams } from 'react-router'
-
-import BaseLayout from '~/components/BaseLayout'
-import { useAppContext } from '~/lib/app-context'
-import { TokenLink, useShareToken, withToken } from '~/lib/share-token'
-
-import { CollectionNav, formatBytes } from '..'
-
-export default function CollectionVersionPage() {
-  const { owner, collection, n } = useParams()
-  const [searchParams, setSearchParams] = useSearchParams()
-  const { currentUser } = useAppContext()
-  const { version, collectionData } = useLoaderData() as { version: any; collectionData: any }
-
-  const isOwner =
-    currentUser?.slug === owner || currentUser?.orgs?.some((o: any) => o.slug === owner)
-  const shareToken = useShareToken()
-
-  const readmeSource = (version.metadata as Record<string, unknown> | null | undefined)?.readme as
-    | string
-    | null
-  const [readmeHtml, setReadmeHtml] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!readmeSource) return
-    Promise.all([import('marked'), import('isomorphic-dompurify')]).then(
-      ([{ marked }, { default: DOMPurify }]) => {
-        setReadmeHtml(DOMPurify.sanitize(marked.parse(readmeSource) as string))
-      },
-    )
-  }, [readmeSource])
-
-  // Tab state
-  const tab = searchParams.get('tab') ?? 'records'
-  const selectedType = searchParams.get('type') ?? null
-
-  // Records state
-  const [records, setRecords] = useState<any[]>([])
-  const [totalRecords, setTotalRecords] = useState(0)
-
-  // Files state
-  const [files, setFiles] = useState<any[]>([])
-
-  const schemasMap = useMemo(
-    () => (version.schemas ?? {}) as Record<string, any>,
-    [version.schemas],
-  )
-  const allTypes = useMemo(() => Object.keys(schemasMap).sort(), [schemasMap])
-  const currentType = selectedType || (allTypes.length > 0 ? allTypes[0] : null)
-
-  // Fetch records when tab/type/page changes
-  const page = parseInt(searchParams.get('page') ?? '1', 10)
-  const pageSize = 100
-
-  useEffect(() => {
-    if (!version || tab !== 'records') return
-    if (!currentType) return
-
-    const offset = (page - 1) * pageSize
-    fetch(
-      withToken(
-        `/api/collections/${owner}/${collection}/versions/${n}/records?type=${currentType}&limit=${pageSize}&offset=${offset}`,
-        shareToken,
-      ),
-      { credentials: 'include' },
-    )
-      .then((r) => (r.ok ? r.json() : { records: [], pagination: {} }))
-      .then((body) => {
-        setRecords(body.records ?? body)
-        setTotalRecords(body.pagination?.total ?? version.recordCount ?? 0)
-      })
-  }, [version, tab, currentType, page, owner, collection, n, shareToken])
-
-  // Fetch files when files tab selected
-  useEffect(() => {
-    if (!version || tab !== 'files') return
-
-    fetch(withToken(`/api/collections/${owner}/${collection}/versions/${n}/files`, shareToken), {
-      credentials: 'include',
-    })
-      .then((r) => (r.ok ? r.json() : []))
-      .then(setFiles)
-  }, [version, tab, owner, collection, n, shareToken])
-
-  const currentTypeFields: string[] = currentType
-    ? schemasMap[currentType]?.properties
-      ? Object.keys(schemasMap[currentType].properties)
-      : records.length > 0
-        ? Object.keys(records[0].data ?? {})
-        : []
-    : []
-
-  const versionArkPath: string | null = version.ark ? new URL(version.ark).pathname : null
-
-  const offset = (page - 1) * pageSize
-  const totalPages = Math.ceil(totalRecords / pageSize) || 1
-
-  const pageNumbers: number[] = []
-  if (totalPages > 1) {
-    const maxVisible = Math.min(totalPages, 7)
-    for (let i = 0; i < maxVisible; i++) {
-      let p: number
-      if (totalPages <= 7) {
-        p = i + 1
-      } else if (page <= 4) {
-        p = i + 1
-      } else if (page >= totalPages - 3) {
-        p = totalPages - 6 + i
-      } else {
-        p = page - 3 + i
-      }
-      pageNumbers.push(p)
-    }
-  }
-
-  function setTab(t: string, extra?: Record<string, string>) {
-    const params = new URLSearchParams()
-    if (t !== 'records') params.set('tab', t)
-    if (extra) {
-      for (const [k, v] of Object.entries(extra)) params.set(k, v)
-    }
-    if (shareToken) params.set('token', shareToken)
-    setSearchParams(params)
-  }
-
-  return (
-    <BaseLayout>
-      <div className="mx-auto max-w-5xl px-4 py-8">
-        <CollectionNav
-          owner={owner!}
-          collection={collection!}
-          isPublic={collectionData?.public}
-          isOwner={!!isOwner}
-          active="versions"
-          versionLabel={version.semver}
-        />
-
-        {version.message && <p className="text-ink-muted mb-4 text-sm">{version.message}</p>}
-        {!version.message && <div className="mb-4" />}
-
-        {/* Info bar */}
-        <div className="text-ink-muted border-rule bg-parchment-dark mb-6 flex items-center justify-between rounded border px-4 py-2.5 text-xs">
-          <div className="flex items-center gap-4">
-            <span>
-              <strong className="text-ink">{version.recordCount.toLocaleString()}</strong> records
-            </span>
-            <span>
-              <strong className="text-ink">{version.fileCount.toLocaleString()}</strong> files
-            </span>
-            <span>
-              <strong className="text-ink">{formatBytes(version.totalBytes)}</strong> total
-            </span>
-            <span>
-              <strong className="text-ink">{allTypes.length}</strong> types
-            </span>
-          </div>
-          <div className="flex items-center gap-4">
-            {version.appId && (
-              <span>
-                via <strong className="text-ink">{version.appId}</strong>
-              </span>
-            )}
-            <span>
-              {new Date(version.createdAt).toLocaleDateString('en-US', {
-                month: 'short',
-                day: 'numeric',
-                year: 'numeric',
-              })}
-            </span>
-            <code className="text-ink-muted font-mono text-[11px]" title={version.hash}>
-              sha256:{version.hash.slice(0, 12)}…
-            </code>
-            {versionArkPath && (
-              <Link to={versionArkPath} className="text-link font-mono text-[11px] hover:underline">
-                {versionArkPath.slice(1)}
-              </Link>
-            )}
-          </div>
-        </div>
-
-        {/* Tabs */}
-        <div className="border-rule mb-6 flex items-center gap-0 border-b">
-          <button
-            onClick={() => setTab('records', currentType ? { type: currentType } : undefined)}
-            className={`-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
-              tab === 'records'
-                ? 'border-ink text-ink'
-                : 'text-ink-muted hover:text-ink hover:border-rule border-transparent'
-            }`}
-          >
-            Records{' '}
-            <span className="text-ink-muted font-normal">
-              ({version.recordCount.toLocaleString()})
-            </span>
-          </button>
-          <button
-            onClick={() => setTab('schema')}
-            className={`-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
-              tab === 'schema'
-                ? 'border-ink text-ink'
-                : 'text-ink-muted hover:text-ink hover:border-rule border-transparent'
-            }`}
-          >
-            Schema
-          </button>
-          <button
-            onClick={() => setTab('files')}
-            className={`-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
-              tab === 'files'
-                ? 'border-ink text-ink'
-                : 'text-ink-muted hover:text-ink hover:border-rule border-transparent'
-            }`}
-          >
-            Files{' '}
-            <span className="text-ink-muted font-normal">
-              ({version.fileCount.toLocaleString()})
-            </span>
-          </button>
-          <button
-            onClick={() => setTab('metadata')}
-            className={`-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
-              tab === 'metadata'
-                ? 'border-ink text-ink'
-                : 'text-ink-muted hover:text-ink hover:border-rule border-transparent'
-            }`}
-          >
-            Metadata
-          </button>
-        </div>
-
-        {/* Records tab */}
-        {tab === 'records' && (
-          <div className="grid grid-cols-[180px_1fr] gap-6">
-            {/* Type sidebar */}
-            <nav className="space-y-0.5">
-              <h3 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-                Types
-              </h3>
-              {allTypes.map((t) => (
-                <TokenLink
-                  key={t}
-                  to={`/${owner}/${collection}/v/${n}?type=${t}`}
-                  className={`block rounded px-3 py-1.5 text-sm transition-colors ${
-                    t === currentType
-                      ? 'bg-ink text-parchment font-medium'
-                      : 'text-ink-muted hover:bg-parchment-dark hover:text-ink'
-                  }`}
-                >
-                  {t}
-                </TokenLink>
-              ))}
-            </nav>
-
-            {/* Table area */}
-            <div className="min-w-0">
-              {currentType && records.length > 0 ? (
-                <div>
-                  <div className="border-rule overflow-x-auto rounded border">
-                    <table className="w-full text-xs">
-                      <thead>
-                        <tr className="bg-parchment-dark">
-                          <th className="border-rule border-b p-2 text-left font-medium">id</th>
-                          {currentTypeFields.map((f: string) => (
-                            <th key={f} className="border-rule border-b p-2 text-left font-medium">
-                              {f}
-                            </th>
-                          ))}
-                          {records[0]?.ark && (
-                            <th className="border-rule border-b p-2 text-left font-medium">ARK</th>
-                          )}
-                          <th className="border-rule w-8 border-b" />
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {records.map((r: any) => (
-                          <tr
-                            key={r.id}
-                            className="border-rule group hover:bg-parchment-dark/50 border-t"
-                          >
-                            <td className="text-ink-muted p-2 font-mono">{r.id}</td>
-                            {currentTypeFields.map((f: string) => {
-                              const val = r.data?.[f]
-                              if (val && typeof val === 'object' && '$file' in val) {
-                                const hash = ((val as any).$file as string).replace('sha256:', '')
-                                // Route through the API so access is checked and
-                                // a presigned URL is minted (files are private).
-                                const fileUrl = withToken(
-                                  `/api/collections/${owner}/${collection}/files/${hash}`,
-                                  shareToken,
-                                )
-                                const label = f === 'pdf' ? 'PDF' : 'File'
-                                return (
-                                  <td key={f} className="p-2">
-                                    <a
-                                      href={fileUrl}
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="text-link inline-flex items-center gap-1 hover:underline"
-                                    >
-                                      <svg
-                                        className="h-3.5 w-3.5"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <path
-                                          strokeLinecap="round"
-                                          strokeLinejoin="round"
-                                          strokeWidth={2}
-                                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                                        />
-                                      </svg>
-                                      {label}
-                                    </a>
-                                  </td>
-                                )
-                              }
-                              if (typeof val === 'string' && val.match(/^https?:\/\//)) {
-                                return (
-                                  <td key={f} className="max-w-56 truncate p-2">
-                                    <Link
-                                      to={val}
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="text-link hover:underline"
-                                    >
-                                      {val}
-                                    </Link>
-                                  </td>
-                                )
-                              }
-                              const display =
-                                val === null || val === undefined
-                                  ? ''
-                                  : typeof val === 'object'
-                                    ? JSON.stringify(val)
-                                    : String(val)
-                              return (
-                                <td key={f} className="max-w-56 truncate p-2">
-                                  {display}
-                                </td>
-                              )
-                            })}
-                            {r.ark && (
-                              <td className="p-2">
-                                <Link
-                                  to={new URL(r.ark).pathname}
-                                  className="text-link font-mono text-[11px] hover:underline"
-                                >
-                                  ark
-                                </Link>
-                              </td>
-                            )}
-                            <td className="w-8 p-2">
-                              {r.hash && (
-                                <Link
-                                  to={`/records/${r.hash}`}
-                                  className="text-ink-muted hover:text-ink invisible inline-flex items-center group-hover:visible"
-                                  title="View record provenance"
-                                >
-                                  <svg
-                                    className="h-3.5 w-3.5"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      strokeWidth={2}
-                                      d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-                                    />
-                                  </svg>
-                                </Link>
-                              )}
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-
-                  {totalPages > 1 && (
-                    <nav className="flex items-center justify-between py-3 text-xs">
-                      <span className="text-ink-muted">
-                        Showing {offset + 1}–{Math.min(offset + pageSize, totalRecords)} of{' '}
-                        {totalRecords.toLocaleString()}
-                      </span>
-                      <div className="flex items-center gap-1">
-                        {page > 1 && (
-                          <TokenLink
-                            to={`/${owner}/${collection}/v/${n}?type=${currentType}&page=${page - 1}`}
-                            className="border-rule hover:bg-parchment-dark rounded border px-2 py-1"
-                          >
-                            ← Prev
-                          </TokenLink>
-                        )}
-                        {pageNumbers.map((p) => (
-                          <TokenLink
-                            key={p}
-                            to={`/${owner}/${collection}/v/${n}?type=${currentType}&page=${p}`}
-                            className={
-                              p === page
-                                ? 'border-ink bg-ink text-parchment rounded border px-2 py-1 font-medium'
-                                : 'border-rule hover:bg-parchment-dark rounded border px-2 py-1'
-                            }
-                          >
-                            {p}
-                          </TokenLink>
-                        ))}
-                        {page < totalPages && (
-                          <TokenLink
-                            to={`/${owner}/${collection}/v/${n}?type=${currentType}&page=${page + 1}`}
-                            className="border-rule hover:bg-parchment-dark rounded border px-2 py-1"
-                          >
-                            Next →
-                          </TokenLink>
-                        )}
-                      </div>
-                    </nav>
-                  )}
-                </div>
-              ) : (
-                <p className="text-ink-muted py-8 text-center text-sm">
-                  Select a type to view records.
-                </p>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Schema tab */}
-        {tab === 'schema' && (
-          <div className="border-rule overflow-hidden rounded border">
-            <pre className="bg-ink text-parchment overflow-x-auto p-4 font-mono text-xs">
-              <code>{JSON.stringify(version.schemas, null, 2)}</code>
-            </pre>
-          </div>
-        )}
-
-        {/* Files tab */}
-        {tab === 'files' && (
-          <div>
-            {files.length === 0 ? (
-              <p className="text-ink-muted py-8 text-center text-sm">No files in this version.</p>
-            ) : (
-              <div>
-                <p className="text-ink-muted mb-3 text-xs">
-                  {files.length} file{files.length !== 1 ? 's' : ''} ·{' '}
-                  {formatBytes(files.reduce((sum: number, f: any) => sum + (f.size ?? 0), 0))} total
-                </p>
-                <div className="border-rule overflow-hidden rounded border">
-                  <table className="w-full text-xs">
-                    <thead>
-                      <tr className="bg-parchment-dark border-rule border-b">
-                        <th className="p-2.5 text-left font-medium">File</th>
-                        <th className="p-2.5 text-left font-medium">Referenced by</th>
-                        <th className="p-2.5 text-right font-medium">Size</th>
-                        <th className="p-2.5 text-right font-medium"></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {files.map((f: any) => {
-                        const refs: any[] = f.references ?? []
-                        const isPdf = f.mimeType === 'application/pdf'
-                        const isImage = f.mimeType?.startsWith('image/')
-                        return (
-                          <tr
-                            key={f.hash}
-                            className="border-rule hover:bg-parchment-dark/50 border-t"
-                          >
-                            <td className="p-2.5">
-                              <div className="flex items-center gap-2">
-                                {isPdf ? (
-                                  <svg
-                                    className="h-4 w-4 shrink-0 text-red-600"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      strokeWidth={2}
-                                      d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-                                    />
-                                  </svg>
-                                ) : isImage ? (
-                                  <svg
-                                    className="h-4 w-4 shrink-0 text-blue-600"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      strokeWidth={2}
-                                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                                    />
-                                  </svg>
-                                ) : (
-                                  <svg
-                                    className="text-ink-muted h-4 w-4 shrink-0"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      strokeWidth={2}
-                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                                    />
-                                  </svg>
-                                )}
-                                <div>
-                                  <code className="text-ink-muted font-mono text-[11px]">
-                                    {f.hash.slice(0, 12)}…
-                                  </code>
-                                  <span className="text-ink-muted ml-2">{f.mimeType}</span>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="p-2.5">
-                              {refs.length > 0 ? (
-                                <div className="flex flex-wrap gap-1">
-                                  {refs.slice(0, 3).map((ref: any, idx: number) => (
-                                    <TokenLink
-                                      key={idx}
-                                      to={`/${owner}/${collection}/v/${n}?type=${ref.type}`}
-                                      className="bg-parchment-dark border-rule hover:border-ink-muted inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] transition-colors"
-                                    >
-                                      <span className="text-ink-muted">{ref.type}</span>
-                                      <span className="font-mono">
-                                        {ref.recordId.length > 20
-                                          ? ref.recordId.slice(0, 20) + '…'
-                                          : ref.recordId}
-                                      </span>
-                                    </TokenLink>
-                                  ))}
-                                  {refs.length > 3 && (
-                                    <span className="text-ink-muted px-1.5 py-0.5 text-[11px]">
-                                      +{refs.length - 3} more
-                                    </span>
-                                  )}
-                                </div>
-                              ) : (
-                                <span className="text-ink-muted">—</span>
-                              )}
-                            </td>
-                            <td className="p-2.5 text-right whitespace-nowrap">
-                              {formatBytes(f.size)}
-                            </td>
-                            <td className="p-2.5 text-right">
-                              <a
-                                href={withToken(
-                                  `/api/collections/${owner}/${collection}/files/${f.hash}`,
-                                  shareToken,
-                                )}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-link hover:underline"
-                              >
-                                <svg
-                                  className="inline h-4 w-4"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                                  />
-                                </svg>
-                              </a>
-                            </td>
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Metadata tab */}
-        {tab === 'metadata' && (
-          <div className="max-w-2xl">
-            {/* Collection-level metadata */}
-            <h3 className="text-ink-muted mb-3 text-xs font-semibold tracking-wide uppercase">
-              Collection
-            </h3>
-            <table className="mb-8 w-full text-sm">
-              <tbody>
-                {collectionData?.name && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted w-40 py-3 pr-6 font-medium">Name</td>
-                    <td className="py-3">{collectionData.name}</td>
-                  </tr>
-                )}
-                {collectionData?.description && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted py-3 pr-6 font-medium">Description</td>
-                    <td className="py-3">{collectionData.description}</td>
-                  </tr>
-                )}
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Owner</td>
-                  <td className="py-3">
-                    <Link to={`/${owner}`} className="text-link hover:underline">
-                      {collectionData?.ownerName ?? owner}
-                    </Link>{' '}
-                    <span className="text-ink-muted text-xs">({owner})</span>
-                  </td>
-                </tr>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Visibility</td>
-                  <td className="py-3">{collectionData?.public ? 'Public' : 'Private'}</td>
-                </tr>
-              </tbody>
-            </table>
-
-            {/* Version-level metadata */}
-            <h3 className="text-ink-muted mb-3 text-xs font-semibold tracking-wide uppercase">
-              Version
-            </h3>
-            <table className="mb-8 w-full text-sm">
-              <tbody>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted w-40 py-3 pr-6 font-medium">Version</td>
-                  <td className="py-3">{version.semver}</td>
-                </tr>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Hash</td>
-                  <td className="py-3 font-mono text-xs break-all">sha256:{version.hash}</td>
-                </tr>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Created</td>
-                  <td className="py-3">
-                    {new Date(version.createdAt).toLocaleDateString('en-US', {
-                      year: 'numeric',
-                      month: 'long',
-                      day: 'numeric',
-                      hour: '2-digit',
-                      minute: '2-digit',
-                    })}
-                  </td>
-                </tr>
-                {version.baseSemver && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted py-3 pr-6 font-medium">Base version</td>
-                    <td className="py-3">
-                      <TokenLink
-                        to={`/${owner}/${collection}/v/${version.baseSemver}`}
-                        className="text-link hover:underline"
-                      >
-                        {version.baseSemver}
-                      </TokenLink>
-                    </td>
-                  </tr>
-                )}
-                {version.message && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted py-3 pr-6 font-medium">Message</td>
-                    <td className="py-3">{version.message}</td>
-                  </tr>
-                )}
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Records</td>
-                  <td className="py-3">{version.recordCount.toLocaleString()}</td>
-                </tr>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Files</td>
-                  <td className="py-3">{version.fileCount.toLocaleString()}</td>
-                </tr>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Total size</td>
-                  <td className="py-3">{formatBytes(version.totalBytes)}</td>
-                </tr>
-                <tr className="border-rule border-b">
-                  <td className="text-ink-muted py-3 pr-6 font-medium">Types</td>
-                  <td className="py-3">{allTypes.join(', ') || '—'}</td>
-                </tr>
-              </tbody>
-            </table>
-
-            {/* Provenance */}
-            <h3 className="text-ink-muted mb-3 text-xs font-semibold tracking-wide uppercase">
-              Provenance
-            </h3>
-            <table className="mb-8 w-full text-sm">
-              <tbody>
-                {version.appId && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted w-40 py-3 pr-6 font-medium">App ID</td>
-                    <td className="py-3 font-mono text-xs">{version.appId}</td>
-                  </tr>
-                )}
-                {version.actorId && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted py-3 pr-6 font-medium">Actor ID</td>
-                    <td className="py-3 font-mono text-xs">{version.actorId}</td>
-                  </tr>
-                )}
-                {version.pushedBy && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted py-3 pr-6 font-medium">Pushed by</td>
-                    <td className="py-3 font-mono text-xs">{version.pushedBy}</td>
-                  </tr>
-                )}
-                {version.signature && (
-                  <tr className="border-rule border-b">
-                    <td className="text-ink-muted py-3 pr-6 font-medium">Signature</td>
-                    <td className="py-3 font-mono text-xs break-all">{version.signature}</td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-
-            {/* README */}
-            {readmeHtml && (
-              <div>
-                <h3 className="text-ink-muted mb-3 text-xs font-semibold tracking-wide uppercase">
-                  README
-                </h3>
-                <div
-                  className="border-rule prose prose-sm max-w-none rounded border p-5"
-                  dangerouslySetInnerHTML={{ __html: readmeHtml }}
-                />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </BaseLayout>
-  )
-}
diff --git a/src/routes/[owner]/[collection]/v/[n]/files.data.ts b/src/routes/[owner]/[collection]/v/[n]/files.data.ts
new file mode 100644
index 0000000..9291e72
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/files.data.ts
@@ -0,0 +1,30 @@
+import { redirect, type LoaderFunctionArgs } from 'react-router'
+
+import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
+
+export const handle = {
+  title: (params: Record<string, string>) =>
+    `Files ${params.n} — ${params.owner}/${params.collection} · Underlay`,
+}
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  // Canonicalize the legacy double-v form (/v/v1.0.0 → /v/1.0.0).
+  if (/^v\d/.test(params.n ?? '')) {
+    const url = new URL(request.url)
+    const bare = (params.n ?? '').replace(/^v/, '')
+    throw redirect(`/${params.owner}/${params.collection}/v/${bare}/files${url.search}`)
+  }
+
+  const api = apiUrlBuilder(request, fetchBase(request.url))
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+  const prefix = `/api/collections/${params.owner}/${params.collection}`
+
+  const [version, collectionData] = await Promise.all([
+    fetch(api(`${prefix}/versions/${params.n}`), { headers }).then((r) => (r.ok ? r.json() : null)),
+    fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null)),
+  ])
+
+  if (!version) throw new Response('Not Found', { status: 404 })
+  return { version, collectionData }
+}
diff --git a/src/routes/[owner]/[collection]/v/[n]/files.tsx b/src/routes/[owner]/[collection]/v/[n]/files.tsx
new file mode 100644
index 0000000..3ce72e9
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/files.tsx
@@ -0,0 +1,36 @@
+import { useLoaderData, useParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import { FilesView, VersionInfoBar } from '~/components/version-views'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav } from '../..'
+
+export default function VersionFilesPage() {
+  const { owner, collection, n } = useParams()
+  const { version, collectionData } = useLoaderData() as { version: any; collectionData: any }
+  const isOwner = useIsOwner(owner)
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={collectionData?.public}
+          isOwner={!!isOwner}
+          active="files"
+          version={version.semver}
+          isLatest={collectionData?.latestVersion?.semver === version.semver}
+        />
+        <VersionInfoBar version={version} typeCount={Object.keys(version.schemas ?? {}).length} />
+        <FilesView
+          owner={owner!}
+          collection={collection!}
+          version={version}
+          recordsPath={`/${owner}/${collection}/v/${n}/records`}
+        />
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/[collection]/v/[n]/index.data.ts b/src/routes/[owner]/[collection]/v/[n]/index.data.ts
new file mode 100644
index 0000000..dc9a1ad
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/index.data.ts
@@ -0,0 +1,45 @@
+import { redirect, type LoaderFunctionArgs } from 'react-router'
+
+import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
+
+export const handle = {
+  title: (params: Record<string, string>) =>
+    `Version ${params.n} — ${params.owner}/${params.collection} · Underlay`,
+}
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const url = new URL(request.url)
+  const bare = (params.n ?? '').replace(/^v/, '')
+  const base = `/${params.owner}/${params.collection}/v/${bare}`
+
+  // Legacy URLs: views used to be ?tab= query modes on this route.
+  const tab = url.searchParams.get('tab')
+  const token = url.searchParams.get('token')
+  const tokenQuery = token ? `?token=${encodeURIComponent(token)}` : ''
+  if (tab === 'files') throw redirect(`${base}/files${tokenQuery}`)
+  if (tab === 'schema') throw redirect(`${base}/schemas${tokenQuery}`)
+  if (url.searchParams.get('type') || url.searchParams.get('page')) {
+    const q = new URLSearchParams()
+    for (const key of ['type', 'page', 'token']) {
+      const value = url.searchParams.get(key)
+      if (value) q.set(key, value)
+    }
+    throw redirect(`${base}/records?${q}`)
+  }
+  if (tab) throw redirect(`${base}${tokenQuery}`)
+  // Canonicalize the legacy double-v form (/v/v1.0.0 → /v/1.0.0).
+  if (/^v\d/.test(params.n ?? '')) throw redirect(`${base}${url.search}`)
+
+  const api = apiUrlBuilder(request, fetchBase(request.url))
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+  const prefix = `/api/collections/${params.owner}/${params.collection}`
+
+  const [version, collectionData] = await Promise.all([
+    fetch(api(`${prefix}/versions/${params.n}`), { headers }).then((r) => (r.ok ? r.json() : null)),
+    fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null)),
+  ])
+
+  if (!version) throw new Response('Not Found', { status: 404 })
+  return { version, collectionData }
+}
diff --git a/src/routes/[owner]/[collection]/v/[n]/index.tsx b/src/routes/[owner]/[collection]/v/[n]/index.tsx
new file mode 100644
index 0000000..f5ea182
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/index.tsx
@@ -0,0 +1,47 @@
+import { useLoaderData, useParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import CollectionOverviewBody from '~/components/collection-overview'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav, SharePanel } from '../..'
+
+export default function VersionOverviewPage() {
+  const { owner, collection } = useParams()
+  const { version, collectionData } = useLoaderData() as { version: any; collectionData: any }
+  const isOwner = useIsOwner(owner)
+  const isLatest = collectionData?.latestVersion?.semver === version.semver
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={collectionData?.public}
+          isOwner={!!isOwner}
+          active="overview"
+          version={version.semver}
+          isLatest={isLatest}
+        />
+        <CollectionOverviewBody
+          owner={owner!}
+          collection={collection!}
+          data={collectionData}
+          version={version}
+          isLatest={isLatest}
+          share={
+            isOwner ? (
+              <SharePanel
+                owner={owner!}
+                collection={collection!}
+                collectionId={collectionData.id}
+                isPublic={!!collectionData.public}
+              />
+            ) : undefined
+          }
+        />
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/[collection]/v/[n].data.ts b/src/routes/[owner]/[collection]/v/[n]/records.data.ts
similarity index 65%
rename from src/routes/[owner]/[collection]/v/[n].data.ts
rename to src/routes/[owner]/[collection]/v/[n]/records.data.ts
index bc441d4..bfcfd0e 100644
--- a/src/routes/[owner]/[collection]/v/[n].data.ts
+++ b/src/routes/[owner]/[collection]/v/[n]/records.data.ts
@@ -1,14 +1,21 @@
-import type { LoaderFunctionArgs } from 'react-router'
+import { redirect, type LoaderFunctionArgs } from 'react-router'
 
 import { fetchBase } from '~/lib/fetch-base'
 import { apiUrlBuilder } from '~/lib/share-token'
 
 export const handle = {
   title: (params: Record<string, string>) =>
-    `Version ${params.n} — ${params.owner}/${params.collection} · Underlay`,
+    `Records ${params.n} — ${params.owner}/${params.collection} · Underlay`,
 }
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
+  // Canonicalize the legacy double-v form (/v/v1.0.0 → /v/1.0.0).
+  if (/^v\d/.test(params.n ?? '')) {
+    const url = new URL(request.url)
+    const bare = (params.n ?? '').replace(/^v/, '')
+    throw redirect(`/${params.owner}/${params.collection}/v/${bare}/records${url.search}`)
+  }
+
   const api = apiUrlBuilder(request, fetchBase(request.url))
   const headers = { Cookie: request.headers.get('Cookie') ?? '' }
   const prefix = `/api/collections/${params.owner}/${params.collection}`
diff --git a/src/routes/[owner]/[collection]/v/[n]/records.tsx b/src/routes/[owner]/[collection]/v/[n]/records.tsx
new file mode 100644
index 0000000..55fa0a5
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/records.tsx
@@ -0,0 +1,36 @@
+import { useLoaderData, useParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import { RecordsView, VersionInfoBar } from '~/components/version-views'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav } from '../..'
+
+export default function VersionRecordsPage() {
+  const { owner, collection, n } = useParams()
+  const { version, collectionData } = useLoaderData() as { version: any; collectionData: any }
+  const isOwner = useIsOwner(owner)
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={collectionData?.public}
+          isOwner={!!isOwner}
+          active="records"
+          version={version.semver}
+          isLatest={collectionData?.latestVersion?.semver === version.semver}
+        />
+        <VersionInfoBar version={version} typeCount={Object.keys(version.schemas ?? {}).length} />
+        <RecordsView
+          owner={owner!}
+          collection={collection!}
+          version={version}
+          basePath={`/${owner}/${collection}/v/${n}/records`}
+        />
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/[collection]/v/[n]/schemas.data.ts b/src/routes/[owner]/[collection]/v/[n]/schemas.data.ts
new file mode 100644
index 0000000..80ad454
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/schemas.data.ts
@@ -0,0 +1,32 @@
+import { redirect, type LoaderFunctionArgs } from 'react-router'
+
+import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
+
+export const handle = {
+  title: (params: Record<string, string>) =>
+    `Schemas ${params.n} — ${params.owner}/${params.collection} · Underlay`,
+}
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  // Canonicalize the legacy double-v form (/v/v1.0.0 → /v/1.0.0).
+  if (/^v\d/.test(params.n ?? '')) {
+    const url = new URL(request.url)
+    const bare = (params.n ?? '').replace(/^v/, '')
+    throw redirect(`/${params.owner}/${params.collection}/v/${bare}/schemas${url.search}`)
+  }
+
+  const api = apiUrlBuilder(request, fetchBase(request.url))
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+  const prefix = `/api/collections/${params.owner}/${params.collection}`
+
+  const [data, schemas] = await Promise.all([
+    fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null)),
+    fetch(api(`${prefix}/schemas?version=${encodeURIComponent(params.n ?? '')}`), {
+      headers,
+    }).then((r) => (r.ok ? r.json() : null)),
+  ])
+
+  if (!data) throw new Response('Not Found', { status: 404 })
+  return { data, schemas }
+}
diff --git a/src/routes/[owner]/[collection]/v/[n]/schemas.tsx b/src/routes/[owner]/[collection]/v/[n]/schemas.tsx
new file mode 100644
index 0000000..5414e15
--- /dev/null
+++ b/src/routes/[owner]/[collection]/v/[n]/schemas.tsx
@@ -0,0 +1,35 @@
+import { useLoaderData, useParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import SchemaList from '~/components/SchemaList'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav } from '../..'
+
+export default function VersionSchemasPage() {
+  const { owner, collection } = useParams()
+  const { data, schemas: schemasData } = useLoaderData() as { data: any; schemas: any }
+  const isOwner = useIsOwner(owner)
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={data.public}
+          isOwner={!!isOwner}
+          active="schemas"
+          version={schemasData?.semver}
+          isLatest={data.latestVersion?.semver === schemasData?.semver}
+        />
+        <SchemaList
+          owner={owner!}
+          collection={collection!}
+          schemasData={schemasData}
+          isOwner={!!isOwner}
+        />
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/[collection]/versions.tsx b/src/routes/[owner]/[collection]/versions.tsx
index c23e17e..b545b4e 100644
--- a/src/routes/[owner]/[collection]/versions.tsx
+++ b/src/routes/[owner]/[collection]/versions.tsx
@@ -1,18 +1,18 @@
 import { Link, useLoaderData, useParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
-import { useAppContext } from '~/lib/app-context'
+import { EmptyState } from '~/components/ui'
+import { bareSemver } from '~/lib/format'
 import { TokenLink } from '~/lib/share-token'
+import { useIsOwner } from '~/lib/use-is-owner'
 
 import { CollectionNav, formatBytes } from '.'
 
 export default function CollectionVersionsPage() {
   const { owner, collection } = useParams()
-  const { currentUser } = useAppContext()
   const { data, versions } = useLoaderData() as { data: any; versions: any[] }
 
-  const isOwner =
-    currentUser?.slug === owner || currentUser?.orgs?.some((o: any) => o.slug === owner)
+  const isOwner = useIsOwner(owner)
 
   return (
     <BaseLayout>
@@ -23,16 +23,32 @@ export default function CollectionVersionsPage() {
           isPublic={data.public}
           isOwner={!!isOwner}
           active="versions"
+          version={versions[0]?.semver}
+          isLatest
         />
 
-        <h2 className="text-ink-muted mb-4 text-sm font-semibold">
-          {versions.length} version{versions.length !== 1 ? 's' : ''}
-        </h2>
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-ink-muted text-sm font-semibold">
+            {(data.versionCount ?? versions.length).toLocaleString()} version
+            {(data.versionCount ?? versions.length) !== 1 ? 's' : ''}
+            {data.versionCount > versions.length && (
+              <span className="ml-1 font-normal">(showing latest {versions.length})</span>
+            )}
+          </h2>
+          {versions.length > 1 && (
+            <TokenLink
+              to={`/${owner}/${collection}/versions/compare`}
+              className="text-link text-xs hover:underline"
+            >
+              Compare versions →
+            </TokenLink>
+          )}
+        </div>
 
         {versions.length === 0 ? (
-          <p className="text-ink-muted py-8 text-center text-sm">No versions yet.</p>
+          <EmptyState>No versions yet.</EmptyState>
         ) : (
-          <div className="border-rule overflow-hidden rounded border">
+          <div className="border-rule rounded-surface overflow-hidden border">
             {versions.map((v: any, i: number) => (
               <div
                 key={v.semver}
@@ -41,11 +57,11 @@ export default function CollectionVersionsPage() {
                 }`}
               >
                 <TokenLink
-                  to={`/${owner}/${collection}/v/${v.semver}`}
+                  to={`/${owner}/${collection}/v/${bareSemver(v.semver)}`}
                   className="flex min-w-0 items-center gap-4"
                 >
                   <div className="flex items-center gap-2">
-                    <span className="bg-parchment-dark border-rule rounded border px-1.5 py-0.5 font-mono text-xs">
+                    <span className="bg-parchment-dark border-rule rounded-control border px-1.5 py-0.5 font-mono text-xs">
                       {v.semver}
                     </span>
                   </div>
@@ -80,7 +96,7 @@ export default function CollectionVersionsPage() {
                   )}
                   {i < versions.length - 1 ? (
                     <TokenLink
-                      to={`/${owner}/${collection}/diff?from=${versions[i + 1].semver}&to=${v.semver}`}
+                      to={`/${owner}/${collection}/versions/compare?from=${versions[i + 1].semver}&to=${v.semver}`}
                       className="text-link w-8 text-right hover:underline"
                       title={`Diff ${versions[i + 1].semver} → ${v.semver}`}
                     >
diff --git a/src/routes/[owner]/[collection]/versions/compare.data.ts b/src/routes/[owner]/[collection]/versions/compare.data.ts
new file mode 100644
index 0000000..54d418b
--- /dev/null
+++ b/src/routes/[owner]/[collection]/versions/compare.data.ts
@@ -0,0 +1,23 @@
+import type { LoaderFunctionArgs } from 'react-router'
+
+import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
+
+export const handle = {
+  title: (params: Record<string, string>) =>
+    `Compare — ${params.owner}/${params.collection} · Underlay`,
+}
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const api = apiUrlBuilder(request, fetchBase(request.url))
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+  const prefix = `/api/collections/${params.owner}/${params.collection}`
+
+  const [data, versions] = await Promise.all([
+    fetch(api(prefix), { headers }).then((r) => (r.ok ? r.json() : null)),
+    fetch(api(`${prefix}/versions?limit=100`), { headers }).then((r) => (r.ok ? r.json() : [])),
+  ])
+
+  if (!data) throw new Response('Not Found', { status: 404 })
+  return { data, versions }
+}
diff --git a/src/routes/[owner]/[collection]/versions/compare.tsx b/src/routes/[owner]/[collection]/versions/compare.tsx
new file mode 100644
index 0000000..889faa2
--- /dev/null
+++ b/src/routes/[owner]/[collection]/versions/compare.tsx
@@ -0,0 +1,374 @@
+import { useEffect, useState } from 'react'
+import { useLoaderData, useParams, useSearchParams } from 'react-router'
+
+import BaseLayout from '~/components/BaseLayout'
+import { Alert, Button } from '~/components/ui'
+import { useShareToken, withToken } from '~/lib/share-token'
+import { useIsOwner } from '~/lib/use-is-owner'
+
+import { CollectionNav } from '..'
+
+function groupByType(records: any[]) {
+  const groups: Record<string, any[]> = {}
+  for (const r of records) {
+    if (!groups[r.type]) groups[r.type] = []
+    groups[r.type]!.push(r)
+  }
+  return groups
+}
+
+export default function CollectionDiffPage() {
+  const { owner, collection } = useParams()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { data, versions } = useLoaderData() as { data: any; versions: any[] }
+
+  const isOwner = useIsOwner(owner)
+  const shareToken = useShareToken()
+
+  const [diff, setDiff] = useState<any>(null)
+  const [diffError, setDiffError] = useState<string | null>(null)
+  const [diffLoading, setDiffLoading] = useState(false)
+
+  const latestSemver = versions.length > 0 ? versions[0].semver : ''
+  const initialTo = searchParams.get('to') || latestSemver
+  // Default the base to the version just before `to` — an adjacent-pair diff —
+  // rather than the empty set, which reports every record as added.
+  const initialToIndex = versions.findIndex((v: any) => v.semver === initialTo)
+  const defaultFrom = initialToIndex >= 0 ? (versions[initialToIndex + 1]?.semver ?? '') : ''
+  const [fromVer, setFromVer] = useState<string>(searchParams.get('from') ?? defaultFrom)
+  const [toVer, setToVer] = useState<string>(initialTo)
+
+  useEffect(() => {
+    if (!toVer) return
+    setDiffLoading(true)
+    setDiff(null)
+    setDiffError(null)
+
+    const fromParam = fromVer ? `?from=${fromVer}` : ''
+    fetch(
+      withToken(
+        `/api/collections/${owner}/${collection}/versions/${toVer}/diff${fromParam}`,
+        shareToken,
+      ),
+      { credentials: 'include' },
+    )
+      .then(async (r) => {
+        if (r.ok) {
+          setDiff(await r.json())
+        } else {
+          const body = await r.json().catch(() => ({}))
+          setDiffError(body.error ?? 'Failed to load diff')
+        }
+      })
+      .finally(() => setDiffLoading(false))
+  }, [fromVer, toVer, owner, collection, shareToken])
+
+  function handleCompare(e: React.FormEvent) {
+    e.preventDefault()
+    const form = e.target as HTMLFormElement
+    const fd = new FormData(form)
+    const f = fd.get('from') as string
+    const t = fd.get('to') as string
+    setFromVer(f)
+    setToVer(t)
+    const params: Record<string, string> = { to: t }
+    if (f) params.from = f
+    if (shareToken) params.token = shareToken
+    setSearchParams(params)
+  }
+
+  const targetVersion = versions.find((v: any) => v.semver === toVer)
+  const baseVersion = versions.find((v: any) => v.semver === fromVer)
+
+  const addedByType = diff ? groupByType(diff.added) : {}
+  const updatedByType = diff ? groupByType(diff.updated) : {}
+  const removedCount = diff?.removed?.length ?? 0
+
+  const totalAdded = diff?.added?.length ?? 0
+  const totalUpdated = diff?.updated?.length ?? 0
+  const totalRemoved = removedCount
+  const totalChanges = totalAdded + totalUpdated + totalRemoved
+
+  const meta = diff?.meta ?? {}
+  const hasMetaChanges =
+    meta.schemaChanged || meta.readmeChanged || meta.filesAdded > 0 || meta.filesRemoved > 0
+
+  return (
+    <BaseLayout>
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <CollectionNav
+          owner={owner!}
+          collection={collection!}
+          isPublic={data.public}
+          isOwner={!!isOwner}
+          active="versions"
+          version={latestSemver || undefined}
+          isLatest
+        />
+
+        {/* Version selector */}
+        <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+          <h2 className="text-ink-muted text-sm font-semibold tracking-wide uppercase">
+            Compare versions
+          </h2>
+          <form onSubmit={handleCompare} className="flex items-center gap-2 text-sm">
+            <select
+              name="from"
+              defaultValue={fromVer}
+              className="border-rule bg-parchment focus:border-ink rounded-control cursor-pointer border px-2 py-1 font-mono text-xs focus:outline-none"
+            >
+              <option value="">∅ (empty)</option>
+              {versions.map((v: any) => (
+                <option key={v.semver} value={v.semver}>
+                  {v.semver}
+                </option>
+              ))}
+            </select>
+            <span className="text-ink-muted">→</span>
+            <select
+              name="to"
+              defaultValue={toVer}
+              className="border-rule bg-parchment focus:border-ink rounded-control cursor-pointer border px-2 py-1 font-mono text-xs focus:outline-none"
+            >
+              {versions.map((v: any) => (
+                <option key={v.semver} value={v.semver}>
+                  {v.semver}
+                </option>
+              ))}
+            </select>
+            <Button type="submit" size="sm">
+              Compare
+            </Button>
+          </form>
+        </div>
+
+        {diffError && (
+          <Alert variant="error" className="mb-6">
+            {diffError}
+          </Alert>
+        )}
+
+        {diffLoading && <p className="text-ink-muted py-8 text-center text-sm">Loading diff…</p>}
+
+        {diff && (
+          <div>
+            {/* Summary bar */}
+            <div className="border-rule bg-parchment-dark rounded-surface mb-6 flex flex-wrap items-center gap-x-4 gap-y-1 border px-4 py-2.5 text-sm">
+              <span className="text-ink-muted">
+                {baseVersion ? baseVersion.semver : '∅'} → {targetVersion?.semver}
+              </span>
+              <span className="text-ink-muted">·</span>
+              <span>
+                <strong className="text-ink">{totalChanges.toLocaleString()}</strong> changes
+              </span>
+              {totalAdded > 0 && (
+                <span className="text-green-700">+{totalAdded.toLocaleString()} added</span>
+              )}
+              {totalUpdated > 0 && (
+                <span className="text-amber-700">~{totalUpdated.toLocaleString()} updated</span>
+              )}
+              {totalRemoved > 0 && (
+                <span className="text-red-700">-{totalRemoved.toLocaleString()} removed</span>
+              )}
+              {meta.schemaChanged && <span className="text-purple-700">schema</span>}
+              {meta.readmeChanged && <span className="text-blue-700">readme</span>}
+              {meta.filesAdded > 0 && (
+                <span className="text-green-700">+{meta.filesAdded} files</span>
+              )}
+              {meta.filesRemoved > 0 && (
+                <span className="text-red-700">-{meta.filesRemoved} files</span>
+              )}
+            </div>
+
+            {/* Metadata changes */}
+            {hasMetaChanges && (
+              <div className="mb-8">
+                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
+                  <span className="h-2 w-2 rounded-full bg-blue-600"></span>
+                  Metadata changes
+                </h3>
+                <div className="border-rule rounded-surface overflow-x-auto border">
+                  <table className="w-full text-sm">
+                    <tbody>
+                      {meta.schemaChanged && (
+                        <tr className="border-rule border-b">
+                          <td className="text-ink-muted w-32 p-3 font-medium">Schema</td>
+                          <td className="p-3 text-purple-700">Modified</td>
+                        </tr>
+                      )}
+                      {meta.readmeChanged && (
+                        <tr className="border-rule border-b">
+                          <td className="text-ink-muted w-32 p-3 font-medium">README</td>
+                          <td className="p-3">
+                            {!meta.readmeFrom && meta.readmeTo ? (
+                              <span className="text-green-700">Added</span>
+                            ) : meta.readmeFrom && !meta.readmeTo ? (
+                              <span className="text-red-700">Removed</span>
+                            ) : (
+                              <span className="text-blue-700">Modified</span>
+                            )}
+                          </td>
+                        </tr>
+                      )}
+                      {meta.filesAdded > 0 && (
+                        <tr className="border-rule border-b">
+                          <td className="text-ink-muted w-32 p-3 font-medium">Files added</td>
+                          <td className="p-3 text-green-700">+{meta.filesAdded}</td>
+                        </tr>
+                      )}
+                      {meta.filesRemoved > 0 && (
+                        <tr className="border-rule border-b last:border-b-0">
+                          <td className="text-ink-muted w-32 p-3 font-medium">Files removed</td>
+                          <td className="p-3 text-red-700">-{meta.filesRemoved}</td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {totalChanges === 0 && !hasMetaChanges && (
+              <p className="text-ink-muted py-8 text-center text-sm">
+                No changes between these versions.
+              </p>
+            )}
+
+            {/* Added records */}
+            {totalAdded > 0 && (
+              <div className="mb-8">
+                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
+                  <span className="h-2 w-2 rounded-full bg-green-600"></span>
+                  Added ({totalAdded.toLocaleString()})
+                </h3>
+                {Object.entries(addedByType).map(([type, records]: [string, any[]]) => (
+                  <div key={type} className="mb-4">
+                    <div className="text-ink-muted mb-1.5 text-xs font-medium">
+                      {type} ({records.length})
+                    </div>
+                    <div className="border-rule rounded-surface overflow-x-auto border">
+                      <table className="w-full text-xs">
+                        <thead>
+                          <tr className="border-rule border-b bg-green-50">
+                            <th className="w-48 p-2 text-left font-medium">ID</th>
+                            <th className="p-2 text-left font-medium">Data</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {records.slice(0, 50).map((r: any) => (
+                            <tr key={r.id} className="border-rule border-t hover:bg-green-50/50">
+                              <td className="text-ink-muted p-2 align-top font-mono text-[11px]">
+                                {r.id.length > 30 ? r.id.slice(0, 30) + '…' : r.id}
+                              </td>
+                              <td className="p-2">
+                                <pre className="max-h-24 overflow-y-auto font-mono text-[11px] break-all whitespace-pre-wrap">
+                                  {JSON.stringify(r.data, null, 2)}
+                                </pre>
+                              </td>
+                            </tr>
+                          ))}
+                          {records.length > 50 && (
+                            <tr className="border-rule border-t">
+                              <td colSpan={2} className="text-ink-muted p-2 text-center">
+                                … and {records.length - 50} more
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Updated records */}
+            {totalUpdated > 0 && (
+              <div className="mb-8">
+                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
+                  <span className="h-2 w-2 rounded-full bg-amber-500"></span>
+                  Updated ({totalUpdated.toLocaleString()})
+                </h3>
+                {Object.entries(updatedByType).map(([type, records]: [string, any[]]) => (
+                  <div key={type} className="mb-4">
+                    <div className="text-ink-muted mb-1.5 text-xs font-medium">
+                      {type} ({records.length})
+                    </div>
+                    <div className="border-rule rounded-surface overflow-x-auto border">
+                      <table className="w-full text-xs">
+                        <thead>
+                          <tr className="border-rule border-b bg-amber-50">
+                            <th className="w-48 p-2 text-left font-medium">ID</th>
+                            <th className="p-2 text-left font-medium">New data</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {records.slice(0, 50).map((r: any) => (
+                            <tr key={r.id} className="border-rule border-t hover:bg-amber-50/50">
+                              <td className="text-ink-muted p-2 align-top font-mono text-[11px]">
+                                {r.id.length > 30 ? r.id.slice(0, 30) + '…' : r.id}
+                              </td>
+                              <td className="p-2">
+                                <pre className="max-h-24 overflow-y-auto font-mono text-[11px] break-all whitespace-pre-wrap">
+                                  {JSON.stringify(r.data, null, 2)}
+                                </pre>
+                              </td>
+                            </tr>
+                          ))}
+                          {records.length > 50 && (
+                            <tr className="border-rule border-t">
+                              <td colSpan={2} className="text-ink-muted p-2 text-center">
+                                … and {records.length - 50} more
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Removed records */}
+            {totalRemoved > 0 && (
+              <div className="mb-8">
+                <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
+                  <span className="h-2 w-2 rounded-full bg-red-600"></span>
+                  Removed ({totalRemoved.toLocaleString()})
+                </h3>
+                <div className="border-rule rounded-surface overflow-x-auto border">
+                  <table className="w-full text-xs">
+                    <thead>
+                      <tr className="border-rule border-b bg-red-50">
+                        <th className="p-2 text-left font-medium">Record ID</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {diff.removed.slice(0, 100).map((id: string) => (
+                        <tr key={id} className="border-rule border-t hover:bg-red-50/50">
+                          <td className="text-ink-muted p-2 font-mono text-[11px]">{id}</td>
+                        </tr>
+                      ))}
+                      {diff.removed.length > 100 && (
+                        <tr className="border-rule border-t">
+                          <td className="text-ink-muted p-2 text-center">
+                            … and {diff.removed.length - 100} more
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {!diff && !diffError && !diffLoading && (
+          <p className="text-ink-muted py-8 text-center text-sm">Select versions to compare.</p>
+        )}
+      </div>
+    </BaseLayout>
+  )
+}
diff --git a/src/routes/[owner]/index.tsx b/src/routes/[owner]/index.tsx
index 52a8583..7a4de49 100644
--- a/src/routes/[owner]/index.tsx
+++ b/src/routes/[owner]/index.tsx
@@ -1,6 +1,7 @@
 import { Link, useLoaderData, useParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { ButtonLink, EmptyState } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 function timeAgo(dateStr: string): string {
@@ -108,21 +109,18 @@ export default function OwnerPage() {
                 Collections
               </h2>
               {isMember && (
-                <Link
-                  to="/new"
-                  className="bg-ink text-parchment visited:text-parchment rounded px-3 py-1.5 text-sm font-medium transition-opacity hover:opacity-90"
-                >
+                <ButtonLink to={`/new?owner=${owner}`} size="sm">
                   New collection
-                </Link>
+                </ButtonLink>
               )}
             </div>
 
             {collections.length === 0 ? (
-              <div className="text-ink-muted border-rule rounded border px-4 py-8 text-center text-sm">
-                No public collections yet.
-              </div>
+              <EmptyState>
+                {isMember || isOwner ? 'No collections yet.' : 'No public collections yet.'}
+              </EmptyState>
             ) : (
-              <div className="border-rule overflow-hidden rounded border">
+              <div className="border-rule rounded-surface overflow-x-auto border">
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="bg-ink/5 text-ink-muted text-left text-xs">
@@ -189,7 +187,7 @@ export default function OwnerPage() {
                     <Link
                       key={m.slug}
                       to={`/${m.slug}`}
-                      className="hover:bg-parchment-dark flex items-center gap-2 rounded px-2 py-1 transition-colors"
+                      className="hover:bg-parchment-dark rounded-control flex items-center gap-2 px-2 py-1 transition-colors"
                     >
                       <span className="text-sm font-medium">{m.slug}</span>
                       <span className="text-ink-muted text-[10px]">{m.role}</span>
@@ -207,13 +205,13 @@ export default function OwnerPage() {
               <div className="space-y-2">
                 <div>
                   <p className="text-ink-muted mb-0.5 text-[10px] font-medium">AT Protocol</p>
-                  <code className="text-ink-muted bg-parchment-dark block rounded px-2 py-1 text-[10px] break-all">
+                  <code className="text-ink-muted bg-parchment-dark rounded-surface block px-2 py-1 text-[10px] break-all">
                     at://did:web:underlay.org:{owner}
                   </code>
                 </div>
                 <div>
                   <p className="text-ink-muted mb-0.5 text-[10px] font-medium">API</p>
-                  <code className="text-ink-muted bg-parchment-dark block rounded px-2 py-1 text-[10px] break-all">
+                  <code className="text-ink-muted bg-parchment-dark rounded-surface block px-2 py-1 text-[10px] break-all">
                     GET /api/accounts/{owner}/collections
                   </code>
                 </div>
diff --git a/src/routes/[owner]/settings/index.data.ts b/src/routes/[owner]/settings/index.data.ts
index 907687d..1248cf9 100644
--- a/src/routes/[owner]/settings/index.data.ts
+++ b/src/routes/[owner]/settings/index.data.ts
@@ -1,7 +1,10 @@
 import type { LoaderFunctionArgs } from 'react-router'
 
+import { requireAuth } from '~/lib/auth-middleware'
 import { fetchBase } from '~/lib/fetch-base'
 
+export const middleware = [requireAuth]
+
 export const handle = {
   title: (params: Record<string, string>) => `Settings — ${params.owner} · Underlay`,
 }
diff --git a/src/routes/[owner]/settings/index.tsx b/src/routes/[owner]/settings/index.tsx
index 100bc3f..32e7eeb 100644
--- a/src/routes/[owner]/settings/index.tsx
+++ b/src/routes/[owner]/settings/index.tsx
@@ -1,7 +1,8 @@
 import { type FormEvent, useState } from 'react'
 import { Link, useLoaderData, useParams } from 'react-router'
 
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { orgSettingsRail } from '~/components/SettingsLayout'
+import { Alert, Button, Input, SectionHeading, Select, Textarea } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 export default function OwnerSettings() {
@@ -36,12 +37,7 @@ export default function OwnerSettings() {
   // Delete form
   const [confirmSlug, setConfirmSlug] = useState('')
 
-  if (!currentUser) {
-    window.location.href = '/login'
-    return null
-  }
-
-  if (!org) {
+  if (currentUser && !org) {
     window.location.href = `/${owner}`
     return null
   }
@@ -129,300 +125,256 @@ export default function OwnerSettings() {
   }
 
   return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <nav className="text-ink-muted mb-6 text-xs">
-          <Link to={`/${owner}`} className="hover:text-ink">
+    <SettingsLayout
+      crumb={
+        <nav>
+          <Link to={`/${owner}`} className="text-link hover:underline">
             {owner}
-          </Link>
-          <span className="mx-1">/</span>
-          <span className="text-ink font-medium">settings</span>
-        </nav>
-
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Organization Settings</h1>
-
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to={`/${owner}/settings`} className="text-ink font-medium">
-            Profile
-          </Link>
-          <Link to={`/${owner}/settings/members`} className="text-ink-muted hover:text-ink">
-            Members
-          </Link>
-          <Link to={`/${owner}/settings/keys`} className="text-ink-muted hover:text-ink">
-            API Keys
-          </Link>
-          <Link to={`/${owner}/settings#ark`} className="text-ink-muted hover:text-ink">
-            ARK
-          </Link>
+          </Link>{' '}
+          <span className="text-ink-muted">/</span> <span className="text-ink-muted">settings</span>
         </nav>
+      }
+      title="Profile"
+      description="Public identity for this organization."
+      groups={orgSettingsRail(owner!)}
+    >
+      {success && (
+        <Alert variant="success" className="mb-4">
+          {success}
+        </Alert>
+      )}
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
 
-        {success && (
-          <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-            {success}
-          </p>
-        )}
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
-          </p>
-        )}
-
-        {isOwner ? (
-          <form onSubmit={handleUpdateProfile} className="mb-10 space-y-4">
-            <div className="mb-4 flex items-center gap-4">
-              {initialOrgData.avatarUrl ? (
-                <img
-                  src={initialOrgData.avatarUrl}
-                  alt="Avatar"
-                  className="border-rule h-16 w-16 rounded-full border object-cover"
-                />
-              ) : (
-                <div className="bg-parchment-dark border-rule text-ink-muted flex h-16 w-16 items-center justify-center rounded-full border text-lg font-semibold">
-                  {initialOrgData.displayName?.charAt(0)?.toUpperCase() ?? '?'}
-                </div>
-              )}
-              <div>
-                <p className="text-sm font-medium">{initialOrgData.displayName}</p>
-                <p className="text-ink-muted font-mono text-xs">@{owner}</p>
+      {isOwner ? (
+        <form onSubmit={handleUpdateProfile} className="mb-10 space-y-4">
+          <div className="mb-4 flex items-center gap-4">
+            {initialOrgData.avatarUrl ? (
+              <img
+                src={initialOrgData.avatarUrl}
+                alt="Avatar"
+                className="border-rule h-16 w-16 rounded-full border object-cover"
+              />
+            ) : (
+              <div className="bg-parchment-dark border-rule text-ink-muted flex h-16 w-16 items-center justify-center rounded-full border text-lg font-semibold">
+                {initialOrgData.displayName?.charAt(0)?.toUpperCase() ?? '?'}
               </div>
+            )}
+            <div>
+              <p className="text-sm font-medium">{initialOrgData.displayName}</p>
+              <p className="text-ink-muted font-mono text-xs">@{owner}</p>
             </div>
+          </div>
 
+          <div>
+            <label htmlFor="displayName" className="mb-1 block text-sm font-medium">
+              Display name
+            </label>
+            <Input
+              type="text"
+              id="displayName"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="bio" className="mb-1 block text-sm font-medium">
+              Description
+            </label>
+            <Textarea
+              id="bio"
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              rows={3}
+              placeholder="What does this organization do?"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
             <div>
-              <label htmlFor="displayName" className="mb-1 block text-sm font-medium">
-                Display Name
+              <label htmlFor="website" className="mb-1 block text-sm font-medium">
+                Website
               </label>
-              <input
-                type="text"
-                id="displayName"
-                value={displayName}
-                onChange={(e) => setDisplayName(e.target.value)}
-                required
-                className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
+              <Input
+                type="url"
+                id="website"
+                value={website}
+                onChange={(e) => setWebsite(e.target.value)}
+                placeholder="https://..."
               />
             </div>
             <div>
-              <label htmlFor="bio" className="mb-1 block text-sm font-medium">
-                Description
+              <label htmlFor="location" className="mb-1 block text-sm font-medium">
+                Location
               </label>
-              <textarea
-                id="bio"
-                value={bio}
-                onChange={(e) => setBio(e.target.value)}
-                rows={3}
-                placeholder="What does this organization do?"
-                className="bg-parchment border-rule focus:border-ink w-full resize-none border px-3 py-2 text-sm focus:outline-none"
+              <Input
+                type="text"
+                id="location"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+                placeholder="City, Country"
               />
             </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <label htmlFor="website" className="mb-1 block text-sm font-medium">
-                  Website
-                </label>
-                <input
-                  type="url"
-                  id="website"
-                  value={website}
-                  onChange={(e) => setWebsite(e.target.value)}
-                  placeholder="https://..."
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label htmlFor="location" className="mb-1 block text-sm font-medium">
-                  Location
-                </label>
-                <input
-                  type="text"
-                  id="location"
-                  value={location}
-                  onChange={(e) => setLocation(e.target.value)}
-                  placeholder="City, Country"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                />
-              </div>
+          </div>
+          <div>
+            <label htmlFor="slug" className="mb-1 block text-sm font-medium">
+              Slug
+            </label>
+            <Input
+              type="text"
+              id="slug"
+              value={slugValue}
+              onChange={(e) =>
+                setSlugValue(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))
+              }
+              pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
+              className="font-mono"
+            />
+            {slugValue !== owner && (
+              <p className="mt-1 text-xs text-amber-700">
+                Changing the slug will update all URLs for this account.
+              </p>
+            )}
+          </div>
+          <Button type="submit" disabled={submitting === 'profile'}>
+            {submitting === 'profile' ? 'Saving…' : 'Save changes'}
+          </Button>
+        </form>
+      ) : (
+        <div className="text-ink-muted text-sm">
+          <p>Only organization owners can update the profile.</p>
+        </div>
+      )}
+
+      {/* ARK Identifiers */}
+      {isAdmin && (
+        <div id="ark" className="border-rule mb-10 border-t pt-6">
+          <SectionHeading>ARK Identifiers</SectionHeading>
+
+          {initialOrgData.arkShoulder && (
+            <div className="mb-4">
+              <p className="text-ink-muted mb-1 text-xs">Assigned shoulder</p>
+              <code className="bg-parchment-dark border-rule rounded-surface border px-2 py-1 font-mono text-xs">
+                {initialOrgData.arkShoulder}
+              </code>
             </div>
+          )}
+
+          <form onSubmit={handleUpdateArk} className="space-y-3">
             <div>
-              <label htmlFor="slug" className="mb-1 block text-sm font-medium">
-                Slug
+              <label htmlFor="arkNaan" className="mb-1 block text-xs font-medium">
+                Name Assigning Authority Number (NAAN)
               </label>
-              <input
+              <Input
                 type="text"
-                id="slug"
-                value={slugValue}
-                onChange={(e) =>
-                  setSlugValue(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))
-                }
-                pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
-                className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 font-mono text-sm focus:outline-none"
+                id="arkNaan"
+                value={arkNaan}
+                onChange={(e) => setArkNaan(e.target.value)}
+                placeholder="Leave blank to use default (12345)"
+                pattern="[0-9]{1,16}"
+                className="font-mono"
               />
-              {slugValue !== owner && (
-                <p className="mt-1 text-xs text-amber-700">
-                  Changing the slug will update all URLs for this account.
-                </p>
-              )}
+              <p className="text-ink-muted mt-1 text-xs">
+                If set, overrides the default NAAN for all ARKs created by this organization.
+              </p>
             </div>
-            <button
-              type="submit"
-              disabled={submitting === 'profile'}
-              className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              Save
-            </button>
+            <Button type="submit" disabled={submitting === 'ark'}>
+              {submitting === 'ark' ? 'Saving…' : 'Save changes'}
+            </Button>
           </form>
-        ) : (
-          <div className="text-ink-muted text-sm">
-            <p>Only organization owners can update the profile.</p>
-          </div>
-        )}
-
-        {/* ARK Identifiers */}
-        {isAdmin && (
-          <div id="ark" className="border-rule mb-10 border-t pt-6">
-            <h2 className="text-ink-muted mb-4 text-sm font-semibold tracking-wide uppercase">
-              ARK Identifiers
-            </h2>
+        </div>
+      )}
 
-            {initialOrgData.arkShoulder && (
-              <div className="mb-4">
-                <p className="text-ink-muted mb-1 text-xs">Assigned shoulder</p>
-                <code className="bg-parchment-dark border-rule border px-2 py-1 font-mono text-xs">
-                  {initialOrgData.arkShoulder}
-                </code>
-              </div>
-            )}
+      {/* Transfer Organization */}
+      {isOwner && (
+        <div className="border-rule mb-10 border-t pt-6">
+          <SectionHeading>Transfer Organization</SectionHeading>
+          <p className="text-ink-muted mb-3 text-sm">
+            Transfer this Underlay organization to a different KF Account you belong to. This
+            changes which KF Account is responsible for billing and ownership, but does not affect
+            permissions or membership on the Underlay side.
+          </p>
+          <form
+            onSubmit={async (e: FormEvent) => {
+              e.preventDefault()
+              clearMessages()
+              setSubmitting('kforg')
+              try {
+                const res = await fetch(`/api/accounts/${owner}`, {
+                  method: 'PATCH',
+                  headers: { 'Content-Type': 'application/json' },
+                  credentials: 'include',
+                  body: JSON.stringify({ kfOrgId }),
+                })
+                if (res.ok) {
+                  setSuccess('Ownership transferred.')
+                } else {
+                  const body = await res.json().catch(() => ({}))
+                  setError(body.error ?? 'Failed to transfer ownership.')
+                }
+              } finally {
+                setSubmitting('')
+              }
+            }}
+            className="space-y-3"
+          >
+            <div>
+              <label htmlFor="kfOrgId" className="mb-1 block text-xs font-medium">
+                KF Account
+              </label>
+              <Select id="kfOrgId" value={kfOrgId} onChange={(e) => setKfOrgId(e.target.value)}>
+                <option value="">— None —</option>
+                {kfOrgs.map((kfOrg) => (
+                  <option key={kfOrg.id} value={kfOrg.id}>
+                    {kfOrg.name}
+                  </option>
+                ))}
+              </Select>
+            </div>
+            <Button type="submit" disabled={submitting === 'kforg'}>
+              {submitting === 'kforg' ? 'Saving…' : 'Save changes'}
+            </Button>
+          </form>
+        </div>
+      )}
 
-            <form onSubmit={handleUpdateArk} className="space-y-3">
+      {/* Danger zone */}
+      {isOwner && (
+        <div className="rounded-surface border border-red-200 p-4">
+          <h2 className="mb-2 text-sm font-semibold text-red-700">Danger zone</h2>
+          <p className="text-ink-muted mb-3 text-sm">
+            Permanently delete this organization, all its collections, versions, records, and files.
+            This cannot be undone.
+          </p>
+          <details className="group">
+            <summary className="cursor-pointer text-sm text-red-700 hover:underline">
+              Delete this organization…
+            </summary>
+            <form onSubmit={handleDeleteOrg} className="mt-3 space-y-3">
               <div>
-                <label htmlFor="arkNaan" className="mb-1 block text-xs font-medium">
-                  Name Assigning Authority Number (NAAN)
+                <label htmlFor="confirmSlug" className="text-ink-muted mb-1 block text-sm">
+                  Type <strong>{owner}</strong> to confirm:
                 </label>
                 <input
                   type="text"
-                  id="arkNaan"
-                  value={arkNaan}
-                  onChange={(e) => setArkNaan(e.target.value)}
-                  placeholder="Leave blank to use default (12345)"
-                  pattern="[0-9]{1,16}"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 font-mono text-sm focus:outline-none"
+                  id="confirmSlug"
+                  value={confirmSlug}
+                  onChange={(e) => setConfirmSlug(e.target.value)}
+                  required
+                  autoComplete="off"
+                  className="bg-parchment rounded-control w-full border border-red-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none"
                 />
-                <p className="text-ink-muted mt-1 text-xs">
-                  If set, overrides the default NAAN for all ARKs created by this organization.
-                </p>
-              </div>
-              <button
-                type="submit"
-                disabled={submitting === 'ark'}
-                className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-              >
-                Save
-              </button>
-            </form>
-          </div>
-        )}
-
-        {/* Transfer Organization */}
-        {isOwner && (
-          <div className="border-rule mb-10 border-t pt-6">
-            <h2 className="text-ink-muted mb-4 text-sm font-semibold tracking-wide uppercase">
-              Transfer Organization
-            </h2>
-            <p className="text-ink-muted mb-3 text-sm">
-              Transfer this Underlay organization to a different KF Account you belong to. This
-              changes which KF Account is responsible for billing and ownership, but does not affect
-              permissions or membership on the Underlay side.
-            </p>
-            <form
-              onSubmit={async (e: FormEvent) => {
-                e.preventDefault()
-                clearMessages()
-                setSubmitting('kforg')
-                try {
-                  const res = await fetch(`/api/accounts/${owner}`, {
-                    method: 'PATCH',
-                    headers: { 'Content-Type': 'application/json' },
-                    credentials: 'include',
-                    body: JSON.stringify({ kfOrgId }),
-                  })
-                  if (res.ok) {
-                    setSuccess('Ownership transferred.')
-                  } else {
-                    const body = await res.json().catch(() => ({}))
-                    setError(body.error ?? 'Failed to transfer ownership.')
-                  }
-                } finally {
-                  setSubmitting('')
-                }
-              }}
-              className="space-y-3"
-            >
-              <div>
-                <label htmlFor="kfOrgId" className="mb-1 block text-xs font-medium">
-                  KF Account
-                </label>
-                <select
-                  id="kfOrgId"
-                  value={kfOrgId}
-                  onChange={(e) => setKfOrgId(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                >
-                  <option value="">— None —</option>
-                  {kfOrgs.map((kfOrg) => (
-                    <option key={kfOrg.id} value={kfOrg.id}>
-                      {kfOrg.name}
-                    </option>
-                  ))}
-                </select>
               </div>
-              <button
-                type="submit"
-                disabled={submitting === 'kforg'}
-                className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-              >
-                Save
-              </button>
+              <Button type="submit" variant="danger" disabled={submitting === 'delete'}>
+                {submitting === 'delete' ? 'Deleting…' : 'Delete organization'}
+              </Button>
             </form>
-          </div>
-        )}
-
-        {/* Danger zone */}
-        {isOwner && (
-          <div className="mt-10 border border-red-200 p-4">
-            <h2 className="mb-2 text-sm font-semibold text-red-700">Danger Zone</h2>
-            <p className="text-ink-muted mb-3 text-sm">
-              Permanently delete this organization, all its collections, versions, records, and
-              files. This cannot be undone.
-            </p>
-            <details className="group">
-              <summary className="cursor-pointer text-sm text-red-700 hover:underline">
-                Delete this organization…
-              </summary>
-              <form onSubmit={handleDeleteOrg} className="mt-3 space-y-3">
-                <div>
-                  <label htmlFor="confirmSlug" className="text-ink-muted mb-1 block text-sm">
-                    Type <strong>{owner}</strong> to confirm:
-                  </label>
-                  <input
-                    type="text"
-                    id="confirmSlug"
-                    value={confirmSlug}
-                    onChange={(e) => setConfirmSlug(e.target.value)}
-                    required
-                    autoComplete="off"
-                    className="bg-parchment w-full border border-red-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none"
-                  />
-                </div>
-                <button
-                  type="submit"
-                  disabled={submitting === 'delete'}
-                  className="bg-red-700 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-800"
-                >
-                  Delete organization
-                </button>
-              </form>
-            </details>
-          </div>
-        )}
-      </div>
-    </BaseLayout>
+          </details>
+        </div>
+      )}
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/[owner]/settings/keys.data.ts b/src/routes/[owner]/settings/keys.data.ts
index 738facb..2e9a858 100644
--- a/src/routes/[owner]/settings/keys.data.ts
+++ b/src/routes/[owner]/settings/keys.data.ts
@@ -1,7 +1,10 @@
 import type { LoaderFunctionArgs } from 'react-router'
 
+import { requireAuth } from '~/lib/auth-middleware'
 import { fetchBase } from '~/lib/fetch-base'
 
+export const middleware = [requireAuth]
+
 export const handle = {
   title: (params: Record<string, string>) => `API Keys — ${params.owner} · Underlay`,
 }
@@ -10,15 +13,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   const base = fetchBase(request.url)
   const headers = { Cookie: request.headers.get('Cookie') ?? '' }
 
-  const [orgData, collections] = await Promise.all([
-    fetch(new URL(`/api/accounts/${params.owner}`, base), { headers }).then((r) =>
-      r.ok ? r.json() : null,
-    ),
-    fetch(new URL(`/api/accounts/${params.owner}/collections`, base), { headers }).then((r) =>
-      r.ok ? r.json() : [],
-    ),
-  ])
-
-  if (!orgData) throw new Response('Not Found', { status: 404 })
-  return { orgData, collections }
+  const res = await fetch(new URL(`/api/accounts/${params.owner}/collections`, base), { headers })
+  const collections = res.ok ? await res.json() : []
+  return { collections }
 }
diff --git a/src/routes/[owner]/settings/keys.tsx b/src/routes/[owner]/settings/keys.tsx
index c36d53e..1f4335a 100644
--- a/src/routes/[owner]/settings/keys.tsx
+++ b/src/routes/[owner]/settings/keys.tsx
@@ -2,7 +2,9 @@ import { type FormEvent, useEffect, useState } from 'react'
 import { Link, useLoaderData, useParams } from 'react-router'
 
 import { ApiPlayground } from '~/components/ApiPlayground'
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { orgSettingsRail } from '~/components/SettingsLayout'
+import { Alert, Badge, Button, SectionHeading } from '~/components/ui'
+import { getScope, isExpired, isExpiringSoon } from '~/lib/api-keys'
 import { useAppContext } from '~/lib/app-context'
 import { authClient } from '~/lib/auth-client'
 
@@ -16,24 +18,6 @@ interface Key {
   expiresAt?: string
 }
 
-function isExpiringSoon(expiresAt: string | null): boolean {
-  if (!expiresAt) return false
-  const daysLeft = (new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
-  return daysLeft > 0 && daysLeft < 7
-}
-
-function isExpired(expiresAt: string | null): boolean {
-  if (!expiresAt) return false
-  return new Date(expiresAt) < new Date()
-}
-
-function getScope(permissions?: Record<string, string[]>): string {
-  const perms = permissions?.['collections'] ?? []
-  if (perms.includes('admin')) return 'admin'
-  if (perms.includes('write')) return 'write'
-  return 'read'
-}
-
 export default function OwnerSettingsKeys() {
   const { owner } = useParams()
   const { currentUser } = useAppContext()
@@ -61,11 +45,6 @@ export default function OwnerSettingsKeys() {
     loadKeys()
   }, [])
 
-  if (!currentUser) {
-    window.location.href = '/login'
-    return null
-  }
-
   async function handleCreateKey(e: FormEvent) {
     e.preventDefault()
     setError('')
@@ -92,218 +71,194 @@ export default function OwnerSettingsKeys() {
     }
   }
 
-  async function handleDeleteKey(keyId: string) {
+  async function handleRevokeKey(keyId: string) {
     setError('')
     await authClient.apiKey.delete({ keyId } as any)
     setKeys((prev) => prev.filter((k) => k.id !== keyId))
   }
 
   return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <nav className="text-ink-muted mb-6 text-xs">
-          <Link to={`/${owner}`} className="hover:text-ink">
+    <SettingsLayout
+      crumb={
+        <nav>
+          <Link to={`/${owner}`} className="text-link hover:underline">
             {owner}
-          </Link>
-          <span className="mx-1">/</span>
-          <span className="text-ink font-medium">settings</span>
-        </nav>
-
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Organization Settings</h1>
-
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to={`/${owner}/settings`} className="text-ink-muted hover:text-ink">
-            Profile
-          </Link>
-          <Link to={`/${owner}/settings/members`} className="text-ink-muted hover:text-ink">
-            Members
-          </Link>
-          <Link to={`/${owner}/settings/keys`} className="text-ink font-medium">
-            API Keys
-          </Link>
+          </Link>{' '}
+          <span className="text-ink-muted">/</span> <span className="text-ink-muted">settings</span>
         </nav>
+      }
+      title="API keys"
+      description="Keys for pushing and pulling this organization's collections."
+      groups={orgSettingsRail(owner!)}
+    >
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
 
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
+      {newKeyResult && (
+        <Alert variant="success" className="mb-4">
+          <p className="mb-1 font-semibold">Key created: {newKeyResult.name}</p>
+          <p className="text-ink-muted mb-2 text-xs">
+            Copy this key now — it won't be shown again.
           </p>
-        )}
+          <code className="bg-ink text-parchment rounded-surface block p-2 font-mono text-xs break-all">
+            {newKeyResult.key}
+          </code>
+        </Alert>
+      )}
 
-        {newKeyResult && (
-          <div className="mb-4 border border-green-300 bg-green-50 p-4">
-            <p className="mb-1 text-sm font-semibold">Key created: {newKeyResult.name}</p>
-            <p className="text-ink-muted mb-2 text-xs">
-              Copy this key now — it won't be shown again.
-            </p>
-            <code className="bg-ink text-parchment block p-2 font-mono text-xs break-all">
-              {newKeyResult.key}
-            </code>
-          </div>
-        )}
-
-        {isAdmin && (
-          <form onSubmit={handleCreateKey} className="border-rule mb-6 space-y-3 border p-4">
-            <h2 className="mb-1 text-sm font-semibold">Create a new key</h2>
-            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <div>
-                <label htmlFor="keyLabel" className="text-ink-muted mb-1 block text-xs">
-                  Label
-                </label>
-                <input
-                  type="text"
-                  id="keyLabel"
-                  value={keyLabel}
-                  onChange={(e) => setKeyLabel(e.target.value)}
-                  required
-                  placeholder="ci-deploy"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 font-mono text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label htmlFor="keyScope" className="text-ink-muted mb-1 block text-xs">
-                  Scope
-                </label>
-                <select
-                  id="keyScope"
-                  value={keyScope}
-                  onChange={(e) => setKeyScope(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 text-sm focus:outline-none"
-                >
-                  <option value="read">read — list and download</option>
-                  <option value="write">write — push versions</option>
-                </select>
-              </div>
-              <div>
-                <label htmlFor="keyCollection" className="text-ink-muted mb-1 block text-xs">
-                  Collection (optional)
-                </label>
-                <select
-                  id="keyCollection"
-                  value={keyCollectionId}
-                  onChange={(e) => setKeyCollectionId(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 text-sm focus:outline-none"
-                >
-                  <option value="">All collections</option>
-                  {collections.map((c: any) => (
-                    <option key={c.id} value={c.id}>
-                      {c.slug}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label htmlFor="keyExpiry" className="text-ink-muted mb-1 block text-xs">
-                  Expiration (optional)
-                </label>
-                <select
-                  id="keyExpiry"
-                  value={keyExpiresIn}
-                  onChange={(e) => setKeyExpiresIn(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 text-sm focus:outline-none"
-                >
-                  <option value="">Never expires</option>
-                  <option value="7">7 days</option>
-                  <option value="30">30 days</option>
-                  <option value="90">90 days</option>
-                  <option value="365">1 year</option>
-                </select>
-              </div>
+      {isAdmin && (
+        <form
+          onSubmit={handleCreateKey}
+          className="border-rule rounded-surface mb-6 space-y-3 border p-4"
+        >
+          <h2 className="mb-1 text-sm font-semibold">Create a new key</h2>
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <div>
+              <label htmlFor="keyLabel" className="text-ink-muted mb-1 block text-xs">
+                Label
+              </label>
+              <input
+                type="text"
+                id="keyLabel"
+                value={keyLabel}
+                onChange={(e) => setKeyLabel(e.target.value)}
+                required
+                placeholder="ci-deploy"
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full border px-2 py-1.5 font-mono text-sm focus:outline-none"
+              />
             </div>
-            <button
-              type="submit"
-              disabled={submitting}
-              className="bg-ink text-parchment px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              Create key
-            </button>
-          </form>
-        )}
+            <div>
+              <label htmlFor="keyScope" className="text-ink-muted mb-1 block text-xs">
+                Scope
+              </label>
+              <select
+                id="keyScope"
+                value={keyScope}
+                onChange={(e) => setKeyScope(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full cursor-pointer border px-2 py-1.5 text-sm focus:outline-none"
+              >
+                <option value="read">read — list and download</option>
+                <option value="write">write — push versions</option>
+              </select>
+            </div>
+            <div>
+              <label htmlFor="keyCollection" className="text-ink-muted mb-1 block text-xs">
+                Collection (optional)
+              </label>
+              <select
+                id="keyCollection"
+                value={keyCollectionId}
+                onChange={(e) => setKeyCollectionId(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full cursor-pointer border px-2 py-1.5 text-sm focus:outline-none"
+              >
+                <option value="">All collections</option>
+                {collections.map((c: any) => (
+                  <option key={c.id} value={c.id}>
+                    {c.slug}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label htmlFor="keyExpiry" className="text-ink-muted mb-1 block text-xs">
+                Expiration (optional)
+              </label>
+              <select
+                id="keyExpiry"
+                value={keyExpiresIn}
+                onChange={(e) => setKeyExpiresIn(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full cursor-pointer border px-2 py-1.5 text-sm focus:outline-none"
+              >
+                <option value="">Never expires</option>
+                <option value="7">7 days</option>
+                <option value="30">30 days</option>
+                <option value="90">90 days</option>
+                <option value="365">1 year</option>
+              </select>
+            </div>
+          </div>
+          <Button type="submit" disabled={submitting}>
+            {submitting ? 'Creating…' : 'Create key'}
+          </Button>
+        </form>
+      )}
 
-        <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-          Active Keys ({keys.length})
-        </h2>
+      <SectionHeading>Active keys ({keys.length})</SectionHeading>
 
-        <div className="text-ink-muted bg-parchment border-rule mb-4 border px-3 py-2 text-xs">
-          <strong className="text-ink">Rate limits:</strong> Authenticated requests get 5,000
-          req/min. Without a key, the API allows 60 req/min per IP.
-          <Link to="/docs/api" className="text-link ml-1 underline">
-            Learn more →
-          </Link>
-        </div>
+      <Alert variant="info" className="mb-4 text-xs">
+        <strong className="text-ink">Rate limits:</strong> Authenticated requests get 5,000 req/min.
+        Without a key, the API allows 60 req/min per IP.
+        <Link to="/docs/api" className="text-link ml-1 underline">
+          Learn more →
+        </Link>
+      </Alert>
 
-        {keys.length === 0 ? (
-          <p className="text-ink-muted text-sm">No API keys for this organization.</p>
-        ) : (
-          <div className="mb-8 space-y-2">
-            {keys.map((k) => (
-              <div
-                key={k.id}
-                className={`flex items-center justify-between border p-3 ${
-                  isExpired(k.expiresAt ?? null)
-                    ? 'border-red-200 bg-red-50/50'
-                    : isExpiringSoon(k.expiresAt ?? null)
-                      ? 'border-yellow-300 bg-yellow-50/50'
-                      : 'border-rule'
-                }`}
-              >
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium">{k.name}</span>
-                    {k.start && (
-                      <span className="text-ink-muted font-mono text-xs">{k.start}…</span>
-                    )}
-                  </div>
-                  <div className="text-ink-muted mt-0.5 flex flex-wrap items-center gap-2 text-xs">
-                    <span className="border-rule border px-1 py-0.5">
-                      {getScope(k.permissions)}
+      {keys.length === 0 ? (
+        <p className="text-ink-muted text-sm">No API keys for this organization.</p>
+      ) : (
+        <div className="mb-8 space-y-2">
+          {keys.map((k) => (
+            <div
+              key={k.id}
+              className={`rounded-surface flex items-center justify-between border p-3 ${
+                isExpired(k.expiresAt ?? null)
+                  ? 'border-red-200 bg-red-50/50'
+                  : isExpiringSoon(k.expiresAt ?? null)
+                    ? 'border-yellow-300 bg-yellow-50/50'
+                    : 'border-rule'
+              }`}
+            >
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{k.name}</span>
+                  {k.start && <span className="text-ink-muted font-mono text-xs">{k.start}…</span>}
+                </div>
+                <div className="text-ink-muted mt-0.5 flex flex-wrap items-center gap-2 text-xs">
+                  <Badge>{getScope(k.permissions)}</Badge>
+                  {k.metadata?.collectionIds?.length && (
+                    <Badge>
+                      {k.metadata.collectionIds
+                        .map((id) => collections.find((c) => c.id === id)?.slug ?? id.slice(0, 8))
+                        .join(', ')}
+                    </Badge>
+                  )}
+                  <span>Created {new Date(k.createdAt).toLocaleDateString()}</span>
+                  {k.expiresAt && !isExpired(k.expiresAt) && (
+                    <span
+                      className={isExpiringSoon(k.expiresAt) ? 'font-medium text-yellow-700' : ''}
+                    >
+                      · Expires {new Date(k.expiresAt).toLocaleDateString()}
                     </span>
-                    {k.metadata?.collectionIds?.length && (
-                      <span className="border-rule border px-1 py-0.5">
-                        {k.metadata.collectionIds
-                          .map((id) => collections.find((c) => c.id === id)?.slug ?? id.slice(0, 8))
-                          .join(', ')}
-                      </span>
-                    )}
-                    <span>Created {new Date(k.createdAt).toLocaleDateString()}</span>
-                    {k.expiresAt && !isExpired(k.expiresAt) && (
-                      <span
-                        className={isExpiringSoon(k.expiresAt) ? 'font-medium text-yellow-700' : ''}
-                      >
-                        · Expires {new Date(k.expiresAt).toLocaleDateString()}
-                      </span>
-                    )}
-                    {isExpired(k.expiresAt ?? null) && (
-                      <span className="font-medium text-red-700">· Expired</span>
-                    )}
-                  </div>
+                  )}
+                  {isExpired(k.expiresAt ?? null) && (
+                    <span className="font-medium text-red-700">· Expired</span>
+                  )}
                 </div>
-                {isAdmin && (
-                  <button
-                    onClick={() => handleDeleteKey(k.id)}
-                    className="text-xs text-red-700 hover:underline"
-                  >
-                    Revoke
-                  </button>
-                )}
               </div>
-            ))}
-          </div>
-        )}
-
-        {/* API Playground */}
-        <div className="border-rule border-t pt-8">
-          <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-            API Playground
-          </h2>
-          <p className="text-ink-muted mb-4 text-xs">
-            Test API calls using your session. Select an example to get started.
-          </p>
-          <ApiPlayground
-            slug={owner!}
-            collections={collections.map((c: any) => ({ id: c.id, slug: c.slug }))}
-          />
+              {isAdmin && (
+                <Button variant="dangerLink" size="sm" onClick={() => handleRevokeKey(k.id)}>
+                  Revoke
+                </Button>
+              )}
+            </div>
+          ))}
         </div>
+      )}
+
+      {/* API Playground */}
+      <div className="border-rule border-t pt-8">
+        <SectionHeading>API Playground</SectionHeading>
+        <p className="text-ink-muted mb-4 text-xs">
+          Test API calls using your session. Select an endpoint to get started.
+        </p>
+        <ApiPlayground
+          slug={owner!}
+          collections={collections.map((c: any) => ({ id: c.id, slug: c.slug }))}
+        />
       </div>
-    </BaseLayout>
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/[owner]/settings/members.data.ts b/src/routes/[owner]/settings/members.data.ts
index e54bd7a..aab0d57 100644
--- a/src/routes/[owner]/settings/members.data.ts
+++ b/src/routes/[owner]/settings/members.data.ts
@@ -1,16 +1,7 @@
-import type { LoaderFunctionArgs } from 'react-router'
+import { requireAuth } from '~/lib/auth-middleware'
 
-import { fetchBase } from '~/lib/fetch-base'
+export const middleware = [requireAuth]
 
 export const handle = {
   title: (params: Record<string, string>) => `Members — ${params.owner} · Underlay`,
 }
-
-export async function loader({ params, request }: LoaderFunctionArgs) {
-  const base = fetchBase(request.url)
-  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
-
-  const res = await fetch(new URL(`/api/accounts/${params.owner}`, base), { headers })
-  if (!res.ok) throw new Response('Not Found', { status: 404 })
-  return { orgData: await res.json() }
-}
diff --git a/src/routes/[owner]/settings/members.tsx b/src/routes/[owner]/settings/members.tsx
index 5730108..d7b7100 100644
--- a/src/routes/[owner]/settings/members.tsx
+++ b/src/routes/[owner]/settings/members.tsx
@@ -1,7 +1,8 @@
 import { type FormEvent, useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router'
 
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { orgSettingsRail } from '~/components/SettingsLayout'
+import { Alert, Badge, Button, Input } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 import { authClient } from '~/lib/auth-client'
 
@@ -43,12 +44,7 @@ export default function OwnerSettingsMembers() {
     loadInvitations(orgId)
   }, [orgId])
 
-  if (!currentUser) {
-    window.location.href = '/login'
-    return null
-  }
-
-  if (!org) {
+  if (currentUser && !org) {
     window.location.href = `/${owner}`
     return null
   }
@@ -141,163 +137,154 @@ export default function OwnerSettingsMembers() {
   const pendingInvitations = invitations.filter((i: any) => i.status === 'pending')
 
   return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <nav className="text-ink-muted mb-6 text-xs">
-          <Link to={`/${owner}`} className="hover:text-ink">
+    <SettingsLayout
+      crumb={
+        <nav>
+          <Link to={`/${owner}`} className="text-link hover:underline">
             {owner}
-          </Link>
-          <span className="mx-1">/</span>
-          <span className="text-ink font-medium">settings</span>
-        </nav>
-
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Organization Settings</h1>
-
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to={`/${owner}/settings`} className="text-ink-muted hover:text-ink">
-            Profile
-          </Link>
-          <Link to={`/${owner}/settings/members`} className="text-ink font-medium">
-            Members
-          </Link>
-          <Link to={`/${owner}/settings/keys`} className="text-ink-muted hover:text-ink">
-            API Keys
-          </Link>
+          </Link>{' '}
+          <span className="text-ink-muted">/</span> <span className="text-ink-muted">settings</span>
         </nav>
+      }
+      title="Members"
+      description="Who can push to and administer this organization's collections."
+      groups={orgSettingsRail(owner!)}
+    >
+      {success && (
+        <Alert variant="success" className="mb-4">
+          {success}
+        </Alert>
+      )}
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
 
-        {success && (
-          <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-            {success}
-          </p>
-        )}
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
-          </p>
-        )}
-
-        <h2 className="text-ink-muted mb-4 text-sm font-semibold tracking-wide uppercase">
-          Members ({members.length})
-        </h2>
-
-        <div className="mb-6 space-y-2">
-          {members.map((m: any) => (
-            <div key={m.id} className="border-rule flex items-center justify-between border p-3">
-              <div className="flex items-center gap-3">
-                <span className="text-sm font-medium">{m.user?.name ?? m.userId}</span>
-                <span className="text-ink-muted text-xs">{m.user?.email}</span>
-                {isOwner && m.userId !== currentUser.id ? (
-                  <select
-                    value={m.role}
-                    onChange={(e) => handleChangeRole(m.id, e.target.value)}
-                    className="bg-parchment border-rule cursor-pointer border px-1.5 py-0.5 text-xs"
-                  >
-                    <option value="member">Member</option>
-                    <option value="admin">Admin</option>
-                    <option value="owner">Owner</option>
-                  </select>
-                ) : (
-                  <span className="border-rule border px-1.5 py-0.5 text-xs">{m.role}</span>
-                )}
-              </div>
-              <div className="flex items-center gap-2">
-                {isAdmin && m.userId !== currentUser.id && (
-                  <button
-                    onClick={() => handleRemoveMember(m.id)}
-                    className="text-xs text-red-700 hover:underline"
-                  >
-                    Remove
-                  </button>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {isAdmin && (
-          <div className="border-rule space-y-4 border-t pt-6">
-            <h3 className="text-ink-muted text-xs font-semibold">Invite by email</h3>
-            <form onSubmit={handleInviteMember} className="flex items-end gap-3">
-              <div className="flex-1">
-                <label htmlFor="inviteEmail" className="mb-1 block text-xs font-medium">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  id="inviteEmail"
-                  value={inviteEmail}
-                  onChange={(e) => setInviteEmail(e.target.value)}
-                  required
-                  placeholder="user@example.com"
-                  className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label htmlFor="inviteRole" className="mb-1 block text-xs font-medium">
-                  Role
-                </label>
+      <div className="mb-6 space-y-2">
+        {members.map((m: any) => (
+          <div
+            key={m.id}
+            className="border-rule rounded-surface flex items-center justify-between border p-3"
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium">{m.user?.name ?? m.userId}</span>
+              <span className="text-ink-muted text-xs">{m.user?.email}</span>
+              {isOwner && m.userId !== currentUser.id ? (
                 <select
-                  id="inviteRole"
-                  value={inviteRole}
-                  onChange={(e) => setInviteRole(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink border px-3 py-2 text-sm focus:outline-none"
+                  value={m.role}
+                  onChange={(e) => handleChangeRole(m.id, e.target.value)}
+                  className="bg-parchment border-rule rounded-control cursor-pointer border px-1.5 py-0.5 text-xs"
                 >
                   <option value="member">Member</option>
                   <option value="admin">Admin</option>
-                  {isOwner && <option value="owner">Owner</option>}
+                  <option value="owner">Owner</option>
                 </select>
-              </div>
-              <button
-                type="submit"
-                disabled={submitting}
-                className="bg-ink text-parchment px-4 py-2 text-sm font-medium whitespace-nowrap transition-opacity hover:opacity-90"
-              >
-                Invite
-              </button>
-            </form>
+              ) : (
+                <Badge>{m.role}</Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {isAdmin && m.userId !== currentUser.id && (
+                <Button variant="dangerLink" size="sm" onClick={() => handleRemoveMember(m.id)}>
+                  Remove
+                </Button>
+              )}
+            </div>
           </div>
-        )}
+        ))}
+      </div>
 
-        {pendingInvitations.length > 0 && (
-          <div className="border-rule mt-6 border-t pt-6">
-            <h3 className="text-ink-muted mb-2 text-xs font-semibold">Pending Invitations</h3>
-            <div className="space-y-2">
-              {pendingInvitations.map((inv: any) => (
-                <div
-                  key={inv.id}
-                  className="border-rule flex items-center justify-between border border-dashed p-3"
-                >
-                  <div className="flex items-center gap-3">
-                    <span className="font-mono text-sm">{inv.email}</span>
-                    <span className="border-rule border px-1.5 py-0.5 text-xs">{inv.role}</span>
-                    {inv.expiresAt && (
-                      <span className="text-ink-muted text-xs">
-                        Expires {new Date(inv.expiresAt).toLocaleDateString()}
-                      </span>
-                    )}
-                  </div>
-                  {isAdmin && (
-                    <button
-                      onClick={() => handleCancelInvitation(inv.id)}
-                      className="text-xs text-red-700 hover:underline"
-                    >
-                      Cancel
-                    </button>
+      {isAdmin && (
+        <div className="border-rule space-y-4 border-t pt-6">
+          <h3 className="text-ink-muted text-xs font-semibold">Invite by email</h3>
+          <form onSubmit={handleInviteMember} className="flex items-end gap-3">
+            <div className="flex-1">
+              <label htmlFor="inviteEmail" className="mb-1 block text-xs font-medium">
+                Email
+              </label>
+              <Input
+                type="email"
+                id="inviteEmail"
+                value={inviteEmail}
+                onChange={(e) => setInviteEmail(e.target.value)}
+                required
+                placeholder="user@example.com"
+              />
+            </div>
+            <div>
+              <label htmlFor="inviteRole" className="mb-1 block text-xs font-medium">
+                Role
+              </label>
+              <select
+                id="inviteRole"
+                value={inviteRole}
+                onChange={(e) => setInviteRole(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control cursor-pointer border px-3 py-2 text-sm focus:outline-none"
+              >
+                <option value="member">Member</option>
+                <option value="admin">Admin</option>
+                {isOwner && <option value="owner">Owner</option>}
+              </select>
+            </div>
+            <Button type="submit" disabled={submitting} className="whitespace-nowrap">
+              {submitting ? 'Sending…' : 'Invite'}
+            </Button>
+          </form>
+        </div>
+      )}
+
+      {pendingInvitations.length > 0 && (
+        <div className="border-rule mt-6 border-t pt-6">
+          <h3 className="text-ink-muted mb-2 text-xs font-semibold">Pending Invitations</h3>
+          <div className="space-y-2">
+            {pendingInvitations.map((inv: any) => (
+              <div
+                key={inv.id}
+                className="border-rule rounded-surface flex items-center justify-between border border-dashed p-3"
+              >
+                <div className="flex items-center gap-3">
+                  <span className="font-mono text-sm">{inv.email}</span>
+                  <Badge>{inv.role}</Badge>
+                  {inv.expiresAt && (
+                    <span className="text-ink-muted text-xs">
+                      Expires {new Date(inv.expiresAt).toLocaleDateString()}
+                    </span>
                   )}
                 </div>
-              ))}
-            </div>
+                {isAdmin && (
+                  <Button
+                    variant="dangerLink"
+                    size="sm"
+                    onClick={() => handleCancelInvitation(inv.id)}
+                  >
+                    Cancel
+                  </Button>
+                )}
+              </div>
+            ))}
           </div>
-        )}
+        </div>
+      )}
 
-        {!isOwner && (
-          <div className="border-rule mt-6 border-t pt-4">
-            <button onClick={handleLeaveOrg} className="text-sm text-red-700 hover:underline">
-              Leave this organization
-            </button>
-          </div>
-        )}
-      </div>
-    </BaseLayout>
+      {!isOwner && (
+        <div className="border-rule mt-6 border-t pt-4">
+          <details className="group">
+            <summary className="cursor-pointer text-sm text-red-700 hover:underline">
+              Leave this organization…
+            </summary>
+            <div className="mt-3 space-y-3">
+              <p className="text-ink-muted text-sm">
+                You will lose access to this organization's private collections and settings. An
+                admin will need to re-invite you to rejoin.
+              </p>
+              <Button variant="danger" onClick={handleLeaveOrg}>
+                Leave organization
+              </Button>
+            </div>
+          </details>
+        </div>
+      )}
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/admin/discussion.tsx b/src/routes/admin/discussion.tsx
index a501ff9..667845d 100644
--- a/src/routes/admin/discussion.tsx
+++ b/src/routes/admin/discussion.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import BaseLayout from '~/components/BaseLayout'
+import { Button } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 interface PendingComment {
@@ -90,7 +91,7 @@ export default function AdminDiscussion() {
         </p>
 
         {loading ? (
-          <p className="text-ink-muted text-sm">Loading...</p>
+          <p className="text-ink-muted text-sm">Loading…</p>
         ) : (
           <>
             <section className="mb-10">
@@ -100,7 +101,7 @@ export default function AdminDiscussion() {
               ) : (
                 <div className="space-y-3">
                   {pending.map((comment) => (
-                    <div key={comment.id} className="border-rule rounded border p-4">
+                    <div key={comment.id} className="border-rule rounded-surface border p-4">
                       <div className="mb-2 flex items-center gap-2 text-xs">
                         <span className="font-medium">{comment.authorName}</span>
                         <span className="text-ink-muted">
@@ -118,18 +119,20 @@ export default function AdminDiscussion() {
                       )}
                       <p className="mb-3 text-sm">{comment.body}</p>
                       <div className="flex gap-2">
-                        <button
+                        <Button
+                          variant="success"
+                          size="sm"
                           onClick={() => handleApprove(comment.id)}
-                          className="rounded bg-green-600 px-3 py-1 text-xs text-white hover:bg-green-700"
                         >
                           Approve
-                        </button>
-                        <button
+                        </Button>
+                        <Button
+                          variant="danger"
+                          size="sm"
                           onClick={() => handleDecline(comment.id)}
-                          className="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700"
                         >
                           Decline
-                        </button>
+                        </Button>
                       </div>
                     </div>
                   ))}
@@ -146,10 +149,10 @@ export default function AdminDiscussion() {
                   {threads.map((thread) => (
                     <div
                       key={thread.id}
-                      className="border-rule flex items-center gap-3 rounded border px-4 py-3"
+                      className="border-rule rounded-surface flex items-center gap-3 border px-4 py-3"
                     >
                       <span
-                        className={`rounded px-1.5 py-0.5 text-xs font-medium ${
+                        className={`rounded-control px-1.5 py-0.5 text-xs font-medium ${
                           !thread.approvedAt
                             ? 'bg-yellow-100 text-yellow-800'
                             : thread.status === 'open'
diff --git a/src/routes/dashboard.data.ts b/src/routes/dashboard.data.ts
index 07431f5..d5f53c7 100644
--- a/src/routes/dashboard.data.ts
+++ b/src/routes/dashboard.data.ts
@@ -1,4 +1,26 @@
+import type { LoaderFunctionArgs } from 'react-router'
+
 import { requireAuth } from '~/lib/auth-middleware'
+import { fetchBase } from '~/lib/fetch-base'
 
 export const middleware = [requireAuth]
 export const handle = { title: 'Dashboard · Underlay' }
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const base = fetchBase(request.url)
+  const headers = { Cookie: request.headers.get('Cookie') ?? '' }
+
+  // One request for everything: the caller's collections (private included),
+  // enriched with stats, plus per-org counts for the facet rail.
+  const params = new URLSearchParams({ mine: 'true', limit: '100' })
+  const org = new URL(request.url).searchParams.get('org')
+  if (org) params.set('owner', org)
+
+  const res = await fetch(new URL(`/api/collections?${params}`, base), { headers })
+  if (!res.ok) return { collections: [], owners: [] }
+  const data = await res.json()
+  return {
+    collections: data.collections ?? [],
+    owners: data.facets?.owners ?? [],
+  }
+}
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index f7ffb47..0d96490 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -1,95 +1,76 @@
-import { useEffect, useState } from 'react'
-import { Link } from 'react-router'
+import { useState } from 'react'
+import { Link, useLoaderData, useSearchParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { ButtonLink, EmptyState, Input } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
+import { formatBytes, timeAgo } from '~/lib/format'
 
-interface Collection {
-  id: string
+interface DashboardCollection {
   slug: string
   name: string
   public: boolean
-  description?: string
-  semver?: string
-  lastPushAt?: string
-  createdAt?: string
-  updatedAt?: string
+  ownerSlug: string
+  ownerName: string | null
+  description: string | null
+  latestVersion: string | null
+  recordCount: number | null
+  totalBytes: number | null
+  lastPushAt: string | null
+  updatedAt: string
 }
 
-interface Org {
+interface OwnerFacet {
   slug: string
-  displayName: string
-  role: string
-  isDefault: boolean
-  collections: Collection[]
+  name: string | null
+  count: number
 }
 
-function timeAgo(dateStr: string): string {
-  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
-  if (seconds < 60) return 'just now'
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  if (days < 30) return `${days}d ago`
-  const months = Math.floor(days / 30)
-  if (months < 12) return `${months}mo ago`
-  return `${Math.floor(months / 12)}y ago`
-}
+const FACET_COLLAPSE_COUNT = 8
 
 export default function Dashboard() {
   const { currentUser } = useAppContext()
-  const [orgs, setOrgs] = useState<Org[]>([])
-  const [filter, setFilter] = useState('')
+  const { collections, owners } = useLoaderData() as {
+    collections: DashboardCollection[]
+    owners: OwnerFacet[]
+  }
+  const [searchParams] = useSearchParams()
+  const selectedOrg = searchParams.get('org')
 
-  useEffect(() => {
-    if (!currentUser) return
+  const [filter, setFilter] = useState('')
+  const [showAllOrgs, setShowAllOrgs] = useState(false)
 
-    if (currentUser.orgs?.length) {
-      Promise.all(
-        currentUser.orgs.map(async (org: any) => {
-          const res = await fetch(`/api/accounts/${org.slug}/collections`, {
-            credentials: 'include',
-          })
-          return {
-            slug: org.slug,
-            displayName: org.name ?? org.displayName,
-            role: org.role,
-            isDefault: !!org.isDefault,
-            collections: res.ok ? await res.json() : [],
-          }
-        }),
-      ).then(setOrgs)
-    }
-  }, [currentUser])
+  const personalSlug: string | undefined = currentUser?.orgs?.find((o: any) => o.isDefault)?.slug
 
-  const allCollections = orgs
-    .flatMap((org) =>
-      org.collections.map((c) => ({ ...c, orgSlug: org.slug, orgName: org.displayName })),
-    )
-    .sort((a, b) => {
-      if (a.updatedAt && b.updatedAt)
-        return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-      if (a.updatedAt) return -1
-      if (b.updatedAt) return 1
-      return a.slug.localeCompare(b.slug)
-    })
+  // Personal org first, then by collection count (the server's order).
+  const sortedOwners = [...owners].sort((a, b) => {
+    if (a.slug === personalSlug) return -1
+    if (b.slug === personalSlug) return 1
+    return b.count - a.count
+  })
+  const visibleOwners = showAllOrgs ? sortedOwners : sortedOwners.slice(0, FACET_COLLAPSE_COUNT)
+  const hiddenOwnerCount = sortedOwners.length - visibleOwners.length
+  const totalCount = owners.reduce((sum, o) => sum + o.count, 0)
 
   const filtered = filter
-    ? allCollections.filter((c) => {
+    ? collections.filter((c) => {
         const term = filter.toLowerCase()
         return (
-          `${c.orgSlug}/${c.slug}`.includes(term) ||
+          `${c.ownerSlug}/${c.slug}`.includes(term) ||
+          (c.name ?? '').toLowerCase().includes(term) ||
           (c.description ?? '').toLowerCase().includes(term)
         )
       })
-    : allCollections
+    : collections
+
+  const facetBase = 'flex items-center gap-2 rounded-control px-2 py-1.5 text-sm transition-colors'
+  const facetActive = `${facetBase} bg-parchment-dark text-ink font-medium`
+  const facetInactive = `${facetBase} text-ink-light hover:bg-parchment-dark/50 hover:text-ink`
 
   return (
     <BaseLayout>
       <div className="mx-auto flex max-w-5xl gap-6 px-4 py-8">
-        {/* Left sidebar */}
+        {/* Left rail: org facets */}
         <div className="hidden w-52 shrink-0 md:block">
           <div className="mb-1 flex items-center justify-between">
             <h3 className="text-ink-muted text-[11px] font-semibold tracking-wide uppercase">
@@ -103,24 +84,46 @@ export default function Dashboard() {
             </Link>
           </div>
           <div className="mb-5 space-y-0.5">
-            {orgs.map((org) => (
+            <Link to="/dashboard" className={selectedOrg ? facetInactive : facetActive}>
+              <span className="min-w-0 truncate">All collections</span>
+              <span className="text-ink-muted ml-auto font-mono text-[10px]">{totalCount}</span>
+            </Link>
+            {visibleOwners.map((org) => (
               <Link
                 key={org.slug}
-                to={`/${org.slug}`}
-                className="hover:bg-parchment-dark flex items-center gap-2 rounded px-2 py-1.5 transition-colors"
+                to={`/dashboard?org=${encodeURIComponent(org.slug)}`}
+                className={selectedOrg === org.slug ? facetActive : facetInactive}
               >
-                <span className="bg-parchment-dark text-ink-muted flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold">
-                  {org.displayName.charAt(0).toUpperCase()}
+                <span className="bg-parchment-dark text-ink-muted flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold">
+                  {(org.name ?? org.slug).charAt(0).toUpperCase()}
                 </span>
-                <span className="min-w-0 truncate text-sm font-medium">
-                  {org.displayName}
-                  {org.isDefault && (
+                <span className="min-w-0 truncate">
+                  {org.name ?? org.slug}
+                  {org.slug === personalSlug && (
                     <span className="text-ink-muted ml-1 font-normal">(personal)</span>
                   )}
                 </span>
-                <span className="text-ink-muted ml-auto text-[10px]">{org.collections.length}</span>
+                <span className="text-ink-muted ml-auto font-mono text-[10px]">{org.count}</span>
               </Link>
             ))}
+            {hiddenOwnerCount > 0 && (
+              <button
+                type="button"
+                onClick={() => setShowAllOrgs(true)}
+                className="text-link block cursor-pointer px-2 py-1 text-xs hover:underline"
+              >
+                Show {hiddenOwnerCount} more…
+              </button>
+            )}
+            {showAllOrgs && sortedOwners.length > FACET_COLLAPSE_COUNT && (
+              <button
+                type="button"
+                onClick={() => setShowAllOrgs(false)}
+                className="text-ink-muted hover:text-ink block cursor-pointer px-2 py-1 text-xs"
+              >
+                Show fewer
+              </button>
+            )}
           </div>
 
           <h3 className="text-ink-muted mb-2 text-[11px] font-semibold tracking-wide uppercase">
@@ -130,9 +133,6 @@ export default function Dashboard() {
             <Link to="/new" className="text-link block px-2 py-1 hover:underline">
               New collection
             </Link>
-            <Link to="/new-org" className="text-link block px-2 py-1 hover:underline">
-              New organization
-            </Link>
             <Link to="/settings/keys" className="text-link block px-2 py-1 hover:underline">
               API keys
             </Link>
@@ -145,89 +145,82 @@ export default function Dashboard() {
           </div>
         </div>
 
-        {/* Main: collections table */}
+        {/* Main: collection list */}
         <div className="min-w-0 flex-1">
           <div className="mb-3 flex items-center gap-3">
-            <input
+            <Input
               type="text"
-              placeholder="Find a collection..."
+              placeholder={
+                selectedOrg ? `Find a collection in ${selectedOrg}...` : 'Find a collection...'
+              }
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
-              className="bg-parchment border-rule focus:border-ink min-w-0 flex-1 rounded border px-3 py-1.5 text-sm focus:outline-none"
+              className="min-w-0 flex-1 py-1.5"
             />
-            <Link
-              to="/new"
-              className="bg-ink text-parchment visited:text-parchment shrink-0 rounded px-3 py-1.5 text-sm font-medium transition-opacity hover:opacity-90"
-            >
+            <ButtonLink to={selectedOrg ? `/new?owner=${selectedOrg}` : '/new'} size="sm">
               New collection
-            </Link>
+            </ButtonLink>
           </div>
 
           {filtered.length === 0 ? (
-            <div className="text-ink-muted border-rule rounded border px-4 py-8 text-center text-sm">
-              {allCollections.length === 0 ? (
-                <span>
-                  No collections yet.{' '}
-                  <Link to="/new" className="text-link hover:underline">
-                    Create your first collection
-                  </Link>
-                </span>
+            <EmptyState>
+              {collections.length === 0 ? (
+                selectedOrg ? (
+                  <span>
+                    No collections in {selectedOrg} yet.{' '}
+                    <Link to={`/new?owner=${selectedOrg}`} className="text-link hover:underline">
+                      Create one
+                    </Link>
+                  </span>
+                ) : (
+                  <span>
+                    No collections yet.{' '}
+                    <Link to="/new" className="text-link hover:underline">
+                      Create your first collection
+                    </Link>
+                  </span>
+                )
               ) : (
                 'No collections match your search.'
               )}
-            </div>
+            </EmptyState>
           ) : (
-            <div className="border-rule overflow-hidden rounded border">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="bg-ink/5 text-ink-muted text-left text-xs">
-                    <th className="py-2 pr-2 pl-3 font-medium">Collection</th>
-                    <th className="px-2 py-2 font-medium">Visibility</th>
-                    <th className="px-2 py-2 font-medium">Created</th>
-                    <th className="py-2 pr-3 pl-2 text-right font-medium">Updated</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {filtered.map((c, i) => (
-                    <tr
-                      key={`${c.orgSlug}/${c.slug}`}
-                      className={`hover:bg-parchment-dark transition-colors ${
-                        i < filtered.length - 1 ? 'border-rule border-b' : ''
-                      }`}
+            <div className="border-rule rounded-surface divide-rule divide-y overflow-hidden border">
+              {filtered.map((c) => (
+                <div
+                  key={`${c.ownerSlug}/${c.slug}`}
+                  className="hover:bg-parchment-dark/40 px-3 py-2.5 transition-colors"
+                >
+                  <div className="flex items-baseline gap-2">
+                    <Link
+                      to={`/${c.ownerSlug}/${c.slug}`}
+                      className="text-link min-w-0 truncate text-sm font-medium hover:underline"
                     >
-                      <td className="py-2 pr-2 pl-3">
-                        <Link
-                          to={`/${c.orgSlug}/${c.slug}`}
-                          className="text-link font-medium hover:underline"
-                        >
-                          <span className="text-ink-muted font-normal">{c.orgSlug}/</span>
-                          {c.slug}
-                        </Link>
-                        {c.description && (
-                          <p className="text-ink-muted mt-0.5 line-clamp-1 text-xs">
-                            {c.description}
-                          </p>
-                        )}
-                      </td>
-                      <td className="px-2 py-2">
-                        <span className="text-ink-muted text-xs">
-                          {c.public ? 'public' : 'private'}
-                        </span>
-                      </td>
-                      <td className="px-2 py-2">
-                        <span className="text-ink-muted text-xs">
-                          {c.createdAt ? timeAgo(c.createdAt) : '--'}
-                        </span>
-                      </td>
-                      <td className="py-2 pr-3 pl-2 text-right">
-                        <span className="text-ink-muted text-xs">
-                          {c.updatedAt ? timeAgo(c.updatedAt) : '--'}
-                        </span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                      <span className="text-ink-muted font-normal">{c.ownerSlug}/</span>
+                      {c.slug}
+                    </Link>
+                    {!c.public && (
+                      <span className="border-rule text-ink-muted rounded-control shrink-0 border px-1 py-px font-mono text-[10px]">
+                        private
+                      </span>
+                    )}
+                    <span className="text-ink-muted ml-auto shrink-0 font-mono text-[11px]">
+                      {c.latestVersion ? (
+                        <>
+                          v{c.latestVersion} · {(c.recordCount ?? 0).toLocaleString()} records
+                          {c.totalBytes ? ` · ${formatBytes(c.totalBytes)}` : ''}
+                          {c.lastPushAt ? ` · pushed ${timeAgo(c.lastPushAt)}` : ''}
+                        </>
+                      ) : (
+                        <>empty · created {timeAgo(c.updatedAt)}</>
+                      )}
+                    </span>
+                  </div>
+                  {c.description && (
+                    <p className="text-ink-muted mt-0.5 line-clamp-1 text-xs">{c.description}</p>
+                  )}
+                </div>
+              ))}
             </div>
           )}
         </div>
diff --git a/src/routes/docs/api/accounts.tsx b/src/routes/docs/api/accounts.tsx
index 122602b..f7f008d 100644
--- a/src/routes/docs/api/accounts.tsx
+++ b/src/routes/docs/api/accounts.tsx
@@ -76,7 +76,7 @@ export default function DocsApiAccounts() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{meRes}</code>
         </pre>
       </div>
@@ -90,7 +90,7 @@ export default function DocsApiAccounts() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{accountRes}</code>
         </pre>
       </div>
@@ -105,13 +105,13 @@ export default function DocsApiAccounts() {
           plugin.
         </p>
         <h3>Request</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{createKeyReq}</code>
         </pre>
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{createKeyRes}</code>
         </pre>
       </div>
@@ -134,13 +134,13 @@ export default function DocsApiAccounts() {
         <p className="scope">Auth: session or API key (any scope)</p>
         <p>Revoke an API key.</p>
         <h3>Request</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{deleteKeyReq}</code>
         </pre>
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{deleteKeyRes}</code>
         </pre>
       </div>
diff --git a/src/routes/docs/api/collections.tsx b/src/routes/docs/api/collections.tsx
index 56decc1..181edf4 100644
--- a/src/routes/docs/api/collections.tsx
+++ b/src/routes/docs/api/collections.tsx
@@ -143,7 +143,7 @@ export default function DocsApiCollections() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{browseRes}</code>
         </pre>
       </div>
@@ -158,13 +158,13 @@ export default function DocsApiCollections() {
           org.
         </p>
         <h3>Request</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{createReq}</code>
         </pre>
         <h3>
           Response <span className="text-ink-muted font-normal">201</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{createRes}</code>
         </pre>
       </div>
@@ -178,7 +178,7 @@ export default function DocsApiCollections() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{getRes}</code>
         </pre>
       </div>
@@ -190,13 +190,13 @@ export default function DocsApiCollections() {
         <p className="scope">Auth: write scope</p>
         <p>Update collection metadata. Pass only the fields to change.</p>
         <h3>Request</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{updateReq}</code>
         </pre>
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{okRes}</code>
         </pre>
       </div>
@@ -213,7 +213,7 @@ export default function DocsApiCollections() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{okRes}</code>
         </pre>
       </div>
@@ -227,7 +227,7 @@ export default function DocsApiCollections() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{listRes}</code>
         </pre>
       </div>
@@ -244,7 +244,7 @@ export default function DocsApiCollections() {
           fields without pushing new records.
         </p>
         <h3>Request</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{metadataReq}</code>
         </pre>
         <h3>Fields</h3>
@@ -284,7 +284,7 @@ export default function DocsApiCollections() {
         <h3>
           Response <span className="text-ink-muted font-normal">201</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{metadataRes}</code>
         </pre>
         <h3>Errors</h3>
@@ -318,7 +318,7 @@ export default function DocsApiCollections() {
           <code>403</code> rather than leaked. Members of the source org can always fork.
         </p>
         <h3>Request</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{forkReq}</code>
         </pre>
         <h3>Fields</h3>
@@ -346,7 +346,7 @@ export default function DocsApiCollections() {
         <h3>
           Response <span className="text-ink-muted font-normal">201</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{forkRes}</code>
         </pre>
         <h3>Errors</h3>
diff --git a/src/routes/docs/api/files.tsx b/src/routes/docs/api/files.tsx
index b1a270b..594956a 100644
--- a/src/routes/docs/api/files.tsx
+++ b/src/routes/docs/api/files.tsx
@@ -99,7 +99,7 @@ export default function DocsApiFiles() {
           </tbody>
         </table>
         <h3>Example</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{headExample}</code>
         </pre>
       </div>
@@ -123,7 +123,7 @@ export default function DocsApiFiles() {
           the API path. To resolve many files in one request, see the bulk-presign endpoint below.
         </p>
         <h3>Example</h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{getExample}</code>
         </pre>
       </div>
@@ -155,13 +155,13 @@ export default function DocsApiFiles() {
           Send the file as the raw request body with the appropriate <code>Content-Type</code>{' '}
           header.
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{putExample}</code>
         </pre>
         <h3>
           Response <span className="text-ink-muted font-normal">201</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{putRes}</code>
         </pre>
         <h3>Errors</h3>
@@ -191,7 +191,7 @@ export default function DocsApiFiles() {
       <p>
         To link a file to a record, use the <code>$file</code> convention:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{fileRefExample}</code>
       </pre>
       <p>
diff --git a/src/routes/docs/api/index.tsx b/src/routes/docs/api/index.tsx
index 349af6c..e593fbe 100644
--- a/src/routes/docs/api/index.tsx
+++ b/src/routes/docs/api/index.tsx
@@ -16,7 +16,7 @@ export default function DocsApi() {
       </p>
 
       <h2>Base URL</h2>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{'https://underlay.org/api'}</code>
       </pre>
 
@@ -43,7 +43,7 @@ export default function DocsApi() {
 
       <h3>API Keys (recommended for scripts &amp; apps)</h3>
       <p>Pass your key as a Bearer token:</p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{'Authorization: Bearer ul_a1b2c3d4e5...'}</code>
       </pre>
       <p>Keys have two grantable scopes:</p>
@@ -140,7 +140,7 @@ export default function DocsApi() {
       <p>
         Errors return a JSON body with <code>error</code> and <code>statusCode</code>:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{`{
   "error": "Authentication required",
   "statusCode": 401
diff --git a/src/routes/docs/api/versions.tsx b/src/routes/docs/api/versions.tsx
index 8135df3..be7c8b9 100644
--- a/src/routes/docs/api/versions.tsx
+++ b/src/routes/docs/api/versions.tsx
@@ -224,7 +224,7 @@ export default function DocsApiVersions() {
           server checks which record and file hashes it already has and returns what it still needs.
         </p>
         <h4>Request</h4>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{negotiateReq}</code>
         </pre>
         <h4>Fields</h4>
@@ -307,7 +307,7 @@ export default function DocsApiVersions() {
         <h4>
           Response <span className="text-ink-muted font-normal">200</span>
         </h4>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{negotiateRes}</code>
         </pre>
 
@@ -318,14 +318,14 @@ export default function DocsApiVersions() {
           few million records it would be hundreds of megabytes, parsed whole. Instead, omit{' '}
           <code>manifest</code> and declare how many records you will send:
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{chunkedStartReq}</code>
         </pre>
         <p>
           The server opens the session without asking for any records yet — nothing in this response
           is proportional to the collection:
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{chunkedStartRes}</code>
         </pre>
         <p>
@@ -336,7 +336,7 @@ export default function DocsApiVersions() {
           records from <em>that chunk</em> the server still needs, so you can start sending bodies
           before the whole manifest is uploaded:
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{manifestChunkRes}</code>
         </pre>
         <p>
@@ -365,14 +365,14 @@ export default function DocsApiVersions() {
           <code>needed_records</code> was empty, skip this step and go directly to commit.
         </p>
         <h4>Request</h4>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{`{"id":"pub-002","type":"Publication","data":{"title":"New Paper"}}
 {"id":"pub-003","type":"Publication","data":{"title":"Another Paper"}}`}</code>
         </pre>
         <h4>
           Response <span className="text-ink-muted font-normal">200</span>
         </h4>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{recordsRes}</code>
         </pre>
         <p>
@@ -389,7 +389,7 @@ export default function DocsApiVersions() {
         <h4>
           Response <span className="text-ink-muted font-normal">201</span>
         </h4>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{commitRes}</code>
         </pre>
 
@@ -400,7 +400,7 @@ export default function DocsApiVersions() {
           <code>?async=true</code> (or <code>{'{"async": true}'}</code> in the body) and the server
           answers <code>202</code> immediately and builds the version in the background:
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{asyncCommitRes}</code>
         </pre>
         <p>
@@ -410,7 +410,7 @@ export default function DocsApiVersions() {
           <code>error</code> holds the rejection body it would have returned instead, so the two
           paths are interchangeable apart from timing.
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{sessionPollRes}</code>
         </pre>
         <p className="text-ink-muted">
@@ -450,7 +450,7 @@ export default function DocsApiVersions() {
           a file referenced publicly in v1 stays downloadable after the referencing record is
           redacted in v2.
         </p>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{`"schemas": {
   "Article": {
     "type": "object",
@@ -556,7 +556,7 @@ export default function DocsApiVersions() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{listRes}</code>
         </pre>
       </div>
@@ -632,7 +632,7 @@ export default function DocsApiVersions() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{getRecordsRes}</code>
         </pre>
         <p>
@@ -685,7 +685,7 @@ export default function DocsApiVersions() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{ndjsonRes}</code>
         </pre>
         <p>
@@ -759,13 +759,13 @@ export default function DocsApiVersions() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{manifestRes}</code>
         </pre>
         <h3>
           Response with <code>?since=</code> <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{manifestDeltaRes}</code>
         </pre>
         <p>
@@ -823,7 +823,7 @@ export default function DocsApiVersions() {
         <h3>
           Response <span className="text-ink-muted font-normal">200</span>
         </h3>
-        <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+        <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
           <code>{diffRes}</code>
         </pre>
       </div>
diff --git a/src/routes/docs/concepts.tsx b/src/routes/docs/concepts.tsx
index b552f0b..44f1d15 100644
--- a/src/routes/docs/concepts.tsx
+++ b/src/routes/docs/concepts.tsx
@@ -72,7 +72,7 @@ export default function DocsConcepts() {
         A <strong>record</strong> is a flat JSON object with an <code>id</code>, a <code>type</code>
         , and a <code>data</code> payload. Records are the rows of your data.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{recordExample}</code>
       </pre>
       <p>
@@ -173,7 +173,7 @@ export default function DocsConcepts() {
         <strong>manifest entry</strong> in the negotiate request — not in the record body, which is
         hashed as <code>{'{id, type, data}'}</code> and would reject the extra key:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>
           {'{"id": "pub-001", "type": "Publication", "hash": "abc123…", "private": true}'}
         </code>
diff --git a/src/routes/docs/integration.tsx b/src/routes/docs/integration.tsx
index 2d4ebac..bf5403f 100644
--- a/src/routes/docs/integration.tsx
+++ b/src/routes/docs/integration.tsx
@@ -139,7 +139,7 @@ export default function DocsIntegration() {
         Create an API key at <Link to="/settings/keys">/settings/keys</Link> or via the API. Pass it
         as:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{'Authorization: Bearer ul_your_key_here'}</code>
       </pre>
       <p>
@@ -174,7 +174,7 @@ export default function DocsIntegration() {
           On <code>409 Conflict</code>, re-fetch latest and retry from step 3
         </li>
       </ol>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{diffPush}</code>
       </pre>
       <p>
@@ -194,7 +194,7 @@ export default function DocsIntegration() {
         sorted recursively. This ensures any implementation produces the same hash for the same
         content.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{hashExample}</code>
       </pre>
       <p>
@@ -239,7 +239,7 @@ export default function DocsIntegration() {
         The negotiate request for a first push. Include <code>schemas</code> (a per-type JSON Schema
         map), <code>metadata</code>, and a <code>manifest</code> of record hashes:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{pushExample}</code>
       </pre>
       <p>
@@ -252,7 +252,7 @@ export default function DocsIntegration() {
 
       <h2>Mapping a SQL Database</h2>
       <p>Most apps store data in SQL. Here's how to map it to Underlay records:</p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{sqlIntrospect}</code>
       </pre>
       <p>General rules:</p>
diff --git a/src/routes/docs/quickstart.tsx b/src/routes/docs/quickstart.tsx
index 1a6db95..00f306a 100644
--- a/src/routes/docs/quickstart.tsx
+++ b/src/routes/docs/quickstart.tsx
@@ -148,7 +148,7 @@ export default function DocsQuickstart() {
         Underlay instance.
       </p>
 
-      <div className="border-rule bg-parchment-dark/30 mb-6 rounded border p-4">
+      <div className="border-rule bg-parchment-dark/30 rounded-surface mb-6 border p-4">
         <p className="mt-0 mb-2 text-sm font-semibold">Fastest path: use an AI agent</p>
         <p className="text-ink-muted mb-0 text-sm">
           Point your coding agent at{' '}
@@ -173,7 +173,7 @@ export default function DocsQuickstart() {
         </Link>{' '}
         and create a write-scoped key.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{loginNote}</code>
       </pre>
       <p>
@@ -181,7 +181,7 @@ export default function DocsQuickstart() {
       </p>
 
       <h2>2. Create a collection</h2>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{createCollectionCode}</code>
       </pre>
 
@@ -198,7 +198,7 @@ export default function DocsQuickstart() {
       <p>
         Hash each record and send the manifest. The server tells you which records it already has.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{negotiateCode}</code>
       </pre>
 
@@ -208,17 +208,17 @@ export default function DocsQuickstart() {
         batches of up to 10,000 records per request. Skip this step if <code>needed_records</code>{' '}
         is empty.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{sendRecordsCode}</code>
       </pre>
 
       <h3>3c. Commit</h3>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{commitCode}</code>
       </pre>
 
       <h2>4. Read it back</h2>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{readCode}</code>
       </pre>
 
@@ -227,12 +227,12 @@ export default function DocsQuickstart() {
         On subsequent pushes, set <code>base_version</code> to the current latest. The server
         deduplicates, so only new or changed records need to be sent.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{updateCode}</code>
       </pre>
 
       <h2>6. Diff versions</h2>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{diffCode}</code>
       </pre>
 
@@ -243,13 +243,13 @@ export default function DocsQuickstart() {
         This ensures any client produces the same hash for the same data regardless of key insertion
         order.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{hashingNote}</code>
       </pre>
 
       <h2>Working with files</h2>
       <p>To attach files (PDFs, images, etc.) to records, upload them first by hash:</p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{filesCode}</code>
       </pre>
 
diff --git a/src/routes/docs/self-host.tsx b/src/routes/docs/self-host.tsx
index 11e9756..321ecb3 100644
--- a/src/routes/docs/self-host.tsx
+++ b/src/routes/docs/self-host.tsx
@@ -108,7 +108,7 @@ export default function DocsSelfHost() {
 
       <h2>Quick start</h2>
       <p>Clone the repo and run:</p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{quickStart}</code>
       </pre>
       <p>
@@ -119,7 +119,7 @@ export default function DocsSelfHost() {
         For local testing without a domain, omit <code>DOMAIN</code>. It defaults to{' '}
         <code>http://localhost</code>:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{localStart}</code>
       </pre>
 
@@ -129,7 +129,7 @@ export default function DocsSelfHost() {
         compose file. Only <code>DOMAIN</code> is required; everything else has sensible defaults or
         is auto-generated.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{envExample}</code>
       </pre>
 
@@ -146,7 +146,7 @@ export default function DocsSelfHost() {
         The bundled MinIO service works out of the box, but you can replace it with any
         S3-compatible storage (AWS S3, Cloudflare R2, DigitalOcean Spaces, etc.):
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{externalS3}</code>
       </pre>
       <p>
@@ -176,7 +176,7 @@ export default function DocsSelfHost() {
         To completely reset and start fresh, remove all volumes and re-run. The init container will
         regenerate secrets:
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>{resetCmd}</code>
       </pre>
 
@@ -185,7 +185,7 @@ export default function DocsSelfHost() {
         Pull new images and restart. The app runs database migrations automatically on startup. No
         manual migration step needed.
       </p>
-      <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+      <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
         <code>
           {`docker compose -f docker-compose.withauth.yml pull\ndocker compose -f docker-compose.withauth.yml up -d`}
         </code>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 3e5c85f..636a553 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'
 import { Link, useLoaderData } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { ButtonLink } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 function HeroBackground() {
@@ -13,6 +14,9 @@ function HeroBackground() {
     const container = containerRef.current
     if (!container) return
 
+    // CSS can't stop a rAF loop, so honor reduced motion here explicitly.
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return
+
     const w = container.offsetWidth
     const h = container.offsetHeight
     const count = 14
@@ -147,12 +151,7 @@ export default function Home() {
                 independent, complete archive.
               </p>
               <div className="flex gap-3">
-                <Link
-                  to="/explore"
-                  className="bg-ink text-parchment visited:text-parchment hover:bg-ink-light inline-block rounded px-4 py-2 text-sm font-medium transition-colors"
-                >
-                  Explore collections
-                </Link>
+                <ButtonLink to="/explore">Explore collections</ButtonLink>
               </div>
             </div>
           </section>
@@ -231,18 +230,12 @@ export default function Home() {
               open-source knowledge infrastructure.
             </p>
             <div className="flex gap-3">
-              <Link
-                to="/explore"
-                className="bg-ink text-parchment visited:text-parchment hover:bg-ink-light inline-block rounded px-5 py-2.5 text-sm font-medium transition-colors"
-              >
+              <ButtonLink to="/explore" size="lg">
                 Explore collections
-              </Link>
-              <Link
-                to="/docs/quickstart"
-                className="border-ink hover:bg-parchment-dark visited:text-ink inline-block rounded border px-5 py-2.5 text-sm font-medium transition-colors"
-              >
+              </ButtonLink>
+              <ButtonLink to="/docs/quickstart" variant="secondary" size="lg">
                 Get started
-              </Link>
+              </ButtonLink>
             </div>
           </div>
         </div>
@@ -263,7 +256,7 @@ export default function Home() {
                 Explore all collections →
               </Link>
             </div>
-            <div className="border-rule overflow-hidden rounded border">
+            <div className="border-rule rounded-surface overflow-x-auto border">
               <table className="w-full text-sm">
                 <thead>
                   <tr className="bg-ink/5 text-ink-muted text-left text-xs">
@@ -325,7 +318,7 @@ export default function Home() {
                 Read the quickstart →
               </Link>
             </div>
-            <div className="bg-ink text-parchment overflow-hidden rounded font-mono text-[13px] leading-relaxed">
+            <div className="bg-ink text-parchment rounded-surface overflow-hidden font-mono text-[13px] leading-relaxed">
               <div className="p-5">
                 <div className="text-ink-muted mb-1 text-[11px] select-none">
                   # point at a collection
@@ -379,7 +372,7 @@ export default function Home() {
               </p>
               <Link
                 to="/explore"
-                className="text-parchment-dark hover:text-parchment text-xs underline"
+                className="text-parchment-dark visited:text-parchment-dark hover:text-parchment text-xs underline"
               >
                 Explore →
               </Link>
@@ -391,7 +384,7 @@ export default function Home() {
               </p>
               <Link
                 to="/docs"
-                className="text-parchment-dark hover:text-parchment text-xs underline"
+                className="text-parchment-dark visited:text-parchment-dark hover:text-parchment text-xs underline"
               >
                 Docs →
               </Link>
@@ -403,7 +396,7 @@ export default function Home() {
               </p>
               <Link
                 to="/protocol"
-                className="text-parchment-dark hover:text-parchment text-xs underline"
+                className="text-parchment-dark visited:text-parchment-dark hover:text-parchment text-xs underline"
               >
                 Protocol →
               </Link>
diff --git a/src/routes/invitations/accept.tsx b/src/routes/invitations/accept.tsx
index 9db68d3..927bd1d 100644
--- a/src/routes/invitations/accept.tsx
+++ b/src/routes/invitations/accept.tsx
@@ -2,6 +2,7 @@ import { type FormEvent, useState } from 'react'
 import { Link } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { Alert, Button, buttonClasses } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 export default function InvitationsAccept() {
@@ -45,7 +46,7 @@ export default function InvitationsAccept() {
         <h1 className="mb-6 text-xl font-semibold tracking-tight">Organization Invitation</h1>
 
         {success ? (
-          <div className="border-rule bg-parchment-dark border px-4 py-3 text-sm">
+          <div className="border-rule bg-parchment-dark rounded-surface border px-4 py-3 text-sm">
             <p className="mb-1 font-medium">You've joined the organization!</p>
             <p className="text-ink-muted mb-3 text-xs">
               You now have access to the organization's collections.
@@ -61,7 +62,7 @@ export default function InvitationsAccept() {
             )}
           </div>
         ) : error ? (
-          <div className="border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-800">
+          <Alert variant="error">
             <p>{error}</p>
             {!currentUser && token && (
               <p className="mt-2 text-xs">
@@ -82,7 +83,7 @@ export default function InvitationsAccept() {
                 first.
               </p>
             )}
-          </div>
+          </Alert>
         ) : (
           <>
             {!currentUser ? (
@@ -93,13 +94,13 @@ export default function InvitationsAccept() {
                 <div className="flex gap-3">
                   <a
                     href={`/login?return_to=${encodeURIComponent(`/invitations/accept?token=${token}`)}`}
-                    className="bg-ink text-parchment hover:bg-ink-light flex-1 py-2 text-center text-sm font-medium transition-colors"
+                    className={buttonClasses('primary', 'md', 'flex-1')}
                   >
                     Log in
                   </a>
                   <Link
                     to={`/signup?redirect=${encodeURIComponent(`/invitations/accept?token=${token}`)}`}
-                    className="border-ink hover:bg-parchment-dark flex-1 border py-2 text-center text-sm font-medium transition-colors"
+                    className={buttonClasses('secondary', 'md', 'flex-1')}
                   >
                     Sign up
                   </Link>
@@ -110,13 +111,9 @@ export default function InvitationsAccept() {
                 <p className="text-ink-muted text-sm">
                   Click below to accept the invitation and join the organization.
                 </p>
-                <button
-                  type="submit"
-                  disabled={submitting}
-                  className="bg-ink text-parchment hover:bg-ink-light w-full py-2 text-sm font-medium transition-colors"
-                >
+                <Button type="submit" disabled={submitting} className="w-full">
                   {submitting ? 'Accepting…' : 'Accept invitation'}
-                </button>
+                </Button>
               </form>
             )}
           </>
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index c24e6d2..cab26a8 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { useSearchParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { Alert, buttonClasses } from '~/components/ui'
 
 export default function LoginPage() {
   const [params] = useSearchParams()
@@ -37,14 +38,11 @@ export default function LoginPage() {
       <div className="mx-auto max-w-sm px-4 py-16">
         <h1 className="mb-6 text-xl font-semibold tracking-tight">Sign in</h1>
 
-        <div className="mb-4 border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-800">
+        <Alert variant="error" className="mb-4">
           {messages[error] ?? 'Something went wrong. Please try again.'}
-        </div>
+        </Alert>
 
-        <a
-          href="/login"
-          className="bg-ink text-parchment hover:bg-ink-light block w-full py-2 text-center text-sm font-medium transition-colors"
-        >
+        <a href="/login" className={buttonClasses('primary', 'md', 'w-full')}>
           Try again
         </a>
       </div>
diff --git a/src/routes/new-org.tsx b/src/routes/new-org.tsx
index aca6798..6d35068 100644
--- a/src/routes/new-org.tsx
+++ b/src/routes/new-org.tsx
@@ -2,6 +2,7 @@ import { type FormEvent, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { Alert, Button, Field, Input, Select } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 import { authClient } from '~/lib/auth-client'
 
@@ -79,29 +80,28 @@ export default function NewOrg() {
           <p className="text-ink-muted text-sm">Loading...</p>
         ) : (
           <form onSubmit={handleSubmit} className="space-y-5">
-            {error && (
-              <div className="rounded border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
-                {error}
-              </div>
-            )}
+            {error && <Alert variant="error">{error}</Alert>}
 
-            {/* Display Name */}
-            <div>
-              <label className="text-ink mb-1.5 block text-sm font-medium">Display name</label>
-              <input
+            <Field label="Display name">
+              <Input
                 type="text"
                 required
                 placeholder="My Organization"
                 value={displayName}
                 onChange={(e) => setDisplayName(e.target.value)}
-                className="bg-parchment border-rule focus:border-ink w-full rounded border px-3 py-2 text-sm focus:outline-none"
               />
-            </div>
-
-            {/* Slug */}
-            <div>
-              <label className="text-ink mb-1.5 block text-sm font-medium">URL slug</label>
-              <input
+            </Field>
+
+            <Field
+              label="URL slug"
+              hint={
+                <>
+                  Lowercase letters, numbers, and hyphens. This becomes the URL:{' '}
+                  <span className="font-mono">underlay.org/{slug || '...'}</span>
+                </>
+              }
+            >
+              <Input
                 type="text"
                 required
                 pattern="[a-z0-9][a-z0-9\-]*[a-z0-9]"
@@ -109,19 +109,16 @@ export default function NewOrg() {
                 placeholder="my-org"
                 value={slug}
                 onChange={(e) => setSlug(slugify(e.target.value))}
-                className="bg-parchment border-rule focus:border-ink w-full rounded border px-3 py-2 text-sm focus:outline-none"
               />
-              <p className="text-ink-muted mt-1 text-xs">
-                Lowercase letters, numbers, and hyphens. This becomes the URL:{' '}
-                <span className="font-mono">underlay.org/{slug || '...'}</span>
-              </p>
-            </div>
+            </Field>
 
             {/* KF Account — only shown when user has multiple */}
             {kfAccounts.length > 1 && (
-              <div>
-                <label className="text-ink mb-1.5 block text-sm font-medium">KF Account</label>
-                <select
+              <Field
+                label="KF Account"
+                hint="Choose which Knowledge Futures account this organization belongs to."
+              >
+                <Select
                   required
                   value={kfOrgId}
                   onChange={(e) => {
@@ -132,7 +129,6 @@ export default function NewOrg() {
                       if (!slug) setSlug(slugify(acct.name))
                     }
                   }}
-                  className="bg-parchment border-rule focus:border-ink w-full rounded border px-3 py-2 text-sm focus:outline-none"
                 >
                   <option value="">Select a KF account...</option>
                   {kfAccounts.map((a) => (
@@ -140,22 +136,19 @@ export default function NewOrg() {
                       {a.name}
                     </option>
                   ))}
-                </select>
-                <p className="text-ink-muted mt-1 text-xs">
-                  Choose which Knowledge Futures account this organization belongs to.
-                </p>
-              </div>
+                </Select>
+              </Field>
             )}
 
             <hr className="border-rule" />
 
-            <button
+            <Button
               type="submit"
               disabled={submitting || !slug || !displayName || (kfAccounts.length > 1 && !kfOrgId)}
-              className="bg-ink text-parchment w-full rounded px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+              className="w-full"
             >
               {submitting ? 'Creating...' : 'Create organization'}
-            </button>
+            </Button>
           </form>
         )}
       </div>
diff --git a/src/routes/new.tsx b/src/routes/new.tsx
index 57829a1..f5764d3 100644
--- a/src/routes/new.tsx
+++ b/src/routes/new.tsx
@@ -1,18 +1,25 @@
 import { type FormEvent, useState } from 'react'
-import { useNavigate } from 'react-router'
+import { useNavigate, useSearchParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { Alert, Button, Field, Input, Select } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 export default function NewCollection() {
   const { currentUser } = useAppContext()
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
 
   const ownerOptions = (currentUser?.orgs ?? []).map((o: any) => ({
     slug: o.slug,
     label: `${o.name ?? o.displayName ?? o.slug}${o.isDefault ? ' (personal)' : ''}`,
   }))
-  const defaultOwner = currentUser?.orgs?.find((o: any) => o.isDefault) ?? currentUser?.orgs?.[0]
+  // Prefer the org the user navigated from (?owner=), then their personal org.
+  const requestedOwner = searchParams.get('owner')
+  const defaultOwner =
+    (requestedOwner && currentUser?.orgs?.find((o: any) => o.slug === requestedOwner)) ||
+    currentUser?.orgs?.find((o: any) => o.isDefault) ||
+    currentUser?.orgs?.[0]
 
   const [owner, setOwner] = useState(defaultOwner?.slug ?? '')
   const [slug, setSlug] = useState('')
@@ -65,38 +72,36 @@ export default function NewCollection() {
         </p>
 
         <form onSubmit={handleSubmit} className="space-y-5">
-          {error && (
-            <div className="rounded border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
-              {error}
-            </div>
-          )}
+          {error && <Alert variant="error">{error}</Alert>}
 
-          {/* Owner */}
-          <div>
-            <label className="text-ink mb-1.5 block text-sm font-medium">Owner</label>
+          <Field label="Owner">
             {ownerOptions.length > 1 ? (
-              <select
-                value={owner}
-                onChange={(e) => setOwner(e.target.value)}
-                className="bg-parchment border-rule focus:border-ink w-full rounded border px-3 py-2 text-sm focus:outline-none"
-              >
+              <Select value={owner} onChange={(e) => setOwner(e.target.value)}>
                 {ownerOptions.map((o: any) => (
                   <option key={o.slug} value={o.slug}>
                     {o.label}
                   </option>
                 ))}
-              </select>
+              </Select>
             ) : (
-              <div className="bg-parchment-dark border-rule rounded border px-3 py-2 text-sm">
+              <div className="bg-parchment-dark border-rule rounded-control border px-3 py-2 text-sm">
                 {ownerOptions[0]?.label ?? owner}
               </div>
             )}
-          </div>
+          </Field>
 
-          {/* Slug */}
-          <div>
-            <label className="text-ink mb-1.5 block text-sm font-medium">Collection name</label>
-            <input
+          <Field
+            label="Collection name"
+            hint={
+              <>
+                Lowercase letters, numbers, and hyphens. This becomes the URL:{' '}
+                <span className="font-mono">
+                  {owner}/{slug || '...'}
+                </span>
+              </>
+            }
+          >
+            <Input
               type="text"
               required
               pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
@@ -104,29 +109,23 @@ export default function NewCollection() {
               placeholder="my-dataset"
               value={slug}
               onChange={(e) => setSlug(slugify(e.target.value))}
-              className="bg-parchment border-rule focus:border-ink w-full rounded border px-3 py-2 text-sm focus:outline-none"
             />
-            <p className="text-ink-muted mt-1 text-xs">
-              Lowercase letters, numbers, and hyphens. This becomes the URL:{' '}
-              <span className="font-mono">
-                {owner}/{slug || '...'}
-              </span>
-            </p>
-          </div>
+          </Field>
 
-          {/* Description */}
-          <div>
-            <label className="text-ink mb-1.5 block text-sm font-medium">
-              Description <span className="text-ink-muted font-normal">(optional)</span>
-            </label>
-            <input
+          <Field
+            label={
+              <>
+                Description <span className="text-ink-muted font-normal">(optional)</span>
+              </>
+            }
+          >
+            <Input
               type="text"
               placeholder="A short description of this collection"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              className="bg-parchment border-rule focus:border-ink w-full rounded border px-3 py-2 text-sm focus:outline-none"
             />
-          </div>
+          </Field>
 
           {/* Visibility */}
           <fieldset>
@@ -138,7 +137,7 @@ export default function NewCollection() {
                   name="visibility"
                   checked={!isPublic}
                   onChange={() => setIsPublic(false)}
-                  className="mt-0.5"
+                  className="accent-ink mt-0.5"
                 />
                 <div>
                   <div className="text-sm font-medium">Private</div>
@@ -153,7 +152,7 @@ export default function NewCollection() {
                   name="visibility"
                   checked={isPublic}
                   onChange={() => setIsPublic(true)}
-                  className="mt-0.5"
+                  className="accent-ink mt-0.5"
                 />
                 <div>
                   <div className="text-sm font-medium">Public</div>
@@ -167,13 +166,9 @@ export default function NewCollection() {
 
           <hr className="border-rule" />
 
-          <button
-            type="submit"
-            disabled={submitting || !slug || !owner}
-            className="bg-ink text-parchment w-full rounded px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-          >
+          <Button type="submit" disabled={submitting || !slug || !owner} className="w-full">
             {submitting ? 'Creating...' : 'Create collection'}
-          </button>
+          </Button>
         </form>
       </div>
     </BaseLayout>
diff --git a/src/routes/protocol.tsx b/src/routes/protocol.tsx
index e806544..3e3a7b9 100644
--- a/src/routes/protocol.tsx
+++ b/src/routes/protocol.tsx
@@ -367,7 +367,7 @@ export default function Protocol() {
             <p>
               A record's identity is the SHA-256 hash of its canonical JSON. The canonical form is:
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{hashExample}</code>
             </pre>
             <p>
@@ -413,7 +413,7 @@ export default function Protocol() {
               has no private fields the two addresses coincide.
             </p>
             <p>Wire format is JSONL: one record per line, independently hashable and streamable:</p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{recordExample}</code>
             </pre>
           </RfcSection>
@@ -427,7 +427,7 @@ export default function Protocol() {
             <p>
               A version's hash is the SHA-256 of a canonical JSON object containing sorted hashes:
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{versionHashExample}</code>
             </pre>
             <p>
@@ -479,7 +479,7 @@ export default function Protocol() {
               negotiation. The client sends a manifest of record hashes, the server says which it
               needs, the client sends those records (in one or more batches), then commits.
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{negotiateExample}</code>
             </pre>
             <p>
@@ -504,7 +504,7 @@ export default function Protocol() {
               version hash a chunked, asynchronous push produces is identical to the one the simple
               flow produces from the same content.
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{scaleExample}</code>
             </pre>
             <p>
@@ -523,7 +523,7 @@ export default function Protocol() {
               Clients can fetch a full manifest or a delta between two versions. Combined with the
               batch records endpoint, this enables efficient pull synchronization.
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{pullExample}</code>
             </pre>
             <p>
@@ -592,7 +592,7 @@ export default function Protocol() {
               </a>{' '}
               documents with a few protocol-level extensions:
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{schemaExample}</code>
             </pre>
             <ul>
@@ -634,7 +634,7 @@ export default function Protocol() {
               Files are binary blobs stored by SHA-256 hash. Upload a file, then reference it from a
               record:
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{fileExample}</code>
             </pre>
             <p>
@@ -654,7 +654,7 @@ export default function Protocol() {
               Because records are content-addressed, every record hash can be traced back to every
               version and collection that includes it. The provenance endpoint returns this lineage:
             </p>
-            <pre className="bg-ink text-parchment overflow-x-auto p-3 text-xs">
+            <pre className="bg-ink text-parchment rounded-surface overflow-x-auto p-3 text-xs">
               <code>{provenanceExample}</code>
             </pre>
             <p>
@@ -766,7 +766,7 @@ export default function Protocol() {
             </p>
             <div className="space-y-4">
               {closedThreads.map((thread) => (
-                <div key={thread.id} className="border-rule rounded border p-3">
+                <div key={thread.id} className="border-rule rounded-surface border p-3">
                   <div className="mb-1 flex items-center gap-2 text-xs">
                     <span className={`font-medium ${statusColor[thread.status] ?? ''}`}>
                       {statusLabel[thread.status] ?? thread.status}
@@ -793,7 +793,7 @@ export default function Protocol() {
                   )}
                   <p className="text-sm">{thread.body}</p>
                   {thread.resolutionNote && (
-                    <div className="border-rule mt-2 rounded border bg-gray-50 px-2 py-1.5 text-xs">
+                    <div className="border-rule rounded-surface mt-2 border bg-gray-50 px-2 py-1.5 text-xs">
                       <span className="font-medium">Resolution:</span> {thread.resolutionNote}
                     </div>
                   )}
@@ -818,7 +818,7 @@ export default function Protocol() {
       {popover && currentUser && (
         <div
           ref={popoverRef}
-          className="bg-ink text-parchment fixed z-50 rounded px-3 py-1.5 text-xs font-medium shadow-lg"
+          className="bg-ink text-parchment rounded-surface fixed z-50 px-3 py-1.5 text-xs font-medium shadow-lg"
           style={{
             left: popover.x,
             top: popover.y,
diff --git a/src/routes/records/[hash].data.ts b/src/routes/records/[hash].data.ts
index 0b6ee11..763a030 100644
--- a/src/routes/records/[hash].data.ts
+++ b/src/routes/records/[hash].data.ts
@@ -1,15 +1,16 @@
 import type { LoaderFunctionArgs } from 'react-router'
 
 import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
 
 export const handle = {
   title: () => `Record · Underlay`,
 }
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
-  const base = fetchBase(request.url)
+  const api = apiUrlBuilder(request, fetchBase(request.url))
   const headers = { Cookie: request.headers.get('Cookie') ?? '' }
-  const res = await fetch(new URL(`/api/records/${params.hash}/provenance`, base), { headers })
+  const res = await fetch(api(`/api/records/${params.hash}/provenance`), { headers })
   if (!res.ok) throw new Response('Not Found', { status: 404 })
   return res.json()
 }
diff --git a/src/routes/records/[hash].tsx b/src/routes/records/[hash].tsx
index f2198eb..6c03298 100644
--- a/src/routes/records/[hash].tsx
+++ b/src/routes/records/[hash].tsx
@@ -1,6 +1,8 @@
+import { useMemo } from 'react'
 import { Link, useLoaderData, useParams } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
+import { Badge } from '~/components/ui'
 
 interface Reference {
   owner: string
@@ -21,6 +23,14 @@ interface RecordData {
   references: Reference[]
 }
 
+function shortDate(d: string): string {
+  return new Date(d).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
 export default function RecordDetailPage() {
   const params = useParams()
   const hash = params.hash!
@@ -28,6 +38,29 @@ export default function RecordDetailPage() {
 
   const fields = Object.entries(record.data)
 
+  // References arrive as one row per (collection, version); group per collection.
+  const collections = useMemo(() => {
+    const map = new Map<
+      string,
+      { owner: string; collection: string; collectionName: string; versions: Reference[] }
+    >()
+    for (const ref of record.references) {
+      const key = `${ref.owner}/${ref.collection}`
+      let entry = map.get(key)
+      if (!entry) {
+        entry = {
+          owner: ref.owner,
+          collection: ref.collection,
+          collectionName: ref.collectionName,
+          versions: [],
+        }
+        map.set(key, entry)
+      }
+      entry.versions.push(ref)
+    }
+    return [...map.values()]
+  }, [record.references])
+
   return (
     <BaseLayout>
       <div className="mx-auto max-w-5xl px-4 py-10">
@@ -35,9 +68,7 @@ export default function RecordDetailPage() {
         <div className="mb-6">
           <div className="mb-2 flex items-center gap-3">
             <h1 className="font-mono text-lg font-semibold">{hash.slice(0, 16)}…</h1>
-            <span className="border-rule text-ink-muted border px-1.5 py-0.5 text-xs">
-              {record.type}
-            </span>
+            <Badge>{record.type}</Badge>
           </div>
           <div className="text-ink-muted flex items-center gap-4 text-xs">
             <span>
@@ -53,8 +84,9 @@ export default function RecordDetailPage() {
               })}
             </span>
             <span>
-              {record.references.length} collection
-              {record.references.length !== 1 ? 's' : ''}
+              {collections.length} collection{collections.length !== 1 ? 's' : ''}
+              {record.references.length > collections.length &&
+                ` · ${record.references.length} versions`}
             </span>
           </div>
         </div>
@@ -66,7 +98,7 @@ export default function RecordDetailPage() {
             <h2 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
               Fields
             </h2>
-            <div className="border-rule overflow-hidden rounded border">
+            <div className="border-rule rounded-surface overflow-x-auto border">
               <table className="w-full text-xs">
                 <thead>
                   <tr className="bg-parchment-dark border-rule border-b">
@@ -93,7 +125,7 @@ export default function RecordDetailPage() {
             <h2 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
               Canonical JSON
             </h2>
-            <div className="border-rule overflow-hidden rounded border">
+            <div className="border-rule rounded-surface overflow-hidden border">
               <pre className="bg-ink text-parchment max-h-96 overflow-x-auto p-4 font-mono text-xs">
                 <code>
                   {JSON.stringify(
@@ -110,38 +142,56 @@ export default function RecordDetailPage() {
         {/* Provenance: which collections reference this record */}
         <div>
           <h2 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-            Appears in {record.references.length} collection
-            {record.references.length !== 1 ? 's' : ''}
+            Appears in {collections.length} collection{collections.length !== 1 ? 's' : ''}
+            {record.references.length > collections.length && (
+              <span className="font-normal normal-case">
+                {' '}
+                · {record.references.length} versions
+              </span>
+            )}
           </h2>
-          {record.references.length === 0 ? (
+          {collections.length === 0 ? (
             <p className="text-ink-muted py-4 text-sm">
               No public collections reference this record.
             </p>
           ) : (
-            <div className="border-rule overflow-hidden rounded border">
-              {record.references.map((ref, i) => (
-                <Link
-                  key={`${ref.owner}/${ref.collection}-${ref.semver}`}
-                  to={`/${ref.owner}/${ref.collection}/v/${ref.semver}?type=${record.type}`}
-                  className={`hover:bg-parchment-dark/50 flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${
-                    i < record.references.length - 1 ? 'border-rule border-b' : ''
-                  }`}
-                >
-                  <div className="flex items-center gap-3">
-                    <span className="font-medium">
-                      {ref.owner}/{ref.collection}
-                    </span>
-                    <span className="text-ink-muted text-xs">{ref.semver}</span>
+            <div className="border-rule rounded-surface overflow-hidden border">
+              {collections.map((c, i) => {
+                const times = c.versions.map((v) => new Date(v.versionCreatedAt).getTime())
+                const first = shortDate(new Date(Math.min(...times)).toISOString())
+                const last = shortDate(new Date(Math.max(...times)).toISOString())
+                return (
+                  <div
+                    key={`${c.owner}/${c.collection}`}
+                    className={`px-4 py-3 ${i < collections.length - 1 ? 'border-rule border-b' : ''}`}
+                  >
+                    <div className="mb-2 flex items-center justify-between gap-3">
+                      <Link
+                        to={`/${c.owner}/${c.collection}`}
+                        className="min-w-0 truncate text-sm font-medium hover:underline"
+                      >
+                        {c.owner}/{c.collection}
+                      </Link>
+                      <span className="text-ink-muted shrink-0 text-xs">
+                        {c.versions.length} version{c.versions.length !== 1 ? 's' : ''} ·{' '}
+                        {first === last ? first : `${first} – ${last}`}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap gap-1">
+                      {c.versions.map((v) => (
+                        <Link
+                          key={v.semver}
+                          to={`/${c.owner}/${c.collection}/v/${v.semver.replace(/^v/, '')}/records?type=${record.type}`}
+                          title={shortDate(v.versionCreatedAt)}
+                          className="border-rule text-link rounded-control hover:bg-parchment-dark border px-1.5 py-0.5 font-mono text-[11px] transition-colors"
+                        >
+                          {v.semver}
+                        </Link>
+                      ))}
+                    </div>
                   </div>
-                  <span className="text-ink-muted text-xs">
-                    {new Date(ref.versionCreatedAt).toLocaleDateString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                      year: 'numeric',
-                    })}
-                  </span>
-                </Link>
-              ))}
+                )
+              })}
             </div>
           )}
         </div>
diff --git a/src/routes/schemas/[id].data.ts b/src/routes/schemas/[id].data.ts
index 26d870e..eadef3c 100644
--- a/src/routes/schemas/[id].data.ts
+++ b/src/routes/schemas/[id].data.ts
@@ -1,15 +1,18 @@
 import type { LoaderFunctionArgs } from 'react-router'
 
 import { fetchBase } from '~/lib/fetch-base'
+import { apiUrlBuilder } from '~/lib/share-token'
 
 export const handle = {
   title: () => `Schema · Underlay`,
 }
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
-  const base = fetchBase(request.url)
+  // Forward the share token so a shared-link viewer following a schema hash
+  // out of a private collection keeps their access.
+  const api = apiUrlBuilder(request, fetchBase(request.url))
   const headers = { Cookie: request.headers.get('Cookie') ?? '' }
-  const res = await fetch(new URL(`/api/schemas/${params.id}`, base), { headers })
+  const res = await fetch(api(`/api/schemas/${params.id}`), { headers })
   if (!res.ok) throw new Response('Not Found', { status: 404 })
   return res.json()
 }
diff --git a/src/routes/schemas/[id].tsx b/src/routes/schemas/[id].tsx
index 516ae16..96c3ae0 100644
--- a/src/routes/schemas/[id].tsx
+++ b/src/routes/schemas/[id].tsx
@@ -2,6 +2,7 @@ import { Link, useLoaderData } from 'react-router'
 
 import BaseLayout from '~/components/BaseLayout'
 import SchemaLabelManager from '~/components/SchemaLabelManager'
+import { Badge } from '~/components/ui'
 
 interface SchemaData {
   id: number
@@ -21,6 +22,21 @@ export default function SchemaDetailPage() {
   const labels: { label: string; createdAt: string }[] = schema.labels ?? []
   const usage: { slug: string; semver: string; collection: string }[] = schema.usage ?? []
 
+  // Usage arrives as one row per (collection, version); group per collection + type slug.
+  const usageByCollection = (() => {
+    const map = new Map<string, { collection: string; slug: string; semvers: string[] }>()
+    for (const u of usage) {
+      const key = `${u.collection}:${u.slug}`
+      let entry = map.get(key)
+      if (!entry) {
+        entry = { collection: u.collection, slug: u.slug, semvers: [] }
+        map.set(key, entry)
+      }
+      entry.semvers.push(u.semver)
+    }
+    return [...map.values()]
+  })()
+
   return (
     <BaseLayout>
       <div className="mx-auto max-w-5xl px-4 py-10">
@@ -28,11 +44,7 @@ export default function SchemaDetailPage() {
         <div className="mb-6">
           <div className="mb-2 flex items-center gap-3">
             <h1 className="font-mono text-lg font-semibold">{schema.schemaHash.slice(0, 16)}…</h1>
-            {isPrivate && (
-              <span className="border-rule text-ink-muted border px-1.5 py-0.5 text-xs">
-                private type
-              </span>
-            )}
+            {isPrivate && <Badge>private type</Badge>}
           </div>
           <div className="text-ink-muted flex items-center gap-4 text-xs">
             <span>
@@ -47,7 +59,8 @@ export default function SchemaDetailPage() {
               {fields.length} field{fields.length !== 1 ? 's' : ''}
             </span>
             <span>
-              {usage.length} collection{usage.length !== 1 ? 's' : ''} using this schema
+              {usageByCollection.length} collection{usageByCollection.length !== 1 ? 's' : ''} using
+              this schema
             </span>
           </div>
         </div>
@@ -62,7 +75,7 @@ export default function SchemaDetailPage() {
             <h2 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
               Fields
             </h2>
-            <div className="border-rule overflow-hidden rounded border">
+            <div className="border-rule rounded-surface overflow-x-auto border">
               <table className="w-full text-xs">
                 <thead>
                   <tr className="bg-parchment-dark border-rule border-b">
@@ -88,15 +101,11 @@ export default function SchemaDetailPage() {
                         <td className="p-2.5">
                           <div className="flex items-center gap-2">
                             {refType && (
-                              <span className="bg-parchment-dark border-rule inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px]">
+                              <span className="bg-parchment-dark border-rule rounded-control inline-flex items-center gap-1 border px-1.5 py-0.5 text-[11px]">
                                 → {refType}
                               </span>
                             )}
-                            {isFieldPrivate && (
-                              <span className="border-rule text-ink-muted rounded border px-1.5 py-0.5 text-[11px]">
-                                private
-                              </span>
-                            )}
+                            {isFieldPrivate && <Badge>private</Badge>}
                           </div>
                         </td>
                       </tr>
@@ -112,7 +121,7 @@ export default function SchemaDetailPage() {
             <h2 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
               JSON Schema
             </h2>
-            <div className="border-rule overflow-hidden rounded border">
+            <div className="border-rule rounded-surface overflow-hidden border">
               <pre className="bg-ink text-parchment max-h-96 overflow-x-auto p-4 font-mono text-xs">
                 <code>{JSON.stringify(schema.schema, null, 2)}</code>
               </pre>
@@ -123,30 +132,47 @@ export default function SchemaDetailPage() {
         {/* Usage: which collections reference this schema */}
         <div>
           <h2 className="text-ink-muted mb-2 text-xs font-semibold tracking-wide uppercase">
-            Used by {usage.length} collection{usage.length !== 1 ? 's' : ''}
+            Used by {usageByCollection.length} collection
+            {usageByCollection.length !== 1 ? 's' : ''}
+            {usage.length > usageByCollection.length && (
+              <span className="font-normal normal-case"> · {usage.length} versions</span>
+            )}
           </h2>
-          {usage.length === 0 ? (
+          {usageByCollection.length === 0 ? (
             <p className="text-ink-muted py-4 text-sm">
               No public collections reference this schema yet.
             </p>
           ) : (
-            <div className="border-rule overflow-hidden rounded border">
-              {usage.map((u, i) => (
-                <Link
+            <div className="border-rule rounded-surface overflow-hidden border">
+              {usageByCollection.map((u, i) => (
+                <div
                   key={`${u.collection}-${u.slug}`}
-                  to={`/${u.collection}/v/${u.semver}?type=${u.slug}`}
-                  className={`hover:bg-parchment-dark/50 flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${
-                    i < usage.length - 1 ? 'border-rule border-b' : ''
-                  }`}
+                  className={`px-4 py-3 ${i < usageByCollection.length - 1 ? 'border-rule border-b' : ''}`}
                 >
-                  <div className="flex items-center gap-3">
-                    <span className="font-medium">{u.collection}</span>
-                    <span className="text-ink-muted text-xs">
-                      as <code className="font-mono">{u.slug}</code>
+                  <div className="mb-2 flex items-center justify-between gap-3">
+                    <Link
+                      to={`/${u.collection}`}
+                      className="min-w-0 truncate text-sm font-medium hover:underline"
+                    >
+                      {u.collection}
+                    </Link>
+                    <span className="text-ink-muted shrink-0 text-xs">
+                      as <code className="font-mono">{u.slug}</code> · {u.semvers.length} version
+                      {u.semvers.length !== 1 ? 's' : ''}
                     </span>
                   </div>
-                  <span className="text-ink-muted text-xs">{u.semver}</span>
-                </Link>
+                  <div className="flex flex-wrap gap-1">
+                    {u.semvers.map((semver) => (
+                      <Link
+                        key={semver}
+                        to={`/${u.collection}/v/${semver.replace(/^v/, '')}/records?type=${u.slug}`}
+                        className="border-rule text-link rounded-control hover:bg-parchment-dark border px-1.5 py-0.5 font-mono text-[11px] transition-colors"
+                      >
+                        {semver}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
               ))}
             </div>
           )}
diff --git a/src/routes/settings/avatar.data.ts b/src/routes/settings/avatar.data.ts
deleted file mode 100644
index 74479ad..0000000
--- a/src/routes/settings/avatar.data.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { requireAuth } from '~/lib/auth-middleware'
-
-export const middleware = [requireAuth]
-export const handle = { title: 'Avatar · Underlay' }
diff --git a/src/routes/settings/avatar.tsx b/src/routes/settings/avatar.tsx
deleted file mode 100644
index 29a5a67..0000000
--- a/src/routes/settings/avatar.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { type FormEvent, useState } from 'react'
-import { Link } from 'react-router'
-
-import BaseLayout from '~/components/BaseLayout'
-import { useAppContext } from '~/lib/app-context'
-
-export default function SettingsAvatar() {
-  const { currentUser } = useAppContext()
-
-  const [success, setSuccess] = useState('')
-  const [error, setError] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-  const [avatarUrl, setAvatarUrl] = useState(currentUser?.avatarUrl ?? '')
-
-  async function handleUpload(e: FormEvent) {
-    e.preventDefault()
-    setSuccess('')
-    setError('')
-
-    const form = e.target as HTMLFormElement
-    const fileInput = form.elements.namedItem('avatar') as HTMLInputElement
-    const file = fileInput?.files?.[0]
-
-    if (!file) {
-      setError('Please select a file.')
-      return
-    }
-
-    setSubmitting(true)
-    try {
-      const formData = new FormData()
-      formData.append('avatar', file)
-
-      const res = await fetch('/api/accounts/me/avatar', {
-        method: 'POST',
-        credentials: 'include',
-        body: formData,
-      })
-
-      if (res.ok) {
-        const data = await res.json()
-        setSuccess('Avatar updated.')
-        setAvatarUrl(data.avatarUrl)
-      } else {
-        const body = await res.json().catch(() => ({}))
-        setError(body.error ?? 'Upload failed.')
-      }
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Settings</h1>
-
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to="/settings" className="text-ink-muted hover:text-ink">
-            Account
-          </Link>
-          <Link to="/settings/keys" className="text-ink-muted hover:text-ink">
-            API Keys
-          </Link>
-          <Link to="/settings/sessions" className="text-ink-muted hover:text-ink">
-            Sessions
-          </Link>
-        </nav>
-
-        <nav className="text-ink-muted mb-6 text-xs">
-          <Link to="/settings" className="hover:text-ink">
-            Account
-          </Link>
-          <span className="mx-1">/</span>
-          <span className="text-ink font-medium">Avatar</span>
-        </nav>
-
-        {success && (
-          <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-            {success}
-          </p>
-        )}
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
-          </p>
-        )}
-
-        <div className="border-rule border p-6">
-          <h2 className="mb-4 text-sm font-semibold">Upload Avatar</h2>
-
-          <div className="mb-6 flex items-center gap-6">
-            {avatarUrl ? (
-              <img
-                src={avatarUrl}
-                alt="Current avatar"
-                className="border-rule h-24 w-24 rounded-full border object-cover"
-              />
-            ) : (
-              <div className="bg-parchment-dark border-rule text-ink-muted flex h-24 w-24 items-center justify-center rounded-full border text-2xl font-semibold">
-                {currentUser.displayName?.charAt(0)?.toUpperCase() ?? '?'}
-              </div>
-            )}
-            <div className="text-ink-muted text-sm">
-              <p>Accepted formats: JPEG, PNG, GIF, WebP</p>
-              <p>Maximum size: 5 MB</p>
-            </div>
-          </div>
-
-          <form onSubmit={handleUpload} className="space-y-4">
-            <div>
-              <input
-                type="file"
-                name="avatar"
-                accept="image/jpeg,image/png,image/gif,image/webp"
-                className="file:border-rule file:bg-parchment hover:file:bg-parchment-dark text-sm file:mr-3 file:cursor-pointer file:border file:px-3 file:py-1.5 file:text-sm file:font-medium"
-              />
-            </div>
-            <button
-              type="submit"
-              disabled={submitting}
-              className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              {submitting ? 'Uploading…' : 'Upload'}
-            </button>
-          </form>
-        </div>
-      </div>
-    </BaseLayout>
-  )
-}
diff --git a/src/routes/settings/index.tsx b/src/routes/settings/index.tsx
index c3ebe4c..a4db1cc 100644
--- a/src/routes/settings/index.tsx
+++ b/src/routes/settings/index.tsx
@@ -1,7 +1,15 @@
 import { type FormEvent, useState } from 'react'
-import { Link } from 'react-router'
 
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { userSettingsRail } from '~/components/SettingsLayout'
+import {
+  Alert,
+  Button,
+  buttonClasses,
+  Checkbox,
+  Input,
+  SectionHeading,
+  Textarea,
+} from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 export default function Settings() {
@@ -10,12 +18,15 @@ export default function Settings() {
   const [success, setSuccess] = useState('')
   const [error, setError] = useState('')
 
-  // Profile form (Underlay-specific fields only — name/email/avatar managed by KF Auth)
+  // Profile form (Underlay-specific fields only — name/email managed by KF Auth)
   const [slugValue, setSlugValue] = useState(currentUser?.slug ?? '')
   const [bio, setBio] = useState(currentUser?.bio ?? '')
   const [website, setWebsite] = useState(currentUser?.website ?? '')
   const [location, setLocation] = useState(currentUser?.location ?? '')
 
+  // Avatar
+  const [avatarUrl, setAvatarUrl] = useState(currentUser?.avatarUrl ?? '')
+
   // Notifications
   const notifPrefs = (currentUser?.notificationPrefs as Record<string, boolean>) ?? {}
   const [collectionActivity, setCollectionActivity] = useState(
@@ -64,6 +75,41 @@ export default function Settings() {
     }
   }
 
+  async function handleUploadAvatar(e: FormEvent) {
+    e.preventDefault()
+    clearMessages()
+
+    const form = e.target as HTMLFormElement
+    const fileInput = form.elements.namedItem('avatar') as HTMLInputElement
+    const file = fileInput?.files?.[0]
+    if (!file) {
+      setError('Please select an image file.')
+      return
+    }
+
+    setSubmitting('avatar')
+    try {
+      const formData = new FormData()
+      formData.append('avatar', file)
+      const res = await fetch('/api/accounts/me/avatar', {
+        method: 'POST',
+        credentials: 'include',
+        body: formData,
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setSuccess('Avatar updated.')
+        setAvatarUrl(data.avatarUrl)
+        form.reset()
+      } else {
+        const body = await res.json().catch(() => ({}))
+        setError(body.error ?? 'Upload failed.')
+      }
+    } finally {
+      setSubmitting('')
+    }
+  }
+
   async function handleUpdateNotifications(e: FormEvent) {
     e.preventDefault()
     clearMessages()
@@ -110,250 +156,212 @@ export default function Settings() {
   }
 
   return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Settings</h1>
-
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to="/settings" className="text-ink font-medium">
-            Account
-          </Link>
-          <Link to="/settings/keys" className="text-ink-muted hover:text-ink">
-            API Keys
-          </Link>
-          <Link to="/settings/sessions" className="text-ink-muted hover:text-ink">
-            Sessions
-          </Link>
-        </nav>
-
-        {success && (
-          <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-            {success}
-          </p>
-        )}
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
-          </p>
-        )}
+    <SettingsLayout
+      title="Profile"
+      description="Your public identity on Underlay."
+      groups={userSettingsRail}
+    >
+      {success && (
+        <Alert variant="success" className="mb-4">
+          {success}
+        </Alert>
+      )}
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
 
-        {/* Profile */}
-        <form onSubmit={handleUpdateProfile} className="mb-10 space-y-4">
-          <h2 className="text-ink-muted text-sm font-semibold tracking-wide uppercase">Profile</h2>
-
-          <div className="mb-4 flex items-center gap-4">
-            {currentUser.avatarUrl ? (
-              <img
-                src={currentUser.avatarUrl}
-                alt="Avatar"
-                className="border-rule h-16 w-16 rounded-full border object-cover"
-              />
-            ) : (
-              <div className="bg-parchment-dark border-rule text-ink-muted flex h-16 w-16 items-center justify-center rounded-full border text-lg font-semibold">
-                {currentUser.displayName?.charAt(0)?.toUpperCase() ?? '?'}
-              </div>
-            )}
-            <div>
-              <p className="text-sm font-medium">{currentUser.displayName}</p>
-              <p className="text-ink-muted font-mono text-xs">@{currentUser.slug}</p>
-              <a
-                href={kfAccountUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-link mt-1 inline-block text-xs hover:underline"
-              >
-                Edit name or avatar at KF Account →
-              </a>
-            </div>
+      {/* Avatar */}
+      <div className="mb-8 flex items-start gap-4">
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt="Avatar"
+            className="border-rule h-16 w-16 rounded-full border object-cover"
+          />
+        ) : (
+          <div className="bg-parchment-dark border-rule text-ink-muted flex h-16 w-16 items-center justify-center rounded-full border text-lg font-semibold">
+            {currentUser.displayName?.charAt(0)?.toUpperCase() ?? '?'}
           </div>
+        )}
+        <div className="min-w-0">
+          <p className="text-sm font-medium">{currentUser.displayName}</p>
+          <p className="text-ink-muted font-mono text-xs">@{currentUser.slug}</p>
+          <form onSubmit={handleUploadAvatar} className="mt-2 flex flex-wrap items-center gap-2">
+            <input
+              type="file"
+              name="avatar"
+              accept="image/jpeg,image/png,image/gif,image/webp"
+              className="file:border-rule file:bg-parchment hover:file:bg-parchment-dark file:rounded-control text-xs file:mr-2 file:cursor-pointer file:border file:px-2.5 file:py-1 file:text-xs file:font-medium"
+            />
+            <Button type="submit" size="sm" variant="secondary" disabled={submitting === 'avatar'}>
+              {submitting === 'avatar' ? 'Uploading…' : 'Upload avatar'}
+            </Button>
+          </form>
+        </div>
+      </div>
 
+      {/* Profile */}
+      <form onSubmit={handleUpdateProfile} className="mb-10 space-y-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium">Display name</label>
+          <p className="text-ink-muted text-sm">{currentUser.displayName}</p>
+          <p className="text-ink-muted mt-1 text-xs">
+            Managed by your{' '}
+            <a
+              href={kfAccountUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-link hover:underline"
+            >
+              KF Account
+            </a>
+            .
+          </p>
+        </div>
+        <div>
+          <label htmlFor="bio" className="mb-1 block text-sm font-medium">
+            Bio
+          </label>
+          <Textarea
+            id="bio"
+            rows={3}
+            placeholder="A short bio..."
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-3">
           <div>
-            <label className="mb-1 block text-sm font-medium">Display Name</label>
-            <p className="text-ink-muted text-sm">{currentUser.displayName}</p>
-            <p className="text-ink-muted mt-1 text-xs">
-              Managed by your{' '}
-              <a
-                href={kfAccountUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-link hover:underline"
-              >
-                KF Account
-              </a>
-              .
-            </p>
-          </div>
-          <div>
-            <label htmlFor="bio" className="mb-1 block text-sm font-medium">
-              Bio
+            <label htmlFor="website" className="mb-1 block text-sm font-medium">
+              Website
             </label>
-            <textarea
-              id="bio"
-              rows={3}
-              placeholder="A short bio..."
-              value={bio}
-              onChange={(e) => setBio(e.target.value)}
-              className="bg-parchment border-rule focus:border-ink w-full resize-none border px-3 py-2 text-sm focus:outline-none"
+            <Input
+              type="url"
+              id="website"
+              value={website}
+              onChange={(e) => setWebsite(e.target.value)}
+              placeholder="https://..."
             />
           </div>
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label htmlFor="website" className="mb-1 block text-sm font-medium">
-                Website
-              </label>
-              <input
-                type="url"
-                id="website"
-                value={website}
-                onChange={(e) => setWebsite(e.target.value)}
-                placeholder="https://..."
-                className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-              />
-            </div>
-            <div>
-              <label htmlFor="location" className="mb-1 block text-sm font-medium">
-                Location
-              </label>
-              <input
-                type="text"
-                id="location"
-                value={location}
-                onChange={(e) => setLocation(e.target.value)}
-                placeholder="City, Country"
-                className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 text-sm focus:outline-none"
-              />
-            </div>
-          </div>
           <div>
-            <label htmlFor="slug" className="mb-1 block text-sm font-medium">
-              Username
+            <label htmlFor="location" className="mb-1 block text-sm font-medium">
+              Location
             </label>
-            <input
+            <Input
               type="text"
-              id="slug"
-              value={slugValue}
-              onChange={(e) =>
-                setSlugValue(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))
-              }
-              pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
-              className="bg-parchment border-rule focus:border-ink w-full border px-3 py-2 font-mono text-sm focus:outline-none"
+              id="location"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              placeholder="City, Country"
             />
-            {slugValue !== currentUser?.slug && (
-              <p className="mt-1 text-xs text-amber-700">
-                Changing your username will update all your URLs.
-              </p>
-            )}
           </div>
-          <button
-            type="submit"
-            disabled={submitting === 'profile'}
-            className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-          >
-            Save profile
-          </button>
-        </form>
-
-        {/* KF Auth Account — name, email, avatar, password, security */}
-        <div className="border-rule mb-10 border-t pt-6">
-          <h2 className="text-ink-muted mb-4 text-sm font-semibold tracking-wide uppercase">
-            Account &amp; Security
-          </h2>
-          <p className="text-ink-muted mb-3 text-sm">
-            Your name, email, avatar, password, and security settings are managed through your KF
-            Account.
-          </p>
-          <a
-            href={kfAccountUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="bg-ink text-parchment inline-block px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-          >
-            Manage account →
-          </a>
         </div>
+        <div>
+          <label htmlFor="slug" className="mb-1 block text-sm font-medium">
+            Username
+          </label>
+          <Input
+            type="text"
+            id="slug"
+            value={slugValue}
+            onChange={(e) => setSlugValue(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
+            pattern="[a-z0-9][-a-z0-9]*[a-z0-9]"
+            className="font-mono"
+          />
+          {slugValue !== currentUser?.slug && (
+            <p className="mt-1 text-xs text-amber-700">
+              Changing your username will update all your URLs.
+            </p>
+          )}
+        </div>
+        <Button type="submit" disabled={submitting === 'profile'}>
+          {submitting === 'profile' ? 'Saving…' : 'Save changes'}
+        </Button>
+      </form>
 
-        {/* Notifications */}
-        <div className="border-rule mb-10 border-t pt-6">
-          <h2 className="text-ink-muted mb-4 text-sm font-semibold tracking-wide uppercase">
-            Notifications
-          </h2>
-          <p className="text-ink-muted mb-3 text-xs">
-            Email notifications (requires SMTP configuration).
-          </p>
-          <form onSubmit={handleUpdateNotifications} className="space-y-3">
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={collectionActivity}
-                onChange={(e) => setCollectionActivity(e.target.checked)}
-                className="accent-ink"
-              />
-              Collection activity (new versions pushed)
-            </label>
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={orgInvitations}
-                onChange={(e) => setOrgInvitations(e.target.checked)}
-                className="accent-ink"
-              />
-              Organization invitations
-            </label>
-            <label className="flex items-center gap-2 text-sm">
+      {/* KF Auth Account — name, email, password, security */}
+      <div className="border-rule mb-10 border-t pt-6">
+        <SectionHeading>Account &amp; Security</SectionHeading>
+        <p className="text-ink-muted mb-3 text-sm">
+          Your name, email, password, and security settings are managed through your KF Account.
+        </p>
+        <a
+          href={kfAccountUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={buttonClasses('primary', 'md', 'visited:text-parchment')}
+        >
+          Manage account →
+        </a>
+      </div>
+
+      {/* Notifications */}
+      <div className="border-rule mb-10 border-t pt-6">
+        <SectionHeading>Notifications</SectionHeading>
+        <p className="text-ink-muted mb-3 text-xs">
+          Email notifications (requires SMTP configuration).
+        </p>
+        <form onSubmit={handleUpdateNotifications} className="space-y-3">
+          <label className="flex items-center gap-2 text-sm">
+            <Checkbox
+              checked={collectionActivity}
+              onChange={(e) => setCollectionActivity(e.target.checked)}
+            />
+            Collection activity (new versions pushed)
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <Checkbox
+              checked={orgInvitations}
+              onChange={(e) => setOrgInvitations(e.target.checked)}
+            />
+            Organization invitations
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <Checkbox
+              checked={securityAlerts}
+              onChange={(e) => setSecurityAlerts(e.target.checked)}
+            />
+            Security alerts (new logins, password changes)
+          </label>
+          <Button type="submit" disabled={submitting === 'notifications'}>
+            {submitting === 'notifications' ? 'Saving…' : 'Save changes'}
+          </Button>
+        </form>
+      </div>
+
+      {/* Danger zone */}
+      <div className="rounded-surface border border-red-200 p-4">
+        <h2 className="mb-2 text-sm font-semibold text-red-700">Danger zone</h2>
+        <p className="text-ink-muted mb-3 text-sm">
+          Permanently delete your account. You must first transfer or delete all your collections.
+        </p>
+        <details className="group">
+          <summary className="cursor-pointer text-sm text-red-700 hover:underline">
+            Delete my account…
+          </summary>
+          <form onSubmit={handleDeleteAccount} className="mt-3 space-y-3">
+            <div>
+              <label htmlFor="confirmSlug" className="text-ink-muted mb-1 block text-sm">
+                Type <strong>{currentUser.slug}</strong> to confirm:
+              </label>
               <input
-                type="checkbox"
-                checked={securityAlerts}
-                onChange={(e) => setSecurityAlerts(e.target.checked)}
-                className="accent-ink"
+                type="text"
+                id="confirmSlug"
+                value={confirmSlug}
+                onChange={(e) => setConfirmSlug(e.target.value)}
+                required
+                autoComplete="off"
+                className="bg-parchment rounded-control w-full border border-red-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none"
               />
-              Security alerts (new logins, password changes)
-            </label>
-            <button
-              type="submit"
-              disabled={submitting === 'notifications'}
-              className="bg-ink text-parchment px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              Save preferences
-            </button>
+            </div>
+            <Button type="submit" variant="danger" disabled={submitting === 'delete'}>
+              {submitting === 'delete' ? 'Deleting…' : 'Delete my account'}
+            </Button>
           </form>
-        </div>
-
-        {/* Danger zone */}
-        <div className="border border-red-200 p-4">
-          <h2 className="mb-2 text-sm font-semibold text-red-700">Danger Zone</h2>
-          <p className="text-ink-muted mb-3 text-sm">
-            Permanently delete your account. You must first transfer or delete all your collections.
-          </p>
-          <details className="group">
-            <summary className="cursor-pointer text-sm text-red-700 hover:underline">
-              Delete my account…
-            </summary>
-            <form onSubmit={handleDeleteAccount} className="mt-3 space-y-3">
-              <div>
-                <label htmlFor="confirmSlug" className="text-ink-muted mb-1 block text-sm">
-                  Type <strong>{currentUser.slug}</strong> to confirm:
-                </label>
-                <input
-                  type="text"
-                  id="confirmSlug"
-                  value={confirmSlug}
-                  onChange={(e) => setConfirmSlug(e.target.value)}
-                  required
-                  autoComplete="off"
-                  className="bg-parchment w-full border border-red-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none"
-                />
-              </div>
-              <button
-                type="submit"
-                disabled={submitting === 'delete'}
-                className="bg-red-700 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-800"
-              >
-                Delete my account
-              </button>
-            </form>
-          </details>
-        </div>
+        </details>
       </div>
-    </BaseLayout>
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/settings/keys.tsx b/src/routes/settings/keys.tsx
index 9554219..5d80a33 100644
--- a/src/routes/settings/keys.tsx
+++ b/src/routes/settings/keys.tsx
@@ -1,8 +1,9 @@
 import { type FormEvent, useEffect, useState } from 'react'
-import { Link } from 'react-router'
 
 import { ApiPlayground } from '~/components/ApiPlayground'
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { userSettingsRail } from '~/components/SettingsLayout'
+import { Alert, Badge, Button, SectionHeading } from '~/components/ui'
+import { getScope, isExpired, isExpiringSoon } from '~/lib/api-keys'
 import { useAppContext } from '~/lib/app-context'
 import { authClient } from '~/lib/auth-client'
 
@@ -21,24 +22,6 @@ interface Collection {
   slug: string
 }
 
-function isExpiringSoon(expiresAt: string | null): boolean {
-  if (!expiresAt) return false
-  const daysLeft = (new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
-  return daysLeft > 0 && daysLeft < 7
-}
-
-function isExpired(expiresAt: string | null): boolean {
-  if (!expiresAt) return false
-  return new Date(expiresAt) < new Date()
-}
-
-function getScope(permissions?: Record<string, string[]>): string {
-  const perms = permissions?.['collections'] ?? []
-  if (perms.includes('admin')) return 'admin'
-  if (perms.includes('write')) return 'write'
-  return 'read'
-}
-
 export default function SettingsKeys() {
   const { currentUser } = useAppContext()
 
@@ -94,168 +77,141 @@ export default function SettingsKeys() {
   }
 
   return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Settings</h1>
-
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to="/settings" className="text-ink-muted hover:text-ink">
-            Account
-          </Link>
-          <Link to="/settings/keys" className="text-ink font-medium">
-            API Keys
-          </Link>
-          <Link to="/settings/sessions" className="text-ink-muted hover:text-ink">
-            Sessions
-          </Link>
-        </nav>
-
-        {newKeyResult && (
-          <div className="mb-4 border border-green-300 bg-green-50 p-4">
-            <p className="mb-1 text-sm font-semibold">Key created: {newKeyResult.name}</p>
-            <p className="text-ink-muted mb-2 text-xs">
-              Copy this key now — it won't be shown again.
-            </p>
-            <code className="bg-ink text-parchment block p-2 font-mono text-xs break-all">
-              {newKeyResult.key}
-            </code>
-          </div>
-        )}
-
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
+    <SettingsLayout
+      title="API keys"
+      description="Keys for pushing and pulling data with the API or CLI."
+      groups={userSettingsRail}
+    >
+      {newKeyResult && (
+        <Alert variant="success" className="mb-4">
+          <p className="mb-1 font-semibold">Key created: {newKeyResult.name}</p>
+          <p className="text-ink-muted mb-2 text-xs">
+            Copy this key now — it won't be shown again.
           </p>
-        )}
-
-        <div className="border-rule mb-6 border p-4">
-          <h2 className="mb-3 text-sm font-semibold">Create a new key</h2>
-          <form onSubmit={handleCreateKey} className="space-y-3">
-            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <div>
-                <label htmlFor="label" className="text-ink-muted mb-1 block text-xs">
-                  Label
-                </label>
-                <input
-                  type="text"
-                  id="label"
-                  required
-                  placeholder="my-sync-script"
-                  value={label}
-                  onChange={(e) => setLabel(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 font-mono text-sm focus:outline-none"
-                />
-              </div>
-              <div>
-                <label htmlFor="scope" className="text-ink-muted mb-1 block text-xs">
-                  Scope
-                </label>
-                <select
-                  id="scope"
-                  value={scope}
-                  onChange={(e) => setScope(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 text-sm focus:outline-none"
-                >
-                  <option value="read">read — list and download</option>
-                  <option value="write">write — push versions</option>
-                </select>
-              </div>
-              <div>
-                <label htmlFor="expiresIn" className="text-ink-muted mb-1 block text-xs">
-                  Expiration (optional)
-                </label>
-                <select
-                  id="expiresIn"
-                  value={expiresIn}
-                  onChange={(e) => setExpiresIn(e.target.value)}
-                  className="bg-parchment border-rule focus:border-ink w-full border px-2 py-1.5 text-sm focus:outline-none"
-                >
-                  <option value="">Never expires</option>
-                  <option value="7">7 days</option>
-                  <option value="30">30 days</option>
-                  <option value="90">90 days</option>
-                  <option value="365">1 year</option>
-                </select>
-              </div>
+          <code className="bg-ink text-parchment rounded-surface block p-2 font-mono text-xs break-all">
+            {newKeyResult.key}
+          </code>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
+
+      <div className="border-rule rounded-surface mb-6 border p-4">
+        <h2 className="mb-3 text-sm font-semibold">Create a new key</h2>
+        <form onSubmit={handleCreateKey} className="space-y-3">
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <div>
+              <label htmlFor="label" className="text-ink-muted mb-1 block text-xs">
+                Label
+              </label>
+              <input
+                type="text"
+                id="label"
+                required
+                placeholder="my-sync-script"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full border px-2 py-1.5 font-mono text-sm focus:outline-none"
+              />
             </div>
-            <button
-              type="submit"
-              disabled={submitting}
-              className="bg-ink text-parchment px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              {submitting ? 'Creating…' : 'Create key'}
-            </button>
-          </form>
-        </div>
-
-        <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-          Active Keys ({keys.length})
-        </h2>
-
-        {keys.length === 0 ? (
-          <p className="text-ink-muted text-sm">No API keys yet.</p>
-        ) : (
-          <div className="mb-8 space-y-2">
-            {keys.map((k) => (
-              <div
-                key={k.id}
-                className={`flex items-center justify-between border p-3 ${
-                  isExpired(k.expiresAt ?? null)
-                    ? 'border-red-200 bg-red-50/50'
-                    : isExpiringSoon(k.expiresAt ?? null)
-                      ? 'border-yellow-300 bg-yellow-50/50'
-                      : 'border-rule'
-                }`}
+            <div>
+              <label htmlFor="scope" className="text-ink-muted mb-1 block text-xs">
+                Scope
+              </label>
+              <select
+                id="scope"
+                value={scope}
+                onChange={(e) => setScope(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full cursor-pointer border px-2 py-1.5 text-sm focus:outline-none"
               >
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium">{k.name}</span>
-                    {k.start && (
-                      <span className="text-ink-muted font-mono text-xs">{k.start}…</span>
-                    )}
-                  </div>
-                  <div className="text-ink-muted mt-0.5 flex flex-wrap items-center gap-2 text-xs">
-                    <span className="border-rule border px-1 py-0.5">
-                      {getScope(k.permissions)}
+                <option value="read">read — list and download</option>
+                <option value="write">write — push versions</option>
+              </select>
+            </div>
+            <div>
+              <label htmlFor="expiresIn" className="text-ink-muted mb-1 block text-xs">
+                Expiration (optional)
+              </label>
+              <select
+                id="expiresIn"
+                value={expiresIn}
+                onChange={(e) => setExpiresIn(e.target.value)}
+                className="bg-parchment border-rule focus:border-ink rounded-control w-full cursor-pointer border px-2 py-1.5 text-sm focus:outline-none"
+              >
+                <option value="">Never expires</option>
+                <option value="7">7 days</option>
+                <option value="30">30 days</option>
+                <option value="90">90 days</option>
+                <option value="365">1 year</option>
+              </select>
+            </div>
+          </div>
+          <Button type="submit" disabled={submitting}>
+            {submitting ? 'Creating…' : 'Create key'}
+          </Button>
+        </form>
+      </div>
+
+      <SectionHeading>Active keys ({keys.length})</SectionHeading>
+
+      {keys.length === 0 ? (
+        <p className="text-ink-muted text-sm">No API keys yet.</p>
+      ) : (
+        <div className="mb-8 space-y-2">
+          {keys.map((k) => (
+            <div
+              key={k.id}
+              className={`rounded-surface flex items-center justify-between border p-3 ${
+                isExpired(k.expiresAt ?? null)
+                  ? 'border-red-200 bg-red-50/50'
+                  : isExpiringSoon(k.expiresAt ?? null)
+                    ? 'border-yellow-300 bg-yellow-50/50'
+                    : 'border-rule'
+              }`}
+            >
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{k.name}</span>
+                  {k.start && <span className="text-ink-muted font-mono text-xs">{k.start}…</span>}
+                </div>
+                <div className="text-ink-muted mt-0.5 flex flex-wrap items-center gap-2 text-xs">
+                  <Badge>{getScope(k.permissions)}</Badge>
+                  <span>Created {new Date(k.createdAt).toLocaleDateString()}</span>
+                  {k.expiresAt && !isExpired(k.expiresAt) && (
+                    <span
+                      className={isExpiringSoon(k.expiresAt) ? 'font-medium text-yellow-700' : ''}
+                    >
+                      · Expires {new Date(k.expiresAt).toLocaleDateString()}
                     </span>
-                    <span>Created {new Date(k.createdAt).toLocaleDateString()}</span>
-                    {k.expiresAt && !isExpired(k.expiresAt) && (
-                      <span
-                        className={isExpiringSoon(k.expiresAt) ? 'font-medium text-yellow-700' : ''}
-                      >
-                        · Expires {new Date(k.expiresAt).toLocaleDateString()}
-                      </span>
-                    )}
-                    {isExpired(k.expiresAt ?? null) && (
-                      <span className="font-medium text-red-700">· Expired</span>
-                    )}
-                  </div>
+                  )}
+                  {isExpired(k.expiresAt ?? null) && (
+                    <span className="font-medium text-red-700">· Expired</span>
+                  )}
                 </div>
-                <button
-                  onClick={() => handleRevokeKey(k.id)}
-                  className="text-xs text-red-700 hover:underline"
-                >
-                  Revoke
-                </button>
               </div>
-            ))}
-          </div>
-        )}
-
-        {/* API Playground */}
-        <div className="border-rule border-t pt-8">
-          <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-            API Playground
-          </h2>
-          <p className="text-ink-muted mb-4 text-xs">
-            Test API calls using your session. Select an endpoint to get started.
-          </p>
-          <ApiPlayground
-            slug={currentUser.slug}
-            collections={collections.map((c) => ({ id: c.id, slug: c.slug }))}
-          />
+              <Button variant="dangerLink" size="sm" onClick={() => handleRevokeKey(k.id)}>
+                Revoke
+              </Button>
+            </div>
+          ))}
         </div>
+      )}
+
+      {/* API Playground */}
+      <div className="border-rule border-t pt-8">
+        <SectionHeading>API Playground</SectionHeading>
+        <p className="text-ink-muted mb-4 text-xs">
+          Test API calls using your session. Select an endpoint to get started.
+        </p>
+        <ApiPlayground
+          slug={currentUser.slug}
+          collections={collections.map((c) => ({ id: c.id, slug: c.slug }))}
+        />
       </div>
-    </BaseLayout>
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/settings/sessions.tsx b/src/routes/settings/sessions.tsx
index 402a26d..07e13be 100644
--- a/src/routes/settings/sessions.tsx
+++ b/src/routes/settings/sessions.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router'
 
-import BaseLayout from '~/components/BaseLayout'
+import SettingsLayout, { userSettingsRail } from '~/components/SettingsLayout'
+import { Alert, Button, SectionHeading } from '~/components/ui'
 import { useAppContext } from '~/lib/app-context'
 
 interface Session {
@@ -53,75 +53,57 @@ export default function SettingsSessions() {
   }
 
   return (
-    <BaseLayout>
-      <div className="mx-auto max-w-4xl px-4 py-10">
-        <h1 className="mb-6 text-xl font-semibold tracking-tight">Settings</h1>
+    <SettingsLayout
+      title="Sessions"
+      description="Devices currently logged into your account. Revoke any session you don't recognize."
+      groups={userSettingsRail}
+    >
+      {success && (
+        <Alert variant="success" className="mb-4">
+          {success}
+        </Alert>
+      )}
+      {error && (
+        <Alert variant="error" className="mb-4">
+          {error}
+        </Alert>
+      )}
 
-        <nav className="border-rule mb-6 flex gap-4 border-b pb-2 text-sm">
-          <Link to="/settings" className="text-ink-muted hover:text-ink">
-            Account
-          </Link>
-          <Link to="/settings/keys" className="text-ink-muted hover:text-ink">
-            API Keys
-          </Link>
-          <Link to="/settings/sessions" className="text-ink font-medium">
-            Sessions
-          </Link>
-        </nav>
+      <SectionHeading>Active sessions ({sessions.length})</SectionHeading>
 
-        {success && (
-          <p className="mb-4 border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
-            {success}
-          </p>
-        )}
-        {error && (
-          <p className="mb-4 border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-            {error}
-          </p>
-        )}
-
-        <h2 className="text-ink-muted mb-3 text-sm font-semibold tracking-wide uppercase">
-          Active Sessions ({sessions.length})
-        </h2>
-        <p className="text-ink-muted mb-4 text-xs">
-          These are the devices currently logged into your account. Revoke any session you don't
-          recognize.
-        </p>
-
-        {sessions.length === 0 ? (
-          <p className="text-ink-muted text-sm">No active sessions.</p>
-        ) : (
-          <div className="space-y-2">
-            {sessions.map((s) => (
-              <div key={s.id} className="border-rule flex items-center justify-between border p-3">
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium">{parseUserAgent(s.userAgent)}</span>
-                    {s.current && (
-                      <span className="border border-green-200 bg-green-100 px-1.5 py-0.5 text-xs text-green-800">
-                        Current
-                      </span>
-                    )}
-                  </div>
-                  <div className="text-ink-muted mt-0.5 flex items-center gap-2 text-xs">
-                    {s.ipAddress && <span>{s.ipAddress}</span>}
-                    <span>Created {new Date(s.createdAt).toLocaleDateString()}</span>
-                    <span>· Expires {new Date(s.expiresAt).toLocaleDateString()}</span>
-                  </div>
+      {sessions.length === 0 ? (
+        <p className="text-ink-muted text-sm">No active sessions.</p>
+      ) : (
+        <div className="space-y-2">
+          {sessions.map((s) => (
+            <div
+              key={s.id}
+              className="border-rule rounded-surface flex items-center justify-between border p-3"
+            >
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{parseUserAgent(s.userAgent)}</span>
+                  {s.current && (
+                    <span className="rounded-control border border-green-200 bg-green-100 px-1.5 py-0.5 text-xs text-green-800">
+                      Current
+                    </span>
+                  )}
+                </div>
+                <div className="text-ink-muted mt-0.5 flex items-center gap-2 text-xs">
+                  {s.ipAddress && <span>{s.ipAddress}</span>}
+                  <span>Created {new Date(s.createdAt).toLocaleDateString()}</span>
+                  <span>· Expires {new Date(s.expiresAt).toLocaleDateString()}</span>
                 </div>
-                {!s.current && (
-                  <button
-                    onClick={() => handleRevoke(s.id)}
-                    className="text-xs text-red-700 hover:underline"
-                  >
-                    Revoke
-                  </button>
-                )}
               </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </BaseLayout>
+              {!s.current && (
+                <Button variant="dangerLink" size="sm" onClick={() => handleRevoke(s.id)}>
+                  Revoke
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </SettingsLayout>
   )
 }
diff --git a/src/routes/superadmin.tsx b/src/routes/superadmin.tsx
index 117667a..41477a1 100644
--- a/src/routes/superadmin.tsx
+++ b/src/routes/superadmin.tsx
@@ -68,7 +68,7 @@ export default function Superadmin() {
             <Link
               key={tool.href}
               to={tool.href}
-              className="border-rule hover:border-ink-muted/50 block rounded border px-4 py-3 transition-all hover:shadow-sm"
+              className="border-rule hover:border-ink-muted/50 rounded-surface block border px-4 py-3 transition-all hover:shadow-sm"
             >
               <div className="flex items-center justify-between">
                 <span className="text-sm font-semibold">{tool.name}</span>