diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 03f6f495..4edb071d 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -99,7 +99,9 @@
                     <button class="playback-button--small queue"></button>
                 </div>
                 <div class="app-chrome-item generic">
-                    <button class="playback-button--small lyrics" @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
+                    <button class="playback-button--small lyrics"
+                            @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"
+                    ></button>
                 </div>
                 <div class="app-chrome-item full-height">
                     <div class="window-controls">
@@ -142,7 +144,8 @@
                     <div class="app-sidebar-header-text">
                         Playlists
                     </div>
-                    <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" href="item.href">
+                    <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" :href="item.href"
+                            @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
                         {{ item.attributes.name }}
                     </button>
                 </div>
@@ -170,10 +173,10 @@
                     <button class="app-sidebar-button" style="width:100%"
                             @click="chrome.menuOpened = !chrome.menuOpened">
                         <template v-if="chrome.userinfo.attributes">
-                            <div class="sidebar-user-icon"
-                                 :style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
+                            <img class="sidebar-user-icon" loading="lazy"
 
-                            </div>
+                                 :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"
+                            />
                         </template>
 
                         <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
@@ -195,10 +198,25 @@
                 <div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
                     <div>Updating your library...</div>
                     <div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
-                    <div style="width: 100%"><progress style="width: 80%;" :value="library.songs.meta.progress" :max="library.songs.meta.total"></progress></div>
+                    <div style="width: 100%">
+                        <progress style="width: 80%;" :value="library.songs.meta.progress"
+                                  :max="library.songs.meta.total"></progress>
+                    </div>
                 </div>
             </div>
             <div id="app-content">
+                <!-- Playlist / Album page-->
+                <transition name="wpfade">
+                    <template v-if="page.includes('playlist_')">
+                        <cider-playlist :data="showingPlaylist"></cider-playlist>
+                    </template>
+                </transition>
+                <transition name="wpfade">
+                    <template v-if="page.includes('album_')">
+                        <cider-playlist :data="showingPlaylist"></cider-playlist>
+                    </template>
+                </transition>
+                </transition>
                 <!-- Browse -->
                 <transition name="wpfade">
                     <template v-if="page == 'browse'">
@@ -275,7 +293,7 @@
                 <!-- Library - Songs -->
                 <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
                     <template v-if="page == 'library-songs'">
-                        <div class="content-inner" v-if="library.songs.downloadState == 2">
+                        <div class="content-inner">
                             <h1 class="header-text">Songs</h1>
                             <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                                 <div class="search-input--icon"></div>
@@ -290,13 +308,6 @@
                             <mediaitem-list-item :item="item"
                                                  v-for="item in library.songs.displayListing"></mediaitem-list-item>
                         </div>
-                        <div class="content-inner" v-if="library.songs.downloadState == 0">
-                        </div>
-                        <div class="content-inner centered" v-if="library.songs.downloadState == 1">
-                            <h1 style="text-align: center">Updating your library</h1>
-                            <h3 style="text-align: center">{{ library.songs.meta.progress }} / {{
-                                library.songs.meta.total }}</h3>
-                        </div>
                     </template>
                 </transition>
                 <!-- Library - Albums -->
@@ -318,9 +329,11 @@
                     </template>
                 </transition>
             </div>
-            <div class="app-drawer" v-if="drawertest">
-                <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
-            </div>
+            <transition name="drawertransition">
+                <div class="app-drawer" v-if="drawertest">
+                    <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
+                </div>
+            </transition>
         </div>
     </div>
     <transition name="wpfade">
@@ -335,6 +348,23 @@
 
 </div>
 
+<script type="text/x-template" id="mediaitem-artwork">
+    <template v-if="type == 'artists'">
+        <div class="mediaitem-artwork rounded"
+             >
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+    <template v-else>
+        <div class="mediaitem-artwork"
+             >
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+</script>
+
 <!-- Generic Collection of MediaItems -->
 <script type="text/x-template" id="collection-view-generic">
     <template>
@@ -371,6 +401,34 @@
     </div>
 </script>
 
