diff --git a/package-lock.json b/package-lock.json
index 876a41d..9550b98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,8 +61,8 @@
       }
     },
     "aframe": {
-      "version": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8",
-      "from": "github:aframevr/aframe#master",
+      "version": "0.8.2",
+      "resolved": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8",
       "requires": {
         "@tweenjs/tween.js": "^16.8.0",
         "browserify-css": "^0.8.2",
@@ -119,9 +119,13 @@
       "integrity": "sha512-ZZxD95DeMN7/NpLOe7Es3WCXNB37aIqttqI3meaTm00+OY0Q5q/1NkVsupthIlECO99iQg1evBhzRBfxj4wFWg=="
     },
     "aframe-layout-component": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/aframe-layout-component/-/aframe-layout-component-4.3.1.tgz",
-      "integrity": "sha512-BzCZCG4vEjJYNk0i6TjziDyXxaBIBl+8mXT0rBSsGpXhLcSLMrRrCm/cfl7XxUnIJV4p93Uw6eZX3cH7nA11rg=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/aframe-layout-component/-/aframe-layout-component-5.0.1.tgz",
+      "integrity": "sha512-vL7xsIMl0sm3hs4AT6WsLkUI+zvnPpHehQQR0uPNmQRMpxDiOl+wzXCCKINeuqlczjNDDRMMJZb8qrnn1Ziucg==",
+      "requires": {
+        "aframe": "^0.8.2",
+        "karma-chrome-launcher": "^2.2.0"
+      }
     },
     "aframe-orbit-controls": {
       "version": "1.2.0",
@@ -3897,6 +3901,14 @@
       "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.2.tgz",
       "integrity": "sha1-4fJE7zkzwbKmS9R5kTYGDQ9ZFPg="
     },
+    "fs-access": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz",
+      "integrity": "sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=",
+      "requires": {
+        "null-check": "^1.0.0"
+      }
+    },
     "fs-exists-sync": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
@@ -5467,6 +5479,15 @@
       "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=",
       "dev": true
     },
+    "karma-chrome-launcher": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz",
+      "integrity": "sha512-uf/ZVpAabDBPvdPdveyk1EPgbnloPvFFGgmRhYLTDH7gEB4nZdSBk8yTU47w1g/drLSx5uMOkjKk7IWKfWg/+w==",
+      "requires": {
+        "fs-access": "^1.0.0",
+        "which": "^1.2.1"
+      }
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -6144,6 +6165,11 @@
       "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.7.0.tgz",
       "integrity": "sha1-z9kZwlUjyg0PSmn7MwXAg62u4ok="
     },
+    "null-check": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz",
+      "integrity": "sha1-l33/1xdgErnsMNKjnbXPcqBDnt0="
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
diff --git a/package.json b/package.json
index c420aa5..82f0955 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "aframe-event-set-component": "^4.0.1",
     "aframe-gltf-part-component": "1.1.0",
     "aframe-haptics-component": "^1.4.1",
-    "aframe-layout-component": "^4.3.1",
+    "aframe-layout-component": "^5.0.1",
     "aframe-orbit-controls": "^1.2.0",
     "aframe-particle-system-component": "^1.0.11",
     "aframe-proxy-event-component": "^1.1.1",
