diff --git a/internal/web/ui/templates/system.html b/internal/web/ui/templates/system.html
index c13288d..a133fa0 100644
--- a/internal/web/ui/templates/system.html
+++ b/internal/web/ui/templates/system.html
@@ -26,9 +26,9 @@
 <div class="detail-grid">
   <div class="card">
     <h2 class="title-with-icon">{{icon "heartbeat"}}<span>服务状态</span></h2>
-    <div style="display:flex;gap:24px;margin-top:8px">
-      <div><span class="muted small">管理后台</span> <span class="pill" id="svc-status">检测中…</span></div>
-      <div><span class="muted small">接口状态</span> <span class="pill" id="api-status">检测中…</span></div>
+    <div class="info-list compact-list">
+      <div><span>管理后台</span><strong id="svc-status">检测中…</strong></div>
+      <div><span>接口状态</span><strong id="api-status">检测中…</strong></div>
     </div>
     <div class="actions" style="margin-top:12px">
       <button class="btn ghost" type="button" id="btn-refresh">刷新</button>
@@ -43,39 +43,39 @@
 
   function check() {
     svcEl.textContent = "检测中…";
-    svcEl.className = "pill";
+    svcEl.style.color = "";
     apiEl.textContent = "检测中…";
-    apiEl.className = "pill";
+    apiEl.style.color = "";
 
     fetch("/health")
       .then(function(r) { return r.text(); })
       .then(function(t) {
         if (t.indexOf("ok") !== -1) {
           svcEl.textContent = "运行正常";
-          svcEl.className = "pill ok";
+          svcEl.style.color = "var(--green)";
         } else {
           svcEl.textContent = "异常";
-          svcEl.className = "pill bad";
+          svcEl.style.color = "var(--danger-soft-text)";
         }
       })
       .catch(function() {
         svcEl.textContent = "无法连接";
-        svcEl.className = "pill bad";
+        svcEl.style.color = "var(--danger-soft-text)";
       });
 
     fetch("/openapi.json")
       .then(function(r) {
         if (r.ok) {
           apiEl.textContent = "正常";
-          apiEl.className = "pill ok";
+          apiEl.style.color = "var(--green)";
         } else {
           apiEl.textContent = "异常 (" + r.status + ")";
-          apiEl.className = "pill bad";
+          apiEl.style.color = "var(--danger-soft-text)";
         }
       })
       .catch(function() {
         apiEl.textContent = "无法连接";
-        apiEl.className = "pill bad";
+        apiEl.style.color = "var(--danger-soft-text)";
       });
   }