diff --git a/.gitignore b/.gitignore
index e6413018..29a853c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -328,3 +328,4 @@ savedconfig/cider-config.json
 savedconfig/config.json
 savedconfig/session.json
 savedconfig/window-state.json
+src/main/base/sample.json
diff --git a/src/i18n/de_DE.json b/src/i18n/de_DE.json
index 071d18eb..dd3b4970 100644
--- a/src/i18n/de_DE.json
+++ b/src/i18n/de_DE.json
@@ -386,5 +386,13 @@
   "term.track": {
     "one": "Titel",
     "other": "Titel"
-  }
+  },
+  "settings.option.visual.customAccentColor": "Benutzerdefinierte Akzentfarbe",
+  "settings.option.visual.accentColor": "Akzentfarbe",
+  "settings.option.visual.purplePodcastPlaybackBar": "Lila Wiedergabeleiste für Podcasts",
+  "settings.option.visual.windowColor": "Fenstertönung Farbe",
+  "action.cut": "Ausschneiden",
+  "action.paste": "Einfügen",
+  "action.selectAll": "Alles auswählen",
+  "action.delete": "Löschen"
 }
diff --git a/src/i18n/en_OWO.json b/src/i18n/en_OWO.json
index b46d1673..99e63bb3 100644
--- a/src/i18n/en_OWO.json
+++ b/src/i18n/en_OWO.json
@@ -22,7 +22,6 @@
   "term.logout": "Wogout",
   "term.login": "Wog In",
   "term.quickNav": "Quick Nyav",
-  "term.cast": "Cast",
   "term.about": "About",
   "term.privateSession": "Pwivate Session",
   "term.disablePrivateSession": "Disabwe Pwivate Session",
@@ -42,6 +41,7 @@
   "term.artists": "Awtists",
   "term.podcasts": "Podcasts",
   "term.playlists": "Pwaywists",
+  "term.charts": "Chawts",
   "term.playlist": "Pwaywist",
   "term.newPlaylist": "Nyew Pwaywist",
   "term.newPlaylistFolder": "Nyew Pwaywist Fowdew",
@@ -51,6 +51,7 @@
   "term.navigateBack": "Nyavigate back",
   "term.navigateForward": "Nyavigate fowwawd",
   "term.play": "Pway",
+  "term.playpause": "Pway/Pause",
   "term.pause": "Pause",
   "term.stop": "Stop",
   "term.previous": "Pwevious",
@@ -153,6 +154,7 @@
   },
   "term.videos": "Videos",
   "term.menu": "Menyu",
+  "term.themeManaged": "Manyaged by a theme",
   "term.check": "Check",
   "term.aboutArtist": "About {{artistName}}",
   "term.topResult": "Top Wesuwt",
@@ -192,6 +194,16 @@
   "term.confirmLogout": "Awe you suwe you want to wogout?",
   "term.creditDesignedBy": "Designyed by ${authorUsername}",
   "term.discNumber": "Disc ${discNumber}",
+  "term.reload": "Wewoad Cidew ?",
+  "term.toggleprivate": "Toggwe Pwivate Session",
+  "term.webremote": "Web Wemote",
+  "term.cast": "Cast",
+  "term.cast2": "Cast to Devices",
+  "term.quit": "Quit",
+  "term.zoomin": "Zoom In",
+  "term.zoomout": "Zoom Out",
+  "term.zoomreset": "Weset Zoom",
+  "term.fullscreen": "Fuwwscween",
   "home.title": "Home",
   "home.recentlyPlayed": "Wecentwy Pwayed",
   "home.recentlyAdded": "Wecentwy Added",
@@ -264,11 +276,7 @@
   "action.export": "Expowt",
   "action.showAlbum": "Show Compwete Awbum",
   "action.tray.minimize": "Minyimize to Tway",
-  "action.tray.quit": "Quit",
   "action.tray.show": "Show Cidew",
