diff --git a/src/renderer/less/elements.css b/src/renderer/less/elements.css
index d4547eae..7aef758e 100644
--- a/src/renderer/less/elements.css
+++ b/src/renderer/less/elements.css
@@ -371,6 +371,12 @@
   filter: contrast(0);
   background-repeat: no-repeat;
 }
+.heart-icon {
+  height: 18px;
+  width: 39px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
 @keyframes load-bar {
   10% {
     box-shadow: inset 0 -4px 0;
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 716b71a4..c5fae7a8 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -456,6 +456,13 @@
     background-repeat: no-repeat;
   }
 
+  .heart-icon {
+    height: 18px;
+    width: 39px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
+
   /* CSS.gg
   */
   @keyframes load-bar {
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 180d1296..4ef47570 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -7936,6 +7936,12 @@ fieldset:disabled .btn {
   filter: contrast(0);
   background-repeat: no-repeat;
 }
+.cd-mediaitem-list-item .heart-icon {
+  height: 18px;
+  width: 39px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
 @keyframes load-bar {
   10% {
     box-shadow: inset 0 -4px 0;
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 13e7de3b..3900c772 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1207,6 +1207,14 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
       background-repeat: no-repeat;
       margin-left: 3px;
     }
+
+    .heart-icon {
+      height: 9px;
+      width: 13px;
+      filter: contrast(0);
+      background-repeat: no-repeat;
+      margin-left: 3px;
+    }
   }
 
   .lossless-icon {
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index d4a96c93..83189c1e 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -67,7 +67,7 @@
             </div>
             <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
             <template v-if="showMetaData == true" @dblclick="route()">
-                <div class="metainfo" style="min-width: 70px;" v-if="isLoved">
+                <div class="heart-icon" v-if="isLoved">
                     <div class="svg-icon" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}"></div>
                 </div>
                 <div class="metainfo">