diff --git a/web/templates/import_result.html b/web/templates/import_result.html
index 931609c..6b4637a 100644
--- a/web/templates/import_result.html
+++ b/web/templates/import_result.html
@@ -1,58 +1,105 @@
 {% extends "base.html" %}
 {% block body_class %}themed-bg{% endblock %}
+
 {% block content %}
-<div class="container">
+<div class="result-wrap">
+
   <div class="card">
-    <h1 class="page-title">{{ dry_run|yesno:"Dry-run Preview,Import Result" }}</h1>
-    <p>{{ report }}</p>
+    <h1 class="page-title">Import Results</h1>
 
-    {% if errors %}
-      <h3>Errors (first {{ errors|length }})</h3>
-      <ul class="small">
-        {% for e in errors %}
-          <li>{{ e }}</li>
-        {% endfor %}
-      </ul>
+    {% if dry_run %}
+      <div class="alert alert-info">Dry run only — no changes were saved.</div>
     {% endif %}
 
-    {% if rows %}
-      <h3 style="margin-top:10px;">Preview (first {{ rows|length }})</h3>
-      <div class="small muted">Truncated fields shown for readability.</div>
-      <table class="table" style="margin-top:8px;">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Subject</th><th>Illustration</th><th>Application</th><th>Scripture</th>
-            <th>Source</th><th>Talk Title</th><th>Talk #</th><th>Code</th><th>Date</th><th>Date Edited</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for rownum, r in rows %}
-            <tr>
-              <td>{{ rownum }}</td>
-              <td>{{ r.Subject }}</td>
-              <td>{{ r.Illustration }}</td>
-              <td>{{ r.Application }}</td>
-              <td>{{ r.Scripture }}</td>
-              <td>{{ r.Source }}</td>
-              <td>{{ r."Talk Title" }}</td>
-              <td>{{ r."Talk Number" }}</td>
-              <td>{{ r.Code }}</td>
-              <td>{{ r.Date }}</td>
-              <td>{{ r."Date Edited" }}</td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    {% endif %}
-
-    <div class="result-toolbar" style="margin-top:12px;">
-      <div class="rt-left"></div>
-      <div class="rt-right">
-        <a class="btn btn-primary" href="{% url 'import_wizard' %}">Back to Import</a>
-        <a class="btn btn-secondary" href="{% url 'settings_home' %}">Close</a>
+    {% if report.header_ok is defined and not report.header_ok %}
+      <div class="alert alert-warning">
+        The first row didn’t match the expected header; a clean header was injected automatically.
       </div>
+    {% endif %}
+
+    <div class="meta-grid" style="margin-top:10px;">
+      {% if report.total_rows is not None %}
+        <div class="meta-item">
+          <div class="meta-label">Total Rows</div>
+          <div class="meta-value">{{ report.total_rows }}</div>
+        </div>
+      {% endif %}
+      {% if report.created is not None %}
+        <div class="meta-item">
+          <div class="meta-label">Created</div>
+          <div class="meta-value">{{ report.created }}</div>
+        </div>
+      {% endif %}
+      {% if report.updated is not None %}
+        <div class="meta-item">
+          <div class="meta-label">Updated</div>
+          <div class="meta-value">{{ report.updated }}</div>
+        </div>
+      {% endif %}
+      {% if report.skipped is not None %}
+        <div class="meta-item">
+          <div class="meta-label">Skipped</div>
+          <div class="meta-value">{{ report.skipped }}</div>
+        </div>
+      {% endif %}
+      {% if report.errors is not None %}
+        <div class="meta-item">
+          <div class="meta-label">Errors</div>
+          <div class="meta-value">{{ report.errors }}</div>
+        </div>
+      {% endif %}
     </div>
   </div>
+
+  {% if report.columns and report.preview %}
+    <div class="card" style="margin-top:16px;">
+      <h2 class="page-title">Preview</h2>
+      <div class="muted small" style="margin-bottom:10px;">
+        Showing up to {{ report.preview|length }} rows.
+      </div>
+
+      <div style="overflow:auto;">
+        <table class="table">
+          <thead>
+            <tr>
+              {% for c in report.columns %}
+                <th>{{ c }}</th>
+              {% endfor %}
+            </tr>
+          </thead>
+          <tbody>
+            {% for row in report.preview %}
+              <tr>
+                {% for cell in row %}
+                  <td>{{ cell }}</td>
+                {% endfor %}
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {% else %}
+    <div class="card" style="margin-top:16px;">
+      <p class="muted">No preview rows to display.</p>
+    </div>
+  {% endif %}
+
+  {% if report.problems %}
+    <div class="card" style="margin-top:16px;">
+      <h2 class="page-title">Problems</h2>
+      <ul class="muted">
+        {% for p in report.problems %}
+          <li>{{ p }}</li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+
+  <div class="result-toolbar" style="margin-top:16px;">
+    <a class="btn btn-secondary" href="{% url 'import_wizard' %}">← Back to Import</a>
+    <a class="btn btn-primary" href="{% url 'settings_home' %}">Settings</a>
+  </div>
+
 </div>
 {% endblock %}
\ No newline at end of file