diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js
index 2c10aad240d6ee2d21ea8d536751b0fc3785a463..aa7e8aae756207dc05a640f7d02f6c0f728b41ca 100644
--- a/src/components/in-world-hud.js
+++ b/src/components/in-world-hud.js
@@ -7,8 +7,18 @@ AFRAME.registerComponent("in-world-hud", {
     this.bg = this.el.querySelector(".bg");
     this.mic = this.el.querySelector(".mic");
     this.nametag = this.el.querySelector(".username");
+    this.avatar = this.el.querySelector(".avatar");
     this.nametag.object3DMap.text.material.depthTest = false;
-    this.data.raycaster.components.line.material.depthTest = false;
+    this.nametag.object3DMap.text.renderOrder = 1;
+    this.mic.object3DMap.mesh.renderOrder = 1;
+    this.avatar.object3DMap.mesh.renderOrder = 1;
+
+    const line = this.data.raycaster.object3DMap.line;
+    line.renderOrder = 2;
+    line.material.depthTest = false;
+    // Set opacity to 0.99 to force the line to render in the
+    // transparent pass, so that it renders on top of the HUD
+    this.data.raycaster.setAttribute("line", "opacity", 0.99);
 
     const muted = this.el.sceneEl.is("muted");
     this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
diff --git a/src/hub.html b/src/hub.html
index db3178d5d8987d913914530096386fe60b83707d..5ec16e968d5db5e2a2d3a9c55b468d74dfd49482 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -256,7 +256,7 @@
                 tracked-controls
                 teleport-controls="cameraRig: #player-rig; teleportOrigin: #player-camera; button: action_teleport_"
                 haptic-feedback
-                raycaster="objects:.hud; showLine: true;"
+                raycaster="objects:.hud; showLine: true; far: 2;"
                 cursor="fuse: false; downEvents: action_ui_select_down; upEvents: action_ui_select_up;"
 
                 app-mode-toggle-playing__teleport-controls="mode: hud; invert: true;"