diff --git a/public/trends.html b/public/trends.html
index 05f6970..99d1c5a 100644
--- a/public/trends.html
+++ b/public/trends.html
@@ -1,13 +1,11 @@
-<!-- public/trends.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Trends – Fuego Heat Tracker</title>
+  <title>Heat Map – 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">
@@ -18,43 +16,22 @@
     <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
   </header>
 
-  <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 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>
   </div>
 
-  <!--INITIAL_DATA-->
-  <script src="/scripts/trends.js"></script>
+  <script src="/scripts/heatmap.js"></script>
 </body>
 </html>
 
