diff --git a/frontend/src/components/facility3d/RoomObject.tsx b/frontend/src/components/facility3d/RoomObject.tsx
index 0f6be41..bced0e4 100644
--- a/frontend/src/components/facility3d/RoomObject.tsx
+++ b/frontend/src/components/facility3d/RoomObject.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Text } from '@react-three/drei';
+import { Html } from '@react-three/drei';
 import * as THREE from 'three';
 import type { Room3D } from '../../lib/layoutApi';
 import { PlantPosition, VisMode, COLORS } from './types';
@@ -94,31 +94,29 @@ export function RoomObject({ room, visMode, onPlantClick, highlightedTags, dimMo
                 position={[actualRoom.posX + actualRoom.width / 2, 6, actualRoom.posY + actualRoom.height / 2]}
             />
 
-            {/* Room label - positioned above the actual content area */}
-            <Text
-                position={[actualRoom.posX + actualRoom.width / 2, 0.05, actualRoom.posY + actualRoom.height / 2]}
-                rotation={[-Math.PI / 2, 0, 0]}
-                fontSize={Math.min(actualRoom.width, actualRoom.height) / 8}
-                color="#f8fafc"
-                fillOpacity={0.5}
-                anchorX="center"
-                anchorY="middle"
+            {/* Room label - HTML Overlay for clear readability */}
+            <Html
+                position={[actualRoom.posX + actualRoom.width / 2, 0, actualRoom.posY + actualRoom.height / 2]}
+                center
+                zIndexRange={[100, 0]}
             >
-                {room.name}
-            </Text>
+                <div className="px-3 py-1.5 bg-slate-900/80 backdrop-blur-sm border border-white/10 rounded-lg text-white font-medium text-sm whitespace-nowrap shadow-xl pointer-events-none select-none transform transition-transform">
+                    {room.name}
+                </div>
+            </Html>
 
             {(visMode === 'TEMP' || visMode === 'HUMIDITY') && (
-                <Text
+                <Html
                     position={[actualRoom.posX + actualRoom.width / 2, 4, actualRoom.posY + actualRoom.height / 2]}
-                    rotation={[-Math.PI / 4, 0, 0]}
-                    fontSize={Math.min(4, actualRoom.width / 4)}
-                    color="#fff"
-                    outlineColor="#000"
-                    outlineWidth={0.15}
-                    anchorX="center"
+                    center
                 >
-                    {visMode === 'TEMP' ? `${env.temp}°F` : `${env.humidity}%`}
-                </Text>
+                    <div className={cn(
+                        "px-2 py-1 rounded text-xs font-bold text-white shadow-lg pointer-events-none",
+                        visMode === 'TEMP' ? "bg-orange-500" : "bg-blue-500"
+                    )}>
+                        {visMode === 'TEMP' ? `${env.temp}°F` : `${env.humidity}%`}
+                    </div>
+                </Html>
             )}
 
             {/* Room floor - use calculated bounds */}