+<!-- Album / Playlist View -->
+<script type="text/x-template" id="cider-playlist">
+    <div class="content-inner">
+        <template v-if="data != [] && data.attributes != []">
+            <div class="playlist-display row">
+                <div class="col-auto">
+                    <mediaitem-artwork
+                        :url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
+                        size="200"
+                    ></mediaitem-artwork>
+                </div>
+                <div class="col playlist-info">
+                    <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
+                    <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
+                        ''}}
+                    </div>
+                    <div class="playlist-desc"
+                         v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
+                </div>
+            </div>
+            <mediaitem-list-item :item="item"
+                                 v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
+            <div class="playlist-time">{{app.getTotalTime()}}</div>
+        </template>
+
+    </div>
+</script>
+
 <!-- Search -->
 <script type="text/x-template" id="cider-search">
     <div class="content-inner">
@@ -378,7 +436,7 @@
             <div class="col-sm" style="width: auto;" v-if="getTopResult()">
                 <template>
                     <h3>Top Result</h3>
-                    <mediaitem-square :item="getTopResult()"></mediaitem-square>
+                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square>
                 </template>
             </div>
             <div class="col" v-if="search.results.songs">
@@ -407,8 +465,8 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-scroller-horizontal
-                        :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
+                <mediaitem-scroller-horizontal-large
+                        :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
             </template>
             <template v-if="search.results.artists">
                 <div class="row">
@@ -419,8 +477,8 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-square :item="item"
-                                  v-for="item in search.results.artists.data.limit(5)"></mediaitem-square>
+                <mediaitem-square-large :item="item"
+                                        v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
             </template>
             <template v-if="search.results.playlists">
                 <div class="row">
@@ -431,8 +489,8 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-square :item="item"
-                                  v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
+                <mediaitem-square-large :item="item"
+                                        v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
             </template>
         </template>
     </div>
@@ -487,10 +545,13 @@
     <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)"
              class="cd-mediaitem-list-item">
-            <div class="artwork" v-if="item.attributes.artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url ? item.attributes.artwork.url : '', 34)}
-                "></div>
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="34"
+                        :type="item.type"
+                ></mediaitem-artwork>
+            </div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">
                     {{ item.attributes.name }}
@@ -516,10 +577,13 @@
     <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)"
              class="cd-mediaitem-hrect">
-            <div class="artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)}
-                "></div>
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="70"
+                        :type="item.type"
+                ></mediaitem-artwork>
+            </div>
             <div class="info-rect">
                 <div class="title text-overflow-elipsis">
                     {{ item.attributes.name }}
@@ -541,9 +605,13 @@
     <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)"
              class="cd-mediaitem-square">
-            <div class="artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
+            <div class="artwork">
+                <mediaitem-artwork
+                        :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                        size="300"
+                        :type="item.type"
+                ></mediaitem-artwork>
+            </div>
             <div class="title text-overflow-elipsis">
                 {{ item.attributes.name }}
             </div>
@@ -558,16 +626,55 @@
 
 <script type="text/x-template" id="mediaitem-square-large">
     <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)"
-             class="cd-mediaitem-square-large">
-            <div class="artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
-            <div class="title text-overflow-elipsis">
-                {{ item.attributes.name }}
+        <div style="position: relative; display: inline-flex;">
+            <div @click.self='app.routeView(item)'
+                 class="cd-mediaitem-square-large">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="300"
+                            :type="item.type"
+                    ></mediaitem-artwork>
+                </div>
+                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                        width: '40px',
+                        height: '40px',} :
+                        {margin: '35px',
+                        width: '120px',
+                        height: '120px',}]"
+                         @click="app.playMediaItem(item)">
+                        <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                            <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                        </svg>
+                    </div>
+                </div>
+                <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
+                    {{ item.attributes.name ?? '' }}
+                </div>
+                <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                    {{ item.attributes.artistName ?? '' }}
+                </div>
+
             </div>
-            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
-                {{ item.attributes.artistName }}
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                <div class="button" style="
+                border-radius: 50%;
+                background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                    width: '40px',
+                    height: '40px',} :
+                    {margin: '35px',
+                    width: '120px',
+                    height: '120px',}]"
+                     @click="app.playMediaItem(item)">
+                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                        <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                    </svg>
+                </div>
             </div>
         </div>
     </template>
