diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index e2b2875b..1aa945c6 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -202,7 +202,13 @@
                 <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>
+                                <div class="">
+                                    <button class="md-btn md-btn-primary">Audio Quality Settings</button>
+                                </div>
+                            </div>
                         </div>
                     </template>
                 </transition>
@@ -246,7 +252,16 @@
             </div>
         </div>
     </div>
-    <div class="bg-artwork"></div>
+    <transition name="wpfade">
+        <img v-show="chrome.artworkReady"
+             @load="chrome.artworkReady = true"
+             class="bg-artwork"
+             :src="getNowPlayingArtworkBG(32)">
+    </transition>
+    <transition name="wpfade">
+        <div class="bg-artwork--placeholder" v-else></div>
+    </transition>
+
 </div>
 
 <script type="text/x-template" id="cider-search">
@@ -263,13 +278,13 @@
                     <div class="col">
                         <h3>Songs</h3>
                     </div>
-                    <div class="col-auto flex-center" v-if="search.results.songs.data.length == search.limit">
+                    <div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
                 <div>
                     <mediaitem-list-item :item="item"
-                                         v-for="item in search.results.songs.data"></mediaitem-list-item>
+                                         v-for="item in search.results.songs.data.limit(6)"></mediaitem-list-item>
                 </div>
             </div>
         </div>
@@ -280,36 +295,36 @@
                     <div class="col">
                         <h3>Albums</h3>
                     </div>
-                    <div class="col-auto flex-center" v-if="search.results.albums.data.length == search.limit">
+                    <div class="col-auto flex-center" v-if="search.results.albums.data.length >= 10">
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
                 <mediaitem-square :item="item"
-                                  v-for="item in search.results.albums.data"></mediaitem-square>
+                                  v-for="item in search.results.albums.data.limit(10)"></mediaitem-square>
             </template>
             <template v-if="search.results.artists">
                 <div class="row">
                     <div class="col">
                         <h3>Artists</h3>
                     </div>
-                    <div class="col-auto flex-center" v-if="search.results.artists.data.length == search.limit">
+                    <div class="col-auto flex-center" v-if="search.results.artists.data.length >= 5">
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
                 <mediaitem-square :item="item"
-                                  v-for="item in search.results.artists.data"></mediaitem-square>
+                                  v-for="item in search.results.artists.data.limit(5)"></mediaitem-square>
             </template>
             <template v-if="search.results.playlists">
                 <div class="row">
                     <div class="col">
                         <h3>Playlists</h3>
                     </div>
-                    <div class="col-auto flex-center" v-if="search.results.playlists.data.length == search.limit">
+                    <div class="col-auto flex-center" v-if="search.results.playlists.data.length >= 10">
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
                 <mediaitem-square :item="item"
-                                  v-for="item in search.results.playlists.data"></mediaitem-square>
+                                  v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
             </template>
         </template>
     </div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index abbd6db4..939113ac 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -47,6 +47,11 @@ const MusicKitTools = {
     }
 }
 
+// limit an array to a certain number of items
+Array.prototype.limit = function (n) {
+    return this.slice(0, n);
+};
+
 const app = new Vue({
     el: "#app",
     data: {
@@ -74,6 +79,9 @@ const app = new Vue({
             listing: [],
             details: {}
         },
+        chrome: {
+            artworkReady: false
+        },
         page: "browse"
     },
     methods: {
@@ -87,11 +95,16 @@ const app = new Vue({
                 self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
             })
 
+            this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
+                self.chrome.artworkReady = false
+            })
+
             this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
                 self.playlists.listing = res.data
             })
             document.body.removeAttribute("loading")
         },
+
         getSidebarItemClass(page) {
             if (this.page == page) {
                 return ["active"]
@@ -203,6 +216,16 @@ const app = new Vue({
         getMediaItemArtwork(url, size = 64) {
             return `url("${url.replace('{w}', size).replace('{h}', size)}")`;
         },
+        getNowPlayingArtworkBG(size = 600) {
+            if(!this.mkReady()) {
+                return ""
+            }
+            if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
+            } else {
+                return "";
+            }
+        },
         getNowPlayingArtwork(size = 600) {
             if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
                 return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index be3afed2..b5f34915 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -85,6 +85,24 @@ body[loading] {
     position: relative;
     overflow: hidden;
 }
+[hidden] {
+    display: none !important;
+}
+
+
+.bg-artwork--placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #222;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+    opacity: 0.70;
+}
+
 
 .bg-artwork {
     position: absolute;
@@ -92,10 +110,19 @@ body[loading] {
     left: 0;
     width: 100%;
     height: 100%;
-    background: url("artwork.jpeg");
+    background: var(--artwork);
     z-index: -1;
+    background-size: cover;
+    background-position: center;
     filter: blur(60px) saturate(180%);
-    display: none;
+    opacity: 0.70;
+    transition: opacity .25s var(--appleEase);
+}
+
+
+[artwork-hidden] {
+    transition: opacity .25s var(--appleEase);
+    opacity:0;
 }
 
 body {