diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index 6989492c..991ccbdf 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -54,7 +54,6 @@ export class BrowserWindow {
                 "components/equalizer",
                 "components/add-to-playlist",
                 "components/queue",
-                "components/queue-item",
                 "components/mediaitem-scroller-horizontal",
                 "components/mediaitem-scroller-horizontal-large",
                 "components/mediaitem-scroller-horizontal-sp",
@@ -62,7 +61,6 @@ export class BrowserWindow {
                 "components/mediaitem-list-item",
                 "components/mediaitem-hrect",
                 "components/mediaitem-square",
-                "components/mediaitem-square-sp",
                 "components/mediaitem-mvview",
                 "components/libraryartist-item",
                 "components/listennow-child",
diff --git a/src/renderer/index.js b/src/renderer/index.js
index b2094d0b..293638d8 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1,78 +1,5 @@
 Vue.use(VueObserveVisibility);
 var notyf = new Notyf();
-// This is going to suck to code
-var CiderContextMenu = {
-    Menu: function (event) {
-        this.items = []
-    },
-    async Create(event, menudata) {
-        var menuBackground = document.createElement("div");
-        var menu = document.createElement("div");
-        menu.classList.add("context-menu-body");
-        menu.classList.add("context-menu-open");
-        menuBackground.classList.add("context-menu");
-        menu.style.left = 0 + "px";
-        menu.style.top = 0 + "px";
-        menu.style.position = "absolute";
-        menu.style.zIndex = "99909";
-        menu.addEventListener("animationend", function () {
-            menu.classList.remove("context-menu-open");
-        }, {once: true});
-
-        function close() {
-            menuBackground.style.pointerEvents = "none";
-            menu.classList.add("context-menu-close");
-            menu.addEventListener("animationend", function () {
-                menuBackground.remove();
-                menu.remove();
-            }, {once: true});
-        }
-
-        // when menubackground is clicked, remove it
-        menuBackground.addEventListener("click", close);
-        menuBackground.addEventListener("contextmenu", close);
-
-        // add menu to menuBackground
-        menuBackground.appendChild(menu);
-
-        document.body.appendChild(menuBackground);
-
-        if (typeof menudata.items == "object") {
-            menudata.items = Object.values(menudata.items);
-        }
-
-        console.log(menudata);
-
-        // for each item in menudata create a menu item
-        for (var i = 0; i < menudata.items.length; i++) {
-            let item = document.createElement("button")
-
-            if (menudata.items[i]["disabled"] === true) {
-                continue
-            }
-            item.tabIndex = 0
-            item.classList.add("context-menu-item")
-            if (menudata.items[i]["icon"]) {
-                item.innerHTML += `<div class="sidebar-icon">${await app.getSvgIcon(menudata.items[i]["icon"])}</div>`
-            }
-            item.innerHTML += menudata.items[i].name
-            item.onclick = menudata.items[i].action
-            menu.appendChild(item)
-        }
-        menu.style.width = (menu.offsetWidth + 10) + "px";
-        menu.style.left = event.clientX + "px";
-        menu.style.top = event.clientY + "px";
-        // if menu would be off the screen, move it into view, but preserve the width
-        if (menu.offsetLeft + menu.offsetWidth > window.innerWidth) {
-            menu.style.left = (window.innerWidth - menu.offsetWidth) + "px";
-        }
-        if (menu.offsetTop + menu.offsetHeight > window.innerHeight) {
-            menu.style.top = (window.innerHeight - menu.offsetHeight) + "px";
-        }
-
-        return menuBackground;
-    }
-}
 
 const MusicKitObjects = {
     LibraryPlaylist: function () {
@@ -1242,10 +1169,24 @@ const app = new Vue({
                 return this.playerLCD.playbackDuration
             }
         },
-        convertToMins(time) {
-            let mins = Math.floor(time / 60)
-            let seconds = (Math.floor(time % 60) / 100).toFixed(2)
-            return `${mins}:${seconds.replace("0.", "")}`
+        convertTime(time) {
+            if (typeof time !== "number") {
+                time = parseInt(time)
+            }
+
+            const timeGates = {
+                600: 15,
+                3600: 14,
+                36000: 12,
+            }
+
+            for (let key in timeGates) {
+                if (time < key) {
+                    return new Date(time * 1000).toISOString().substring(timeGates[key], 19)
+                }
+            }
+
+            return new Date(time * 1000).toISOString().substring(11, 19)
         },
         hashCode(str) {
             let hash = 0,
@@ -3073,23 +3014,6 @@ const app = new Vue({
                                 })
                                 self.$store.commit("setLCDArtwork", img)
                             })
-
-                            // Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
-                            //     let angle = "140deg"
-                            //     let gradient = ""
-                            //     let colors = Object.values(palette).filter(color=>color!=null)
-                            //     if(colors.length > 0){
-                            //         let stops = []
-                            //         colors.forEach(color=>{
-                            //             stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
-                            //         })
-                            //         stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
-                            //         gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
-                            //     }
-                            //
-                            //     document.querySelector("#app").style.setProperty("--bgColor", gradient)
-                            // }).setQuantizer(Vibrant.Quantizer.WebWorker)
-
                             try {
                                 clearInterval(bginterval);
                             } catch (err) {
@@ -3114,47 +3038,6 @@ const app = new Vue({
                 }
             }, 200)
         },
-
-        // getNowPlayingArtwork(size = 600) {
-        //     if (typeof this.mk.nowPlayingItem === "undefined") return;
-        //     let interval = setInterval(() => {
-
-        //         try {
-        //             if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
-        //                 this.currentTrackIDBG = this.mk.nowPlayingItem["id"];
-        //                 if (document.querySelector('.app-playback-controls .artwork') != null) {
-        //                     clearInterval(interval);
-        //                 }
-        //                 if (app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) {
-        //                     document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
-        //                     try {
-        //                         clearInterval(interval);
-        //                     } catch (err) {
-        //                     }
-        //                 } else {
-        //                     this.setLibraryArt()
-        //                 }
-        //             } else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
-        //                 try {
-        //                     clearInterval(interval);
-        //                 } catch (err) {
-        //                 }
-        //             }
-        //         } catch (e) {
-        //             if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
-        //                 this.setLibraryArt()
-        //                 try {
-        //                     clearInterval(interval);
-        //                 } catch (err) {
-        //                 }
-
-        //             }
-
-        //         }
-        //     }, 200)
-
-
-        // },
         async getCurrentArtURL() {
             try {
                 this.currentArtUrl = '';
@@ -3169,11 +3052,6 @@ const app = new Vue({
                     data = data.data.data[0];
                     if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) {
                         this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
-                        // if (this.currentArtUrl != ""){
-                        //     let attr = MusicKitInterop.getAttributes();
-                        //     attr.artwork.url = this.currentArtUrl;
-                        //     ipcRenderer.send('forceUpdateRPC',attr)
-                        // }              
                         try {
                             document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
                         } catch (e) {
@@ -3398,18 +3276,11 @@ const app = new Vue({
             }
         },
         async nowPlayingContextMenu(event) {
-            // function revisedRandId() {
-            //     return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
-            // }
             let self = this
             let data_type = this.mk.nowPlayingItem.playParams.kind
             let item_id = this.mk.nowPlayingItem.attributes.playParams.id ?? this.mk.nowPlayingItem.id
             let isLibrary = this.mk.nowPlayingItem.attributes.playParams.isLibrary ?? false
             let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "t": "1"}
-            // let res = await app.mkapi(data_type, isLibrary , item_id, params);
-            // if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
-            //     item_id = res.relationships.library.data[0].id
-            // }
             app.selectedMediaItems = []
             app.select_selectMediaItem(item_id, data_type, 0, '12344', isLibrary)
             let useMenu = "normal"
@@ -3466,54 +3337,43 @@ const app = new Vue({
                             app.promptAddToPlaylist()
                         }
                     },
-                    {
-                        "icon": "./assets/feather/plus.svg",
-                        "id": "addToLibrary",
-                        "name": app.getLz('action.addToLibrary') + " ...",
-                        "disabled": false,
-                        "action": function () {
-                            app.addToLibrary(app.mk.nowPlayingItem.id);
-                            //   if (!isLibrary)  {app.addToLibrary(item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = true} else { app.removeFromLibrary(data_type,item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = false};
-                        }
-                    },
-                    {
-                        "icon": "./assets/feather/radio.svg",
-                        "name": app.getLz('action.startRadio'),
-                        "action": function () {
-                            app.mk.setStationQueue({song: app.mk.nowPlayingItem.id}).then(() => {
-                                app.mk.play()
-                                app.selectedMediaItems = []
-                            })
-                        }
-                    },
-                    {
-                        "icon": "./assets/feather/share.svg",
-                        "name": app.getLz('action.share'),
-                        "action": function () {
-                            app.mkapi(app.mk.nowPlayingItem.attributes?.playParams?.kind ?? app.mk.nowPlayingItem.type ?? 'songs', false, app.mk.nowPlayingItem._songId ?? app.mk.nowPlayingItem.id ?? '').then(u => {
-                                app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
-                            })
+                        {
+                            "icon": "./assets/feather/plus.svg",
+                            "id": "addToLibrary",
+                            "name": app.getLz('action.addToLibrary') + " ...",
+                            "disabled": false,
+                            "action": function () {
+                                app.addToLibrary(app.mk.nowPlayingItem.id);
+                            }
+                        },
+                        {
+                            "icon": "./assets/feather/radio.svg",
+                            "name": app.getLz('action.startRadio'),
+                            "action": function () {
+                                app.mk.setStationQueue({song: app.mk.nowPlayingItem.id}).then(() => {
+                                    app.mk.play()
+                                    app.selectedMediaItems = []
+                                })
+                            }
+                        },
+                        {
+                            "icon": "./assets/feather/share.svg",
+                            "name": app.getLz('action.share'),
+                            "action": function () {
+                                app.mkapi(app.mk.nowPlayingItem.attributes?.playParams?.kind ?? app.mk.nowPlayingItem.type ?? 'songs', false, app.mk.nowPlayingItem._songId ?? app.mk.nowPlayingItem.id ?? '').then(u => {
+                                    app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
+                                })
+                            }
                         }
                     }
                     ]
                 }
             }
             if (this.contextExt) {
-                // if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
                 if (this.contextExt.normal) {
                     menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
                 }
             }
-
-            // isLibrary = await app.inLibrary([this.mk.nowPlayingItem])
-            // console.warn(isLibrary)
-            // if(isLibrary.length != 0) {
-            //     if (isLibrary[0].attributes.inLibrary) {
-            //         menus.normal.items.find(x => x.id == "addToLibrary").disabled = true
-            //     }
-            // }else{
-            //     menus.normal.items.find(x => x.id == "addToLibrary").disabled = true
-            // }
             this.showMenuPanel(menus[useMenu], event)
 
             try {
diff --git a/src/renderer/ameframework.css b/src/renderer/less/ameframework.less
similarity index 100%
rename from src/renderer/ameframework.css
rename to src/renderer/less/ameframework.less
diff --git a/src/renderer/style.less b/src/renderer/style.less
index c7903888..4b88be9c 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1,10 +1,10 @@
-@import url("ameframework.css");
 @import url("assets/fonts/Inter/inter.css");
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
+@import url("less/ameframework.less");
 @import url("less/bootstrap.less");
 @import url("less/notyf.less");
 
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 15fa6f2f..e38ee43e 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -57,7 +57,7 @@
                                  v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
                                  style="display: inline-block"></div>
                         </div>
-                        <div class="audio-type ppe-icon" v-if="app.cfg.advanced.ciderPPE == true"></div>
+                        <div class="audio-type ppe-icon" v-if="cfg.advanced.ciderPPE == true"></div>
                         <div class="song-artist-album">
                             <div class="song-artist-album-content"
                                  :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
@@ -80,8 +80,8 @@
                             <div class="song-duration"
                                  style="justify-content: space-between; height: 1px;"
                                  :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
-                                <p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
-                                <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
+                                <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
+                                <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
                                 </p>
                             </div>
 
diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs
index 76551f09..51093c60 100644
--- a/src/renderer/views/components/fullscreen.ejs
+++ b/src/renderer/views/components/fullscreen.ejs
@@ -41,8 +41,8 @@
                             <div class="song-progress">
                                 <div class="song-duration" style="justify-content: space-between; height: 1px;"
                                      :style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
-                                    <p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
-                                    <p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>
+                                    <p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
+                                    <p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
                                 </div>
 
                                 <input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
diff --git a/src/renderer/views/components/mediaitem-square-large.ejs b/src/renderer/views/components/mediaitem-square-large.ejs
deleted file mode 100644
index a969e10b..00000000
--- a/src/renderer/views/components/mediaitem-square-large.ejs
+++ /dev/null
@@ -1,244 +0,0 @@
-<script type="text/x-template" id="mediaitem-square-large">
-        <div ref="main" style="position: relative; display: inline-flex;"  @contextmenu="contextMenu">
-            <div @click.self='app.routeView(item)'
-                 class="cd-mediaitem-square-large" ref="main2">
-                <div class="artwork">
-                    <mediaitem-artwork
-                            :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                            :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
-                            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','position': 'absolute',
-                        width: '40px',
-                        height: '40px',} :
-                        {margin: '35px', 'position': 'absolute',
-                        width: '120px',
-                        height: '120px',}]" @click="app.playMediaItem(item)">
-                        <%- include("../svg/play.svg") %>
-                    </div>
-                    <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')) ? {'position': 'absolute','margin': '140px',
-                        width: '40px', 'margin-left': '10px',
-                        height: '40px',} :
-                        {display: 'none',margin: '35px','position': 'absolute',
-                        width: '120px',
-                        height: '120px',}]" @click="clickContext() ">
-                        <%- include("../svg/more.svg") %>
-                    </div>
-                </div>
-                <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
-                    {{ item.attributes.name ?? '' }}
-                </div>
-                <div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
-                    {{ item.attributes.artistName ?? '' }}
-                </div>
-
-            </div>
-            <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);"
-                     :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','position': 'absolute',
-                    width: '40px',
-                    height: '40px',} :
-                    {margin: '35px','position': 'absolute',
-                    width: '120px',
-                    height: '120px',}]" @click="app.playMediaItem(item)">
-                    <%- include("../svg/play.svg") %>
-                </div>
-                <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')) ? {'position': 'absolute','margin': '140px',
-                    width: '40px', 'margin-left': '10px',
-                    height: '40px',} :
-                    {display: 'none',margin: '35px','position': 'absolute',
-                    width: '120px',
-                    height: '120px',}]" @click="console.log('as');contextMenu()">
-                    <%- include("../svg/more.svg") %>
-                </div>
-            </div>
-        </div>
-</script>
-
-<script>
-    Vue.component('mediaitem-square-large', {
-        template: '#mediaitem-square-large',
-        props: ['item'],
-        data: function () {
-            return {
-                isVisible: false,
-                addedToLibrary: false,
-                app: this.$root,
-            }
-        },
-        methods: {
-            clickContext() {
-                var evt = document.createEvent('MouseEvent');
-                var rect = this.$refs.main2.getBoundingClientRect();
-                evt.initMouseEvent(
-                    "contextmenu",
-                    true /* bubble */, true /* cancelable */,
-                    window, null,
-                    0, 0, rect.x + 100, rect.y + 100,  /* coordinates */
-                    false, false, false, false, /* modifier keys */
-                    0 /*left*/, null
-                );
-                this.$refs.main.dispatchEvent(evt);
-            },
-            async isInLibrary() {
-                if (this.item.type && !this.item.type.includes("library")) {
-                    var params = {
-                        "fields[playlists]": "inLibrary",
-                        "fields[albums]": "inLibrary",
-                        "relate": "library",
-                        "extend": this.revisedRandId()
-                    }
-                    var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
-                    this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
-                } else {
-                    this.addedToLibrary = true
-                }
-            },
-            async removeFromLibrary(id) {
-                var params = {
-                    "fields[playlists]": "inLibrary",
-                    "fields[songs]": "inLibrary",
-                    "fields[albums]": "inLibrary",
-                    "relate": "library",
-                    "extend": this.revisedRandId()
-                }
-                var id = this.item.id ?? this.item.attributes.playParams.id
-                var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
-                if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
-                    id = res.relationships.library.data[0].id
-                }
-                let kind = this.item.attributes.playParams.kind ?? this.item.type ?? '';
-                var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
-                app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`,{},
-                    {
-                    fetchOptions: {
-                    method: "DELETE"
-                }})
-                this.addedToLibrary = true
-            },
-            async contextMenu(event) {
-                if (!event) { event = this.$refs.main } else { console.log(event) }
-                let self = this
-                let useMenu = "normal"
-                await this.isInLibrary()
-                if (app.selectedMediaItems.length <= 1) {
-                    app.selectedMediaItems = []
-                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid, this.item.attributes.playParams.isLibrary ?? false)
-                } else {
-                    useMenu = "multiple"
-                }
-                let menus = {
-                    multiple: {
-                        items: [
-                            {
-                                name: this.$root.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
-                                action: () => {
-                                    let itemsToPlay = {}
-                                    app.selectedMediaItems.forEach(item => {
-                                        if (!itemsToPlay[item.kind]) {
-                                            itemsToPlay[item.kind] = []
-                                        }
-                                        itemsToPlay[item.kind].push(item.id)
-                                    })
-                                    // loop through itemsToPlay
-                                    for (let kind in itemsToPlay) {
-                                        let ids = itemsToPlay[kind]
-                                        if (ids.length > 0) {
-                                            app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
-                                        }
-                                    }
-                                    console.log(itemsToPlay)
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                            {
-                                name: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
-                                action: () => {
-                                    let itemsToPlay = {}
-                                    app.selectedMediaItems.forEach(item => {
-                                        if (!itemsToPlay[item.kind]) {
-                                            itemsToPlay[item.kind] = []
-                                        }
-                                        itemsToPlay[item.kind].push(item.id)
-                                    })
-                                    // loop through itemsToPlay
-                                    for (let kind in itemsToPlay) {
-                                        let ids = itemsToPlay[kind]
-                                        if (ids.length > 0) {
-                                            app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
-                                        }
-                                    }
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                        ]
-                    },
-                    normal: {
-                        items: [
-                            {
-                                "name": "Play Next",
-                                "action": function () {
-                                    app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
-                                    app.mk.queue._reindex()
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                            {
-                                "name": "Play Later",
-                                "action": function () {
-                                    app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
-                                    app.mk.queue._reindex()
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                            {
-                                "id": "addToPlaylist",
-                                "name": "Add to Playlist...",
-                                "action": function () {
-                                    app.promptAddToPlaylist()
-                                }
-                            },
-                            {
-                                "name": (this.addedToLibrary) ? "Remove from Library..." : "Add to Library...",
-                                "action": async function () {
-                                    let item_id = self.item.attributes.playParams.id ?? self.item.id;
-                                    let data_type = self.item.attributes.playParams.kind ?? self.item.type;
-                                    if (self.addedToLibrary != true) {
-                                        console.log("add");
-                                        app.addToLibrary(item_id);
-                                        self.addedToLibrary = true
-                                    } else {
-                                        console.log("remove");
-                                        await self.removeFromLibrary(item_id);
-                                        self.addedToLibrary = false
-                                    }
-                                    ;
-                                }
-                            },
-                            {
-                                "name": this.$root.getLz('term.share'),
-                                "action": function () {
-                                    self.app.copyToClipboard(self.item.attributes.url)
-                                }
-                            }
-                        ]
-                    }
-                }
-                CiderContextMenu.Create(event, menus[useMenu])
-            },
-        }
-    });
-</script>
\ No newline at end of file
diff --git a/src/renderer/views/components/mediaitem-square-sp.ejs b/src/renderer/views/components/mediaitem-square-sp.ejs
deleted file mode 100644
index 89859695..00000000
--- a/src/renderer/views/components/mediaitem-square-sp.ejs
+++ /dev/null
@@ -1,293 +0,0 @@
-<script type="text/x-template" id="mediaitem-square-sp">
-    <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu"  v-observe-visibility="{callback: visibilityChanged}" width="250px">
-        <div @click.self='app.routeView(item)' v-if="isVisible"
-             class="cd-mediaitem-square-sp" ref="main2"
-             :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"
-                        :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
-                        :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': '153px','position': 'absolute','margin-left': '153px',
-                        width: '30px',
-                        height: '30px',} :
-                        {margin: '35px',display:'none',
-                        width: '120px',
-                        height: '120px',}]" @click="clickContext()">
-                    <%- include("../svg/more.svg") %>
-                </div>
-                <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')) ? {'position': 'absolute','margin': '153px',
-                        width: '30px', 'margin-left': '8px',
-                        height: '30px',} :
-                        {margin: '35px','position': 'absolute',
-                        width: '120px',
-                        height: '120px',}]" @click="app.playMediaItem(item)">
-                    <%- include("../svg/play.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 "
-                 :class="{'item-navigate': ((item.attributes.editorialNotes == null) && item.attributes.artistName)}"
-                 :style="{ 'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : '' ,'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;"
-                 @click="subtitleSearchNavigate(item)"
-            >
-                {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
-                :(item.attributes.artistName ?? '') }}
-            </div>
-
-        </div>
-        <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0" v-if="isVisible">
-            <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': '153px','position': 'absolute','margin-left': '153px',
-                   width: '30px',
-                   height: '30px',} :
-                   {margin: '35px','position': 'absolute', display: 'none',
-                   width: '120px',
-                   height: '120px',}]" @click="clickContext()">
-                <%- include("../svg/more.svg") %>
-            </div>
-            <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')) ? {'position': 'absolute','margin': '153px',
-                    width: '30px', 'margin-left': '8px',
-                    height: '30px',} :
-                    {margin: '35px','position': 'absolute',
-                    width: '120px',
-                    height: '120px',}]" @click="app.playMediaItem(item)">
-                <%- include("../svg/play.svg") %>
-            </div>
-        </div>
-    </div>
-</script>
-
-<script>
-    Vue.component('mediaitem-square-sp', {
-        template: '#mediaitem-square-sp',
-        props: ['item'],
-        data: function () {
-            return {
-                app: this.$root,
-                isVisible: true,
-                addedToLibrary : false,
-            }
-        },
-        methods: {
-            revisedRandId() {
-                return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
-            },
-            async isInLibrary() {
-                if (this.item.type && !this.item.type.includes("library")) {
-                    var params = {"fields[playlists]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
-                    var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
-                    res = res.data.data[0]
-                    this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
-                } else {
-                    this.addedToLibrary = true
-                }
-            },
-            async removeFromLibrary(id) {
-                var params = {"fields[playlists]": "inLibrary","fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
-                var id = this.item.id ?? this.item.attributes.playParams.id
-                var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
-                res = res.data.data[0]
-                if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
-                    id = res.relationships.library.data[0].id
-                }
-                let kind = this.item.attributes.playParams.kind ?? this.item.type ?? '';
-                var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
-                app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`,{},
-                    {
-                    fetchOptions: {
-                    method: "DELETE"
-                }})
-                this.addedToLibrary = true
-            },
-            subtitleSearchNavigate(item) {
-                if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')
-            },
-            clickContext() {
-                var evt = document.createEvent('MouseEvent');
-                var rect = this.$refs.main2.getBoundingClientRect();
-                evt.initMouseEvent(
-                    "contextmenu",
-                    true /* bubble */, true /* cancelable */,
-                    window, null,
-                    0, 0, rect.x + 100, rect.y + 100,  /* coordinates */
-                    false, false, false, false, /* modifier keys */
-                    0 /*left*/, null
-                );
-                this.$refs.main.dispatchEvent(evt);
-            }
-            ,
-            visibilityChanged: function (isVisible, entry) {
-                this.isVisible = isVisible
-            },
-            async contextMenu(event)  {
-                if (!event) {
-                    event = this.$refs.main
-                } else {
-                    console.log(event)
-                }
-                let self = this
-                let useMenu = "normal"
-                await this.isInLibrary()
-                if (app.selectedMediaItems.length <= 1) {
-                    app.selectedMediaItems = []
-                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid, this.item.attributes.playParams.isLibrary ?? false)
-                } else {
-                    useMenu = "multiple"
-                }
-                let menus = {
-                    multiple: {
-                        items: [
-                            {
-                                name: app.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
-                                action: () => {
-                                    let itemsToPlay = {}
-                                    app.selectedMediaItems.forEach(item => {
-                                        if (!itemsToPlay[item.kind]) {
-                                            itemsToPlay[item.kind] = []
-                                        }
-                                        itemsToPlay[item.kind].push(item.id)
-                                    })
-                                    // loop through itemsToPlay
-                                    for (let kind in itemsToPlay) {
-                                        let ids = itemsToPlay[kind]
-                                        if (ids.length > 0) {
-                                            app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
-                                        }
-                                    }
-                                    console.log(itemsToPlay)
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                            {
-                                name: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
-                                action: () => {
-                                    let itemsToPlay = {}
-                                    app.selectedMediaItems.forEach(item => {
-                                        if (!itemsToPlay[item.kind]) {
-                                            itemsToPlay[item.kind] = []
-                                        }
-                                        itemsToPlay[item.kind].push(item.id)
-                                    })
-                                    // loop through itemsToPlay
-                                    for (let kind in itemsToPlay) {
-                                        let ids = itemsToPlay[kind]
-                                        if (ids.length > 0) {
-                                            app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
-                                        }
-                                    }
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                        ]
-                    },
-                    normal: {
-                        items: [
-
-                            {
-                                "name": "Play Next",
-                                "action": function () {
-                                    app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
-                                    app.mk.queue._reindex()
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                            {
-                                "name": "Play Later",
-                                "action": function () {
-                                    app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
-                                    app.mk.queue._reindex()
-                                    app.selectedMediaItems = []
-                                }
-                            },
-                            {
-                                "id": "addToPlaylist",
-                                "name": "Add to Playlist...",
-                                "action": function () {
-                                    app.promptAddToPlaylist()
-                                }
-                            },
-                            {
-                                "id": "love",
-                                "name": "Love",
-                                "disabled": true,
-                                "action": function () {
-                                    app.love(self.item)
-                                }
-                            },
-                            {
-                                "id": "unlove",
-                                "name": "Unlove",
-                                "disabled": true,
-                                "action": function () {
-                                    app.unlove(self.item)
-                                }
-                            },
-                            {
-                                "id": "dislike",
-                                "name": "Dislike",
-                                "disabled": true,
-                                "action": function () {
-                                    app.dislike(self.item)
-                                }
-                            },
-                            {
-                                "id": "undo_dislike",
-                                "name": "Undo dislike",
-                                "disabled": true,
-                                "action": function () {
-                                    app.unlove(self.item)
-                                }
-                            },
-                            {
-                                "name":  (this.addedToLibrary) ? "Remove from Library..." : "Add to Library...",
-                                "action": async function () {
-                                    let item_id = self.item.attributes.playParams.id ?? self.item.id;
-                                    let data_type = self.item.attributes.playParams.kind ?? self.item.type;
-                                    if (self.addedToLibrary != true)  { console.log("add"); app.addToLibrary(item_id); self.addedToLibrary = true} 
-                                    else { console.log("remove"); await self.removeFromLibrary(item_id); self.addedToLibrary = false};
-                                }
-                            },
-
-                        ]
-                    }
-                }
-                let rating = await app.getRating(self.item)
-                if(rating == 0) {
-                    menus.normal.items.find(x => x.id == 'love').disabled = false
-                    menus.normal.items.find(x => x.id == 'dislike').disabled = false
-                }else if(rating == 1) {
-                    menus.normal.items.find(x => x.id == 'unlove').disabled = false
-                }else if(rating == -1) {
-                    menus.normal.items.find(x => x.id == 'undo_dislike').disabled = false
-                }
-                if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
-                    // remove the add to playlist option by id "addToPlaylist" using the .filter() method
-                    menus.normal.items = menus.normal.items.filter(function (item) {
-                        return item.id != "addToPlaylist"
-                    })
-                }
-                CiderContextMenu.Create(event, menus[useMenu])
-            },
-        }
-    });
-</script>
\ No newline at end of file
diff --git a/src/renderer/views/components/miniplayer.ejs b/src/renderer/views/components/miniplayer.ejs
index ad9d33e2..40ecabe9 100644
--- a/src/renderer/views/components/miniplayer.ejs
+++ b/src/renderer/views/components/miniplayer.ejs
@@ -44,8 +44,8 @@
                         <div class="song-progress">
                             <div class="song-duration" style="justify-content: space-between; height: 1px; margin-bottom: 1px;"
                                  :style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
-                                <p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
-                                <p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>
+                                <p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
+                                <p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
                             </div>
 
                             <input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
diff --git a/src/renderer/views/components/queue-item.ejs b/src/renderer/views/components/queue-item.ejs
deleted file mode 100644
index 0dd56c64..00000000
--- a/src/renderer/views/components/queue-item.ejs
+++ /dev/null
@@ -1,65 +0,0 @@
-<script type="text/x-template" id="queue-item">
-    <template>
-        <div v-observe-visibility="{callback: visibilityChanged}"
-             @contextmenu="contextMenu"
-             class="cd-mediaitem-list-item">
-            <template v-if="isVisible">
-                <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" :style="{'padding-left': '16px'}">
-                    <div class="title text-overflow-elipsis">
-                        {{ item.attributes.name }}
-                    </div>
-                    <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
-                        <template v-if="item.attributes.artistName" >
-                            <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
-                                {{ item.attributes.artistName }}
-                            </div>
-                            <template v-if="item.attributes.albumName">&nbsp;—&nbsp;</template>
-                            <template v-if="item.attributes.albumName">
-                                <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
-                                {{ item.attributes.albumName }}
-                                </div>
-                            </template>
-                        </template>
-                    </div>
-                </div>
-                <div class="duration">
-                    {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
-                </div>
-            </template>
-        </div>
-    </template>
-</script>
-
-<script>
-    Vue.component('queue-item', {
-        template: '#queue-item',
-        props: ['item'],
-        data: function () {
-            return {}
-        },
-        methods: {
-            contextMenu(event) {
-                let self = this
-                CiderContextMenu.Create(event, {
-                    items: [{
-                        "name": $root.getLz('action.removeFromQueue'),
-                        "action": function () {
-                            
-                        }
-                    }]
-                });
-            },
-            msToMinSec(ms) {
-                var minutes = Math.floor(ms / 60000);
-                var seconds = ((ms % 60000) / 1000).toFixed(0);
-                return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
-            },
-        }
-    });
-</script>
\ No newline at end of file