diff --git a/src/renderer/assets/feather/heart-fill.svg b/src/renderer/assets/feather/heart-fill.svg
new file mode 100644
index 00000000..1f790aad
--- /dev/null
+++ b/src/renderer/assets/feather/heart-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index 0a1ab179..d4a96c93 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -67,6 +67,9 @@
             </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="svg-icon" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}"></div>
+                </div>
                 <div class="metainfo">
                     {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
                     : "" }}
@@ -98,7 +101,8 @@
                 displayDuration: true,
                 addClasses: {},
                 itemId: 0,
-                isLibrary: false
+                isLibrary: false,
+                isLoved: null
             }
         },
         props: {
@@ -121,6 +125,9 @@
             } else {
                 this.itemId = this.item.id;
             }
+            if (this.item.attributes.playParams) {
+                this.getHeartStatus();
+            }
             let duration = this.item.attributes.durationInMillis ?? 0
             if (duration == 0 || !this.showDuration) {
                 this.displayDuration = false
@@ -323,6 +330,7 @@
                                 "hidden": false,
                                 "disabled": true,
                                 "action": function () {
+                                    self.isLoved = true
                                     app.love(self.item)
                                 }
                             },
@@ -333,6 +341,7 @@
                                 "name": this.app.getLz('action.unlove'),
                                 "hidden": true,
                                 "action": function () {
+                                    self.isLoved = false
                                     app.unlove(self.item)
                                 }
                             },
@@ -499,6 +508,19 @@
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible
             },
+            async getHeartStatus() {
+                try {
+                    await app.getRating(this.item).then(res => {
+                        if (res == 1) {
+                            this.isLoved = true
+                        } else {
+                            this.isLoved = false
+                        }
+                    })
+                } catch (err) {
+                    console.log(err)
+                }
+            },
             addToLibrary() {
                 let item = this.item
                 if (item.attributes.playParams.id) {