diff --git a/frontend/src/components/facility3d/SummaryOverlay.tsx b/frontend/src/components/facility3d/SummaryOverlay.tsx
index 8fa60ff..5b16ff8 100644
--- a/frontend/src/components/facility3d/SummaryOverlay.tsx
+++ b/frontend/src/components/facility3d/SummaryOverlay.tsx
@@ -25,8 +25,8 @@ export function SectionSummary({
     if (!isVisible) return null;
 
     return (
-        <Html position={position} center distanceFactor={10}>
-            <div className="bg-slate-900/90 backdrop-blur-md border border-slate-700/50 rounded-lg p-3 shadow-2xl w-48 pointer-events-none select-none">
+        <Html position={position} center distanceFactor={15}>
+            <div className="bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg p-3 shadow-[0_0_20px_rgba(0,0,0,0.5)] w-48 pointer-events-none select-none animate-in fade-in zoom-in duration-200">
                 <div className="flex justify-between items-center mb-2 border-b border-slate-700/50 pb-1">
                     <span className="text-xs font-bold text-cyan-400">{name}</span>
                     <span className="text-[10px] text-slate-400">{plantCount} Plants</span>
@@ -90,19 +90,22 @@ export function RoomSummaryOverlay({
     position: [number, number, number];
 }) {
     return (
-        <Html position={position} center distanceFactor={15}>
-            <div className="flex flex-col items-center group">
-                <div className="bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-full py-1 px-3 shadow-lg flex items-center gap-2 transition-all group-hover:bg-slate-800">
-                    <Leaf className="w-3 h-3 text-green-400" />
-                    <span className="text-[10px] font-bold text-white whitespace-nowrap">{roomName}</span>
-                    <div className="w-px h-3 bg-slate-700 mx-0.5" />
-                    <span className="text-[10px] text-slate-400">{plantCount}</span>
+        <Html position={position} center distanceFactor={25}>
+            <div className="flex flex-col items-center group cursor-pointer">
+                <div className="bg-slate-900/90 backdrop-blur-md border border-slate-700/50 rounded-full py-1.5 px-4 shadow-xl flex items-center gap-2 transition-all group-hover:bg-slate-800 group-hover:border-cyan-500/50 group-hover:scale-110">
+                    <Leaf className="w-3.5 h-3.5 text-green-400" />
+                    <span className="text-xs font-bold text-white whitespace-nowrap">{roomName}</span>
+                    <div className="w-px h-3.5 bg-slate-700 mx-0.5" />
+                    <span className="text-xs text-cyan-400 font-mono">{plantCount}</span>
                     {warnings > 0 && (
-                        <div className="w-2 h-2 rounded-full bg-red-500 animate-ping ml-1" />
+                        <div className="relative flex h-2 w-2 ml-1">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+                        </div>
                     )}
                 </div>
                 {/* Arrow indicator */}
-                <div className="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[6px] border-t-slate-700/50" />
+                <div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[8px] border-t-slate-800/90 -mt-px" />
             </div>
         </Html>
     );
