diff --git a/.gitignore b/.gitignore
index 78b7238c5..77d0edc69 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,5 @@ Thumbs.db
 *.swp
 *.swo
 *~
+
+.worktrees/
diff --git a/crates/openfang-api/static/css/components.css b/crates/openfang-api/static/css/components.css
index 4d03b6332..7325d0335 100644
--- a/crates/openfang-api/static/css/components.css
+++ b/crates/openfang-api/static/css/components.css
@@ -49,6 +49,13 @@
   transition: border-color var(--transition-fast), transform 0.2s var(--ease-spring), box-shadow var(--transition-fast);
   position: relative;
   box-shadow: var(--shadow-xs), var(--shadow-inset);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-body {
+  flex: 1;
 }
 
 .card:hover {
@@ -96,6 +103,7 @@
   font-weight: 600;
   letter-spacing: 0.5px;
   text-transform: uppercase;
+  width: max-content;
 }
 
 .badge-running { background: rgba(74,222,128,0.12); color: var(--success); }
@@ -321,6 +329,11 @@ tr:hover td { background: var(--surface2); }
   word-break: break-word;
 }
 
+.message-bubble ul, .message-bubble ol {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+}
+
 .message.user .message-bubble {
   background: var(--user-bg);
   border: 1px solid rgba(255,92,0,0.12);
@@ -1222,13 +1235,15 @@ mark.search-highlight {
 }
 .theme-opt {
   cursor: pointer;
-  padding: 4px 8px;
+  padding-block: 4px;
   font-size: 14px;
   background: none;
   border: none;
   color: var(--text-muted);
   transition: all 0.2s;
   line-height: 1;
+  font-family: inherit;
+  width: 26px;
 }
 .theme-opt:hover { color: var(--text-primary); background: var(--bg-hover); }
 .theme-opt.active { color: var(--accent); background: var(--accent-glow); }
@@ -1252,14 +1267,6 @@ mark.search-highlight {
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hidden { display: none !important; }
 
-/* Agent card actions */
-.agent-card-actions {
-  display: flex;
-  gap: 6px;
-  margin-top: 12px;
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
 
 /* Agent picker in chat empty state */
 .agent-pick-card {
@@ -1905,6 +1912,15 @@ mark.search-highlight {
   color: var(--text-dim);
 }
 
+/* Category chips container */
+.category-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  overflow-x: auto;
+}
+
 /* ── Tier badges ── */
 .tier-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
 .tier-frontier { background: rgba(168,85,247,0.12); color: #a855f7; }
diff --git a/crates/openfang-api/static/css/layout.css b/crates/openfang-api/static/css/layout.css
index 880e6ca3f..0a37fd028 100644
--- a/crates/openfang-api/static/css/layout.css
+++ b/crates/openfang-api/static/css/layout.css
@@ -35,17 +35,18 @@
   align-items: center;
   justify-content: space-between;
   min-height: 60px;
+  gap: 0.5rem;
 }
 
 .sidebar-logo {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 0.5rem;
 }
 
 .sidebar-logo img {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   opacity: 0.8;
   transition: opacity 0.2s, transform 0.2s;
 }
@@ -61,7 +62,7 @@
 }
 
 .sidebar-header h1 {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 700;
   color: var(--accent);
   letter-spacing: 3px;
@@ -69,7 +70,7 @@
 }
 
 .sidebar-header .version {
-  font-size: 9px;
+  font-size: 8px;
   color: var(--text-muted);
   margin-top: 1px;
   letter-spacing: 0.5px;
diff --git a/crates/openfang-api/static/index_body.html b/crates/openfang-api/static/index_body.html
index 6aeae4b8b..fcbbf8402 100644
--- a/crates/openfang-api/static/index_body.html
+++ b/crates/openfang-api/static/index_body.html
@@ -2177,7 +2177,7 @@ <h3>No skills installed</h3>
             <!-- Category quick-search chips (always visible when not searching) -->
             <div class="mb-4" x-show="!clawhubSearch">
               <div class="text-xs text-dim mb-2" style="letter-spacing:0.5px">CATEGORIES</div>
-              <div class="flex flex-wrap gap-1">
+              <div class="category-chips">
                 <template x-for="cat in categories" :key="cat.id">
                   <span class="filter-pill" style="font-size:0.7rem;padding:2px 8px" @click="searchCategory(cat)" x-text="cat.name"></span>
                 </template>
@@ -2454,28 +2454,30 @@ <h4>Hands &mdash; Curated Autonomous Capability Packages</h4>
                       </div>
                       <span class="badge" :class="hand.requirements_met ? 'badge-success' : 'badge-dim'" x-text="hand.requirements_met ? 'Ready' : 'Setup needed'"></span>
                     </div>
-                    <div class="card-meta" x-text="hand.description"></div>
-
-                    <!-- Requirements -->
-                    <div class="mt-3" x-show="hand.requirements && hand.requirements.length">
-                      <div class="text-xs text-dim mb-1" style="letter-spacing:0.5px">REQUIREMENTS</div>
-                      <template x-for="req in hand.requirements" :key="req.key">
-                        <div class="flex items-center gap-2 text-xs" style="padding:2px 0">
-                          <span :style="req.satisfied ? 'color:var(--success)' : 'color:var(--danger)'" x-text="req.satisfied ? '\u2713' : '\u2717'"></span>
-                          <span x-text="req.label"></span>
-                        </div>
-                      </template>
-                    </div>
+                    <div class="card-body">
+                      <div class="card-meta" x-text="hand.description"></div>
+
+                      <!-- Requirements -->
+                      <div class="mt-3" x-show="hand.requirements && hand.requirements.length">
+                        <div class="text-xs text-dim mb-1" style="letter-spacing:0.5px">REQUIREMENTS</div>
+                        <template x-for="req in hand.requirements" :key="req.key">
+                          <div class="flex items-center gap-2 text-xs" style="padding:2px 0">
+                            <span :style="req.satisfied ? 'color:var(--success)' : 'color:var(--danger)'" x-text="req.satisfied ? '\u2713' : '\u2717'"></span>
+                            <span x-text="req.label"></span>
+                          </div>
+                        </template>
+                      </div>
 
-                    <!-- Tools -->
-                    <div class="mt-2">
-                      <span class="text-xs text-dim" x-text="hand.tools.length + ' tool(s)'"></span>
-                      <span class="text-xs text-dim" style="margin-left:8px" x-text="hand.dashboard_metrics + ' metric(s)'"></span>
-                      <span class="category-badge" style="margin-left:8px;font-size:0.65rem" x-text="hand.category"></span>
+                      <!-- Tools -->
+                      <div class="mt-2">
+                        <span class="text-xs text-dim" x-text="hand.tools.length + ' tool(s)'"></span>
+                        <span class="text-xs text-dim" style="margin-left:8px" x-text="hand.dashboard_metrics + ' metric(s)'"></span>
+                        <span class="category-badge" style="margin-left:8px;font-size:0.65rem" x-text="hand.category"></span>
+                      </div>
                     </div>
 
                     <!-- Actions -->
-                    <div class="flex justify-between items-center mt-3">
+                    <div class="flex justify-between items-center mt-2">
                       <button class="btn btn-ghost btn-sm" @click="showDetail(hand.id)">Details</button>
                       <button class="btn btn-primary btn-sm" @click="openSetupWizard(hand.id)" :disabled="setupLoading || activatingId === hand.id" x-text="setupLoading ? 'Loading...' : 'Activate'"></button>
                     </div>