diff --git a/public/heatmap.html b/public/heatmap.html
index c2d9e75..35e3594 100644
--- a/public/heatmap.html
+++ b/public/heatmap.html
@@ -2,27 +2,59 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="/favicon.ico">
   <link rel="stylesheet" href="styles.css">
-  <title>Warehouse Heat Map</title>
+  <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">
-    <div class="diagram-container">
+<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>
+
+      <!-- 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>
\ No newline at end of file
