diff --git a/webapp/css/style.css b/webapp/css/style.css
index 08de71b..3ea2d99 100644
--- a/webapp/css/style.css
+++ b/webapp/css/style.css
@@ -494,11 +494,22 @@ html, body {
     margin-bottom: 0.25rem;
 }
 
-.metric-card.metric-torque::before { background: #F97316; }
-.metric-card.metric-time::before { background: #8B5CF6; }
-.metric-card.metric-distance::before { background: #10B981; }
+.metric-card.metric-cadence::before { background: #F97316; }
+.metric-card.metric-humanpower::before { background: #8B5CF6; }
+.metric-card.metric-motorpower::before { background: #06B6D4; }
+.metric-card.metric-battery::before { background: #10B981; }
+.metric-card.metric-time::before { background: #A78BFA; }
 .metric-card.metric-mode::before { background: #EC4899; }
 
+.battery-bar {
+    width: 100%; height: 6px; background: var(--color-border);
+    border-radius: 3px; margin-top: 6px; overflow: hidden;
+}
+.battery-fill {
+    height: 100%; border-radius: 3px; transition: width 0.3s, background 0.3s;
+    background: #10B981;
+}
+
 .metric-card.metric-mode {
     grid-column: 1 / -1;
 }