diff --git a/src/assets/icons/heart.fill.svg b/src/assets/icons/heart.fill.svg
index 638cb3eb..cd520394 100644
--- a/src/assets/icons/heart.fill.svg
+++ b/src/assets/icons/heart.fill.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="28" height="28" viewBox="0 0 28 28" fill="rgb(250, 33, 33)" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.9912 22.1445C14.2197 22.1445 14.5449 21.9775 14.8086 21.8105C19.7217 18.6465 22.8682 14.9375 22.8682 11.1758C22.8682 7.9502 20.6445 5.7002 17.8408 5.7002C16.0918 5.7002 14.7822 6.66699 13.9912 8.11719C13.2178 6.67578 11.8994 5.7002 10.1504 5.7002C7.34668 5.7002 5.11426 7.9502 5.11426 11.1758C5.11426 14.9375 8.26074 18.6465 13.1738 21.8105C13.4463 21.9775 13.7715 22.1445 13.9912 22.1445Z"/>
 </svg>
diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg
index 8d2427a5..b189bf74 100644
--- a/src/assets/icons/heart.svg
+++ b/src/assets/icons/heart.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.09668 11.1846C5.09668 14.9375 8.25195 18.6465 13.1562 21.8105C13.4287 21.9863 13.7627 22.1621 13.9912 22.1621C14.2197 22.1621 14.5537 21.9863 14.8262 21.8105C19.7393 18.6465 22.8857 14.9375 22.8857 11.1846C22.8857 7.94141 20.6445 5.69141 17.7705 5.69141C16.0918 5.69141 14.7822 6.45605 13.9912 7.61621C13.2178 6.46484 11.8994 5.69141 10.2207 5.69141C7.33789 5.69141 5.09668 7.94141 5.09668 11.1846ZM6.90723 11.1758C6.90723 8.96094 8.36621 7.45801 10.3262 7.45801C11.9082 7.45801 12.7959 8.41602 13.3496 9.25098C13.5957 9.61133 13.7627 9.72559 13.9912 9.72559C14.2285 9.72559 14.3779 9.60254 14.6328 9.25098C15.2305 8.43359 16.083 7.45801 17.6562 7.45801C19.625 7.45801 21.084 8.96094 21.084 11.1758C21.084 14.2695 17.8672 17.6973 14.1582 20.1582C14.0791 20.2109 14.0264 20.2461 13.9912 20.2461C13.9561 20.2461 13.9033 20.2109 13.833 20.1582C10.124 17.6973 6.90723 14.2695 6.90723 11.1758Z" fill="#F2F2F2"/>
+<svg width="28" fill="rgb(250, 33, 33)" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.09668 11.1846C5.09668 14.9375 8.25195 18.6465 13.1562 21.8105C13.4287 21.9863 13.7627 22.1621 13.9912 22.1621C14.2197 22.1621 14.5537 21.9863 14.8262 21.8105C19.7393 18.6465 22.8857 14.9375 22.8857 11.1846C22.8857 7.94141 20.6445 5.69141 17.7705 5.69141C16.0918 5.69141 14.7822 6.45605 13.9912 7.61621C13.2178 6.46484 11.8994 5.69141 10.2207 5.69141C7.33789 5.69141 5.09668 7.94141 5.09668 11.1846ZM6.90723 11.1758C6.90723 8.96094 8.36621 7.45801 10.3262 7.45801C11.9082 7.45801 12.7959 8.41602 13.3496 9.25098C13.5957 9.61133 13.7627 9.72559 13.9912 9.72559C14.2285 9.72559 14.3779 9.60254 14.6328 9.25098C15.2305 8.43359 16.083 7.45801 17.6562 7.45801C19.625 7.45801 21.084 8.96094 21.084 11.1758C21.084 14.2695 17.8672 17.6973 14.1582 20.1582C14.0791 20.2109 14.0264 20.2461 13.9912 20.2461C13.9561 20.2461 13.9033 20.2109 13.833 20.1582C10.124 17.6973 6.90723 14.2695 6.90723 11.1758Z" />
 </svg>
diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index c1e5a9f8..c7d0e7e7 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/src/assets/scss/Global/basic.scss
@@ -15,6 +15,15 @@
   max-width: 100%;
 }
 
