diff --git a/public/trends.html b/public/trends.html
index 99d1c5a..14bcf06 100644
--- a/public/trends.html
+++ b/public/trends.html
@@ -1,11 +1,13 @@
+<!-- public/trends.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Heat Map – Fuego Heat Tracker</title>
+  <title>Trends – Fuego Heat Tracker</title>
   <link rel="icon" href="/favicon.ico">
   <link rel="stylesheet" href="/styles.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
   <header class="main-header">
@@ -16,22 +18,42 @@
     <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
   </header>
 
-  <div class="page-container heatmap">
-    <div id="heatmap-container">
-      <div class="map-svg-container" id="mapSvgContainer">
-        <!-- heatmap.js will inject an <svg> here and draw your dock-doors and areas -->
-      </div>
-      <!-- optional floor selector, if you have multiple floors -->
-      <div class="floor-selector">
-        <label><input type="radio" name="floor" value="1" checked> Floor 1</label>
-        <label><input type="radio" name="floor" value="2"> Floor 2</label>
-        <label><input type="radio" name="floor" value="3"> Floor 3</label>
-        <label><input type="radio" name="floor" value="4"> Floor 4</label>
-      </div>
+  <div class="page-container trends">
+    <h1>Trends</h1>
+
+    <div class="trends-controls">
+      <input id="timeframe-slider" type="range" min="0" max="4" value="0" style="width:75%;">
+      <span id="timeframe-label" style="margin-left:1rem;"></span>
+    </div>
+
+    <div class="trends-metrics">
+      <label><input type="checkbox" name="metric" value="temperature" checked> Temperature</label>
+      <label><input type="checkbox" name="metric" value="humidity"    checked> Humidity</label>
+      <label><input type="checkbox" name="metric" value="heatIndex"   checked> Heat Index</label>
+    </div>
+
+    <div class="chart-container">
+      <canvas id="trend-chart"></canvas>
+    </div>
+
+    <div class="table-wrapper">
+      <table id="trends-table">
+        <thead>
+          <tr>
+            <th class="sortable">Date / Time</th>
+            <th class="sortable">Temperature (°F)</th>
+            <th class="sortable">Humidity (%)</th>
+            <th class="sortable">Heat Index (°F)</th>
+            <th class="sortable">Station/Dock Door</th>
+            <th class="sortable">Location</th>
+          </tr>
+        </thead>
+        <tbody id="trends-table-body"></tbody>
+      </table>
     </div>
   </div>
 
-  <script src="/scripts/heatmap.js"></script>
+  <!--INITIAL_DATA-->
+  <script src="/scripts/trends.js"></script>
 </body>
 </html>
-
