diff --git a/web-src/src/components/SpotifyListItemTrack.vue b/web-src/src/components/SpotifyListItemTrack.vue
index 763ab419..3c80bd49 100644
--- a/web-src/src/components/SpotifyListItemTrack.vue
+++ b/web-src/src/components/SpotifyListItemTrack.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" @click="play">
+    <div
+      class="media-content is-clipped"
+      :class="{
+        'is-clickable': track.is_playable
+      }"
+      @click="play"
+    >
       <h1
         class="title is-6"
         :class="{ 'has-text-grey-light': !track.is_playable }"
@@ -37,10 +43,12 @@ import webapi from '@/webapi'
 
 export default {
   name: 'SpotifyListItemTrack',
-  props: ['track', 'position', 'album', 'context_uri'],
+  props: ['track', 'position', 'context_uri'],
   methods: {
     play() {
-      webapi.player_play_uri(this.context_uri, false, this.position)
+      if (this.track.is_playable) {
+        webapi.player_play_uri(this.context_uri, false, this.position)
+      }
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index cda26182..b133c5b4 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/SpotifyPageAlbum.vue
@@ -43,7 +43,6 @@
         :key="track.id"
         :track="track"
         :position="index"
-        :album="album"
         :context_uri="album.uri"
       >
         <template #actions>
diff --git a/web-src/src/pages/SpotifyPagePlaylist.vue b/web-src/src/pages/SpotifyPagePlaylist.vue
index 4a2d495f..4a6f70b3 100644
--- a/web-src/src/pages/SpotifyPagePlaylist.vue
+++ b/web-src/src/pages/SpotifyPagePlaylist.vue
@@ -25,11 +25,10 @@
         "
       />
       <spotify-list-item-track
-        v-for="(track, index) in tracks"
+        v-for="track in tracks"
         :key="track.id"
         :track="track"
-        :album="track.album"
-        :position="index"
+        :position="track.position"
         :context_uri="playlist.uri"
       >
         <template #actions>
@@ -67,6 +66,7 @@ import store from '@/store'
 import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import { mdiAxe } from '@mdi/js'
 
 const PAGE_SIZE = 50
 
@@ -147,12 +147,20 @@ export default {
     },
 
     append_tracks(data) {
-      this.tracks = data.items.reduce((tracks, item) => {
-        if (item.track) {
-          tracks.push(item.track)
+      let position = Math.max(
+        -1,
+        ...this.tracks.map((item) => item.position).filter((item) => item)
+      )
+      // Filters out null tracks and adds a position to the playable tracks
+      data.items.forEach((item) => {
+        const track = item.track
+        if (track) {
+          if (track.is_playable) {
+            track.position = ++position
+          }
+          this.tracks.push(track)
         }
-        return tracks
-      }, this.tracks)
+      })
       this.total = data.total
       this.offset += data.limit
     },
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index afd996c4..7ecb1e27 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/web-src/src/pages/SpotifyPageSearch.vue
@@ -46,7 +46,6 @@
           v-for="track in tracks.items"
           :key="track.id"
           :track="track"
-          :album="track.album"
           :position="0"
           :context_uri="track.uri"
         >