diff --git a/front/src/components/QueueItem.vue b/front/src/components/QueueItem.vue
index 2961992c4..6520585bf 100644
--- a/front/src/components/QueueItem.vue
+++ b/front/src/components/QueueItem.vue
@@ -53,9 +53,11 @@ defineEmits<Emits>()
       </template>
     </div>
     <div class="controls">
-      <template v-if="$store.getters['favorites/isFavorite'](source.track.id)">
-        <i class="pink heart icon" />
-      </template>
+      <i
+        :class="$store.getters['favorites/isFavorite'](source.track.id) ? 'pink' : 'grey'"
+        class="heart icon ui favorite-icon"
+        @click.stop="$store.dispatch('favorites/toggle', source.track.id)"
+      />
       <button
         :aria-label="source.labels.remove"
         :title="source.labels.remove"