diff --git a/apps/dashboard/assets/js/renderers/backrest.js b/apps/dashboard/assets/js/renderers/backrest.js
new file mode 100644
index 0000000..62ba0c1
--- /dev/null
+++ b/apps/dashboard/assets/js/renderers/backrest.js
@@ -0,0 +1,50 @@
+export function renderBackrest(state) {
+  const d = state.backrest || {};
+  const online = d.source_status === "online";
+
+  const pill = document.getElementById("backrest-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; };
+
+  if (online) {
+    set("backrest-repos", d.repo_count ?? 0);
+    set("backrest-last", fmtAge(d.last_backup_age_hours));
+    set("backrest-errors", d.error_count ?? 0);
+  } else {
+    set("backrest-repos", "—");
+    set("backrest-last", "—");
+    set("backrest-errors", "—");
+  }
+
+  // Color last backup age warn if > 26h
+  const lastEl = document.getElementById("backrest-last");
+  if (lastEl && online) {
+    const age = d.last_backup_age_hours;
+    lastEl.style.color = age !== null && age > 26 ? "var(--clr-warn)" : "";
+  }
+
+  // Color errors warn if any
+  const errEl = document.getElementById("backrest-errors");
+  if (errEl && online) {
+    errEl.style.color = (d.error_count ?? 0) > 0 ? "var(--clr-warn)" : "";
+  }
+
+  // Status dot
+  const dot = document.getElementById("backrest-status-dot");
+  if (dot) {
+    const s = d.last_backup_status || "unknown";
+    dot.className = "status-dot dot-" + (s === "ok" ? "ok" : s === "error" ? "err" : "unk");
+    dot.title = s;
+  }
+}
+
+function fmtAge(hours) {
+  if (hours === null || hours === undefined) return "—";
+  if (hours < 1) return `${Math.round(hours * 60)}m ago`;
+  if (hours < 24) return `${Math.round(hours)}h ago`;
+  return `${Math.round(hours / 24)}d ago`;
+}