diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index e0aa78b0..9d74de15 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -700,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/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 3cdffb4a..2723bc4a 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -13,10 +13,7 @@
                 <div class="playlistInfo">
                     <div class="playlist-hero" v-if="hasHero()">
                         <mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
-                        <div class="hero-tint" :style="{ 'position':'absolute', 'top' : '0',
-                        'background-color': '#' + hasHeroObject()?.bgColor ?? '' , // 50%
-                        'opacity': '0.6',
-                        'width':'100%', 'height':'100%'}"></div> 
+                        <div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div> 
                     </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
@@ -117,6 +114,7 @@
                                             spellcheck="false"
                                             :placeholder="$root.getLz('term.search') + '...'"
                                             @input="search()"
+                                            :style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
                                             v-model="searchQuery"
                                             class="search-input">
                                     </div>