@@ -576,24 +683,61 @@
 <!-- MediaItem Square SP -->
 <script type="text/x-template" id="mediaitem-square-sp">
     <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)"
-             class="cd-mediaitem-square-sp"
-             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
+        <div style="position: relative; display: inline-flex;">
+            <div @click.self='app.routeView(item)'
+                 class="cd-mediaitem-square-sp"
+                 :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
+                <div class="artwork">
+                    <mediaitem-artwork
+                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            size="300"
+                            :type="item.type"
+                    ></mediaitem-artwork>
+                </div>
+                <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                    <div class="button" style="
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                         :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                        width: '40px',
+                        height: '40px',} :
+                        {margin: '35px',
+                        width: '120px',
+                        height: '120px',}]"
+                         @click="app.playMediaItem(item)">
+                        <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                            <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                        </svg>
+                    </div>
+                </div>
+                <div class="title text-overflow-elipsis"
+                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
+                     style="font-weight: 600">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis"
+                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
+                     style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;">
+                    {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
+                    :(item.attributes.artistName ?? '') }}
+                </div>
 
-        >
-            <div class="artwork"
-                 :class="{'round': item.type == 'artists'}"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
-            <div class="title text-overflow-elipsis"
-                 :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
-                 style="font-weight: 600">
-                {{ item.attributes.name }}
             </div>
-            <div class="subtitle text-overflow-elipsis"
-                 :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
-                 style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;">
-                {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
-                :(item.attributes.artistName ?? '') }}
+            <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
+                <div class="button" style="
+               border-radius: 50%;
+               background: rgba(50,50,50,0.7);"
+                     :style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
+                   width: '40px',
+                   height: '40px',} :
+                   {margin: '35px',
+                   width: '120px',
+                   height: '120px',}]"
+                     @click="app.playMediaItem(item)">
+                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
+                        <path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
+                    </svg>
+                </div>
             </div>
         </div>
     </template>
@@ -605,12 +749,16 @@
                 <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
                     v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
                     {{ lyric.line }}
+                    <div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
+                        {{ lyric.translation }}
+                        <div>
                 </h3>
             </template>
             <template v-else>
-                <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime" :end="lyric.endTime"
+                <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
+                    :end="lyric.endTime"
                     v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
-                    <div class="lyricWaiting" >
+                    <div class="lyricWaiting">
                         <div class='WaitingDot1'></div>
                         <div class='WaitingDot2'></div>
                         <div class='WaitingDot3'></div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index b0db084c..632735bc 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1,3 +1,16 @@
+Vue.component('mediaitem-artwork', {
+    template: '#mediaitem-artwork',
+    props: ['size', 'url', 'type'],
+    methods: {
+        getArtworkStyle() {
+            return {
+                width: this.size + 'px',
+                height: this.size + 'px'
+            };
+        }
+    }
+});
+
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
     props: ['name', 'page', 'cd-click'],
