diff --git a/public/heatmap.html b/public/heatmap.html
index 84e6552..99d1c5a 100644
--- a/public/heatmap.html
+++ b/public/heatmap.html
@@ -2,59 +2,36 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Heat Map – Fuego Heat Tracker</title>
   <link rel="icon" href="/favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-  <title>Heat Map</title>
+  <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
-<header class="main-header">
-  <img src="/image/logo.png" class="logo" alt="Amazon Logo">
-  <span class="header-title"> | Fuego - Heat Tracker</span>
-  <button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
-  <button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
-  <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
-  <button class="nav-btn" onclick="location.href='/input-area.html'">Area Reading</button>
-</header>
+  <header class="main-header">
+    <img src="/image/logo.png" alt="Amazon Logo" class="logo">
+    <span class="header-title">| Fuego – Heat Tracker</span>
+    <button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
+    <button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
+    <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
+  </header>
 
-<div class="heatmap-container">
-
-  <!-- Floor selector -->
-  <div id="floor-selector" 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="heatmap-scroll">
-    <div id="diagram" class="diagram-container">
-
-      <!-- Dock-door row -->
-      <div id="dock-row" class="dock-row"></div>
-
-      <!-- Regions: A-Mod (east) now on left, AFE center, B-Mod (west) on right -->
-      <div class="regions-container">
-        <div id="region-amod"     class="region region-amod">
-          <div class="ar-center">AR Floor<br>A MOD</div>
-        </div>
-        <div id="region-preslam"  class="region region-preslam">
-          <div class="ar-center">Outbound Pre-Slam<br>AFE</div>
-        </div>
-        <div id="region-bmod"     class="region region-bmod">
-          <div class="ar-center">AR Floor<br>B MOD</div>
-        </div>
+  <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>
-
-      <!-- Warehouse rectangle -->
-      <div class="warehouse"></div>
     </div>
   </div>
 
-  <!-- Tooltip -->
-  <div id="tooltip" class="tooltip"></div>
-</div>
-
-<script src="scripts/heatmap.js"></script>
+  <script src="/scripts/heatmap.js"></script>
 </body>
 </html>
+
