diff --git a/src/components/2d-hud.css b/src/components/2d-hud.css
index 2158a7f3f602a54b740b4e50dd8c52df32c6c0f1..87b229fb0116dee0d42352eaf075eede13770edf 100644
--- a/src/components/2d-hud.css
+++ b/src/components/2d-hud.css
@@ -3,25 +3,23 @@
     top: 10px;
     display: flex;
     justify-content: center;
-    height: 48px;
+    height: 60px;
     width: 100%;
 }
 
 :local(.bgShown) {
     position: absolute;
-    top: 10px;
     display: flex;
-    justify-content: center;
-    align-content: flex-end;
+    justify-content: space-around;
+    align-items: center;
     height: 60px;
     width: 300px;
-    background-color:#030303;
+    background-color:rgba(0,0,0,.35);
 }
 
 :local(.nametagShown){
     display: flex;
     width: 192px;
-    align-self: center;
     justify-content: center;
     font-size: 32px;
     font-family: sans-serif;
@@ -34,25 +32,10 @@
 
 :local(.avatarImageShown) {
     display: flex;
-    /* position: absolute; */
-    /* top: 10px; */
-    /* left: calc(50vw + 48px); */
     width: 48px;
-    /* height: 32px; */
-    background-size: 100%;
-    background-image: url(../assets/hud/avatar.png);
-    background-repeat: no-repeat;
+    height: 48px;
 }
+
 :local(.flipX) {
     transform: scaleX(-1);
-}
-
-:local(.avatarImageHidden) {
-    /* position: absolute; */
-    /* top: 10px; */
-    /* left: calc(50vw + 48px); */
-    /* width: 0px; */
-    /* height: 0px; */
-    background-size: 100%;
-    background-image: url(../assets/hud/avatar.png);
 }
\ No newline at end of file
diff --git a/src/components/2d-hud.js b/src/components/2d-hud.js
index 4ca3c8f9cb678bed2352220dc5b5361d2d9a0409..842896c6ed0c5d9501940988c1d0d02e47787305 100644
--- a/src/components/2d-hud.js
+++ b/src/components/2d-hud.js
@@ -11,7 +11,8 @@ AFRAME.registerComponent("2d-hud", {
     this.nametag = document.createElement("div");
     this.nametag.classList.add(styles.nametagShown);
 
-    this.avatar = document.createElement("div");
+    this.avatar = document.createElement("img");
+    this.avatar.src = "../assets/hud/avatar.png";
     this.avatar.classList.add(styles.avatarImageShown);
 
     this.bg = document.createElement("div");
@@ -53,8 +54,9 @@ AFRAME.registerComponent("2d-hud", {
   },
 
   onUsernameChanged(evt) {
-    console.log("changed!");
-    console.log("got username: ", evt.detail.username);
+    const pixelsPerChar = 15;
+    this.bg.style.width = 200 + pixelsPerChar * evt.detail.username.length;
+    this.nametag.style.width = 50 + pixelsPerChar * evt.detail.username.length;
     this.nametag.innerHTML = evt.detail.username;
   }
 });
diff --git a/src/components/2d-mute-state-indicator.css b/src/components/2d-mute-state-indicator.css
index 564cbb1238bbf134d4a02a0cd962d4bcd1772434..ad5aae62f78b03ac54f56a26c4dbe8161ff816b3 100644
--- a/src/components/2d-mute-state-indicator.css
+++ b/src/components/2d-mute-state-indicator.css
@@ -6,6 +6,7 @@
     /* width: 32px; */
     /* height: 32px; */
     width: 48px;
+    height: 48px;
     background-size: 100%;
     background-image: url(../assets/hud/unmuted.png);
     background-repeat: no-repeat;
diff --git a/src/room.js b/src/room.js
index e61a2acf281226c05631de5219c7da41d5e88b9d..71beeb949d4bbeaa425b17438ee09e0aaa1707f5 100644
--- a/src/room.js
+++ b/src/room.js
@@ -114,9 +114,6 @@ window.App = {
     } else {
       username = promptForName(username); // promptForName is blocking
     }
-
-    console.log("woo");
-    console.log(username);
     scene.emit("username-changed", { username: username });
 
     const myNametag = document.querySelector("#player-rig .nametag");