diff --git a/assets/img/downIcon.png b/assets/img/downIcon.png
new file mode 100644
index 0000000..b79de31
Binary files /dev/null and b/assets/img/downIcon.png differ
diff --git a/assets/img/play.png b/assets/img/play.png
index 9499d3e..ff0944b 100644
Binary files a/assets/img/play.png and b/assets/img/play.png differ
diff --git a/src/components/active-color.js b/src/components/active-color.js
index 5ec731f..13ad6ac 100644
--- a/src/components/active-color.js
+++ b/src/components/active-color.js
@@ -17,8 +17,7 @@ AFRAME.registerComponent('active-color', {
     var el = this.el;
 
     if (this.data.active) {
-      el.setAttribute('material', 'color', this.data.color);
-      el.setAttribute('material', 'opacity', 1);
+      el.setAttribute('material', {'color': this.data.color, 'opacity': 1});
     } else {
       el.setAttribute('material', 'color', this.defaultColor);
       if (el.components.animation__mouseleave) {
diff --git a/src/index.html b/src/index.html
index fc3eaf2..d465e6f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
       bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
       console-shortcuts
       effect-bloom="strength: 0.7"
-      proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficulties"
+      proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
       overlay="object: #menu"
       search
       stage-colors="blue"
@@ -32,6 +32,7 @@
         <img id="gridImg" src="assets/img/grid.png">
         <img id="playImg" src="assets/img/play.png">
         <img id="sliceImg" src="assets/img/slice.png">
+        <img id="downIconImg" src="assets/img/downIcon.png">
         <a-mixin id="raycaster" raycaster="objects: [raycastable]; far: 2"></a-mixin>
         <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
         <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 54a0630..0943aed 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -14,8 +14,12 @@
     slice9="width: 0.5; height: 0.08; padding: 0.03"
     text="align: center; wrapCount: 40; zOffset: 0.001"></a-mixin>
 
-  <a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" text="value: PREV" position="-0.05 0.65 0" proxy-event="event: click; to: a-scene; as: searchprevpage" bind__visible="search.hasPrev"></a-entity>
-  <a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" text="value: NEXT" position="-0.05 -0.634 0" proxy-event="event: click; to: a-scene; as: searchnextpage" bind__visible="search.hasNext"></a-entity>
+  <a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" position="-0.05 0.65 0.01" proxy-event="event: click; to: a-scene; as: searchprevpage" bind__visible="search.hasPrev">
+    <a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" rotation="0 0 180" position="0 0 -0.001"></a-entity>
+  </a-entity>
+  <a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" position="-0.05 -0.634 0.01" proxy-event="event: click; to: a-scene; as: searchnextpage" bind__visible="search.hasNext">
+    <a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" position="0 0 -0.001"></a-entity>
+  </a-entity>
 {% endmacro %}
 
 {% raw %}
@@ -70,7 +74,7 @@
 {% endraw %}
 
 <!-- Menu container begins here. -->
-<a-entity id="menu" bind__visible="menu.active" position="0 1.6 -2.3">
+<a-entity id="menu" bind__visible="menu.active" position="0 1.6 -2">
   <a-entity id="menuBackground"
       mixin="slice"
       slice9="width: 2.5; height: 1.4"
@@ -79,12 +83,12 @@
   <a-entity id="searchResultsContainer" position="0 0 0.001"
     animation__toleft="property: position.x;  to: -0.59; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
     animation__toright="property: position.x; to: 0; dur: 200; easing: easeOutCubic; startEvents: menuback"
-    proxy-event__divisor1="event: menuchallengeselect; to: #divisor-a"
-    proxy-event__divisor2="event: menuback; to: #divisor-a">
+    proxy-event__divisor1="event: menuchallengeselect; to: #divisorA, #divisorB"
+    proxy-event__divisor2="event: menuback; to: #divisorA, #divisorB">
 
-    <a-entity id="divisor-a"
+    <a-entity id="divisorA"
       position="0.566 0 -0.0025"
-      geometry="primitive:plane; height:1.17; width:0.02"
+      geometry="primitive:plane; height:1.17; width:0.005"
       material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
       animation__fadein ="property: components.material.material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
       animation__fadeout="property: components.material.material.opacity; to: 0.0; startEvents: menuback; dur: 200"></a-entity>
@@ -92,15 +96,25 @@
     {{ searchResults() }}
   </a-entity>
 
-  <a-entity id="menuDifficulties"
-    bind-for="for: difficulty; in: menuDifficulties"
-    bind__visible="!!menuSelectedChallenge.id"
-    layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-bind-for-key"
-    menu-difficulty-select
-    position="0.35 0.52 0"
-    animation__toleft="property: object3D.position.x; to: 0.195; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
-    animation__toright="property: object3D.position.x; to: 0.35; dur: 200; easing: easeOutCubic; startEvents: menuback">
-    {% raw %}
+  <a-entity id="menuDifficultiesGroup"
+    position="0.35 0.180 0"
+    animation__toleft="property: position;  to: 0.195 0.18 0; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
+    animation__toright="property: position; to: 0.35 0.18 0; dur: 200; easing: easeOutCubic; startEvents: menuback">
+
+    <a-entity id="divisorB" 
+      position="0.218 -0.179 -0.003" 
+      geometry="primitive:plane; height:1.17; width:0.005" 
+      material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
+      animation__fadein ="property: material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
+      animation__fadeout="property: material.opacity; to: 0.0; startEvents: menuback; dur: 200"
+      ></a-entity>
+
+    <a-entity id="menuDifficulties"
+      bind-for="for: difficulty; in: menuDifficulties"
+      bind__visible="!!menuSelectedChallenge.id"
+      layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-bind-for-key"
+      menu-difficulty-select>
+      {% raw %}
       <template>
         <a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
           <a-entity class="difficultyBackground"
@@ -118,33 +132,39 @@
         </a-entity>
       </template>
     {% endraw %}
+    </a-entity>
   </a-entity>
 
   <a-entity id="menuSelectedChallengePanel" bind__visible="!!menuSelectedChallenge.id"
-            position="0.75 0 0.001">
+            position="0.82 0 0.001">
     <a-entity id="menuSelectedChallengeImage"
               bind__material="src: menuSelectedChallenge.image"
-              geometry="primitive: plane; height: 0.2; width: 0.2"
+              geometry="primitive: plane; height: 0.3; width: 0.3"
               material="shader: flat"
-              position="0 0.2 0"></a-entity>
+              position="0 0.382 0"></a-entity>
 
-    <a-entity id="menuSelectedChallengeInfo" layout="type: box; columns: 1; marginRow: -0.0575" position="0 0.05 0">
-      <a-entity class="menuSelectedChallengeSongAuthor" mixin="textFont" text="wrapCount: 55; align: center; color: #54c2fd" position="0 -0.055 0" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
-      <a-entity class="menuSelectedChallengeSongName" mixin="textFont" text="align: center; color: #FFF; wrapCount: 45" position="0 -0.09 0" bind__text="value: menuSelectedChallenge.songName"></a-entity>
-      <a-entity class="menuSelectedChallengeAuthor" mixin="textFont" text="align: center; color: #FFF; wrapCount: 45" position="0 -0.09 0" bind__text="value: menuSelectedChallenge.author"></a-entity>
-      <a-entity class="menuSelectedChallengeDownloads" mixin="textFont" text="align: center; color: #FFF; wrapCount: 45" position="0 -0.09 0" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
+    <a-entity id="menuSelectedChallengeInfo">
+      <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
+        mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
+      <a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
+        mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81" 
+        bind__text="value: menuSelectedChallenge.songName"></a-entity>
+      <a-entity class="menuSelectedChallengeAuthor" position="0 -0.257 0"
+        mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
+      <a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0" 
+        mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
     </a-entity>
 
     <a-plane id="playButton"
              play-button
              play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
-             position="0 -0.25 0"
+             position="0 -0.482 0"
              proxy-event="event: click; to: a-scene; as: playbuttonclick"
-             material="shader: flat; src: #playImg; transparent: true; color: #BBB"
-             width="0.256"
-             height="0.128"
-             animation__mouseenter1="property: components.material.material.color; type: color; from: #BBB; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-             animation__mouseleave1="property: components.material.material.color; type: color; from: #FFF; to: #BBB; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
+             material="shader: flat; src: #playImg; transparent: true; color: #CCC"
+             width="0.4"
+             height="0.2"
+             animation__mouseenter1="property: components.material.material.color; type: color; from: #CCC; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
+             animation__mouseleave1="property: components.material.material.color; type: color; from: #FFF; to: #CCC; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
              animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
              animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"