-  "action.tray.playpause": "Pway/Pause",
-  "action.tray.next": "Nyext",
-  "action.tray.previous": "Pwevious",
   "action.tray.listento": "Wisten To:",
   "action.update": "Update",
   "action.install": "Instaww",
@@ -288,45 +296,26 @@
   "action.createNew": "Cweate Nyew...",
   "action.openArtworkInBrowser": "Open awtwowk in bwowsew",
   "action.scrollToTop": "Scwoww to top",
-  "menubar.options.about": "About",
-  "menubar.options.settings": "Settings",
-  "menubar.options.quit": "Quit Cidew",
-  "menubar.options.view": "View ",
+  "menubar.options.view": "View",
   "menubar.options.reload": "Wewoad",
   "menubar.options.forcereload": "Fowce Wewoad",
   "menubar.options.toggledevtools": "Toggwe Devewopew Toows",
   "menubar.options.window": "Window",
   "menubar.options.minimize": "Minyimize",
-  "menubar.options.toggleprivate": "Toggwe Pwivate Session",
-  "menubar.options.webremote": "Web Wemote",
-  "menubar.options.audio": "Audio Settings",
   "menubar.options.plugins": "Pwu-gins Menyu",
   "menubar.options.controls": "Contwows",
-  "menubar.options.next": "Nyext",
-  "menubar.options.playpause": "Pway/Pause",
-  "menubar.options.previous": "Pwevious",
   "menubar.options.volumeup": "Vowume Up",
   "menubar.options.volumedown": "Vowume Down",
-  "menubar.options.browse": "Bwowse",
-  "menubar.options.artists": "Awtists",
-  "menubar.options.search": "Seawch",
-  "menubar.options.albums": "Awbums",
-  "menubar.options.cast": "Cast To Devices",
   "menubar.options.account": "Account",
-  "menubar.options.accountsettings": "Account Settings",
   "menubar.options.signout": "Sign Out",
   "menubar.options.support": "Suppowt",
-  "menubar.options.discord": "Discowd",
-  "menubar.options.github": "GitHub Wiki",
   "menubar.options.report": "Wepowt a...",
   "menubar.options.bug": "Bug",
   "menubar.options.feature": "Featuwe Wequest",
   "menubar.options.trans": "Twanswation Wepowt/Wequest",
   "menubar.options.license": "View Wicense",
   "menubar.options.conf": "Open Configuwation Fiwe in Editow",
-  "menubar.options.listennow": "Wisten Nyow",
-  "menubar.options.recentlyAdded": "Wecentwy Added",
-  "menubar.options.songs": "Songs",
+  "menubar.options.zoom": "Zoom",
   "settings.header.general": "Genyewaw",
   "settings.header.general.description": "Adjust the genyewaw settings fow Cidew.",
   "settings.option.general.language": "Wanguage",
@@ -346,11 +335,15 @@
   "settings.option.general.customizeSidebar": "Customize Sidebaw Items",
   "settings.option.general.customizeSidebar.customize": "Customize",
   "settings.option.general.keybindings": "Keybindings",
+  "settings.option.general.keybindings.library": "Wibwawy",
+  "settings.option.general.keybindings.session": "Session",
+  "settings.option.general.keybindings.control": "Contwows",
+  "settings.option.general.keybindings.interface": "Intewface",
+  "settings.option.general.keybindings.advanced": "Advanced",
   "settings.option.general.keybindings.pressCombination": "Pwess a combinyation of two keys to update keybind.",
   "settings.option.general.keybindings.pressEscape": "Pwess Escape key to go back.",
   "settings.notyf.general.keybindings.update.success": "Keybind updated successfuwwy",
   "settings.prompt.general.keybindings.update.success": "Keybind updated successfuwwy. Pwess OK to wewaunch Cidew",
-  "settings.option.general.keybindings.open": "Open",
   "settings.option.general.themeUpdateNotification": "Automaticawwy check fow theme updates",
   "settings.option.general.showLovedTracksInline": "Show wuvd twacks inwinye",
   "settings.description.search": "Seawch",
diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index 03a1a642..6bf6071c 100644
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@@ -169,14 +169,14 @@ export class Store {
             "dBSPL": false,
             "dBSPLcalibration": 90,
             "maikiwiAudio": {
-                "ciderPPE": false,
+                "ciderPPE": true,
                 "ciderPPE_value": "MAIKIWI",
                 "atmosphereRealizer1": false,
                 "atmosphereRealizer1_value": "NATURAL_STANDARD",
                 "atmosphereRealizer2": false,
                 "atmosphereRealizer2_value": "NATURAL_STANDARD",
                 "spatial": false,
-                "spatialProfile": "71_420maikiwi",
+                "spatialProfile": "BPLK",
                 "vibrantBass": { // Hard coded into the app. Don't include any of this config into exporting presets in store.ts
                     'frequencies': [17.182, 42.169, 53.763, 112.69, 119.65, 264.59, 336.57, 400.65, 505.48, 612.7, 838.7, 1155.3, 1175.6, 3406.8, 5158.6, 5968.1, 6999.9, 7468.6, 8862.9, 9666, 10109],
                     'Q': [2.5, 0.388, 5, 5, 2.5, 7.071, 14.14, 10, 7.071, 14.14, 8.409, 0.372, 7.071, 10, 16.82, 7.071, 28.28, 20, 8.409, 40, 40],
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 859565b7..9d74de15 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -658,6 +658,29 @@
       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;
+        }
+        .hero-tint {
+          position: absolute; 
+          top : 0;
+          opacity: 0.6;
+          width: 100%; 
+          height: 100%;
+        }
+      }
+
       >.row {
         width: calc(100% - 32px);
       }
@@ -677,6 +700,10 @@
           flex-shrink    : unset;
         }
 
