diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 1744472e..c6ca07f0 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -606,7 +606,10 @@ const app = new Vue({
             let self = this
             let library = []
             let downloaded = null;
-            if ((this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) && !force) {
+            if ((this.library.songs.downloadState == 2) && !force) {
+                return
+            }
+            if(this.library.songs.downloadState == 1) {
                 return
             }
             if (localStorage.getItem("librarySongs") != null) {
@@ -824,6 +827,12 @@ const app = new Vue({
                     })
             }
         },
+        addToLibrary(id) {
+            let self = this
+            this.mk.addToLibrary(id).then((data)=>{
+                self.getLibrarySongsFull(true)
+            })
+        },
         loadMXM() {
             let attempt = 0;
             const track = encodeURIComponent((this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.title ?? '' : '');
diff --git a/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs b/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
index d1acf5d4..38b2d09e 100644
--- a/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
+++ b/resources/cider-ui-tests/views/components/mediaitem-list-item.ejs
@@ -1,12 +1,10 @@
 <script type="text/x-template" id="mediaitem-list-item">
     <template>
-        <div
-            @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
-            v-observe-visibility="{callback: visibilityChanged}"
-            class="cd-mediaitem-list-item">
+        <div v-observe-visibility="{callback: visibilityChanged}"
+             class="cd-mediaitem-list-item">
             <template v-if="isVisible">
                 <div class="isLibrary" v-if="showLibraryStatus == true">
-                    <button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
+                    <button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
                     <button v-else>❤️</button>
                 </div>
                 <div class="artwork" v-if="showArtwork == true">
@@ -15,7 +13,7 @@
                             size="34"
                             :type="item.type"></mediaitem-artwork>
                 </div>
-                <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
+                <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click="playTrack()">
                     <div class="title text-overflow-elipsis">
                         {{ item.attributes.name }}
                     </div>
@@ -28,18 +26,19 @@
                         </template>
                     </div>
                 </div>
-                <div class="content-rating" v-if="item.attributes.contentRating">
+                <div class="content-rating" v-if="item.attributes.contentRating" @click="playTrack()">
                     {{ item.attributes.contentRating }}
                 </div>
-                <template v-if="showMetaData == true">
+                <template v-if="showMetaData == true" @click="playTrack()">
                     <div class="metainfo">
-                        {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
+                        {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
+                        : "" }}
                     </div>
                     <div class="metainfo">
                         {{ item.attributes.genreNames[0] ?? "" }}
                     </div>
                 </template>
-                <div class="duration" v-if="showDuration">
+                <div class="duration" v-if="showDuration" @click="playTrack()">
                     {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
                 </div>
             </template>
@@ -52,7 +51,8 @@
         template: '#mediaitem-list-item',
         data: function () {
             return {
-                isVisible: false
+                isVisible: false,
+                addedToLibrary: false
             }
         },
         props: {
@@ -65,6 +65,22 @@
         methods: {
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible
+            },
+            addToLibrary() {
+                let item = this.item
+                if(item.attributes.playParams.id) {
+                    console.log('adding to library', item.attributes.playParams.id)
+                    app.addToLibrary(item.attributes.playParams.id.toString())
+                    this.addedToLibrary = true
+                }else if(item.id) {
+                    console.log('adding to library', item.id)
+                    app.addToLibrary(item.id.toString())
+                    this.addedToLibrary = true
+                }
+            },
+            playTrack() {
+                let item = this.item
+                app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
             }
         }
     });
diff --git a/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs b/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs
index 9ce2223b..ecce0096 100644
--- a/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs
+++ b/resources/cider-ui-tests/views/components/mediaitem-square-large.ejs
@@ -30,7 +30,7 @@
                 </div>
 
             </div>
-            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
                 <div class="button" style="
                 border-radius: 50%;
                 background: rgba(50,50,50,0.7);"
diff --git a/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs b/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs
index c85aa151..01d5c45b 100644
--- a/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs
+++ b/resources/cider-ui-tests/views/components/mediaitem-square-sp.ejs
@@ -34,7 +34,7 @@
                 </div>
 
             </div>
-            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
                 <div class="button" style="
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
diff --git a/resources/cider-ui-tests/views/components/mediaitem-square.ejs b/resources/cider-ui-tests/views/components/mediaitem-square.ejs
index 7641c9eb..a83bc7d2 100644
--- a/resources/cider-ui-tests/views/components/mediaitem-square.ejs
+++ b/resources/cider-ui-tests/views/components/mediaitem-square.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="mediaitem-square">
     <template>
-        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
+        <div tabindex="0" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
              class="cd-mediaitem-square">
             <div class="artwork">
                 <mediaitem-artwork