diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 859565b7..efe7ebb2 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -658,6 +658,22 @@
       width          : 100%;
       height         : 100%;
 
+      .playlist-hero {
+        width             : 100%;
+        transform: translateX(+25%);
+        position: absolute;
+        z-index : -1;
+        top     : 0;
+        left    : 0;
+        right   : 0;
+        bottom  : 0;
+    
+        .mediaitem-artwork {
+          -webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 75%);
+          border-radius: 0px;
+        }
+      }
+
       >.row {
         width: calc(100% - 32px);
       }
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index c926794f..87c4c2c0 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -178,7 +178,7 @@
                     return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground.url
                 } else if(this.data.attributes?.editorialArtwork?.bannerUber) {
                     return this.data.attributes?.editorialArtwork?.bannerUber.url
-                }else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
+                } else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
                     return this.data.attributes?.editorialArtwork?.subscriptionHero.url
                 }
                 return false;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 7d2cfd04..ebdad38d 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -11,6 +11,9 @@
             <div class="playlist-display"
                  @mouseover.self="minClass(false)">
                 <div class="playlistInfo">
+                    <div class="playlist-hero" v-if="hasHero()">
+                        <mediaitem-artwork shadow="none" :url="hasHero()" size="2048" />
+                    </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
                             <div class="mediaContainer">
@@ -364,6 +367,16 @@
             isHeaderVisible(visible) {
                 this.headerVisible = visible
             },
+            hasHero() {
+                if(this.data.attributes?.editorialArtwork?.bannerUber){
+                    return this.data.attributes?.editorialArtwork?.bannerUber.url
+                } else if(this.data.attributes?.editorialArtwork?.subscriptionHero) {
+                    return this.data.attributes?.editorialArtwork?.subscriptionHero.url
+                } else if(this.data.attributes?.editorialArtwork?.storeFlowcase){
+                    return this.data.attributes?.editorialArtwork?.storeFlowcase.url
+                }
+                return false;
+            },
             getBadges() {
                 return
                 if (this.badgesRequested) {