diff --git a/src/pages/XRSession.tsx b/src/pages/XRSession.tsx
index 9804999..6b98b8f 100644
--- a/src/pages/XRSession.tsx
+++ b/src/pages/XRSession.tsx
@@ -300,13 +300,24 @@ function XRMeasurementOverlay() {
             <mesh position={a}><sphereGeometry args={[0.003, 16, 16]} /><meshBasicMaterial color="#22c55e" /></mesh>
             <mesh position={b}><sphereGeometry args={[0.003, 16, 16]} /><meshBasicMaterial color="#22c55e" /></mesh>
             <Line points={[a, b]} color="#22c55e" lineWidth={2} />
-            <Html position={mid} center distanceFactor={1} style={{ pointerEvents: 'none' }}>
-              <div className="rounded bg-card/95 border border-primary/50 px-2 py-0.5 shadow-lg backdrop-blur-sm">
-                <span className="font-mono text-[11px] font-bold text-primary whitespace-nowrap">
-                  {m.distanceMM.toFixed(1)} mm
-                </span>
-              </div>
-            </Html>
+            <group position={mid}>
+              {/* Background plate */}
+              <mesh position={[0, 0, 0]} renderOrder={998}>
+                <planeGeometry args={[0.09, 0.024]} />
+                <meshBasicMaterial color="#0b1220" transparent opacity={0.85} depthTest={false} />
+              </mesh>
+              <Text
+                position={[0, 0, 0.001]}
+                fontSize={0.012}
+                color="#3b82f6"
+                anchorX="center"
+                anchorY="middle"
+                renderOrder={999}
+                material-depthTest={false}
+              >
+                {`${m.distanceMM.toFixed(1)} mm`}
+              </Text>
+            </group>
           </group>
         );
       })}
