diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index c6ca07f0..5ddbfb7c 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -79,7 +79,6 @@ const app = new Vue({
         showingPlaylist: [],
         artistPage: {
             data: {},
-            topSongsExpanded: false
         },
         library: {
             downloadNotification: {
@@ -319,19 +318,6 @@ const app = new Vue({
                 return "";
             }
         },
-        getArtistPalette(artist) {
-            if (artist["attributes"]["artwork"]) {
-                return {
-                    "background": "#" + artist["attributes"]["artwork"]["bgColor"],
-                    "color": "#" + artist["attributes"]["artwork"]["textColor1"],
-                }
-            } else {
-                return {
-                    "background": "#000000",
-                    "color": "#ffffff",
-                }
-            }
-        },
         routeView(item) {
             let self = this
             app.showingPlaylist = [];
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 428eca5b..ee70390d 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -206,7 +206,9 @@
                 <div id="app-content">
                     <!-- Artist Page -->
                     <transition name="wpfade">
-                        <%- include('pages/artist') %>
+                        <template v-if="page == 'artist-page' && artistPage.data.attributes">
+                            <cider-artist :data="artistPage.data"></cider-artist>
+                        </template>
                     </transition>
                     <transition name="wpfade">
                         <%- include('pages/webview') %>
@@ -388,6 +390,9 @@
     <!-- Playlists / Albums -->
     <%- include('pages/cider-playlist') %>
 
+    <!-- Artist Page -->
+    <%- include('pages/artist') %>
+
     <!-- Search -->
     <%- include('pages/search') %>
 
diff --git a/resources/cider-ui-tests/views/pages/artist.ejs b/resources/cider-ui-tests/views/pages/artist.ejs
index 8e67afd2..eb44a8a5 100644
--- a/resources/cider-ui-tests/views/pages/artist.ejs
+++ b/resources/cider-ui-tests/views/pages/artist.ejs
@@ -1,20 +1,20 @@
-<template v-if="page == 'artist-page' && artistPage.data.attributes">
+<script type="text/x-template" id="cider-artist">
     <div class="content-inner artist-page">
-        <div class="artist-header" :style="getArtistPalette(artistPage.data)">
+        <div class="artist-header" :style="getArtistPalette(data)">
             <animatedartwork-view
-                    v-if="app.artistPage.data.attributes.editorialVideo && (app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9 || app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9)"
-                    :video="app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9.video ?? (app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
+                    v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
+                    :video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
             </animatedartwork-view>
             <div class="row">
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image">
                         <mediaitem-artwork
-                                :url="artistPage.data.attributes.artwork ? artistPage.data.attributes.artwork.url : ''"
+                                :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                 size="220" type="artists"></mediaitem-artwork>
                     </div>
                 </div>
                 <div class="col flex-center">
-                    <h1>{{ artistPage.data.attributes.name }}</h1>
+                    <h1>{{ data.attributes.name }}</h1>
                 </div>
             </div>
         </div>
@@ -22,22 +22,22 @@
             <div class="row well">
                 <div class="col">
                     <div class="row">
-                        <div class="col-auto" v-if="artistPage.data.views['latest-release'].data.length != 0">
+                        <div class="col-auto" v-if="data.views['latest-release'].data.length != 0">
                             <h3>Latest Release</h3>
                             <div style="width: auto;margin: 0 auto;">
-                                <mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data"
+                                <mediaitem-square-sp v-for="song in data.views['latest-release'].data"
                                                      :item="song">
                                 </mediaitem-square-sp>
                             </div>
                         </div>
-                        <div class="col" v-if="artistPage.data.views['top-songs']">
+                        <div class="col" v-if="data.views['top-songs']">
                             <h3>Top Songs</h3>
                             <mediaitem-list-item
-                                    v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
+                                    v-for="song in data.views['top-songs'].data.limit(topSongsExpanded ? 10 : 5)"
                                     :item="song"></mediaitem-list-item>
                             <button class="showmoreless"
-                                    @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
-                                <template v-if="!artistPage.topSongsExpanded">
+                                    @click="topSongsExpanded = !topSongsExpanded">
+                                <template v-if="!topSongsExpanded">
                                     Show more
                                 </template>
                                 <template v-else>
@@ -50,34 +50,34 @@
             </div>
             <div class="row well">
                 <div class="col">
-                    <template v-for="(view) in artistPage.data.meta.views.order"
-                              v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
+                    <template v-for="(view) in data.meta.views.order"
+                              v-if="(data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
                         <div class="row">
                             <div class="col">
-                                <h3>{{ artistPage.data.views[view].attributes.title ?
-                                    artistPage.data.views[view].attributes.title : "???"}}
+                                <h3>{{ data.views[view].attributes.title ?
+                                    data.views[view].attributes.title : "???"}}
                                 </h3>
                             </div>
-                            <div class="col-auto flex-center" v-if="artistPage.data.views[view].data.length >= 10">
+                            <div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
                                 <button class="cd-btn-seeall">See All</button>
                             </div>
                         </div>
-                        <mediaitem-scroller-horizontal-large :items="artistPage.data.views[view].data.limit(10)">
+                        <mediaitem-scroller-horizontal-large :items="data.views[view].data.limit(10)">
                         </mediaitem-scroller-horizontal-large>
                     </template>
                     <div class="row">
-                        <div class="col" v-if="artistPage.data.attributes.artistBio">
-                            <h3>About {{ artistPage.data.attributes.name }}</h3>
-                            <p v-html="artistPage.data.attributes.artistBio"></p>
+                        <div class="col" v-if="data.attributes.artistBio">
+                            <h3>About {{ data.attributes.name }}</h3>
+                            <p v-html="data.attributes.artistBio"></p>
                         </div>
                         <div class="col">
-                            <div v-if="artistPage.data.attributes.origin">
-                                <h3>{{ artistPage.data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
-                                {{ artistPage.data.attributes.origin }}
+                            <div v-if="data.attributes.origin">
+                                <h3>{{ data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
+                                {{ data.attributes.origin }}
                             </div>
-                            <div v-if="artistPage.data.attributes.bornOrFormed">
-                                <h3>{{ artistPage.data.attributes.isGroup ? "Born" : "Formed" }}</h3>
-                                {{ artistPage.data.attributes.bornOrFormed }}
+                            <div v-if="data.attributes.bornOrFormed">
+                                <h3>{{ data.attributes.isGroup ? "Born" : "Formed" }}</h3>
+                                {{ data.attributes.bornOrFormed }}
                             </div>
                         </div>
                     </div>
@@ -85,4 +85,37 @@
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</script>
+<script>
+    Vue.component('cider-artist', {
+        template: "#cider-artist",
+        props: ['data'],
+        data: function () {
+            return {
+                topSongsExpanded: false
+            }
+        },
+        methods: {
+            getArtistPalette(artist) {
+                if (artist["attributes"]["artwork"]) {
+                    return {
+                        "background": "#" + artist["attributes"]["artwork"]["bgColor"],
+                        "color": "#" + artist["attributes"]["artwork"]["textColor1"],
+                    }
+                } else {
+                    return {
+                        "background": "#000000",
+                        "color": "#ffffff",
+                    }
+                }
+            },
+            getTopResult() {
+                if (this.search.results["meta"]) {
+                    return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
+                } else {
+                    return false;
+                }
+            }
+        }
+    })
+</script>
\ No newline at end of file