diff --git a/app/main.py b/app/main.py
index 0535b3c..2fecda7 100644
--- a/app/main.py
+++ b/app/main.py
@@ -568,6 +568,8 @@ PAGE_HTML = """<!DOCTYPE html>
             <button class="mode-btn active" id="tm-members" onclick="setTrendMetric('members')">Members</button>
             <button class="mode-btn" id="tm-requests" onclick="setTrendMetric('requests')">Requests</button>
             <button class="mode-btn" id="tm-spend" onclick="setTrendMetric('spend')">Spend</button>
+            <button class="mode-btn" id="tm-energy" onclick="setTrendMetric('energy')">Energy</button>
+            <button class="mode-btn" id="tm-co2e" onclick="setTrendMetric('co2e')">Carbon</button>
           </span>
           <span class="trend-group">
             <span class="board-note" style="margin:0;">Period</span>
@@ -807,7 +809,9 @@ let trendDays = 90;            // 0 = all time
 const TREND_CONF = {
   members:  { kind: "line", title: "The co-op over time" },
   requests: { kind: "bar",  title: "Requests the co-op served" },
-  spend:    { kind: "bar",  title: "What the co-op spent" }
+  spend:    { kind: "bar",  title: "What the co-op spent" },
+  energy:   { kind: "bar",  title: "Energy the co-op used" },
+  co2e:     { kind: "bar",  title: "Carbon the co-op emitted" }
 };
 
 async function loadMetrics() {
@@ -830,6 +834,8 @@ function setTrendMetric(m) {
   $("tm-members").className = "mode-btn" + (m === "members" ? " active" : "");
   $("tm-requests").className = "mode-btn" + (m === "requests" ? " active" : "");
   $("tm-spend").className = "mode-btn" + (m === "spend" ? " active" : "");
+  $("tm-energy").className = "mode-btn" + (m === "energy" ? " active" : "");
+  $("tm-co2e").className = "mode-btn" + (m === "co2e" ? " active" : "");
   renderTrends();
 }
 
@@ -844,13 +850,15 @@ function setTrendDays(d) {
 function trendVal(row) {
   if (trendMetric === "members") return row.members_total;
   if (trendMetric === "spend") return row.spend_usd;
+  if (trendMetric === "energy") return row.energy_wh;
+  if (trendMetric === "co2e") return row.co2e_g;
   return row.requests;
 }
 
 // Y-axis step: counts are people and things, so ticks stay whole numbers;
 // money uses the 1/2/5 x 10^k rule so ticks read $10.00, not $4.92.
 function niceStep(raw) {
-  if (trendMetric === "spend") {
+  if (trendMetric === "spend" || trendMetric === "energy" || trendMetric === "co2e") {
     const mag = Math.pow(10, Math.floor(Math.log10(Math.max(raw, 1e-9))));
     const norm = raw / mag;
     const nice = norm <= 1 ? 1 : (norm <= 2 ? 2 : (norm <= 5 ? 5 : 10));
@@ -863,6 +871,8 @@ function niceStep(raw) {
 function trendLabel(v) {
   if (v === null || v === undefined) return "not measured";
   if (trendMetric === "spend") return fmtMoney(v);
+  if (trendMetric === "energy") return Number(v).toLocaleString() + " Wh";
+  if (trendMetric === "co2e") return Number(v).toLocaleString() + " g";
   return Number(v).toLocaleString();
 }