diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 893668a..75372a2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -44,6 +44,10 @@
 const importError = ref("");
 const adminUsers = ref([]);
 const adminUsersTotal = ref(0);
+const diagnostics = reactive({
+  health: "unknown",
+  ready: "unknown"
+});
 
 const form = reactive({
   title: "",
@@ -351,6 +355,13 @@
   adminUsersTotal.value = payload.total;
 }
 
+async function loadDiagnostics() {
+  const [health, ready] = await Promise.allSettled([api.health(), api.ready()]);
+  diagnostics.health =
+    health.status === "fulfilled" ? health.value.status || "ok" : "error";
+  diagnostics.ready = ready.status === "fulfilled" ? ready.value.status || "ok" : "error";
+}
+
 onMounted(async () => {
   try {
     me.value = await api.me();
@@ -364,6 +375,9 @@
   if (tab === "admin" && me.value?.role === "admin" && !adminUsers.value.length) {
     loadAdminUsers();
   }
+  if (tab === "admin" && me.value?.role === "admin") {
+    loadDiagnostics();
+  }
 });
 </script>
 
@@ -688,6 +702,21 @@
           <span class="muted">{{ adminUsersTotal }} records</span>
           <GnButton @click="loadAdminUsers">Refresh</GnButton>
         </div>
+        <div class="diagnostics-row">
+          <span>
+            <small>/health</small>
+            <GnBadge :tone="diagnostics.health === 'ok' ? 'success' : 'danger'">
+              {{ diagnostics.health }}
+            </GnBadge>
+          </span>
+          <span>
+            <small>/ready</small>
+            <GnBadge :tone="diagnostics.ready === 'ok' ? 'success' : 'danger'">
+              {{ diagnostics.ready }}
+            </GnBadge>
+          </span>
+          <GnButton size="sm" @click="loadDiagnostics">Check</GnButton>
+        </div>
         <div class="admin-grid admin-grid-head">
           <span>User</span>
           <span>Status</span>
diff --git a/frontend/src/api.js b/frontend/src/api.js
index e2a075a..c0b0122 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -20,6 +20,8 @@
 }
 
 export const api = {
+  health: () => request("/health"),
+  ready: () => request("/ready"),
   me: () => request("/api/v1/me"),
   listSecrets: (params = {}) => {
     const query = new URLSearchParams(params);
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9d2850b..25b7fd1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -356,6 +356,22 @@
   text-transform: uppercase;
 }
 
+.diagnostics-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10px;
+  border: 1px solid #30384f;
+  background: #151622;
+}
+
+.diagnostics-row span {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .checks {
   display: flex;
   gap: 14px;