diff --git a/dashboard/app.js b/dashboard/app.js
index f5f7c51..1faceb0 100644
--- a/dashboard/app.js
+++ b/dashboard/app.js
@@ -47,7 +47,7 @@ function formatTimestamp(ts) {
 }
 
 function getStatusBadge(status) {
-  const cls = STATUS_COLORS[status] || 'badge-pending';
+  const cls = STATUS_COLORS[status] || DEFAULT_BADGE_CLASS;
   return `<span class="badge ${cls}">${status === 'RefundRequested' ? 'Refund Requested' : status}</span>`;
 }
 
diff --git a/dashboard/app.test.js b/dashboard/app.test.js
index 898bb83..a5ab36f 100644
--- a/dashboard/app.test.js
+++ b/dashboard/app.test.js
@@ -135,9 +135,9 @@ describe('getStatusBadge()', () => {
     loadAppScript();
   });
 
-  it('returns a span with badge-pending for unknown statuses', () => {
+  it('returns a span with badge-unknown (the safe fallback) for unknown statuses', () => {
     const badge = getStatusBadge('Unknown');
-    expect(badge).toContain('badge-pending');
+    expect(badge).toContain('badge-unknown');
     expect(badge).toContain('<span class="badge');
   });
 
diff --git a/dashboard/style.css b/dashboard/style.css
index f195a1a..b3cae2a 100644
--- a/dashboard/style.css
+++ b/dashboard/style.css
@@ -185,6 +185,12 @@ tbody td {
   color: #065f46;
 }
 
+/* Fallback badge for unrecognized/future contract statuses */
+.badge-unknown {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
 .legend {
   margin-top: 24px;
   padding: 16px;