@@ -53,7 +66,7 @@ Vue.component('mediaitem-list-item', {
 
 Vue.component('lyrics-view', {
     template: '#lyrics-view',
-    props: ["time", "lyrics"],
+    props: ["time", "lyrics", "translation"],
     methods: {}
 });
 
@@ -76,6 +89,11 @@ Vue.component('cider-listen-now', {
     props: ["data"]
 })
 
+Vue.component('cider-playlist', {
+    template: "#cider-playlist",
+    props: ["data"]
+})
+
 const MusicKitTools = {
     getHeader() {
         return new Headers({
@@ -110,6 +128,7 @@ const app = new Vue({
         radio: {
             personal: []
         },
+        showingPlaylist: [],
         library: {
             songs: {
                 listing: [],
@@ -142,7 +161,9 @@ const app = new Vue({
             artworkReady: false,
             userinfo: {},
             menuOpened: false,
-            maximized: false
+            maximized: false,
+            drawerOpened: false,
+            drawerState: "queue"
         },
         page: "browse"
     },
@@ -160,6 +181,12 @@ const app = new Vue({
                 self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
                 self.lyriccurrenttime = app.mk.currentPlaybackTime;
 
+                if (document.querySelector(".lyric-line.active")) {
+                    document.querySelector(".lyric-line.active").scrollIntoView({
+                        behavior: "smooth",
+                        block: "center"
+                    })
+                }
                 // animated dot like AM - bad perf
                 if (self.lyricon && self.drawertest){
                     let currentLine = document.querySelector(`.lyric-line.active`)
@@ -228,6 +255,47 @@ const app = new Vue({
             })
             document.body.removeAttribute("loading")
         },
+        async getPlaylistFromID(id){
+            try{
+            this.showingPlaylist = await app.mk.api.library.playlist(id)} catch (e){console.log(e);
+            try{this.showingPlaylist = await app.mk.api.playlist(id)} catch (err) {console.log(err)}    
+            }
+           
+        },
+        routeView (item){
+            app.showingPlaylist = []; 
+            let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
+            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
+            let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
+            console.log(kind, id, isLibrary)
+            if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
+            {app.page = (kind) + "_"+ (id); 
+            console.log("oks");
+            app.getTypeFromID((kind),(id), (isLibrary));} else {
+                app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
+            }
+        },
+        playMediaItem(item){
+            let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
+            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
+            let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
+            console.log(kind, id, isLibrary)
+            app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
+        },
+        async getTypeFromID(kind,id, isLibrary = false){
+            
+            var a;
+            try {
+                a = await this.mkapi(kind.toString(), isLibrary, id.toString());
+            }
+            catch (e) {
+                console.log(e);
+                try {
+                    console.log("opp", !isLibrary);
+                    a = await this.mkapi(kind.toString(), !isLibrary, id.toString());
+                } catch (err) { console.log(err); a = [] } finally { this.showingPlaylist = a }
+            } finally { this.showingPlaylist = a };
+        },
         searchLibrarySongs() {
             let self = this
             if (this.library.songs.search == "") {
@@ -269,6 +337,10 @@ const app = new Vue({
             if (this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) {
                 return
             }
+            if(localStorage.getItem("librarySongs") != null) {
+                this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
+                this.library.songs.displayListing = this.library.songs.listing
+            }
             this.library.songs.downloadState = 1
 
             function downloadChunk() {
@@ -290,6 +362,10 @@ const app = new Vue({
                 self.library.songs.meta.progress = library.length
                 if(typeof downloaded.next == "undefined") {
                     console.log("downloaded.next is undefined")
+                    self.library.songs.listing = library
+                    self.library.songs.downloadState = 2
+                    self.searchLibrarySongs()
+                    localStorage.setItem("librarySongs", JSON.stringify(library))
                 }
                 if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
                     console.log(`downloading next chunk - ${library.length} songs so far`)
@@ -298,12 +374,18 @@ const app = new Vue({
                     self.library.songs.listing = library
                     self.library.songs.downloadState = 2
                     self.searchLibrarySongs()
+                    localStorage.setItem("librarySongs", JSON.stringify(library))
                     console.log(library)
                 }
             }
 
             downloadChunk()
         },
+        getTotalTime(){
+            if (app.showingPlaylist.relationships.tracks.data.length > 0){
+            time = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, { attributes: { durationInMillis }}) => a + durationInMillis, 0)/60000);
+            return app.showingPlaylist.relationships.tracks.data.length + " tracks, "+ time +" mins.";} else return ""
+        },
         async getLibrarySongs() {
             var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
             this.library.songs.listing = response.data
@@ -472,8 +554,10 @@ const app = new Vue({
                                  for (var i =  u.length -1; i >= 0; i--) {
                                     let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i])
                                     let end = (preLrc.length > 0) ? ((preLrc[preLrc.length-1].startTime) ?? 99999) : 99999
-                                    preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2] })
+                                    preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2], translation: '' })
                                  }
+                                 if (preLrc.length > 0)               
+                                     preLrc.push({startTime: 0,endTime: preLrc[preLrc.length-1].startTime, line: "lrcInstrumental", translation: ''});
                                  app.lyrics = preLrc.reverse();
                                 if (lrcfile != null && lrcfile != '') {
                                     // load translation
@@ -507,9 +591,20 @@ const app = new Vue({
                         let status2 = jsonResponse2["message"]["header"]["status_code"];
                         if (status2 == 200) {
                             try {
-                                let lyrics = jsonResponse2["message"]["body"]["translations_list"];
-                                if (lyrics.length > 0) {
-                                    // convert translations to suitable json
+                                let preTrans = []
+                                let u = app.lyrics;
+                                let translation_list = jsonResponse2["message"]["body"]["translations_list"];
+                                if (translation_list.length > 0) {
+                                    for (var i =  0; i < u.length - 1; i++) {
+                                        preTrans[i] = ""
+                                        for (var trans_line of translation_list){   
+                                            if (u[i].line == " "+trans_line["translation"]["matched_line"]){
+                                                u[i].translation = trans_line["translation"]["description"];
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    app.lyrics = u;    
                                 }
                             } catch (e) {
                                 /// not found trans -> ignore		
@@ -589,15 +684,8 @@ const app = new Vue({
         },
         getLyricClass(start, end) {
             //this.lyriccurrenttime = app.getCurrentTime();
-            if (this.lyriccurrenttime >= start && this.lyriccurrenttime <= end) {
-                setTimeout(() => {
-                    if (document.querySelector(".lyric-line.active")) {
-                        document.querySelector(".lyric-line.active").scrollIntoView({
-                            behavior: "smooth",
-                            block: "center"
-                        })
-                    }
-                }, 200)
+            const delayfix = 0.5
+            if (this.lyriccurrenttime + delayfix >= start  && this.lyriccurrenttime + delayfix <= end) {
                 return true;
             } else {
                 return false;
@@ -677,7 +765,7 @@ const app = new Vue({
             }
         },
         getMediaItemArtwork(url, size = 64) {
-            return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`;
+            return `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
         },
         getNowPlayingArtworkBG(size = 600) {
             if (!this.mkReady()) {
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index f32374b7..8ec2a8ce 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -721,6 +721,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
 }
 
+.playlist-artwork {
+    height: 190px;
+    width: 190px;
+    background: blue;
+    border-radius: 6px;
+    background: var(--artwork);
+    background-size: cover;
+    box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto; 
+    margin: 6px;
+    margin-top: 0px;
+}
+
 .media-item--small .text {
     font-weight: 600;
     font-size: 0.90em;
@@ -1264,6 +1277,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin: 3px;
 }
 
+.lyrics-translation {
+    font-size: 1.6rem;
+    font-weight: 400;
+}
+
 @keyframes lyricWaitingLine {
     0% {
         opacity: 0.25;
@@ -1320,6 +1338,41 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     text-overflow: ellipsis;
 }
 
+.mediaitem-artwork {
+    border-radius: var(--mediaItemRadius);
+    overflow: hidden;
+    flex: 0 0 auto;
+    position:relative;
+    width: 100%;
+    height: 100%;
+}
+
+.mediaitem-artwork.rounded {
+    border-radius: 100%;
+}
+
+.mediaitem-artwork::after {
+    content: "";
+    box-shadow: var(--mediaItemShadow);
+    z-index: 1;
+    width:100%;
+    height:100%;
+    position: absolute;
+    top:0;
+    left:0;
+    border-radius: inherit;
+}
+
+.mediaitem-artwork.rounded::after {
+    border-radius: 100%;
+}
+
+.mediaitem-artwork>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 /* horizontal media scroller */
 .cd-hmedia-scroller {
     margin: 0 auto;
@@ -1357,14 +1410,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .cd-mediaitem-list-item .artwork {
     height: 34px;
     width: 34px;
-    background: blue;
     border-radius: var(--mediaItemRadius);
-    background: var(--artwork);
-    background-size: contain;
-    box-shadow: var(--mediaItemShadow);
+    object-fit: cover;
+    object-position: center;
     flex: 0 0 auto;
     background-repeat: no-repeat;
     margin: 12px;
+    border: 0px;
+    outline: none;
 }
 
 .cd-mediaitem-list-item .artwork.round {
@@ -1421,7 +1474,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-radius: var(--mediaItemRadius);
     background: var(--artwork);
     background-size: contain;
-    box-shadow: var(--mediaItemShadow);
     flex: 0 0 auto;
     background-repeat: no-repeat;
     margin: 18px;
@@ -1475,11 +1527,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-top-right-radius: 6px;
     background: var(--artwork);
     background-size: cover;
-    box-shadow: var(--mediaItemShadow);
-    flex: 0 0 auto; 
+    flex: 0 0 auto;
     margin: 6px;
     margin-top: 0px;
 }
+
+.artwork
+{height: 190px;
+    width: 190px;
+    background: blue;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background: var(--artwork);
+    background-size: cover;
+    flex: 0 0 auto;
+    margin: 6px;
+    margin-top: 0px;
+}
+
 .cd-mediaitem-square-sp .artwork:hover {
     box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
 }
@@ -1499,6 +1564,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     font-size: 12px;
 }
 
+
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
+    z-index: 3;
+}
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
+    opacity: 1;
+}
+
+.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
+    pointer-events: none;
+
+}
+
+.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
+    opacity: 1;
+
+}
+
 /* mediaitem-square-large */
 .cd-mediaitem-square-large {
     width: 190px;
@@ -1513,28 +1596,62 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin-left: 10px;
     cursor: pointer;
 }
-
-.cd-mediaitem-square-large:hover {
-    background: rgb(200 200 200 / 10%);
+.cd-mediaitem-square-large > * {
+    z-index: inherit;
+    
 }
 
+/* .cd-mediaitem-square-large .artwork:hover {
+    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+} */
+
 .cd-mediaitem-square-large .artwork {
     height: 190px;
     width: 190px;
     background: blue;
-    border-radius: var(--mediaItemRadius);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
     background: var(--artwork);
     background-size: cover;
-    box-shadow: var(--mediaItemShadow);
     flex: 0 0 auto;
     margin: 6px;
     margin-top: 0px;
 }
 
-.cd-mediaitem-square-large .artwork:hover {
-    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+.cd-mediaitem-square-large-overlay{
+        position: absolute;
+        width: 190px;
+        float: right;
+        height: 250px;
+        top: 0px;
+        margin: 10px;
+        margin-top: 0px;
+        opacity: 0;
+        
 }
 
+.cd-mediaitem-square-large-overlay > * {
+    pointer-events: auto;
+    
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
+    z-index: 3;
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
+    opacity: 1;
+}
+
+.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
+    pointer-events: none;
+
+}
+
+.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
+    opacity: 1;
+
+}
+
+
 .cd-mediaitem-square-large .artwork.round {
     border-radius: var(--mediaItemRadiusRound);
 }
@@ -1623,6 +1740,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .wpfade-leave-to {
     opacity: 0;
 }
+/* Transitions End */
 
 @media (prefers-color-scheme: light) {
     :root {
@@ -1641,4 +1759,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
         --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII=');
         --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC');
     }
+}
+
+.playlist-display {
+    flex-wrap: nowrap;
+    margin-bottom: 32px;
+}
+
+.playlist-display .playlist-info{
+    flex-shrink: unset;
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
+}
+
+.playlist-display .playlist-info .playlist-name {
+    font-weight: 700;
+    font-size: 1.6rem;
+    margin-bottom: 6px;
+    margin-right: 6px;
+    flex-shrink: unset;
+
+}
+.playlist-display .playlist-info .playlist-artist {
+    font-weight: 500;
+    font-size: 1.6rem;
+    margin-bottom: 6px;
+    margin-right: 6px;
+    flex-shrink: unset;
+}
+.playlist-display .playlist-info .playlist-desc {
+    box-sizing: border-box;
+    font-size: 1.1rem;
+    flex-shrink: unset;
+    margin-right: 5px;
+}
+
+.playlist-display .playlist-info .playlist-time {
+    margin: 6px;
+    opacity: 0.7;
 }
\ No newline at end of file