diff --git a/apps/web/src/app/dashboard/agents/[id]/page.tsx b/apps/web/src/app/dashboard/agents/[id]/page.tsx
index e64ead3..c645150 100644
--- a/apps/web/src/app/dashboard/agents/[id]/page.tsx
+++ b/apps/web/src/app/dashboard/agents/[id]/page.tsx
@@ -7,7 +7,7 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { AppHeader } from '~/components/AppHeader';
+import { DashboardLayout } from '~/components/dashboard/DashboardLayout';
 
 interface Agent {
   id: string;
@@ -446,556 +446,524 @@ export default function AgentDetailPage(): React.ReactElement {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-background">
-        <AppHeader />
-        <div className="max-w-4xl mx-auto py-12 px-4">
-          <div className="animate-pulse">
-            <div className="h-8 bg-surface-secondary rounded w-48 mb-8" />
-            <div className="h-64 bg-surface-secondary rounded-lg" />
-          </div>
+      <DashboardLayout title="Loading..." showBackButton backUrl="/dashboard/agents">
+        <div className="animate-pulse">
+          <div className="h-8 bg-surface-secondary rounded w-48 mb-8" />
+          <div className="h-64 bg-surface-secondary rounded-lg" />
         </div>
-      </div>
+      </DashboardLayout>
     );
   }
 
   if (error || !agent) {
     return (
-      <div className="min-h-screen bg-background">
-        <AppHeader />
-        <div className="max-w-4xl mx-auto py-12 px-4">
-          <div className="text-center py-16">
-            <Icon icon="alertCircle" size="lg" className="mx-auto text-error mb-4" />
-            <h2 className="text-lg font-medium text-foreground mb-2">Error</h2>
-            <p className="text-foreground-secondary mb-4">{error || 'Agent not found'}</p>
-            <Link href="/dashboard/agents">
-              <Button>Back to Agents</Button>
-            </Link>
-          </div>
+      <DashboardLayout title="Error" showBackButton backUrl="/dashboard/agents">
+        <div className="text-center py-16">
+          <Icon icon="alertCircle" size="lg" className="mx-auto text-error mb-4" />
+          <h2 className="text-lg font-medium text-foreground mb-2">Error</h2>
+          <p className="text-foreground-secondary mb-4">{error || 'Agent not found'}</p>
+          <Link href="/dashboard/agents">
+            <Button>Back to Agents</Button>
+          </Link>
         </div>
-      </div>
+      </DashboardLayout>
     );
   }
 
   return (
-    <div className="min-h-screen bg-background">
-      <AppHeader />
-      <div className="max-w-4xl mx-auto py-12 px-4">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center gap-4">
-            <Link
-              href="/dashboard/agents"
-              className="text-foreground-secondary hover:text-foreground transition-colors"
-            >
-              <Icon icon="arrowLeft" size="sm" />
-            </Link>
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
-                <Icon icon="terminal" size="sm" className="text-primary" />
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold text-foreground">{agent.name}</h1>
-                <p className="text-sm text-foreground-tertiary">
-                  {PROVIDER_DISPLAY_NAMES[agent.provider]} / {agent.modelId}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <Link href={`/dashboard/agents/${agent.id}/chat`}>
-              <Button>
-                <Icon icon="message" size="sm" className="mr-2" />
-                Chat
-              </Button>
-            </Link>
+    <DashboardLayout
+      title={agent.name}
+      subtitle={`${PROVIDER_DISPLAY_NAMES[agent.provider]} / ${agent.modelId}`}
+      showBackButton
+      backUrl="/dashboard/agents"
+      actions={
+        <Link href={`/dashboard/agents/${agent.id}/chat`}>
+          <Button>
+            <Icon icon="message" size="sm" className="mr-2" />
+            Chat
+          </Button>
+        </Link>
+      }
+    >
+      {/* Quick Stats */}
+      <div className="grid gap-4 sm:grid-cols-3 mb-8">
+        <div className="bg-background border border-border rounded-lg p-4">
+          <div className="flex items-center gap-2 text-foreground-secondary mb-1">
+            <Icon icon="puzzle" size="xs" />
+            <span className="text-sm">Tools</span>
           </div>
+          <p className="text-2xl font-bold text-foreground">{agent.toolCount}</p>
         </div>
-
-        {/* Quick Stats */}
-        <div className="grid gap-4 sm:grid-cols-3 mb-8">
-          <div className="bg-background border border-border rounded-lg p-4">
-            <div className="flex items-center gap-2 text-foreground-secondary mb-1">
-              <Icon icon="puzzle" size="xs" />
-              <span className="text-sm">Tools</span>
-            </div>
-            <p className="text-2xl font-bold text-foreground">{agent.toolCount}</p>
-          </div>
-          <div className="bg-background border border-border rounded-lg p-4">
-            <div className="flex items-center gap-2 text-foreground-secondary mb-1">
-              <Icon icon="folder" size="xs" />
-              <span className="text-sm">Collections</span>
-            </div>
-            <p className="text-2xl font-bold text-foreground">{agent.collectionCount}</p>
-          </div>
-          <div className="bg-background border border-border rounded-lg p-4">
-            <div className="flex items-center gap-2 text-foreground-secondary mb-1">
-              <Icon icon="terminal" size="xs" />
-              <span className="text-sm">Max Tool Calls</span>
-            </div>
-            <p className="text-2xl font-bold text-foreground">{agent.maxToolCallsPerTurn}</p>
+        <div className="bg-background border border-border rounded-lg p-4">
+          <div className="flex items-center gap-2 text-foreground-secondary mb-1">
+            <Icon icon="folder" size="xs" />
+            <span className="text-sm">Collections</span>
           </div>
+          <p className="text-2xl font-bold text-foreground">{agent.collectionCount}</p>
         </div>
-
-        {/* API Endpoint */}
-        <div className="bg-background border border-border rounded-lg p-4 mb-8">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-foreground">API Endpoint</p>
-              <code className="text-sm text-foreground-secondary font-mono">
-                POST /api/agents/{agent.uid}/conversation/{'<conversation-id>'}
-              </code>
-            </div>
-            <Button
-              size="sm"
-              variant="secondary"
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  `${window.location.origin}/api/agents/${agent.uid}/conversation/<conversation-id>`
-                );
-              }}
-            >
-              <Icon icon="copy" size="xs" />
-            </Button>
+        <div className="bg-background border border-border rounded-lg p-4">
+          <div className="flex items-center gap-2 text-foreground-secondary mb-1">
+            <Icon icon="terminal" size="xs" />
+            <span className="text-sm">Max Tool Calls</span>
           </div>
