diff --git a/apps/dashboard/assets/js/renderers/uptime-kuma.js b/apps/dashboard/assets/js/renderers/uptime-kuma.js
new file mode 100644
index 0000000..aaee541
--- /dev/null
+++ b/apps/dashboard/assets/js/renderers/uptime-kuma.js
@@ -0,0 +1,53 @@
+export function renderUptimeKuma(state) {
+  const d = state.uptime_kuma || {};
+  const online = d.source_status === "online";
+
+  const pill = document.getElementById("uk-pill");
+  if (pill) {
+    pill.textContent = online ? "ONLINE" : "OFFLINE";
+    pill.className = "status-pill " + (online ? "pill-online" : "pill-offline");
+  }
+
+  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+  set("uk-up", online ? (d.monitors_up ?? 0) : "—");
+  set("uk-down", online ? (d.monitors_down ?? 0) : "—");
+  const total = (d.monitors_up ?? 0) + (d.monitors_down ?? 0);
+  const pct = total > 0 ? Math.round((d.monitors_up / total) * 100) : (online ? 100 : 0);
+  set("uk-uptime", online ? `${pct}%` : "—");
+
+  // down monitors list
+  const downList = document.getElementById("uk-down-list");
+  if (downList) {
+    const downs = (d.monitors || []).filter(m => m.status === "offline");
+    if (!online || downs.length === 0) {
+      downList.innerHTML = "";
+    } else {
+      downList.innerHTML = downs.map(m =>
+        `<span class="uk-down-name">▼ ${m.name}</span>`
+      ).join("");
+    }
+  }
+
+  // uptime bars per monitor (top 6 by name)
+  const barsContainer = document.getElementById("uk-bars");
+  if (barsContainer) {
+    const monitors = (d.monitors || []).slice(0, 6);
+    if (!online || monitors.length === 0) {
+      barsContainer.innerHTML = '<span class="widget-offline-msg">—</span>';
+    } else {
+      barsContainer.innerHTML = monitors.map(m => {
+        const beats = m.heartbeats && m.heartbeats.length
+          ? m.heartbeats
+          : (m.status === "online" ? Array(20).fill(1) : Array(20).fill(0));
+        const segments = beats.slice(-20).map(b =>
+          `<span class="hb-seg ${b ? "hb-up" : "hb-down"}"></span>`
+        ).join("");
+        return `
+          <div class="uk-monitor-row">
+            <span class="uk-monitor-name">${m.name}</span>
+            <span class="uk-bar">${segments}</span>
+          </div>`;
+      }).join("");
+    }
+  }
+}