diff --git a/frontend/src/components/ZoneCard.tsx b/frontend/src/components/ZoneCard.tsx
index 5dc8cf5..426923c 100644
--- a/frontend/src/components/ZoneCard.tsx
+++ b/frontend/src/components/ZoneCard.tsx
@@ -42,7 +42,7 @@ export default function ZoneCard({ zone, onClick }: { zone: ZoneStatus; onClick:
   const fanLevel = ac ? (MHI_FAN_SPEEDS as readonly string[]).indexOf(ac.fan_speed || '') + 1 : 0
 
   return (
-    <div className={`card zone-card st-${zone.room_state}`} onClick={onClick}>
+    <div className={`card zone-card st-${zone.room_state}`} onClick={onClick} title={ROOM_STATE_LABELS[zone.room_state]}>
       <div className="zone-card-title">
         <span>
           {zone.name}
@@ -57,7 +57,6 @@ export default function ZoneCard({ zone, onClick }: { zone: ZoneStatus; onClick:
         </span>
         {!zone.auto_mode && <span className="badge badge-outline">Manual</span>}
       </div>
-      <div className={`badge badge-st-${zone.room_state}`}>{ROOM_STATE_LABELS[zone.room_state]}</div>
 
       <div className="zone-card-body">
         <div className="zone-card-main">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f6cca4d..9ae0818 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -26,12 +26,12 @@ body { background: var(--body-bg); color: var(--text-dark); font-family: var(--f
   --app-primary:       #c1440e;
   --app-primary-light: #e0692f;
 
-  /* Room state colours — vacant/booked = cool greys/blues, heating_up/occupied = warm */
+  /* Room state colours — matches NewBook's status colours: booked=green, occupied=blue, departing=purple */
   --st-vacant:        #64748b;
-  --st-booked:        #2563eb;
+  --st-booked:        #16a34a;
   --st-heating-up:    #d97706;
-  --st-occupied:      #dc2626;
-  --st-cooling-down:  #0891b2;
+  --st-occupied:      #2563eb;
+  --st-cooling-down:  #7c3aed;
 
   --health-healthy:      #16a34a;
   --health-degraded:     #d97706;
@@ -227,7 +227,7 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 
 .rad-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
 .rad-icon { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-mid); }
-.rad-icon.heating { color: var(--st-occupied); }
+.rad-icon.heating { color: var(--st-heating-up); }
 .rad-icon.idle     { color: var(--st-cooling-down); }
 
 .ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; color: var(--text-dark); }
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 5606081..bb58bb5 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -8,7 +8,7 @@ export type PhotoType = 'device' | 'serial_plate'
 export const ROOM_STATE_LABELS: Record<RoomState, string> = {
   vacant: 'Vacant',
   booked: 'Booked',
-  heating_up: 'Heating Up',
+  heating_up: 'Preparing',
   occupied: 'Occupied',
   cooling_down: 'Cooling Down',
 }