diff --git a/app/templates/documents/detail.html b/app/templates/documents/detail.html
index f0dca3e..6697d75 100644
--- a/app/templates/documents/detail.html
+++ b/app/templates/documents/detail.html
@@ -1987,48 +1987,43 @@ document.addEventListener("DOMContentLoaded", () => {
       </div>
     </div>
 
+
 {% set vision_fields = vision_candidate_fields or [] %}
 {% set vision_suggestions = vision_field_suggestions or [] %}
 
 {% if vision_suggestions %}
   <div class="detail-card" style="margin:0.75rem 0; border-left:4px solid #16a34a;">
     <div style="display:flex; justify-content:space-between; gap:1rem; align-items:center;">
-      <h3 style="margin:0;">Vision Field Suggestions</h3>
+      <h3 style="margin:0;">Vision Suggested Additions</h3>
       <span style="font-size:0.85rem; color:#64748b;">{{ vision_suggestions|length }} suggestions</span>
     </div>
-    <div style="margin-top:0.5rem; overflow-x:auto;">
-      <table class="data-table" style="width:100%;">
-        <thead>
-          <tr>
-            <th>Action</th>
-            <th>Field</th>
-            <th>Value</th>
-            <th>Confidence</th>
-            <th>OCR Conf.</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for suggestion in vision_suggestions[:12] %}
-            <tr>
-              <td>{{ suggestion.get("action", "") }}</td>
-              <td>{{ suggestion.get("target_field", "") }}</td>
-              <td><code>{{ suggestion.get("value", "") }}</code></td>
-              <td>{{ suggestion.get("confidence", "") }}</td>
-              <td>{{ suggestion.get("ocr_confidence", "") }}</td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+
+    <div style="display:grid; gap:0.5rem; margin-top:0.75rem;">
+      {% for suggestion in vision_suggestions[:8] %}
+        <div style="padding:0.65rem 0.75rem; border:1px solid #dbe3ea; border-radius:0.75rem; background:#f8fafc;">
+          <div style="font-size:0.78rem; color:#64748b; font-weight:700; text-transform:uppercase;">
+            {{ suggestion.get("target_field", "") }} · {{ suggestion.get("action", "") }}
+          </div>
+          <div style="font-size:1rem; font-weight:700; margin-top:0.2rem; color:#1e293b;">
+            {{ suggestion.get("value", "") }}
+          </div>
+          <div style="font-size:0.78rem; color:#64748b; margin-top:0.2rem;">
+            confidence {{ suggestion.get("confidence", "") }}
+            {% if suggestion.get("ocr_confidence") is not none %}
+              · OCR {{ suggestion.get("ocr_confidence", "") }}
+            {% endif %}
+          </div>
+        </div>
+      {% endfor %}
     </div>
   </div>
 {% endif %}
 
 {% if vision_fields %}
-  <div class="detail-card" style="margin:0.75rem 0; border-left:4px solid #7c3aed;">
-    <div style="display:flex; justify-content:space-between; gap:1rem; align-items:center;">
-      <h3 style="margin:0;">Vision Candidate Fields</h3>
-      <span style="font-size:0.85rem; color:#64748b;">{{ vision_fields|length }} candidates</span>
-    </div>
+  <details class="detail-card" style="margin:0.75rem 0; border-left:4px solid #7c3aed;">
+    <summary style="cursor:pointer; font-weight:700; font-size:1.05rem;">
+      Raw Vision Candidate Fields · {{ vision_fields|length }} candidates
+    </summary>
     <div style="margin-top:0.5rem; overflow-x:auto;">
       <table class="data-table" style="width:100%;">
         <thead>
@@ -2040,7 +2035,7 @@ document.addEventListener("DOMContentLoaded", () => {
           </tr>
         </thead>
         <tbody>
-          {% for field in vision_fields[:12] %}
+          {% for field in vision_fields[:20] %}
             <tr>
               <td>{{ field.get("candidate_type", "") }}</td>
               <td><code>{{ field.get("value", "") }}</code></td>
@@ -2051,7 +2046,7 @@ document.addEventListener("DOMContentLoaded", () => {
         </tbody>
       </table>
     </div>
-  </div>
+  </details>
 {% endif %}
 
 <div id="layout-review-shell">