+        .search-input::placeholder {
+          color: var(--heroplaceholdercolor)
+        }
+
         .nameEdit {
           font-weight: 700;
           font-size  : 1.6rem;
diff --git a/src/renderer/main/events.js b/src/renderer/main/events.js
index 52191c5d..e0a3c45c 100644
--- a/src/renderer/main/events.js
+++ b/src/renderer/main/events.js
@@ -24,7 +24,7 @@ const Events = {
             // CTRL + R
             if (event.keyCode === 82 && event.ctrlKey) {
                 event.preventDefault()
-                bootbox.confirm(app.getLz('term.reload'), (res)=>{
+                app.confirm(app.getLz('term.reload'), (res)=>{
                     if (res) {
                         window.location.reload()
                     }
@@ -69,8 +69,8 @@ const Events = {
             // Prevent Scrolling on spacebar
             if (event.keyCode === 32 && event.target === document.body) {
                 event.preventDefault()
-                app.SpacePause()  
-                
+                app.SpacePause()
+
             }
         });
 
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 5481b3b5..33c24104 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -956,22 +956,22 @@ const app = new Vue({
                         }
                     } catch (e) {
                         localStorage.setItem("playingBitrate", "256")
-                    } 
+                    }
                     if (!app.cfg.audio.normalization) {CiderAudio.hierarchical_loading();}
-                             
+
                 }
-                
+
                 if (app.cfg.audio.normalization) {
                     // get unencrypted audio previews to get SoundCheck's normalization tag
                     try {
                         let previewURL = null
                         try {
-                            previewURL = app.mk.nowPlayingItem.previewURL          
+                            previewURL = app.mk.nowPlayingItem.previewURL
                         } catch (e) {
                         }
                         if (previewURL == null && ((app.mk.nowPlayingItem?._songId ?? (app.mk.nowPlayingItem["songId"] ?? app.mk.nowPlayingItem.relationships.catalog.data[0].id)) != -1)) {
                             app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/songs/${app.mk.nowPlayingItem?._songId ?? (app.mk.nowPlayingItem["songId"] ?? app.mk.nowPlayingItem.relationships.catalog.data[0].id)}`).then((response) => {
-                                previewURL = response.data.data[0].attributes.previews[0].url                     
+                                previewURL = response.data.data[0].attributes.previews[0].url
                                 if (previewURL)
                                     console.debug("[Cider][MaikiwiSoundCheck] previewURL response.data.data[0].attributes.previews[0].url: " + previewURL)
                                     ipcRenderer.send('getPreviewURL', previewURL)
@@ -1177,7 +1177,7 @@ const app = new Vue({
             }
         },
         unauthorize() {
-            bootbox.confirm(app.getLz('term.confirmLogout'), function (result) {
+            this.confirm(app.getLz('term.confirmLogout'), function (result) {
                 if (result) {
                     app.mk.unauthorize()
                     document.location.reload()
@@ -1558,22 +1558,24 @@ const app = new Vue({
         },
         deletePlaylist(id) {
             let self = this
-            if (confirm(app.getLz('term.deletePlaylist'))) {
-                app.mk.api.v3.music(`/v1/me/library/playlists/${id}`, {}, {
-                    fetchOptions: {
-                        method: "DELETE"
-                    }
-                }).then(res => {
-                    // remove this playlist from playlists.listing if it exists
-                    let found = self.playlists.listing.find(item => item.id == id)
-                    if (found) {
-                        self.playlists.listing.splice(self.playlists.listing.indexOf(found), 1)
-                    }
-                    setTimeout(() => {
-                        app.refreshPlaylists(false, false);
-                    }, 8000);
-                })
-            }
+            this.confirm(app.getLz('term.deletePlaylist'), (ok) => {
+                if (ok) {
+                    app.mk.api.v3.music(`/v1/me/library/playlists/${id}`, {}, {
+                        fetchOptions: {
+                            method: "DELETE"
+                        }
+                    }).then(res => {
+                        // remove this playlist from playlists.listing if it exists
+                        let found = self.playlists.listing.find(item => item.id == id)
+                        if (found) {
+                            self.playlists.listing.splice(self.playlists.listing.indexOf(found), 1)
+                        }
+                        setTimeout(() => {
+                            app.refreshPlaylists(false, false);
+                        }, 8000);
+                    })
+                }
+            });
         },
         /**
          * @param {string} url, href for the initial request
@@ -4597,6 +4599,29 @@ const app = new Vue({
                     app.mk._services.mediaItemPlayback._currentPlayer._playAssetURL(src, false)
                 }
             }
+        },
+        confirm(message, callback) {
+            bootbox.confirm(this.getBootboxParams(null, message, callback));
+        },
+        prompt(title, callback) {
+            bootbox.prompt(this.getBootboxParams(title, null, callback));
+        },
+        getBootboxParams(title, message, callback) {
+            return {
+                title: title,
+                message: message,
+                buttons: {
+                    confirm: {
+                        label: app.getLz('dialog.ok'),
+                    },
+                    cancel: {
+                        label:  app.getLz('dialog.cancel'),
+                    },
+                },
+                callback: function (result) {
+                    if (callback) callback(result);
+                },
+            }
         }
     }
 })
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 5d45481c..286c0cf2 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2073,7 +2073,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   align-items: center;
 
   .fs-row {
-    flex-grow: 1;
+    flex-grow: 0.5;
   }
 
   .playback-button--small.active {
diff --git a/src/renderer/views/components/equalizer.ejs b/src/renderer/views/components/equalizer.ejs
index 64acca69..2e7639ca 100644
--- a/src/renderer/views/components/equalizer.ejs
+++ b/src/renderer/views/components/equalizer.ejs
@@ -280,7 +280,7 @@
             },
             deletePreset() {
                 let presets = this.$root.cfg.audio.equalizer.presets
-                bootbox.confirm(app.getLz('term.deletepreset.warn'), (result) => {
+                app.confirm(app.getLz('term.deletepreset.warn'), (result) => {
                     if (result) {
                         this.changePreset("default")
                         // find the preset by id (preset) and remove it
@@ -351,7 +351,7 @@
             },
             addPreset() {
                 let self = this
-                bootbox.prompt(app.getLz('term.newpreset.name'), (res) => {
+                app.prompt(app.getLz('term.newpreset.name'), (res) => {
                     if (res) {
                         let eqSettings = Clone(app.cfg.audio.equalizer)
                         let newPreset = new self.eqPreset()
@@ -386,7 +386,7 @@
             },
             importPreset() {
                 let self = this
-                bootbox.prompt("Enter preset share code", (res) => {
+                app.prompt("Enter preset share code", (res) => {
                     if (res) {
                         let preset = JSON.parse(atob(res))
                         if (preset.frequencies && preset.gain && preset.Q && preset.mix && preset.vibrantBass) {
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 3ace5791..ab34f7ae 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -542,14 +542,14 @@
 				let followAction = "follow"
 				let followActions = {
 					follow: {
-						icon: "./assets/feather/plus-circle.svg",
+						icon: "./assets/star.svg",
 						name: app.getLz('action.favorite'),
 						action: () => {
 							self.$root.setArtistFavorite(this.item.id, true)
 						}
 					},
 					unfollow: {
-						icon: "./assets/feather/x-circle.svg",
+						icon: "./assets/star.svg",
 						name: app.getLz('action.removeFavorite'),
 						action: () => {
 							self.$root.setArtistFavorite(this.item.id, false)
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index c926794f..539393dc 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -25,7 +25,8 @@
                     </div>
                     <div class="col flex-center artist-title"
                          :class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) || hasHero() }"
-                    >
+                         :style="{ 'color': '#' +hasHeroObject()?.textColor1 ?? ''}"
+                         >
                         <button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
                         app.mk.play()
                     })" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
@@ -178,11 +179,21 @@
                     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;
             },
+            hasHeroObject() {
+                if(this.data.attributes?.editorialArtwork?.centeredFullscreenBackground){
+                    return this.data.attributes?.editorialArtwork?.centeredFullscreenBackground
+                } else if(this.data.attributes?.editorialArtwork?.bannerUber) {
+                    return this.data.attributes?.editorialArtwork?.bannerUber
+                } else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
+                    return this.data.attributes?.editorialArtwork?.subscriptionHero
+                }
+                return [];
+            },
             isHeaderVisible(visible) {
                 this.headerVisible = visible
             },
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 7d2cfd04..416337ad 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -8,9 +8,13 @@
             </div>
         </template>
         <template v-if="app.playlists.loadingState == 1">
-            <div class="playlist-display"
+            <div class="playlist-display" :style="{ 'background-color': '#' +hasHeroObject()?.bgColor ?? '' }"
                  @mouseover.self="minClass(false)">
                 <div class="playlistInfo">
+                    <div class="playlist-hero" v-if="hasHero()">
+                        <mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
+                        <div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div> 
+                    </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
                             <div class="mediaContainer">
@@ -26,7 +30,7 @@
                         <div class="col playlist-info">
                             <template v-if="!editorialNotesExpanded">
                                 <div>
-                                    <div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing">
+                                    <div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing" :style="{ 'color': '#' +hasHeroObject()?.textColor1 ?? '', 'filter' : 'drop-shadow(1px 3px 8px #' + hasHeroObject()?.textColor4 ?? '' +')' }">
                                         {{data.attributes ? (data.attributes.name ??
                                         (data.attributes.title ?? '') ?? '') : ''}}
                                     </div>
@@ -38,24 +42,26 @@
                                                                                            @change="editPlaylist"
                                                                                            @keydown.enter="editPlaylist"/>
                                     </div>
-                                    <div class="playlist-time genre" style="margin: 0px;">{{getAlbumGenre()}}</div>
+                                    <div class="playlist-time genre" style="margin: 0px;" :style="{ 'color': '#' + hasHeroObject()?.textColor2 ?? '' }">{{getAlbumGenre()}}</div>
                                     <div class="playlist-artist item-navigate"
                                          v-if="getArtistName(data) != '' && !useArtistChip"
                                          @click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
                                         {{getArtistName(data)}}
                                     </div>
                                     <template v-if="useArtistChip">
-                                        <artist-chip v-for="artist in data.relationships.artists?.data"
+                                        <artist-chip v-for="artist in data.relationships.artists?.data"  :style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
                                                      :item="artist"></artist-chip>
                                     </template>
                                     <div class="playlist-desc"
+                                        :style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
                                          v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
                                         <div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
                                              class="content"
                                              v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
                                              @click="openInfoModal()"></div>
                                         <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing == false)"
-                                             @mouseover="minClass(false)" @click="editPlaylistDescription()">{{data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard}}</div>
+                                             @mouseover="minClass(false)" @click="editPlaylistDescription()" v-html="(data.attributes.description?.standard ?? (data.attributes.editorialNotes?.standard ?? '')).substring(0, 255) +'...'"
+                                             @click="if((data.attributes.description?.standard ?? (data.attributes.editorialNotes?.standard ?? '')).length > 255) {openInfoModal()}"></div>
                                         <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing)"
                                              @mouseover="minClass(false)"><input type="text"
                                              spellcheck="false"
@@ -81,11 +87,11 @@
                                 </div>
                             </template>
                             <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}" style="z-index: 20;">
-                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
+                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;" :style="{'background': '#' +hasHeroObject()?.textColor4 ?? '','border-top': '#' +hasHeroObject()?.textColor3 ?? '','border': '#' +hasHeroObject()?.textColor2 ?? ''}"
                                         @click="app.mk.shuffleMode = 0; play()"><img class="md-ico-play">
                                     {{app.getLz('term.play')}}
                                 </button>
-                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
+                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;" :style="{'background': '#' +hasHeroObject()?.textColor4 ?? '','border-top': '#' +hasHeroObject()?.textColor3 ?? '','border': '#' +hasHeroObject()?.textColor2 ?? ''}"
                                         @click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
                                     {{app.getLz('term.shuffle')}}
                                 </button>
@@ -109,6 +115,7 @@
                                             spellcheck="false"
                                             :placeholder="$root.getLz('term.search') + '...'"
                                             @input="search()"
+                                            :style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
                                             v-model="searchQuery"
                                             class="search-input">
                                     </div>
@@ -120,7 +127,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="artworkContainer" v-if="data.attributes.artwork != null">
+                <div class="artworkContainer" v-if="data.attributes.artwork != null && !hasHero()">
                     <artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
                 </div>
                 <button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing">
@@ -364,6 +371,26 @@
             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;
+            },
+            hasHeroObject() {
+                if(this.data.attributes?.editorialArtwork?.bannerUber){
+                    return this.data.attributes?.editorialArtwork?.bannerUber
+                } else if(this.data.attributes?.editorialArtwork?.subscriptionHero) {
+                    return this.data.attributes?.editorialArtwork?.subscriptionHero
+                } else if(this.data.attributes?.editorialArtwork?.storeFlowcase){
+                    return this.data.attributes?.editorialArtwork?.storeFlowcase
+                }
+                return [];
+            },
             getBadges() {
                 return
                 if (this.badgesRequested) {
diff --git a/src/renderer/views/pages/installed-themes.ejs b/src/renderer/views/pages/installed-themes.ejs
index 6a4b2563..dbb99395 100644
--- a/src/renderer/views/pages/installed-themes.ejs
+++ b/src/renderer/views/pages/installed-themes.ejs
@@ -4,7 +4,7 @@
             <div class="row">
                 <div class="col nopadding">
                     <h1 class="header-text">
-                        {{ $root.getLz("settings.option.visual.theme.manageStyles") }}    
+                        {{ $root.getLz("settings.option.visual.theme.manageStyles") }}
                     </h1>
                 </div>
                 <div class="col-auto nopadding flex-center">
@@ -32,11 +32,11 @@
                 </div>
                 <ul class="list-group list-group-flush">
                     <template v-for="theme in themes">
-                        <li @click="addStyle(theme.file)" 
+                        <li @click="addStyle(theme.file)"
                         @contextmenu="contextMenu($event, theme)"
                         class="list-group-item list-group-item-dark"
                         :class="{'applied': $root.cfg.visual.styles.includes(theme.file)}">
-                            
+
                             <b-row>
                                 <b-col class="themeLabel">{{theme.name}}</b-col>
                                 <template v-if="$root.cfg.visual.styles.includes(theme.file)">
@@ -58,13 +58,13 @@
 
                             </b-row>
                         </li>
-                        <li @click="addStyle(packEntry.file)" 
+                        <li @click="addStyle(packEntry.file)"
                         @contextmenu="contextMenu($event, theme)"
                         class="list-group-item list-group-item-dark addon"
                         v-for="packEntry in theme.pack"
                         :class="{'applied': $root.cfg.visual.styles.includes(packEntry.file)}"
                         v-if="theme.pack">
-                        
+
                         <b-row>
                             <b-col class="themeLabel">{{packEntry.name}}</b-col>
                             <template v-if="$root.cfg.visual.styles.includes(packEntry.file)">
@@ -111,7 +111,7 @@
                             </b-col>
                         </b-row>
                         </b-list-group-item>
-                </draggable>    
+                </draggable>
             </div>
         `,
         props: {
@@ -244,7 +244,7 @@
                             name: app.getLz("settings.option.visual.theme.uninstall"),
                             disabled: true,
                             action: () => {
-                                bootbox.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
+                                app.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
                                     theme: theme.name ?? theme.file
                                 }), (res) => {
                                     if (res) {
@@ -317,7 +317,7 @@
                 let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
                     repo: repo.full_name
                 });
-                bootbox.confirm(msg, (res) => {
+                app.confirm(msg, (res) => {
                     if (res) {
                         ipcRenderer.once("theme-installed", (event, arg) => {
                             if (arg.success) {
@@ -334,7 +334,7 @@
             },
             installThemeURL() {
                 let self = this
-                bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
                     if (result) {
                         ipcRenderer.once("theme-installed", (event, arg) => {
                             if (arg.success) {
diff --git a/src/renderer/views/pages/keybinds.ejs b/src/renderer/views/pages/keybinds.ejs
index 26cc28e8..a8f685de 100644
--- a/src/renderer/views/pages/keybinds.ejs
+++ b/src/renderer/views/pages/keybinds.ejs
@@ -2,11 +2,11 @@
     <div class="content-inner keybinds-page">
             <div class="md-option-header">
                 <span>{{$root.getLz('settings.option.general.keybindings')}}</span>
-            </div>                         
+            </div>
         <div class="settings-option-body">
             <div class="md-option-header-sub">
                 <span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
-            </div>  
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     {{$root.getLz('settings.description.search')}}
@@ -86,7 +86,7 @@
             </div>
             <div class="md-option-header-sub">
                 <span>{{$root.getLz('settings.option.general.keybindings.session')}}</span>
-            </div>  
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     {{$root.getLz('settings.description.private')}}
@@ -100,7 +100,7 @@
             </div>
             <div class="md-option-header-sub">
                 <span>{{$root.getLz('settings.option.general.keybindings.control')}}</span>
-            </div>  
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     {{$root.getLz('settings.description.remote')}}
@@ -158,7 +158,7 @@
             </div>
             <div class="md-option-header-sub" v-if="app.platform !== 'darwin'">
                 <span>{{$root.getLz('settings.option.general.keybindings.interface')}}</span>
-            </div>  
+            </div>
             <div class="md-option-line" v-if="app.platform !== 'darwin'">
                 <div class="md-option-segment">
                     {{$root.getLz('term.zoomin')}}
@@ -194,7 +194,7 @@
             </div>
             <div class="md-option-header-sub">
                 <span>{{$root.getLz('settings.option.general.keybindings.advanced')}}</span>
-            </div>  
+            </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
                     {{$root.getLz('settings.description.developer')}}
@@ -210,7 +210,7 @@
                  {{$root.getLz('term.reset')}}
             </button>
         </div>
- 
+
     </div>
 </script>
 
@@ -265,7 +265,7 @@
                                     document.body.removeChild(blur);
                                     clearTimeout(keyBindTimeout);
                                     notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
-                                    bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                                    app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
                                         if (ok) ipcRenderer.invoke("relaunchApp")
                                     })
                                 } else {
@@ -296,7 +296,7 @@
                 app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
                 app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
                 notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
-                bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
                     if (ok) ipcRenderer.invoke("relaunchApp")
                 })
             },
diff --git a/src/renderer/views/pages/plugins-github.ejs b/src/renderer/views/pages/plugins-github.ejs
index 7d207ad3..15a08986 100644
--- a/src/renderer/views/pages/plugins-github.ejs
+++ b/src/renderer/views/pages/plugins-github.ejs
@@ -125,13 +125,13 @@
                 let msg = app.stringTemplateParser(app.getLz('settings.option.visual.plugin.github.install.confirm'), {
                     repo: repo.full_name
                 });
-                bootbox.confirm(msg, (res) => {
+                app.confirm(msg, (res) => {
                     if (res) {
                         ipcRenderer.once("plugin-installed", (event, arg) => {
                             if (arg.success) {
                                 self.themes = []
                                 notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
-                                bootbox.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
+                                app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
                                     if (ok) {
                                         ipcRenderer.invoke("relaunchApp")
                                     } else {
@@ -148,12 +148,12 @@
             },
             installThemeURL() {
                 let self = this
-                bootbox.prompt(app.getLz('settings.prompt.visual.plugin.github.URL'), (result) => {
+                app.prompt(app.getLz('settings.prompt.visual.plugin.github.URL'), (result) => {
                     if (result) {
                         ipcRenderer.once("plugin-installed", (event, arg) => {
                             if (arg.success) {
                                 self.themes = ipcRenderer.sendSync("get-themes")
-                                bootbox.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
+                                app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
                                     if (ok) {
                                         ipcRenderer.invoke("relaunchApp")
                                     } else {
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 62ed1ab9..f67799af 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -1390,7 +1390,7 @@
                 }
             },
             reinstallWidevineCDM() {
-                bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
+                app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
                     if (ok) {
                         ipcRenderer.invoke("reinstall-widevine-cdm");
                     }
@@ -1433,7 +1433,7 @@
             toggleAudioContext: function () {
                 if (app.cfg.advanced.AudioContext === true) {
                     if (navigator.hardwareConcurrency < 6) {
-                        bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
+                        app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
                             if (result) {
                                 CiderAudio.init();
                                 if (app.cfg.audio.normalization === true) {
@@ -1480,7 +1480,7 @@
 
             },
             promptForRelaunch() {
-                bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
+                app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
                     if (result) {
                         ipcRenderer.send('relaunchApp', '');
                     }
diff --git a/src/renderer/views/pages/themes-github.ejs b/src/renderer/views/pages/themes-github.ejs
index 95635852..afd9f895 100644
--- a/src/renderer/views/pages/themes-github.ejs
+++ b/src/renderer/views/pages/themes-github.ejs
@@ -146,7 +146,7 @@
                 let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
                     repo: repo.full_name
                 });
-                bootbox.confirm(msg, (res) => {
+                app.confirm(msg, (res) => {
                     if (res) {
                         ipcRenderer.once("theme-installed", (event, arg) => {
                             if (arg.success) {
@@ -163,7 +163,7 @@
             },
             installThemeURL() {
                 let self = this
-                bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
                     if (result) {
                         ipcRenderer.once("theme-installed", (event, arg) => {
                             if (arg.success) {