+.ellip2 {
+  word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .heading {
   font-size: 2rem;
   font-weight: bold;
@@ -99,8 +108,6 @@ button {
   width: 2.5rem;
 }
 
-
-
 // POSITION
 
 .abs {
@@ -134,4 +141,4 @@ button {
 
 .no-select {
   user-select: none;
-}
\ No newline at end of file
+}
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index a92c646d..768e1fe5 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -32,7 +32,7 @@
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip" v-tooltip>
+          <div class="title ellip2" v-tooltip>
             {{ album.title }}
           </div>
         </div>
@@ -48,7 +48,10 @@
               {{ formatSeconds(album.duration, true) }}
             </div>
           </div>
-          <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
+          <div class="buttons">
+            <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
+            <HeartSvg />
+          </div>
         </div>
       </div>
       <div class="art" v-if="!albumHeaderSmall">
@@ -85,6 +88,7 @@ import { isLight } from "@/composables/colors/album";
 import { playSources } from "@/composables/enums";
 import { Album } from "@/interfaces";
 import { Routes } from "@/router/routes";
+import HeartSvg from "../shared/HeartSvg.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
@@ -130,6 +134,11 @@ useVisibility(albumheaderthing, handleVisibilityState);
   background-color: $black;
   align-items: flex-end;
 
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
+
   .big-img {
     height: calc(100%);
     width: 16rem;
diff --git a/src/components/ArtistView/Header.vue b/src/components/ArtistView/Header.vue
index d4fdf475..03c0a586 100644
--- a/src/components/ArtistView/Header.vue
+++ b/src/components/ArtistView/Header.vue
@@ -17,7 +17,7 @@
     >
       <section class="text">
         <div class="card-title">Artist</div>
-        <div class="artist-name">{{ artist.info.name }}</div>
+        <div class="artist-name ellip2">{{ artist.info.name }}</div>
         <div class="stats">
           {{ artist.info.trackcount }} Track{{
             `${artist.info.trackcount == 1 ? "" : "s"}`
@@ -29,7 +29,10 @@
           {{ formatSeconds(artist.info.duration, true) }}
         </div>
       </section>
-      <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
+      <div class="buttons">
+        <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
+        <HeartSvg />
+      </div>
     </div>
     <div class="artist-img no-select">
       <img :src="paths.images.artist.large + artist.info.image" />
@@ -54,6 +57,7 @@ import formatSeconds from "@/utils/useFormatSeconds";
 import { isLight } from "@/composables/colors/album";
 import { paths } from "@/config";
 import { playSources } from "@/composables/enums";
+import HeartSvg from "@/components/shared/HeartSvg.vue";
 
 const artist = useArtistPageStore();
 </script>
@@ -68,11 +72,13 @@ const artist = useArtistPageStore();
 .artist-page-header {
   height: 18rem;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 50% 50%;
   position: relative;
 
   .artist-img {
+    // border: solid red;
     height: 18rem;
+    width: 100%;
 
     img {
       height: 100%;
@@ -120,12 +126,7 @@ const artist = useArtistPageStore();
     .artist-name {
       font-size: 3rem;
       font-weight: bold;
-
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      word-wrap: break-word;
     }
 
     .stats {
@@ -136,5 +137,10 @@ const artist = useArtistPageStore();
   .artist-info.nocontrast {
     color: $black;
   }
+
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
 }
 </style>
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 6a2d03e5..08bcc3e2 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -21,7 +21,7 @@
           {{ formatSeconds(info.duration, true) }}
         </div>
         <div class="title ellip">{{ info.name }}</div>
-        <div class="type">PLAYLIST</div>
+        <div class="type">Playlist</div>
       </div>
     </div>
     <div class="last-updated" :class="{ lightbg: !info.image }">
diff --git a/src/components/shared/HeartSvg.vue b/src/components/shared/HeartSvg.vue
new file mode 100644
index 00000000..4720d55e
--- /dev/null
+++ b/src/components/shared/HeartSvg.vue
@@ -0,0 +1,21 @@
+<template>
+  <button class="heart-button circular"><HeartSvg /></button>
+</template>
+
+<script setup lang="ts">
+import HeartSvg from "@/assets/icons/heart.svg";
+</script>
+
+<style lang="scss">
+.heart-button {
+  $bg: rgb(247, 149, 149);
+  background: $bg;
+  align-items: center;
+  padding: 0 1rem;
+  gap: $smaller;
+
+  &:hover {
+    background: $bg;
+  }
+}
+</style>
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index ba6994ab..2b134d91 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -169,7 +169,6 @@ async function addToFav(trackhash: string) {
     background-color: $gray5;
 
     .index {
-
       .text {
         transition-delay: 500ms;
 
@@ -202,7 +201,6 @@ async function addToFav(trackhash: string) {
   }
 
   .index {
-    opacity: 0.5;
     font-size: 0.8rem;
     width: 100%;
     position: relative;
@@ -211,7 +209,7 @@ async function addToFav(trackhash: string) {
     justify-content: center;
 
     .text {
-      opacity: 1;
+      opacity: 0.5;
       display: block;
       margin: auto 0;
       transition: all 0.25s;
@@ -226,7 +224,6 @@ async function addToFav(trackhash: string) {
       align-content: center;
       transition: all 0.2s;
       transform: translateX(-1.5rem);
-      color: red;
     }
   }
 
diff --git a/src/composables/usePlayFrom.ts b/src/composables/usePlayFrom.ts
index ec709aaf..4f188a1f 100644
--- a/src/composables/usePlayFrom.ts
+++ b/src/composables/usePlayFrom.ts
@@ -47,7 +47,7 @@ export default async function play(
       useQueue.playFromAlbum(
         a_store.info.title,
         a_store.info.albumhash,
-        a_store.allTracks
+        a_store.srcTracks
       );
       useQueue.play();
       break;