+          <p className="text-2xl font-bold text-foreground">{agent.maxToolCallsPerTurn}</p>
         </div>
+      </div>
 
-        {/* Tools Section */}
-        <div className="bg-background border border-border rounded-lg p-6 mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-medium text-foreground">Tools</h2>
-            <span className="text-sm text-foreground-tertiary">{agentTools.length} attached</span>
+      {/* API Endpoint */}
+      <div className="bg-background border border-border rounded-lg p-4 mb-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-foreground">API Endpoint</p>
+            <code className="text-sm text-foreground-secondary font-mono">
+              POST /api/agents/{agent.uid}/conversation/{'<conversation-id>'}
+            </code>
           </div>
-
-          {/* Current Tools */}
-          {agentTools.length > 0 && (
-            <div className="space-y-2 mb-4">
-              {agentTools.map((at) => (
-                <div
-                  key={at.id}
-                  className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg"
-                >
-                  <div className="flex items-center gap-3 min-w-0">
-                    <Icon
-                      icon="puzzle"
-                      size="sm"
-                      className="text-foreground-tertiary flex-shrink-0"
-                    />
-                    <div className="min-w-0">
-                      <p className="text-sm font-medium text-foreground truncate">{at.tool.name}</p>
-                      <p className="text-xs text-foreground-tertiary truncate font-mono">
-                        {at.tool.npmPackageName}
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => removeTool(at.toolId)}
-                    className="p-1 text-foreground-tertiary hover:text-red-500 transition-colors flex-shrink-0"
-                    title="Remove tool"
-                  >
-                    <Icon icon="x" size="xs" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Add Tool Search */}
-          <div ref={toolSearchRef} className="relative">
-            <div className="relative">
-              <Icon
-                icon="search"
-                size="xs"
-                className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
-              />
-              <input
-                type="text"
-                value={toolSearch}
-                onChange={(e) => {
-                  setToolSearch(e.target.value);
-                  setShowToolSearch(true);
-                }}
-                onFocus={() => setShowToolSearch(true)}
-                placeholder="Search tools to add..."
-                className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-              />
-              {isSearchingTools && (
-                <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                  <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-                </div>
-              )}
-            </div>
-
-            {/* Search Results Dropdown */}
-            {showToolSearch && toolSearch && (
-              <div className="absolute z-10 w-full mt-1 bg-background border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
-                {toolSearchResults.length > 0 ? (
-                  toolSearchResults.map((tool) => (
-                    <button
-                      type="button"
-                      key={tool.id}
-                      onClick={() => addTool(tool.id)}
-                      className="w-full px-3 py-2 text-left hover:bg-surface-secondary transition-colors first:rounded-t-lg last:rounded-b-lg"
-                    >
-                      <p className="text-sm font-medium text-foreground">{tool.name}</p>
-                      <p className="text-xs text-foreground-tertiary font-mono">
-                        {tool.npmPackageName}
-                      </p>
-                    </button>
-                  ))
-                ) : !isSearchingTools ? (
-                  <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
-                    No tools found
-                  </div>
-                ) : null}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Collections Section */}
-        <div className="bg-background border border-border rounded-lg p-6 mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-medium text-foreground">Collections</h2>
-            <span className="text-sm text-foreground-tertiary">
-              {agentCollections.length} attached
-            </span>
-          </div>
-
-          {/* Current Collections */}
-          {agentCollections.length > 0 && (
-            <div className="space-y-2 mb-4">
-              {agentCollections.map((ac) => (
-                <div
-                  key={ac.id}
-                  className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg"
-                >
-                  <div className="flex items-center gap-3 min-w-0">
-                    <Icon
-                      icon="folder"
-                      size="sm"
-                      className="text-foreground-tertiary flex-shrink-0"
-                    />
-                    <div className="min-w-0">
-                      <p className="text-sm font-medium text-foreground truncate">
-                        {ac.collection.name}
-                      </p>
-                      <p className="text-xs text-foreground-tertiary">
-                        {ac.collection.toolCount} tools
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => removeCollection(ac.collectionId)}
-                    className="p-1 text-foreground-tertiary hover:text-red-500 transition-colors flex-shrink-0"
-                    title="Remove collection"
-                  >
-                    <Icon icon="x" size="xs" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Add Collection Search */}
-          <div ref={collectionSearchRef} className="relative">
-            <div className="relative">
-              <Icon
-                icon="search"
-                size="xs"
-                className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
-              />
-              <input
-                type="text"
-                value={collectionSearch}
-                onChange={(e) => {
-                  setCollectionSearch(e.target.value);
-                  setShowCollectionSearch(true);
-                }}
-                onFocus={() => setShowCollectionSearch(true)}
-                placeholder="Search collections to add..."
-                className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-              />
-              {isSearchingCollections && (
-                <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                  <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-                </div>
-              )}
-            </div>
-
-            {/* Search Results Dropdown */}
-            {showCollectionSearch && collectionSearch && (
-              <div className="absolute z-10 w-full mt-1 bg-background border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
-                {collectionSearchResults.length > 0 ? (
-                  collectionSearchResults.map((collection) => (
-                    <button
-                      type="button"
-                      key={collection.id}
-                      onClick={() => addCollection(collection.id)}
-                      className="w-full px-3 py-2 text-left hover:bg-surface-secondary transition-colors first:rounded-t-lg last:rounded-b-lg"
-                    >
-                      <p className="text-sm font-medium text-foreground">{collection.name}</p>
-                      <p className="text-xs text-foreground-tertiary">
-                        {collection.toolCount} tools
-                      </p>
-                    </button>
-                  ))
-                ) : !isSearchingCollections ? (
-                  <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
-                    No collections found
-                  </div>
-                ) : null}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Configuration */}
-        <div className="bg-background border border-border rounded-lg p-6 mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-medium text-foreground">Configuration</h2>
-            {!isEditing && (
-              <Button size="sm" variant="secondary" onClick={() => setIsEditing(true)}>
-                <Icon icon="edit" size="xs" className="mr-1" />
-                Edit
-              </Button>
-            )}
-          </div>
-
-          {isEditing ? (
-            <div className="space-y-4">
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
-                    Name
-                  </label>
-                  <input
-                    type="text"
-                    id="name"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  />
-                </div>
-                <div>
-                  <label htmlFor="uid" className="block text-sm font-medium text-foreground mb-1">
-                    UID
-                  </label>
-                  <input
-                    type="text"
-                    id="uid"
-                    name="uid"
-                    value={formData.uid}
-                    onChange={handleChange}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label
-                  htmlFor="description"
-                  className="block text-sm font-medium text-foreground mb-1"
-                >
-                  Description
-                </label>
-                <textarea
-                  id="description"
-                  name="description"
-                  value={formData.description}
-                  onChange={handleChange}
-                  rows={2}
-                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
-                />
-              </div>
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div>
-                  <label
-                    htmlFor="provider"
-                    className="block text-sm font-medium text-foreground mb-1"
-                  >
-                    Provider
-                  </label>
-                  <select
-                    id="provider"
-                    name="provider"
-                    value={formData.provider}
-                    onChange={handleChange}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  >
-                    {SUPPORTED_PROVIDERS.map((p) => (
-                      <option key={p} value={p}>
-                        {PROVIDER_DISPLAY_NAMES[p]}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label
-                    htmlFor="modelId"
-                    className="block text-sm font-medium text-foreground mb-1"
-                  >
-                    Model
-                  </label>
-                  <select
-                    id="modelId"
-                    name="modelId"
-                    value={formData.modelId}
-                    onChange={handleChange}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  >
-                    {models.map((m) => (
-                      <option key={m.id} value={m.id}>
-                        {m.name}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-
-              <div>
-                <label
-                  htmlFor="systemPrompt"
-                  className="block text-sm font-medium text-foreground mb-1"
-                >
-                  System Prompt
-                </label>
-                <textarea
-                  id="systemPrompt"
-                  name="systemPrompt"
-                  value={formData.systemPrompt}
-                  onChange={handleChange}
-                  rows={6}
-                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
-                />
-              </div>
-
-              <div className="grid gap-4 sm:grid-cols-3">
-                <div>
-                  <label
-                    htmlFor="temperature"
-                    className="block text-sm font-medium text-foreground mb-1"
-                  >
-                    Temperature
-                  </label>
-                  <input
-                    type="number"
-                    id="temperature"
-                    name="temperature"
-                    value={formData.temperature}
-                    onChange={handleChange}
-                    min={0}
-                    max={2}
-                    step={0.1}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  />
-                </div>
-                <div>
-                  <label
-                    htmlFor="maxToolCallsPerTurn"
-                    className="block text-sm font-medium text-foreground mb-1"
-                  >
-                    Max Tool Calls
-                  </label>
-                  <input
-                    type="number"
-                    id="maxToolCallsPerTurn"
-                    name="maxToolCallsPerTurn"
-                    value={formData.maxToolCallsPerTurn}
-                    onChange={handleChange}
-                    min={1}
-                    max={100}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  />
-                </div>
-                <div>
-                  <label
-                    htmlFor="maxMessagesInContext"
-                    className="block text-sm font-medium text-foreground mb-1"
-                  >
-                    Context Messages
-                  </label>
-                  <input
-                    type="number"
-                    id="maxMessagesInContext"
-                    name="maxMessagesInContext"
-                    value={formData.maxMessagesInContext}
-                    onChange={handleChange}
-                    min={1}
-                    max={100}
-                    className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                  />
-                </div>
-              </div>
-
-              <div className="flex items-center justify-end gap-2 pt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setIsEditing(false);
-                    setFormData({
-                      name: agent.name,
-                      uid: agent.uid,
-                      description: agent.description || '',
-                      provider: agent.provider,
-                      modelId: agent.modelId,
-                      systemPrompt: agent.systemPrompt || '',
-                      temperature: agent.temperature,
-                      maxToolCallsPerTurn: agent.maxToolCallsPerTurn,
-                      maxMessagesInContext: agent.maxMessagesInContext,
-                    });
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button onClick={handleSave} disabled={isSaving}>
-                  {isSaving ? 'Saving...' : 'Save Changes'}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <dl className="grid gap-4 sm:grid-cols-2">
-              <div>
-                <dt className="text-sm text-foreground-secondary">Description</dt>
-                <dd className="text-foreground">{agent.description || '-'}</dd>
-              </div>
-              <div>
-                <dt className="text-sm text-foreground-secondary">UID</dt>
-                <dd className="text-foreground font-mono text-sm">{agent.uid}</dd>
-              </div>
-              <div>
-                <dt className="text-sm text-foreground-secondary">Temperature</dt>
-                <dd className="text-foreground">{agent.temperature}</dd>
-              </div>
-              <div>
-                <dt className="text-sm text-foreground-secondary">Context Messages</dt>
-                <dd className="text-foreground">{agent.maxMessagesInContext}</dd>
-              </div>
-              <div className="sm:col-span-2">
-                <dt className="text-sm text-foreground-secondary">System Prompt</dt>
-                <dd className="text-foreground font-mono text-sm whitespace-pre-wrap bg-surface-secondary rounded-lg p-3 mt-1">
-                  {agent.systemPrompt || '(No system prompt)'}
-                </dd>
-              </div>
-            </dl>
-          )}
-        </div>
-
-        {/* Danger Zone */}
-        <div className="bg-background border border-red-200 dark:border-red-800 rounded-lg p-6">
-          <h2 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">Danger Zone</h2>
-          <p className="text-sm text-foreground-secondary mb-4">
-            Once you delete an agent, there is no going back. Please be certain.
-          </p>
-          <Button variant="outline" onClick={handleDelete}>
-            <Icon icon="trash" size="xs" className="mr-1" />
-            Delete Agent
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() => {
+              navigator.clipboard.writeText(
+                `${window.location.origin}/api/agents/${agent.uid}/conversation/<conversation-id>`
+              );
+            }}
+          >
+            <Icon icon="copy" size="xs" />
           </Button>
         </div>
       </div>
-    </div>
+
+      {/* Tools Section */}
+      <div className="bg-background border border-border rounded-lg p-6 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium text-foreground">Tools</h2>
+          <span className="text-sm text-foreground-tertiary">{agentTools.length} attached</span>
+        </div>
+
+        {/* Current Tools */}
+        {agentTools.length > 0 && (
+          <div className="space-y-2 mb-4">
+            {agentTools.map((at) => (
+              <div
+                key={at.id}
+                className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg"
+              >
+                <div className="flex items-center gap-3 min-w-0">
+                  <Icon
+                    icon="puzzle"
+                    size="sm"
+                    className="text-foreground-tertiary flex-shrink-0"
+                  />
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium text-foreground truncate">{at.tool.name}</p>
+                    <p className="text-xs text-foreground-tertiary truncate font-mono">
+                      {at.tool.npmPackageName}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeTool(at.toolId)}
+                  className="p-1 text-foreground-tertiary hover:text-red-500 transition-colors flex-shrink-0"
+                  title="Remove tool"
+                >
+                  <Icon icon="x" size="xs" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Add Tool Search */}
+        <div ref={toolSearchRef} className="relative">
+          <div className="relative">
+            <Icon
+              icon="search"
+              size="xs"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
+            />
+            <input
+              type="text"
+              value={toolSearch}
+              onChange={(e) => {
+                setToolSearch(e.target.value);
+                setShowToolSearch(true);
+              }}
+              onFocus={() => setShowToolSearch(true)}
+              placeholder="Search tools to add..."
+              className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+            />
+            {isSearchingTools && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+              </div>
+            )}
+          </div>
+
+          {/* Search Results Dropdown */}
+          {showToolSearch && toolSearch && (
+            <div className="absolute z-10 w-full mt-1 bg-background border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
+              {toolSearchResults.length > 0 ? (
+                toolSearchResults.map((tool) => (
+                  <button
+                    type="button"
+                    key={tool.id}
+                    onClick={() => addTool(tool.id)}
+                    className="w-full px-3 py-2 text-left hover:bg-surface-secondary transition-colors first:rounded-t-lg last:rounded-b-lg"
+                  >
+                    <p className="text-sm font-medium text-foreground">{tool.name}</p>
+                    <p className="text-xs text-foreground-tertiary font-mono">
+                      {tool.npmPackageName}
+                    </p>
+                  </button>
+                ))
+              ) : !isSearchingTools ? (
+                <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
+                  No tools found
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Collections Section */}
+      <div className="bg-background border border-border rounded-lg p-6 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium text-foreground">Collections</h2>
+          <span className="text-sm text-foreground-tertiary">
+            {agentCollections.length} attached
+          </span>
+        </div>
+
+        {/* Current Collections */}
+        {agentCollections.length > 0 && (
+          <div className="space-y-2 mb-4">
+            {agentCollections.map((ac) => (
+              <div
+                key={ac.id}
+                className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg"
+              >
+                <div className="flex items-center gap-3 min-w-0">
+                  <Icon
+                    icon="folder"
+                    size="sm"
+                    className="text-foreground-tertiary flex-shrink-0"
+                  />
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium text-foreground truncate">
+                      {ac.collection.name}
+                    </p>
+                    <p className="text-xs text-foreground-tertiary">
+                      {ac.collection.toolCount} tools
+                    </p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeCollection(ac.collectionId)}
+                  className="p-1 text-foreground-tertiary hover:text-red-500 transition-colors flex-shrink-0"
+                  title="Remove collection"
+                >
+                  <Icon icon="x" size="xs" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Add Collection Search */}
+        <div ref={collectionSearchRef} className="relative">
+          <div className="relative">
+            <Icon
+              icon="search"
+              size="xs"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
+            />
+            <input
+              type="text"
+              value={collectionSearch}
+              onChange={(e) => {
+                setCollectionSearch(e.target.value);
+                setShowCollectionSearch(true);
+              }}
+              onFocus={() => setShowCollectionSearch(true)}
+              placeholder="Search collections to add..."
+              className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+            />
+            {isSearchingCollections && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+              </div>
+            )}
+          </div>
+
+          {/* Search Results Dropdown */}
+          {showCollectionSearch && collectionSearch && (
+            <div className="absolute z-10 w-full mt-1 bg-background border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
+              {collectionSearchResults.length > 0 ? (
+                collectionSearchResults.map((collection) => (
+                  <button
+                    type="button"
+                    key={collection.id}
+                    onClick={() => addCollection(collection.id)}
+                    className="w-full px-3 py-2 text-left hover:bg-surface-secondary transition-colors first:rounded-t-lg last:rounded-b-lg"
+                  >
+                    <p className="text-sm font-medium text-foreground">{collection.name}</p>
+                    <p className="text-xs text-foreground-tertiary">{collection.toolCount} tools</p>
+                  </button>
+                ))
+              ) : !isSearchingCollections ? (
+                <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
+                  No collections found
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Configuration */}
+      <div className="bg-background border border-border rounded-lg p-6 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium text-foreground">Configuration</h2>
+          {!isEditing && (
+            <Button size="sm" variant="secondary" onClick={() => setIsEditing(true)}>
+              <Icon icon="edit" size="xs" className="mr-1" />
+              Edit
+            </Button>
+          )}
+        </div>
+
+        {isEditing ? (
+          <div className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                />
+              </div>
+              <div>
+                <label htmlFor="uid" className="block text-sm font-medium text-foreground mb-1">
+                  UID
+                </label>
+                <input
+                  type="text"
+                  id="uid"
+                  name="uid"
+                  value={formData.uid}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="description"
+                className="block text-sm font-medium text-foreground mb-1"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                rows={2}
+                className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+              />
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label
+                  htmlFor="provider"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Provider
+                </label>
+                <select
+                  id="provider"
+                  name="provider"
+                  value={formData.provider}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                >
+                  {SUPPORTED_PROVIDERS.map((p) => (
+                    <option key={p} value={p}>
+                      {PROVIDER_DISPLAY_NAMES[p]}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label htmlFor="modelId" className="block text-sm font-medium text-foreground mb-1">
+                  Model
+                </label>
+                <select
+                  id="modelId"
+                  name="modelId"
+                  value={formData.modelId}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                >
+                  {models.map((m) => (
+                    <option key={m.id} value={m.id}>
+                      {m.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor="systemPrompt"
+                className="block text-sm font-medium text-foreground mb-1"
+              >
+                System Prompt
+              </label>
+              <textarea
+                id="systemPrompt"
+                name="systemPrompt"
+                value={formData.systemPrompt}
+                onChange={handleChange}
+                rows={6}
+                className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+              />
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-3">
+              <div>
+                <label
+                  htmlFor="temperature"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Temperature
+                </label>
+                <input
+                  type="number"
+                  id="temperature"
+                  name="temperature"
+                  value={formData.temperature}
+                  onChange={handleChange}
+                  min={0}
+                  max={2}
+                  step={0.1}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="maxToolCallsPerTurn"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Max Tool Calls
+                </label>
+                <input
+                  type="number"
+                  id="maxToolCallsPerTurn"
+                  name="maxToolCallsPerTurn"
+                  value={formData.maxToolCallsPerTurn}
+                  onChange={handleChange}
+                  min={1}
+                  max={100}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="maxMessagesInContext"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Context Messages
+                </label>
+                <input
+                  type="number"
+                  id="maxMessagesInContext"
+                  name="maxMessagesInContext"
+                  value={formData.maxMessagesInContext}
+                  onChange={handleChange}
+                  min={1}
+                  max={100}
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-2 pt-4">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setIsEditing(false);
+                  setFormData({
+                    name: agent.name,
+                    uid: agent.uid,
+                    description: agent.description || '',
+                    provider: agent.provider,
+                    modelId: agent.modelId,
+                    systemPrompt: agent.systemPrompt || '',
+                    temperature: agent.temperature,
+                    maxToolCallsPerTurn: agent.maxToolCallsPerTurn,
+                    maxMessagesInContext: agent.maxMessagesInContext,
+                  });
+                }}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={isSaving}>
+                {isSaving ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <dl className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <dt className="text-sm text-foreground-secondary">Description</dt>
+              <dd className="text-foreground">{agent.description || '-'}</dd>
+            </div>
+            <div>
+              <dt className="text-sm text-foreground-secondary">UID</dt>
+              <dd className="text-foreground font-mono text-sm">{agent.uid}</dd>
+            </div>
+            <div>
+              <dt className="text-sm text-foreground-secondary">Temperature</dt>
+              <dd className="text-foreground">{agent.temperature}</dd>
+            </div>
+            <div>
+              <dt className="text-sm text-foreground-secondary">Context Messages</dt>
+              <dd className="text-foreground">{agent.maxMessagesInContext}</dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm text-foreground-secondary">System Prompt</dt>
+              <dd className="text-foreground font-mono text-sm whitespace-pre-wrap bg-surface-secondary rounded-lg p-3 mt-1">
+                {agent.systemPrompt || '(No system prompt)'}
+              </dd>
+            </div>
+          </dl>
+        )}
+      </div>
+
+      {/* Danger Zone */}
+      <div className="bg-background border border-red-200 dark:border-red-800 rounded-lg p-6">
+        <h2 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">Danger Zone</h2>
+        <p className="text-sm text-foreground-secondary mb-4">
+          Once you delete an agent, there is no going back. Please be certain.
+        </p>
+        <Button variant="outline" onClick={handleDelete}>
+          <Icon icon="trash" size="xs" className="mr-1" />
+          Delete Agent
+        </Button>
+      </div>
+    </DashboardLayout>
   );
 }
diff --git a/apps/web/src/app/dashboard/collections/[id]/page.tsx b/apps/web/src/app/dashboard/collections/[id]/page.tsx
index 9fcd374..325f806 100644
--- a/apps/web/src/app/dashboard/collections/[id]/page.tsx
+++ b/apps/web/src/app/dashboard/collections/[id]/page.tsx
@@ -6,10 +6,10 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
-import { AppHeader } from '~/components/AppHeader';
 import { AddToolSearch } from '~/components/collections/AddToolSearch';
 import { CollectionForm } from '~/components/collections/CollectionForm';
 import { CollectionToolList } from '~/components/collections/CollectionToolList';
+import { DashboardLayout } from '~/components/dashboard/DashboardLayout';
 
 function McpUrlSection({ collectionId }: { collectionId: string }) {
   const [copiedUrl, setCopiedUrl] = useState<'http' | 'sse' | null>(null);
@@ -351,145 +351,118 @@ export default function CollectionDetailPage(): React.ReactElement {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-background">
-        <AppHeader />
-        <div className="max-w-4xl mx-auto py-12 px-4">
-          <div className="animate-pulse">
-            <div className="h-8 bg-surface-secondary rounded w-48 mb-4" />
-            <div className="h-4 bg-surface-secondary rounded w-96 mb-8" />
-            <div className="h-12 bg-surface-secondary rounded mb-6" />
-            <div className="space-y-3">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="h-24 bg-surface-secondary rounded" />
-              ))}
-            </div>
+      <DashboardLayout title="Loading..." showBackButton backUrl="/dashboard/collections">
+        <div className="animate-pulse">
+          <div className="h-8 bg-surface-secondary rounded w-48 mb-4" />
+          <div className="h-4 bg-surface-secondary rounded w-96 mb-8" />
+          <div className="h-12 bg-surface-secondary rounded mb-6" />
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="h-24 bg-surface-secondary rounded" />
+            ))}
           </div>
         </div>
-      </div>
+      </DashboardLayout>
     );
   }
 
   if (error || !collection) {
     return (
-      <div className="min-h-screen bg-background">
-        <AppHeader />
-        <div className="max-w-4xl mx-auto py-12 px-4">
-          <div className="text-center py-16">
-            <Icon icon="alertCircle" size="lg" className="mx-auto text-error mb-4" />
-            <h2 className="text-lg font-medium text-foreground mb-2">Error</h2>
-            <p className="text-foreground-secondary mb-4">{error || 'Collection not found'}</p>
-            <Link href="/dashboard/collections">
-              <Button>Back to Collections</Button>
-            </Link>
-          </div>
+      <DashboardLayout title="Error" showBackButton backUrl="/dashboard/collections">
+        <div className="text-center py-16">
+          <Icon icon="alertCircle" size="lg" className="mx-auto text-error mb-4" />
+          <h2 className="text-lg font-medium text-foreground mb-2">Error</h2>
+          <p className="text-foreground-secondary mb-4">{error || 'Collection not found'}</p>
+          <Link href="/dashboard/collections">
+            <Button>Back to Collections</Button>
+          </Link>
         </div>
-      </div>
+      </DashboardLayout>
     );
   }
 
   const existingToolIds = collection.tools.map((t) => t.toolId);
 
   return (
-    <div className="min-h-screen bg-background">
-      <AppHeader />
-      <div className="max-w-4xl mx-auto py-12 px-4">
-        {/* Header */}
-        <div className="flex items-center gap-4 mb-6">
-          <Link
-            href="/dashboard/collections"
-            className="text-foreground-secondary hover:text-foreground transition-colors"
-          >
-            <Icon icon="arrowLeft" size="sm" />
-          </Link>
-          <div className="flex-1">
-            {isEditing ? (
-              <div className="bg-background border border-border rounded-lg p-6">
-                <h2 className="text-lg font-medium text-foreground mb-4">Edit Collection</h2>
-                <CollectionForm
-                  initialData={{
-                    name: collection.name,
-                    description: collection.description,
-                    isPublic: collection.isPublic,
-                  }}
-                  onSubmit={handleUpdate}
-                  onCancel={() => setIsEditing(false)}
-                  isSubmitting={isUpdating}
-                  submitLabel="Save Changes"
-                />
-              </div>
-            ) : (
-              <>
-                <div className="flex items-center gap-3 mb-2">
-                  <h1 className="text-2xl font-bold text-foreground">{collection.name}</h1>
-                  {collection.isPublic && (
-                    <Badge variant="secondary" size="sm">
-                      <Icon icon="globe" size="sm" className="mr-1" />
-                      Public
-                    </Badge>
-                  )}
-                </div>
-                {collection.description && (
-                  <p className="text-foreground-secondary">{collection.description}</p>
-                )}
-              </>
-            )}
+    <DashboardLayout
+      title={isEditing ? 'Edit Collection' : collection.name}
+      subtitle={
+        !isEditing
+          ? `${collection.toolCount} ${collection.toolCount === 1 ? 'tool' : 'tools'}${collection.isPublic ? ' • Public' : ''}`
+          : undefined
+      }
+      showBackButton
+      backUrl="/dashboard/collections"
+      actions={
+        collection.isOwner &&
+        !isEditing && (
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
+              <Icon icon="edit" size="sm" className="mr-1" />
+              Edit
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDelete}
+              loading={isDeleting}
+              disabled={isDeleting}
+              className="text-error hover:text-error hover:bg-error/10"
+            >
+              <Icon icon="trash" size="sm" className="mr-1" />
+              Delete
+            </Button>
           </div>
-          {collection.isOwner && !isEditing && (
-            <div className="flex gap-2">
-              <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
-                <Icon icon="edit" size="sm" className="mr-1" />
-                Edit
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleDelete}
-                loading={isDeleting}
-                disabled={isDeleting}
-                className="text-error hover:text-error hover:bg-error/10"
-              >
-                <Icon icon="trash" size="sm" className="mr-1" />
-                Delete
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {/* Stats */}
-        <div className="flex items-center gap-4 text-sm text-foreground-secondary mb-8">
-          <span className="flex items-center gap-1">
-            <Icon icon="box" size="sm" />
-            {collection.toolCount} {collection.toolCount === 1 ? 'tool' : 'tools'}
-          </span>
-          <span>Updated {new Date(collection.updatedAt).toLocaleDateString()}</span>
-        </div>
-
-        {/* MCP URLs - only for public collections */}
-        {collection.isPublic && <McpUrlSection collectionId={collection.id} />}
-
-        {/* Add Tool Search */}
-        {collection.isOwner && (
-          <div className="mb-6">
-            <h2 className="text-sm font-medium text-foreground mb-2">Add Tools</h2>
-            <AddToolSearch
-              collectionId={collection.id}
-              existingToolIds={existingToolIds}
-              onToolAdded={handleToolAdded}
-            />
-          </div>
-        )}
-
-        {/* Tools List */}
-        <div>
-          <h2 className="text-sm font-medium text-foreground mb-3">Tools in this Collection</h2>
-          <CollectionToolList
-            tools={collection.tools}
-            onRemove={collection.isOwner ? handleRemoveTool : undefined}
-            removingId={removingToolId}
-            isOwner={collection.isOwner}
+        )
+      }
+    >
+      {/* Edit Form */}
+      {isEditing && (
+        <div className="bg-background border border-border rounded-lg p-6 mb-8">
+          <CollectionForm
+            initialData={{
+              name: collection.name,
+              description: collection.description,
+              isPublic: collection.isPublic,
+            }}
+            onSubmit={handleUpdate}
+            onCancel={() => setIsEditing(false)}
+            isSubmitting={isUpdating}
+            submitLabel="Save Changes"
           />
         </div>
+      )}
+
+      {/* Description */}
+      {!isEditing && collection.description && (
+        <p className="text-foreground-secondary mb-8">{collection.description}</p>
+      )}
+
+      {/* MCP URLs - only for public collections */}
+      {collection.isPublic && <McpUrlSection collectionId={collection.id} />}
+
+      {/* Add Tool Search */}
+      {collection.isOwner && (
+        <div className="mb-6">
+          <h2 className="text-sm font-medium text-foreground mb-2">Add Tools</h2>
+          <AddToolSearch
+            collectionId={collection.id}
+            existingToolIds={existingToolIds}
+            onToolAdded={handleToolAdded}
+          />
+        </div>
+      )}
+
+      {/* Tools List */}
+      <div>
+        <h2 className="text-sm font-medium text-foreground mb-3">Tools in this Collection</h2>
+        <CollectionToolList
+          tools={collection.tools}
+          onRemove={collection.isOwner ? handleRemoveTool : undefined}
+          removingId={removingToolId}
+          isOwner={collection.isOwner}
+        />
       </div>
-    </div>
+    </DashboardLayout>
   );
 }