Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

diff --git a/lib/ketchup/views/home.rb b/lib/ketchup/views/home.rb
index 8298379..58806cd 100644
--- a/lib/ketchup/views/home.rb
+++ b/lib/ketchup/views/home.rb
@@ -125,7 +125,7 @@ module Views
               attrs[:"data-urgency"] = format("%.4f", task.urgency)
               attrs[:"data-due-date"] = task[:due_date].to_s
             end
-            li(**attrs) { task_card(task) }
+            li(**attrs) { task_card(task, sortable: sortable) }
           end
         end
       end
@@ -187,7 +187,7 @@ module Views
       end
     end
 
-    def task_card(task)
+    def task_card(task, sortable: false)
       name = task[:note].lines.first&.strip || task[:note]
       overdue = task[:due_date] < Date.today
 
@@ -210,13 +210,10 @@ module Views
             **{ "aria-label": "Complete #{name}" }
           ) { "✓" }
         end
-        div(class: "task-body") do
-          span(class: "task-name") { name }
-          if overdue && task.urgency > 0
-            div(class: "task-meta") do
-              span(class: "task-urgency") { "#{format("%.1f", task.urgency)}x" }
-            end
-          end
+        span(class: "task-name") { name }
+        if sortable && overdue
+          span(class: "task-secondary task-urgency", "x-show": "sort === 'urgency'") { "#{format("%.1f", task.urgency)}x" } if task.urgency > 0
+          span(class: "task-secondary", "x-show": "sort === 'date'") { task[:due_date].to_s }
         end
       end
     end
diff --git a/public/css/app.css b/public/css/app.css
index 2ddfbaf..04f92c2 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -165,8 +165,8 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 
 .task-card {
   display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: start;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
   gap: var(--space-2xs);
   cursor: pointer;
   margin-inline: calc(-1 * var(--space-3xs));
@@ -181,13 +181,6 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   box-shadow: -2px 0 0 #1a1a1a;
 }
 
-.task-body {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
 .task-name {
   font-weight: 600;
   font-size: var(--step--1);
@@ -197,33 +190,18 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   color: #c0392b;
 }
 
-.task-meta {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-3xs);
-  font-size: var(--step--2);
-  color: #777;
-}
 
-.task-due {
+.task-secondary {
+  font-size: var(--step--2);
   color: #777;
-}
-
-.task-overdue .task-due {
-  color: #c0392b;
-}
-
-.task-meta-sep {
-  color: #ccc;
-}
-
-.task-interval {
-  color: #999;
+  white-space: nowrap;
+  min-width: 6em;
 }
 
 .task-urgency {
   color: #c0392b;
   font-weight: 600;
+  min-width: 3em;
 }
 
 .task-detail {
@@ -383,7 +361,6 @@ button[type="submit"]:hover {
 .complete-form button {
   width: 14px;
   height: 14px;
-  translate: 0 5px;
   padding: 0;
   border: 1.5px solid #ccc;
   border-radius: 2px;