diff --git a/web/css/app.css b/web/css/app.css
index c157d60..3c43197 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -332,6 +332,8 @@ table.data tbody tr[class*="os-"]:hover{background:linear-gradient(180deg, color
 .overview-card.ok{border-color:rgba(16,185,129,.35)}
 .overview-card.warn{border-color:rgba(245,158,11,.45)}
 .overview-card.err{border-color:rgba(239,68,68,.5)}
+.overview-card.traffic-down{border-color:rgba(16,185,129,.38)}
+.overview-card.traffic-up{border-color:rgba(59,130,246,.38)}
 .ops-toolbar{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;border:1px solid var(--border);background:var(--bg-alt);border-radius:8px;padding:.75rem}
 .search-field,.select-field{display:flex;flex-direction:column;gap:.3rem;color:var(--text-dim);font-size:12px}
 .search-field input,.select-field select,.config-form input,.config-form textarea{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;padding:0 .65rem;outline:none;transition:var(--trans)}
diff --git a/web/js/app.js b/web/js/app.js
index e7ef5b8..1092d3b 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -224,8 +224,8 @@ function renderOverview(){
   $('overviewCards').innerHTML = [
     card('在线主机', `${online}/${total}`, '当前在线节点', online === total ? 'ok' : 'warn'),
     card('证书风险', sslWarn, sslWarn ? '过期或域名不匹配' : '证书正常', sslWarn ? 'warn' : 'ok'),
-    card('本月上行', humanMinMBFromB(monthUp), '上传累计', ''),
-    card('本月下行', humanMinMBFromB(monthDown), '下载累计', ''),
+    card('本月下行', humanMinMBFromB(monthDown), '下载累计', 'traffic-down'),
+    card('本月上行', humanMinMBFromB(monthUp), '上传累计', 'traffic-up'),
     card('活跃告警', alerts.total, `离线 ${alerts.offline} / 异常 ${alerts.abnormal} / 被墙 ${alerts.blocked}`, alerts.total ? (alerts.offline || alerts.blocked ? 'err' : 'warn') : 'ok')
   ].join('');
 }