diff --git a/webapp/index.html b/webapp/index.html
index c32e7e3..c6d30f9 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -126,14 +126,39 @@
                     </div>
                 </div>
 
-                <div class="metric-card metric-torque">
-                    <div class="metric-label">Torque</div>
+                <div class="metric-card metric-cadence">
+                    <div class="metric-label">Cadence</div>
                     <div class="metric-value">
-                        <span id="val-torque">0</span>
-                        <span class="metric-unit">Nm</span>
+                        <span id="val-cadence">0</span>
+                        <span class="metric-unit">rpm</span>
                     </div>
                 </div>
 
+                <div class="metric-card metric-humanpower">
+                    <div class="metric-label">Human Power</div>
+                    <div class="metric-value">
+                        <span id="val-humanpower">0</span>
+                        <span class="metric-unit">W</span>
+                    </div>
+                </div>
+
+                <div class="metric-card metric-motorpower">
+                    <div class="metric-label">Motor Power</div>
+                    <div class="metric-value">
+                        <span id="val-motorpower">0</span>
+                        <span class="metric-unit">W</span>
+                    </div>
+                </div>
+
+                <div class="metric-card metric-battery">
+                    <div class="metric-label">Battery</div>
+                    <div class="metric-value">
+                        <span id="val-battery">—</span>
+                        <span class="metric-unit">%</span>
+                    </div>
+                    <div class="battery-bar"><div class="battery-fill" id="battery-bar" style="width:0%"></div></div>
+                </div>
+
                 <div class="metric-card metric-time">
                     <div class="metric-label">Ride Time</div>
                     <div class="metric-value">
@@ -141,14 +166,6 @@
                     </div>
                 </div>
 
-                <div class="metric-card metric-distance">
-                    <div class="metric-label">Total Kilometer</div>
-                    <div class="metric-value">
-                        <span id="val-totalkm">0.0</span>
-                        <span class="metric-unit">km</span>
-                    </div>
-                </div>
-
                 <div class="metric-card metric-mode">
                     <div class="metric-label">Mode</div>
                     <div class="metric-value">