diff --git a/docs/images/ralph-tracker-16tasks.png b/docs/images/ralph-tracker-16tasks.png
new file mode 100644
index 00000000..a523b0b0
Binary files /dev/null and b/docs/images/ralph-tracker-16tasks.png differ
diff --git a/docs/images/ralph-tracker-terminal.png b/docs/images/ralph-tracker-terminal.png
new file mode 100644
index 00000000..3a7d040c
Binary files /dev/null and b/docs/images/ralph-tracker-terminal.png differ
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index f6e3dc99..56063417 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -646,33 +646,45 @@ body {
 .ralph-meta-compact {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  min-width: 100px;
+  gap: 0.35rem;
+  min-width: 110px;
+  background: var(--bg-input);
+  padding: 0.4rem 0.5rem;
+  border-radius: 4px;
 }
 
 .ralph-meta-compact .ralph-meta-item {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.5rem;
 }
 
 .ralph-meta-compact .ralph-meta-label {
-  font-size: 0.6rem;
+  font-size: 0.5rem;
   white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--text-muted);
+  width: 55px;
+  flex-shrink: 0;
 }
 
 .ralph-meta-compact code {
-  font-size: 0.55rem;
-  padding: 0.1rem 0.3rem;
-  max-width: 180px;
+  font-size: 0.6rem;
+  padding: 0.15rem 0.35rem;
+  max-width: 160px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  background: var(--bg-card);
+  border-radius: 3px;
 }
 
 .ralph-meta-compact span:not(.ralph-meta-label) {
-  font-size: 0.6rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--text);
 }
 
 /* Compact Tasks Section */
@@ -916,7 +928,7 @@ body {
 }
 
 .ralph-task-card.task-completed .ralph-task-content {
-  text-decoration: line-through;
+  color: var(--text-dim);
 }
 
 /* Empty state (legacy support) */