diff --git a/src/pobsync_backend/templates/pobsync_backend/base.html b/src/pobsync_backend/templates/pobsync_backend/base.html
index 403ced1..73606f4 100644
--- a/src/pobsync_backend/templates/pobsync_backend/base.html
+++ b/src/pobsync_backend/templates/pobsync_backend/base.html
@@ -144,6 +144,54 @@
       font-size: 12px;
       gap: 10px;
     }
+    .host-list {
+      display: grid;
+      gap: 12px;
+    }
+    .host-card {
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 14px;
+    }
+    .host-card-header {
+      align-items: start;
+      display: flex;
+      gap: 12px;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .host-card-title {
+      display: grid;
+      gap: 3px;
+      min-width: 0;
+    }
+    .host-card-title a {
+      font-size: 17px;
+      font-weight: 650;
+      overflow-wrap: anywhere;
+    }
+    .host-card-status {
+      flex: 0 0 auto;
+    }
+    .host-card-grid {
+      display: grid;
+      gap: 12px;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+    .host-card-item {
+      display: grid;
+      gap: 3px;
+      min-width: 0;
+    }
+    .host-card-item .label {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 650;
+      text-transform: uppercase;
+    }
+    .host-card-item .value {
+      overflow-wrap: anywhere;
+    }
     .messages { display: grid; gap: 8px; margin-bottom: 18px; }
     .message {
       background: var(--panel);
diff --git a/src/pobsync_backend/templates/pobsync_backend/dashboard.html b/src/pobsync_backend/templates/pobsync_backend/dashboard.html
index 5daff1c..1a51cbd 100644
--- a/src/pobsync_backend/templates/pobsync_backend/dashboard.html
+++ b/src/pobsync_backend/templates/pobsync_backend/dashboard.html
@@ -52,61 +52,74 @@
 
   <section class="panel">
     <h2>Hosts</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Host</th>
-          <th>Address</th>
-          <th>Enabled</th>
-          <th>Snapshots</th>
-          <th>Latest Snapshot</th>
-          <th>Latest Run</th>
-          <th>Next Run</th>
-          <th>New Data</th>
-          <th>Runs</th>
-          <th>Retention</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for host in hosts %}
-          <tr>
-            <td><a href="{% url 'host_detail' host.host %}">{{ host.host }}</a></td>
-            <td>{{ host.address }}</td>
-            <td>{{ host.enabled|yesno:"yes,no" }}</td>
-            <td>{{ host.snapshot_count }}</td>
-            <td>
+    <div class="host-list">
+      {% for host in hosts %}
+        <article class="host-card">
+          <div class="host-card-header">
+            <div class="host-card-title">
+              <a href="{% url 'host_detail' host.host %}">{{ host.host }}</a>
+              <span class="muted">{{ host.address }}</span>
+            </div>
+            <div class="host-card-status">
+              <span class="status {% if host.enabled %}ok{% else %}skipped{% endif %}">{{ host.enabled|yesno:"enabled,disabled" }}</span>
+            </div>
+          </div>
+          <div class="host-card-grid">
+            <div class="host-card-item">
+              <div class="label">Latest Snapshot</div>
+              <div class="value">
               {% if host.latest_snapshot %}
                 <a href="{% url 'snapshot_detail' host.latest_snapshot.id %}">{{ host.latest_snapshot.dirname }}</a>
                 <div class="muted">{{ host.latest_snapshot.kind }} {{ host.latest_snapshot.status }}</div>
               {% else %}
                 <span class="muted">none</span>
               {% endif %}
-            </td>
-            <td>
+              </div>
+            </div>
+            <div class="host-card-item">
+              <div class="label">Latest Run</div>
+              <div class="value">
               {% if host.stats_summary.latest_run.id %}
                 <a href="{% url 'run_detail' host.stats_summary.latest_run.id %}">Run {{ host.stats_summary.latest_run.id }}</a>
                 <div class="muted">{{ host.stats_summary.latest_run.run_type }} {{ host.stats_summary.latest_run.duration_seconds|default:"" }}{% if host.stats_summary.latest_run.duration_seconds is not None %}s{% endif %}</div>
               {% else %}
                 <span class="muted">none</span>
               {% endif %}
-            </td>
-            <td>
+              </div>
+            </div>
+            <div class="host-card-item">
+              <div class="label">Next Run</div>
+              <div class="value">
               {% if host.next_run_at %}
                 {{ host.next_run_at|date:"Y-m-d H:i T" }}
                 <div class="muted">{{ scheduler_timezone }}</div>
               {% else %}
                 <span class="muted">none</span>
               {% endif %}
-            </td>
-            <td>{{ host.stats_summary.latest_run.rsync.literal_data_bytes|filesizeformat }}</td>
-            <td>{{ host.run_count }}</td>
-            <td>d{{ host.retention_daily }} w{{ host.retention_weekly }} m{{ host.retention_monthly }} y{{ host.retention_yearly }}</td>
-          </tr>
-        {% empty %}
-          <tr><td colspan="10" class="muted">No hosts configured yet.</td></tr>
-        {% endfor %}
-      </tbody>
-    </table>
+              </div>
+            </div>
+            <div class="host-card-item">
+              <div class="label">Snapshots</div>
+              <div class="value">{{ host.snapshot_count }}</div>
+            </div>
+            <div class="host-card-item">
+              <div class="label">Runs</div>
+              <div class="value">{{ host.run_count }}</div>
+            </div>
+            <div class="host-card-item">
+              <div class="label">New Data</div>
+              <div class="value">{{ host.stats_summary.latest_run.rsync.literal_data_bytes|filesizeformat }}</div>
+            </div>
+            <div class="host-card-item">
+              <div class="label">Retention</div>
+              <div class="value">d{{ host.retention_daily }} w{{ host.retention_weekly }} m{{ host.retention_monthly }} y{{ host.retention_yearly }}</div>
+            </div>
+          </div>
+        </article>
+      {% empty %}
+        <p class="muted">No hosts configured yet.</p>
+      {% endfor %}
+    </div>
   </section>
 
   <section class="panel">