diff --git a/web/js/events.js b/web/js/events.js
index 40f3c9e..94863de 100644
--- a/web/js/events.js
+++ b/web/js/events.js
@@ -14,8 +14,9 @@ function formatTime(value) {
 
 function makeCard(item) {
   const row = document.createElement("div");
+  const level = (item.level || "info").toLowerCase();
   row.className = "event-card";
-  row.innerHTML = `<span class="badge event-badge">${(item.level || "info").toUpperCase()}</span><span class="muted event-time">${formatTime(item.created_at)}</span><span class="event-type">${item.event_type}</span><span class="event-message">${item.message}</span>`;
+  row.innerHTML = `<span class="badge event-badge level-${level}">${level.toUpperCase()}</span><span class="muted event-time">${formatTime(item.created_at)}</span><span class="event-type">${item.event_type}</span><span class="event-message">${item.message}</span>`;
   return row;
 }
 
diff --git a/web/styles.css b/web/styles.css
index a4e749e..71f2db8 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -906,6 +906,11 @@ button.danger:hover { background: var(--danger-hover); }
   flex-shrink: 0;
 }
 
+.badge.level-info     { background: rgba(52, 211, 153, 0.1);  color: #34d399; }
+.badge.level-warn     { background: rgba(251, 191, 36, 0.1);  color: #fbbf24; }
+.badge.level-error    { background: rgba(239, 68, 68, 0.1);   color: #f87171; }
+.badge.level-critical { background: rgba(239, 68, 68, 0.15);  color: #dc2626; }
+
 .event-time {
   flex-shrink: 0;
   font-size: 11px;