diff --git a/public/index.html b/public/index.html
index d5a65fa81d82b16aa8852b689da35fbb32d0db24..3125bcf20e2c8b88ba8cb019d4f982f16c6da954 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,7 @@
       <script id="nametag-template" type="text/html">
         <a-entity
             class="nametag"
-            nametag="follow: .head"
+            nametag-transform="follow: .head"
             text="side:double;align:center;"
             position="0 2.5 0"
             scale="6 6 6"></a-entity>
diff --git a/src/components/billboard.js b/src/components/nametag-transform.js
similarity index 87%
rename from src/components/billboard.js
rename to src/components/nametag-transform.js
index 9ff004e57c206eaa0fa2a1d8df9ac83f5f3a53bf..9db4088c90d9d32baf7475b9a08fe61553200ae9 100644
--- a/src/components/billboard.js
+++ b/src/components/nametag-transform.js
@@ -1,9 +1,11 @@
-AFRAME.registerComponent("nametag", {
+AFRAME.registerComponent("nametag-transform", {
   schema: {
     follow: {type: "string"}
   },
   init: function() {
     this.vector = new THREE.Vector3();
+
+    // TODO this traversal kinda feels like a hack. Should probably change networked-aframe to support it properly.
     // traverse up to the networked player rig and find the networked head.
     var head = this._findParent(this.el, '[networked]').parentNode.querySelector(this.data.follow);
     // traverse up to the head's networked parent and get its object3D
diff --git a/src/index.js b/src/index.js
index add6a79cdb391121120b6481ff32595939a73011..e1f40da052dd2b4d1952513e8fefbdc9a9c1065e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import "./components/axis-dpad";
 import "./components/snap-rotation";
 import "./components/mute-mic";
 import "./components/audio-feedback";
-import "./components/billboard";
+import "./components/nametag-transform";
 
 import { generateName } from "./utils";