diff --git a/public/heatmap.html b/public/heatmap.html
index 393d7fe..84e6552 100644
--- a/public/heatmap.html
+++ b/public/heatmap.html
@@ -2,43 +2,59 @@
 <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>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="/favicon.ico">
-  <link rel="stylesheet" href="/styles.css">
+  <link rel="stylesheet" href="styles.css">
+  <title>Heat Map</title>
 </head>
 <body>
-  <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>
+<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>
 
-  <div class="page-container heatmap">
-    <!-- Floor selector -->
-    <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="heatmap-container">
 
-    <!-- Scroll + zoom wrapper -->
-    <div id="heatmap-container">
-      <div id="mapSvgContainer" class="map-svg-container">
-        <!-- heatmap.js should append here:
-             <svg width="..." height="...">
-               <rect class="dock-door" ... />
-               <rect class="area-rect" ... /><text>...</text>
-               ...
-             </svg>
-        -->
+  <!-- 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>
+
+      <!-- Warehouse rectangle -->
+      <div class="warehouse"></div>
     </div>
   </div>
 
-  <script src="/scripts/heatmap.js"></script>
+  <!-- Tooltip -->
+  <div id="tooltip" class="tooltip"></div>
+</div>
+
+<script src="scripts/heatmap.js"></script>
 </body>
 </html>
