diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 7b8076d6..2c18b28f 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -192,16 +192,6 @@
                             </div>
                             <br>
                             <br>
-                            <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
-                            <button class="md-btn">Button</button>
-                            <button class="md-btn md-btn-primary">Button</button>
-                        </div>
-                    </template>
-                </transition>
-                <!-- Listen Now -->
-                <transition name="wpfade">
-                    <template v-if="page == 'listen_now'">
-                        <div class="content-inner">
                             <h1 class="header-text">Listen Now</h1>
                             <div class="winbox">
                                 <div class="fancy">990kbps</div>
@@ -209,9 +199,18 @@
                                     <button class="md-btn md-btn-primary">Audio Quality Settings</button>
                                 </div>
                             </div>
+                            <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
+                            <button class="md-btn">Button</button>
+                            <button class="md-btn md-btn-primary">Button</button>
                         </div>
                     </template>
                 </transition>
+                <!-- Listen Now -->
+                <transition v-on:enter="getListenNow()" name="wpfade">
+                    <template v-if="page == 'listen_now'" @created="console.log('listennow')">
+                         <cider-listen-now :data="listennow"></cider-listen-now>
+                    </template>
+                </transition>
                 <!-- Radio -->
                 <transition v-on:enter="getRadioStations()" name="wpfade">
                     <template v-if="page == 'radio'" @created="console.log('radio')">
@@ -264,6 +263,23 @@
 
 </div>
 
+<script type="text/x-template" id="cider-listen-now">
+    <div class="content-inner">
+        <template v-for="recom in data.data">
+            <div class="row">
+                <div class="col">
+                    <h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
+                </div>
+                <div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
+                    <button class="cd-btn-seeall">See All</button>
+                </div>
+            </div>
+            <mediaitem-scroller-horizontal :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal>
+        </template>
+    </div>    
+</script>
+
+
 <script type="text/x-template" id="cider-search">
     <div class="content-inner">
         <div class="row">
@@ -417,6 +433,7 @@
     </template>
 </script>
 
+
 <script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
 <script src="index.js?v=1"></script>
 </body>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 60016dc4..762d33d9 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -42,6 +42,11 @@ Vue.component('cider-search', {
     }
 })
 
+Vue.component('cider-listen-now', {
+    template: "#cider-listen-now",
+    props: ["data"]
+})
+
 const MusicKitTools = {
     getHeader() {
         return new Headers({
@@ -72,6 +77,7 @@ const app = new Vue({
         playerLCD: {
             playbackDuration: 0
         },
+        listennow: [],
         radio: {
             personal: []
         },
@@ -143,7 +149,7 @@ const app = new Vue({
                 return
             }
             try {
-                await this.mk.api.personalRecommendations("",
+                    this.listennow =  await this.mk.api.personalRecommendations("",
                     {
                         name: "listen-now",
                         with: "friendsMix,library,social",
@@ -171,9 +177,10 @@ const app = new Vue({
                         includeResponseMeta: !0,
                         reload: !0
                     });
+                console.log(this.listennow)    
             } catch (e) {
                 console.log(e)
-                await this.getListenNow(attempt + 1)
+                this.getListenNow(attempt + 1)
             }
         },
         async getRadioStations(attempt = 0) {