diff --git a/src/components/menu-difficulty-select.js b/src/components/menu-difficulty-select.js
new file mode 100644
index 0000000..687997b
--- /dev/null
+++ b/src/components/menu-difficulty-select.js
@@ -0,0 +1,12 @@
+var bindEvent = require('aframe-event-decorators').bindEvent;
+
+/**
+ * Select difficulty.
+ */
+AFRAME.registerComponent('menu-difficulty-select', {
+  click: bindEvent(function (evt) {
+    this.el.emit('menudifficultyselect',
+                 evt.target.closest('difficultyOption').dataset.difficulty,
+                 false);
+  })
+});
diff --git a/src/components/search.js b/src/components/search.js
index 36ccf33..bbcf840 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -35,7 +35,8 @@ AFRAME.registerComponent('search', {
  */
 AFRAME.registerComponent('search-result-list', {
   click: bindEvent(function (evt) {
-    this.el.sceneEl.emit('menuchallengeclick', evt.target.closest('.searchResult').dataset.id,
+    this.el.sceneEl.emit('menuchallengeselect',
+                         evt.target.closest('.searchResult').dataset.id,
                          false);
   }),
 });
diff --git a/src/index.html b/src/index.html
index 7d6b68d..d2bbdc7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,8 +18,6 @@
         <a-mixin id="raycaster" raycaster="objects: [raycastable]; far: 2"></a-mixin>
         <img id="playImg" src="assets/img/play.png">
         <img id="resultImg" src="assets/img/result.png">
-        <img id="resultIconsImg" src="assets/img/resulticons.png">
-        <img id="tubeImg" src="assets/img/tube.png">
         <img id="gridImg" src="assets/img/grid.png">
         <img id="sliceImg" src="assets/img/slice.png">
         <a-mixin id="slice" slice9="color: #050505; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.04"></a-mixin>
diff --git a/src/state/index.js b/src/state/index.js
index 8378edb..fb4656e 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -5,17 +5,18 @@ var challengeDataStore = {};
 AFRAME.registerState({
   initialState: {
     challenge: {
+      difficulty: '',
       id: AFRAME.utils.getUrlParameter('challenge'),
-      isLoading: false,
+      isLoading: false
     },
     inVR: false,
     maxStreak: 0,
     menu: {
       active: true
     },
+    menuDifficulties: [],
     menuSelectedChallenge: {
       id: '',
-      difficulties: []
     },
     playButtonText: 'Play',
     score: 0,
@@ -49,17 +50,21 @@ AFRAME.registerState({
     /**
      * Song clicked from menu.
      */
-    menuchallengeclick: function (state, id) {
+    menuchallengeselect: function (state, id) {
       let challengeData = challengeDataStore[id];
       state.menuSelectedChallenge.id = id;
-      state.menuSelectedChallenge.difficulties.length = 0;
+      state.menuDifficulties.length = 0;
       for (let i = 0; i < challengeData.difficulties.length; i++) {
-        state.menuSelectedChallenge.difficulties.push(challengeData.difficulties[i]);
+        state.menuDifficulties.push(challengeData.difficulties[i]);
       }
     },
 
+    menudifficultyselect: function (state, difficulty) {
+      state.menuSelectedChallenge.difficulty = difficulty;
+    },
+
     playbuttonclick: function (state) {
-      state.menuActive = false;
+      state.menu.active = false;
     },
 
     /**
@@ -71,13 +76,14 @@ AFRAME.registerState({
       for (i = 0; i < 6; i++) {
         if (!payload.results[i]) { continue; }
         challengeDataStore[payload.results[i].id] = payload.results[i];
+        payload.results[i].songSubName = payload.results[i].songSubName || 'Unknown Arist';
         state.searchResults.push(payload.results[i]);
       }
       state.searchResults.__dirty = true;
     },
 
     togglemenu: function (state) {
-      state.menuActive = !state.menuActive;
+      state.menu.active = !state.menu.active;
     },
 
     'enter-vr': function (state, payload) {
diff --git a/src/templates/menu.html b/src/templates/menu.html
index a8745f2..8f0f836 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -1,7 +1,7 @@
 {% macro searchResults () %}
   <a-entity id="searchResultList"
             bind-for="for: item; in: searchResults; key: id; template: #searchResultTemplate"
-            layout="type: box; columns: 1; marginRow: 0.125"
+            layout="type: box; columns: 1; marginRow: 0.1"
             search-result-list>
   </a-entity>
 
@@ -10,16 +10,16 @@
       <a-entity class="searchResult" data-id="{{ item.id }}">
         <a-entity class="searchResultSlice"
             geometry="primitive: plane; width: 0.8; height: 0.1"
-            material="shader: flat; transparent: true; src: #resultImg; color: #BBB"
+            material="shader: flat; transparent: true; color: #111; opacity: 0.45"
             position="0 -0.13 -0.01"
             play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
-            animation__mouseenter="property: material.color; from: #BBB; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-            animation__mouseleave="property: material.color; from: #FFF; to: #BBB; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
+            animation__mouseenter="property: material.color; from: #111; to: #444; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
+            animation__mouseleave="property: material.color; from: #444; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
             raycastable></a-entity>
         <a-entity class="searchResultContent" position="0.125 -0.05 0">
-          <a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.6 -0.08 0.001"></a-entity>
-          <a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 48; align: left; color: #54c2fd; value: {{ item.songSubName }}" position="0 -0.060 0"></a-entity>
-          <a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 35; value: {{ item.songName }}" position="0 -0.09 0"></a-entity>
+          <a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.58 -0.08 0.001"></a-entity>
+          <a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 55; align: left; color: #54c2fd; value: {{ item.songSubName }}" position="0 -0.055 0"></a-entity>
+          <a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 45; value: {{ item.songName }}" position="0 -0.09 0"></a-entity>
           <a-entity class="searchResultDownloads" mixin="textFont" text="color: #cc0856; anchor: left; value: {{ item.downloads }}" position="0.12 -0.09 0"></a-entity>
         </a-entity>
       </a-entity>
@@ -44,9 +44,32 @@
            bind-toggle__raycastable="playButtonShowing"
            bind__visible="playButtonShowing"></a-plane>
 
-  <a-entity id="searchResultsContainer" position="-0.85 0.7 0">
+  <a-entity id="searchResultsContainer" position="0 0.7 0">
     {{ searchResults() }}
   </a-entity>
+
+  <a-entity id="menuDifficulties"
+    bind-for="for: difficulty; in: menuDifficulties"
+    bind__visible="!!menuSelectedChallenge.id"
+    menu-difficulty-select
+    layout="type: box; columns: 1; marginRow: -0.125"
+    position="1 1 0">
+    {% raw %}
+      <template>
+        <a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
+          <a-entity class="difficultySlice"
+              geometry="primitive: plane; width: 0.3; height: 0.1"
+              material="shader: flat; transparent: true; color: #111; opacity: 0.45"
+              position="-0.4 -0.005 0"
+              play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
+              animation__mouseenter="property: material.color; from: #111; to: #444; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
+              animation__mouseleave="property: material.color; from: #444; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
+              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"></a-entity>
+          <a-entity mixin="textFont" text="value: {{ difficulty }}" position="0 0 0.001"></a-entity>
+        </a-entity>
+      </template>
+    {% endraw %}
+  </a-entity>
 </a-entity>
 
 <a-entity id="songInfo"