diff --git a/rogue-thi-app/components/RoomMap.jsx b/rogue-thi-app/components/RoomMap.jsx
index 2b6c9771..7e3c201b 100644
--- a/rogue-thi-app/components/RoomMap.jsx
+++ b/rogue-thi-app/components/RoomMap.jsx
@@ -206,7 +206,8 @@ export default function RoomMap ({ highlight, roomData }) {
           positions={entry.coordinates}
           pathOptions={{
             ...entry.options,
-            className: special ? special.color : (avail ? styles.roomAvailable : styles.roomOccupied)
+            color: special && avail ? special.color : null,
+            className: `${avail ? (!special ? styles.roomAvailable : '') : styles.roomOccupied}`
           }}
         />
       </FeatureGroup>
diff --git a/rogue-thi-app/styles/RoomMap.module.css b/rogue-thi-app/styles/RoomMap.module.css
index 1b174cd5..d766a7ec 100644
--- a/rogue-thi-app/styles/RoomMap.module.css
+++ b/rogue-thi-app/styles/RoomMap.module.css
@@ -73,7 +73,7 @@
   height: 1em;
   margin-bottom: -2px;
   border-radius: 0.5em;
-  background-color: #8845ef;
+  background-color: var(--primary);
 }
 
 .roomAvailable {
@@ -94,7 +94,7 @@
   height: 1em;
   margin-bottom: -2px;
   border-radius: 0.5em;
-  background-color: #6c757d;
+  background-color: var(--gray);
 }
 
 .legendSpecial::before {