diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 3fb9ee48..d1811c58 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1573,7 +1573,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Album / Playlist Page */
 .playlist-page {
+  --bgColor: transparent;
   padding: 0px;
+  background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 59px, transparent 60px, transparent 100%);
+  top: 0;
+  padding-top: var(--navigationBarHeight);
 
   .playlist-body {
     padding: var(--contentInnerPadding);
diff --git a/resources/cider-ui/views/pages/cider-playlist.ejs b/resources/cider-ui/views/pages/cider-playlist.ejs
index fcc851c9..18194f7b 100644
--- a/resources/cider-ui/views/pages/cider-playlist.ejs
+++ b/resources/cider-ui/views/pages/cider-playlist.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-playlist">
-    <div class="content-inner playlist-page">
-        <template v-if="data != [] && data.attributes != null">
+    <template v-if="data != [] && data.attributes != null">
+    <div class="content-inner playlist-page" :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
             <div class="playlist-display row"
                  :style="{
                 background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
@@ -66,9 +66,9 @@
                 </div>
                 <div class="playlist-time">{{app.getTotalTime()}}</div>
             </div>
-        </template>
-
     </div>
+</template>
+
 </script>
 <script>
     Vue.component('cider-playlist', {