diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index 22f839ea..5c9253da 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -16,6 +16,7 @@
     height: var(--chromeHeight1);
 
     &.chrome-bottom {
+      -webkit-app-region: no-drag;
       height    : var(--chromeHeight2);
       box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
       z-index   : 1;
@@ -30,6 +31,7 @@
     .app-playback-controls .actions {
       align-self: center;
     }
+    -webkit-app-region: no-drag;
 
     .playback-button.play,
     .playback-button.pause {
@@ -120,8 +122,9 @@
       width          : 30%;
       justify-content: flex-start;
       align-items    : flex-start;
-
+      -webkit-app-region: no-drag!important;
       .playback-controls {
+        -webkit-app-region: no-drag!important;
         .artwork {
           width     : var(--chromeHeight2);
           height    : var(--chromeHeight2);
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index bcc7dfce..d6dfb6cd 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -234,7 +234,7 @@ const app = new Vue({
     watch: {
         cfg: {
             handler: function (val, oldVal) {
-                console.log(`cfg changed from ${oldVal} to ${val}`);
+                console.debug(`cfg changed from ${oldVal} to ${val}`);
                 ipcRenderer.send("setStore", val);
             },
             deep: true
@@ -254,6 +254,12 @@ const app = new Vue({
             app.resetState()
         }
     },
+    mounted() {
+        window.addEventListener("hashchange", function (event) {
+            let currentPath = window.location.hash.slice(1);
+            console.debug("hashchange", currentPath);
+        }, false)
+    },
     methods: {
         setTimeout(func, time) {
             return setTimeout(func, time);
@@ -268,10 +274,10 @@ const app = new Vue({
                 if (httpRequest.readyState === 4) {
                     if (httpRequest.status === 200) {
                         let response = JSON.parse(httpRequest.responseText);
-                        console.log(response);
+                        console.debug(response);
                         self.copyToClipboard(response.pageUrl)
                     } else {
-                        console.log('There was a problem with the request.');
+                        console.warn('There was a problem with the request.');
                         notyf.error(app.getLz('term.requestError'))
                     }
                 }
@@ -940,7 +946,7 @@ const app = new Vue({
             })
         },
         async setTheme(theme = "", onlyPrefs = false) {
-            console.log(theme)
+            console.debug(theme)
             if (this.cfg.visual.theme == "") {
                 this.cfg.visual.theme = "default.less"
             }
@@ -1121,15 +1127,15 @@ const app = new Vue({
             const cachedTrackMapping = await CiderCache.getCache("library-playlists-tracks")
 
             if (cachedPlaylist) {
-                console.log("using cached playlists")
+                console.debug("using cached playlists")
                 this.playlists.listing = cachedPlaylist
                 self.sortPlaylists()
             } else {
-                console.log("playlist has no cache")
+                console.debug("playlist has no cache")
             }
 
             if (cachedTrackMapping) {
-                console.log("using cached track mapping")
+                console.debug("using cached track mapping")
                 this.playlists.trackMapping = cachedTrackMapping
             }
             if (localOnly) {
@@ -1140,7 +1146,7 @@ const app = new Vue({
             this.library.backgroundNotification.show = true
 
             async function deepScan(parent = "p.playlistsroot") {
-                console.log(`scanning ${parent}`)
+                console.debug(`scanning ${parent}`)
                 const playlistData = await app.mk.api.v3.music(`/v1/me/library/playlist-folders/${parent}/children/`)
                 await asyncForEach(playlistData.data.data, async (playlist) => {
                     playlist.parent = parent
@@ -1259,7 +1265,7 @@ const app = new Vue({
             // this.darwinShare(str)
             // } else {
             notyf.success(app.getLz('term.share.success'))
-            navigator.clipboard.writeText(str).then(r => console.log("Copied to clipboard."))
+            navigator.clipboard.writeText(str).then(r => console.debug("Copied to clipboard."))
             // }
         },
         newPlaylist(name = app.getLz('term.newPlaylist'), tracks = []) {
@@ -1282,7 +1288,7 @@ const app = new Vue({
                 }
             }).then(res => {
                 res = res.data.data[0]
-                console.log(res)
+                console.debug(res)
                 self.appRoute(`playlist_` + res.id);
                 self.showingPlaylist = [];
                 self.getPlaylistFromID(app.page.substring(9), true)
@@ -1317,7 +1323,7 @@ const app = new Vue({
         },
         async showCollection(response, title, type, requestBody = {}) {
             let self = this
-            console.log(response)
+            console.debug(response)
             this.collectionList.requestBody = {}
             this.collectionList.response = response
             this.collectionList.title = title
@@ -1327,7 +1333,7 @@ const app = new Vue({
         },
         async showArtistView(artist, title, view) {
             let response = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artist}/view/${view}?l=${this.mklang}`, {}, { includeResponseMeta: !0 })).data
-            console.log(response)
+            console.debug(response)
             await this.showCollection(response, title, "artists")
         },
         async showRecordLabelView(label, title, view) {
@@ -1367,7 +1373,7 @@ const app = new Vue({
                 includeResponseMeta: !0
             })
 
-            console.log('searchres', response)
+            console.debug('searchres', response)
             let responseFormat = {
                 data: response.data.results[group].data,
                 next: response.data.results[group].next,
@@ -1421,13 +1427,13 @@ const app = new Vue({
             app.mk.api.v3.music(`/v1/me/library/playlists/${id}`, params).then(res => {
                 self.getPlaylistContinuous(res, transient)
             }).catch((e) => {
-                console.log(e);
+                console.debug(e);
                 try {
                     app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/playlists/${id}`, params).then(res => {
                         self.getPlaylistContinuous(res, transient)
                     })
                 } catch (err) {
-                    console.log(err)
+                    console.debug(err)
                 }
             })
 
@@ -1444,7 +1450,7 @@ const app = new Vue({
                 "art[url]": "f",
                 l: this.mklang
             }, { includeResponseMeta: !0 })
-            console.log(artistData.data.data[0])
+            console.debug(artistData.data.data[0])
             this.artistPage.data = artistData.data.data[0]
             this.page = "artist-page"
         },
@@ -1479,12 +1485,12 @@ const app = new Vue({
                 "meta": {}
             }
             if (response.next) {
-                console.log("has next")
+                console.debug("has next")
                 returnData.data.concat(response.data)
                 returnData.meta = response.meta
                 return await this.getRecursive(await response.next())
             } else {
-                console.log("no next")
+                console.debug("no next")
                 returnData.data.concat(response.data)
                 return returnData
             }
@@ -1624,7 +1630,7 @@ const app = new Vue({
                 window.location.hash = `${kind}/${id}`
                 document.querySelector("#app-content").scrollTop = 0
             } else if (kind == "editorial-elements") {
-                console.log(item)
+                console.debug(item)
                 if (item.relationships?.contents?.data != null && item.relationships?.contents?.data.length > 0) {
                     this.routeView(item.relationships.contents.data[0])
                 } else if (item.attributes?.link?.url != null) {
@@ -1665,28 +1671,16 @@ const app = new Vue({
                     params["meta[albums:tracks]"] = 'popularity'
                     params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
                 }
-
-                // if (this.cfg.advanced.experiments.includes('inline-playlists')) {
-                if (false) {
-                    let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
-                    if (app.page.includes("playlist") || app.page.includes("album")) {
-                        showModal = false
-                    }
-                    if (showModal) {
-                        app.modals.showPlaylist = true
-                        app.chrome.contentAreaScrolling = false
-                    } else {
-                        app.page = (kind) + "_" + (id);
-                        window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
-                    }
-                } else {
+                if(kind.includes("playlist") || kind.includes("album")){
                     app.page = (kind) + "_" + (id);
                     window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
+                    app.getTypeFromID((kind), (id), (isLibrary), params);
+                }else{
+                    app.page = (kind)
+                    window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
                 }
 
-
-                app.getTypeFromID((kind), (id), (isLibrary), params);
-                // document.querySelector("#app-content").scrollTop = 0
+                // app.getTypeFromID((kind), (id), (isLibrary), params);
             } else {
                 app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
             }
@@ -1752,12 +1746,12 @@ const app = new Vue({
                         try {
                             if (artistQuery.artists.data.length > 0) {
                                 artistId = artistQuery.artists.data[0].id;
-                                console.log(artistId)
+                                console.debug(artistId)
                             }
                         } catch (e) {
                         }
                     }
-                    console.log(artistId);
+                    console.debug(artistId);
                     if (artistId != "")
                         self.appRoute(`artist/${artistId}`)
                     break;
@@ -1789,7 +1783,7 @@ const app = new Vue({
                             })).data.results;
                             if (albumQuery.albums.data.length > 0) {
                                 albumId = albumQuery.albums.data[0].id;
-                                console.log(albumId)
+                                console.debug(albumId)
                             }
                         } catch (e) {
                         }
@@ -1813,7 +1807,7 @@ const app = new Vue({
                             })).data.results;
                             if (labelQuery["record-labels"].data.length > 0) {
                                 labelId = labelQuery["record-labels"].data[0].id;
-                                console.log(labelId)
+                                console.debug(labelId)
                             }
                         } catch (e) {
                         }
@@ -1846,7 +1840,7 @@ const app = new Vue({
             }
         },
         followingArtist(id) {
-            console.log(`check for ${id}`)
+            console.debug(`check for ${id}`)
             return this.cfg.home.followedArtists.includes(id)
         },
         playMediaItem(item) {
@@ -1876,7 +1870,7 @@ const app = new Vue({
             try {
                 a = await this.mkapi(kind.toString(), isLibrary, id.toString(), params, params2);
             } catch (e) {
-                console.log(e);
+                console.debug(e);
                 try {
                     a = await this.mkapi(kind.toString(), !isLibrary, id.toString(), params, params2);
                 } catch (err) {
@@ -2131,7 +2125,7 @@ const app = new Vue({
                     return await this.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${truemethod}/${term.toString()}`, params, params2)
                 }
             } catch (e) {
-                console.log(e)
+                console.debug(e)
                 return await this.mkapi(method, library, term, params, params2, attempts + 1)
             }
         },
@@ -2183,7 +2177,7 @@ const app = new Vue({
                     l: app.mklang,
                 },
                 onProgress: (data) => {
-                    console.log(`${data.total}/${data.response.data.meta.total}`)
+                    console.debug(`${data.total}/${data.response.data.meta.total}`)
                     self.library.backgroundNotification.show = true
                     self.library.backgroundNotification.message = app.getLz('notification.updatingLibrarySongs')
                     self.library.backgroundNotification.total = data.response.data.meta.total
@@ -2199,7 +2193,7 @@ const app = new Vue({
             self.library.backgroundNotification.show = false
             self.searchLibrarySongs()
             CiderCache.putCache(cacheId, library)
-            console.log("Done!")
+            console.debug("Done!")
 
             return
         },
@@ -2250,7 +2244,7 @@ const app = new Vue({
                     app.mk.api.v3.music(`/v1/me/library/albums/`, params).then((response) => {
                         processChunk(response.data)
                     }).catch((error) => {
-                        console.log('safe loading');
+                        console.debug('safe loading');
                         app.mk.api.v3.music(`/v1/me/library/albums/`, safeparams).then((response) => {
                             processChunk(response.data)
                         }).catch((error) => {
@@ -2264,7 +2258,7 @@ const app = new Vue({
                         app.mk.api.v3.music(downloaded.next, params).then((response) => {
                             processChunk(response.data)
                         }).catch((error) => {
-                            console.log('safe loading');
+                            console.debug('safe loading');
                             app.mk.api.v3.music(downloaded.next, safeparams).then((response) => {
                                 processChunk(response.data)
                             }).catch((error) => {
@@ -2274,7 +2268,7 @@ const app = new Vue({
                             })
                         })
                     } else {
-                        console.log("Download next", downloaded.next)
+                        console.debug("Download next", downloaded.next)
                     }
                 }
             }
@@ -2291,7 +2285,7 @@ const app = new Vue({
                     return
                 }
                 if (typeof downloaded.next == "undefined") {
-                    console.log("downloaded.next is undefined")
+                    console.debug("downloaded.next is undefined")
                     self.library.albums.listing = library
                     self.library.albums.downloadState = 2
                     self.library.backgroundNotification.show = false
@@ -2299,7 +2293,7 @@ const app = new Vue({
                     self.searchLibraryAlbums(index)
                 }
                 if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
-                    console.log(`downloading next chunk - ${library.length
+                    console.debug(`downloading next chunk - ${library.length
                         } albums so far`)
                     downloadChunk()
                 } else {
@@ -2357,7 +2351,7 @@ const app = new Vue({
                     app.mk.api.v3.music(`/v1/me/library/artists/`, params).then((response) => {
                         processChunk(response.data)
                     }).catch((error) => {
-                        console.log('safe loading');
+                        console.debug('safe loading');
                         app.mk.api.v3.music(`/v1/me/library/artists/`, safeparams).then((response) => {
                             processChunk(response.data)
                         }).catch((error) => {
@@ -2485,7 +2479,7 @@ const app = new Vue({
                     reload: !0
                 })).data;
                 this.listennow.timestamp = Date.now()
-                console.log(this.listennow)
+                console.debug(this.listennow)
             } catch (e) {
                 console.log(e)
                 this.getListenNow(attempt + 1)
@@ -2513,7 +2507,7 @@ const app = new Vue({
                 });
                 this.browsepage = browse.data.data[0];
                 this.browsepage.timestamp = Date.now()
-                console.log(this.browsepage)
+                console.debug(this.browsepage)
             } catch (e) {
                 console.log(e)
                 this.getBrowsePage(attempt + 1)
@@ -2714,7 +2708,7 @@ const app = new Vue({
                             if (status2 == 200) {
                                 let token = jsonResponse["message"]["body"]["user_token"] ?? '';
                                 if (token != "" && token != "UpgradeOnlyUpgradeOnlyUpgradeOnlyUpgradeOnly") {
-                                    console.log('200 token', mode);
+                                    console.debug('200 token', mode);
                                     // token good
                                     app.mxmtoken = token;
 
@@ -2724,7 +2718,7 @@ const app = new Vue({
                                         getMXMTrans(songid, lang, app.mxmtoken);
                                     }
                                 } else {
-                                    console.log('fake 200 token');
+                                    console.debug('fake 200 token');
                                     getToken(mode, track, artist, songid, lang, time)
                                 }
                             } else {
@@ -2759,7 +2753,7 @@ const app = new Vue({
                 req.onload = function () {
                     try {
                         let jsonResponse = JSON.parse(this.responseText);
-                        console.log(jsonResponse);
+                        console.debug(jsonResponse);
                         let status1 = jsonResponse["message"]["header"]["status_code"];
 
                         if (status1 == 200) {
@@ -3145,7 +3139,7 @@ const app = new Vue({
         },
         playMediaItemById(id, kind, isLibrary, raurl = "") {
             let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
-            console.log(id, truekind, isLibrary)
+            console.debug(id, truekind, isLibrary)
             try {
                 if (truekind.includes("artist")) {
                     app.mk.setStationQueue({ artist: 'a-' + id }).then(() => {
@@ -3770,7 +3764,7 @@ const app = new Vue({
         volumeUp() {
             if ((app.mk.volume + app.cfg.audio.volumeStep) > app.cfg.audio.maxVolume) {
                 app.mk.volume = app.cfg.audio.maxVolume;
-                console.log('setting max volume')
+                console.debug('setting max volume')
             } else {
                 console.log('volume up')
                 app.mk.volume = ((app.mk.volume * 100) + (app.cfg.audio.volumeStep * 100)) / 100
@@ -3779,7 +3773,7 @@ const app = new Vue({
         volumeDown() {
             if ((app.mk.volume - app.cfg.audio.volumeStep) < 0) {
                 app.mk.volume = 0;
-                console.log('setting volume to 0')
+                console.debug('setting volume to 0')
             } else {
                 console.log('volume down')
                 app.mk.volume = ((app.mk.volume * 100) - (app.cfg.audio.volumeStep * 100)) / 100
diff --git a/src/renderer/views/components/listitem-horizontal.ejs b/src/renderer/views/components/listitem-horizontal.ejs
index ba00fe6f..25296c47 100644
--- a/src/renderer/views/components/listitem-horizontal.ejs
+++ b/src/renderer/views/components/listitem-horizontal.ejs
@@ -40,7 +40,7 @@
             this.itemPages = app.arrayToChunk(this.items, 4);
             try{
             this.simplifiedParent = JSON.stringify(this.items.map ( function(x){return x.attributes.playParams}));
-            console.log("simplifiedParent: " + this.simplifiedParent);
+            console.debug("simplifiedParent: " + this.simplifiedParent);
             }
             catch (e){}
             
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
index 28295375..b6908ed0 100644
--- a/src/renderer/views/components/menu-panel.ejs
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -54,7 +54,6 @@
             }
         },
         mounted() {
-            console.log("MOUNTED")
             if (this.event) {
                 this.position = [this.event.clientX, this.event.clientY];
             }
@@ -81,7 +80,6 @@
             },
             getStyle() {
                 let style = {}
-                console.debug(this.$refs.menubody)
                 this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
                 if (this.event) {
                     style["position"] = "absolute";
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index bacca2d8..5e4fc9c5 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-settings">
     <div class="content-inner settings-page">
-        <b-tabs pills fill content-class="mt-3">
+        <b-tabs pills fill content-class="mt-3" v-model="tabIndex">
             <b-tab :title="$root.getLz('settings.header.general')" active>
                 <div class="md-option-container">
                     <!-- General Settings -->
@@ -1410,10 +1410,10 @@
 </script>
 
 <script>
-	// do not translate
-	Vue.component('stylestack-editor', {
-		/*html*/
-		template: `
+    // do not translate
+    Vue.component('stylestack-editor', {
+        /*html*/
+        template: `
             <div class="stylestack-editor">
                 <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
                     <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
@@ -1439,290 +1439,308 @@
                 </draggable>    
             </div>
         `,
-		props: {
-			themes: {
-				type: Array,
-				default: []
-			}
-		},
-		data: function () {
-			return {
-				selected: null,
-				newTheme: null,
-				themeList: []
-			}
-		},
-		mounted() {
-			this.themeList = [...this.themes]
-			this.themeList.unshift({
-				name: "Acrylic Grain",
-				file: "grain.less"
-			})
-			this.themeList.unshift({
-				name: "Sweetener",
-				file: "sweetener.less"
-			})
-			this.themeList.unshift({
-				name: "Reduce Visuals",
-				file: "reduce_visuals.less"
-			})
-			this.themeList.unshift({
-				name: "Inline Drawer",
-				file: "inline_drawer.less"
-			})
-		},
-		methods: {
-			gitHubExplore() {
-				this.$root.appRoute("themes-github")
-			},
-			getThemeName(filename) {
-				try {
-					return this.themeList.find(theme => theme.file === filename).name;
-				} catch (e) {
-					return filename;
-				}
-			},
-			moveUp() {
-				const styles = this.$root.cfg.visual.styles
-				const index = styles.indexOf(this.selected)
-				if (index > 0) {
-					styles.splice(index, 1)
-					styles.splice(index - 1, 0, this.selected)
-				}
-				this.$root.reloadStyles()
-			},
-			moveDown() {
-				const styles = this.$root.cfg.visual.styles
-				const index = styles.indexOf(this.selected)
-				if (index < styles.length - 1) {
-					styles.splice(index, 1)
-					styles.splice(index + 1, 0, this.selected)
-				}
-				this.$root.reloadStyles()
-			},
-			remove(style) {
-				const styles = this.$root.cfg.visual.styles
-				const index = styles.indexOf(style)
-				styles.splice(index, 1)
-				this.$root.reloadStyles()
-			},
-			addStyle(style) {
-				const styles = this.$root.cfg.visual.styles
-				styles.push(style)
-				this.$root.reloadStyles()
-			}
-		}
-	})
+        props: {
+            themes: {
+                type: Array,
+                default: []
+            }
+        },
+        data: function () {
+            return {
+                selected: null,
+                newTheme: null,
+                themeList: []
+            }
+        },
+        mounted() {
+            this.themeList = [...this.themes]
+            this.themeList.unshift({
+                name: "Acrylic Grain",
+                file: "grain.less"
+            })
+            this.themeList.unshift({
+                name: "Sweetener",
+                file: "sweetener.less"
+            })
+            this.themeList.unshift({
+                name: "Reduce Visuals",
+                file: "reduce_visuals.less"
+            })
+            this.themeList.unshift({
+                name: "Inline Drawer",
+                file: "inline_drawer.less"
+            })
+        },
+        methods: {
+            gitHubExplore() {
+                this.$root.appRoute("themes-github")
+            },
+            getThemeName(filename) {
+                try {
+                    return this.themeList.find(theme => theme.file === filename).name;
+                } catch (e) {
+                    return filename;
+                }
+            },
+            moveUp() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                if (index > 0) {
+                    styles.splice(index, 1)
+                    styles.splice(index - 1, 0, this.selected)
+                }
+                this.$root.reloadStyles()
+            },
+            moveDown() {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(this.selected)
+                if (index < styles.length - 1) {
+                    styles.splice(index, 1)
+                    styles.splice(index + 1, 0, this.selected)
+                }
+                this.$root.reloadStyles()
+            },
+            remove(style) {
+                const styles = this.$root.cfg.visual.styles
+                const index = styles.indexOf(style)
+                styles.splice(index, 1)
+                this.$root.reloadStyles()
+            },
+            addStyle(style) {
+                const styles = this.$root.cfg.visual.styles
+                styles.push(style)
+                this.$root.reloadStyles()
+            }
+        }
+    })
 </script>
 
 <script>
-	Vue.component('cider-settings', {
-		template: "#cider-settings",
-		props: [],
-		data: function () {
-			return {
-				app: this.$root,
-				themes: ipcRenderer.sendSync("get-themes")
-			}
-		},
-		mounted: function () {
-			if (app.cfg.lastfm.enabled) {
-				const element = document.getElementById('lfmConnect');
-				if (element) {
-					element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
-					element.onclick = app.LastFMDeauthorize;
-				}
-			}
-		},
-		methods: {
-			windowBgStyleChange() {
-				this.$root.getNowPlayingArtworkBG(undefined, true)
-				if (this.$root.cfg.visual.window_background_style === "mica") {
-					this.$root.spawnMica()
-				}
-			},
-			reinstallWidevineCDM() {
-				bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
-					if (ok) {
-						ipcRenderer.invoke("reinstall-widevine-cdm");
-					}
-				})
-			},
-			keyBindUpdate: function (action) {
-				const blur = document.createElement('div');
-				blur.className = 'blur';
-				blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
-				blur.style.position = 'fixed';
-				blur.style.top = '0';
-				blur.style.left = '0';
-				blur.style.width = '100%';
-				blur.style.height = '100%';
-				blur.style.zIndex = '9999';
-				blur.style.display = 'flex';
-				blur.style.alignItems = 'center';
-				blur.style.justifyContent = 'center';
-				blur.style.fontSize = '2em';
-				blur.style.color = 'white';
-				blur.innerHTML = 'Press a combination of two keys to update keybinding. Press Escape key to go back.'
-				document.body.appendChild(blur);
+    Vue.component('cider-settings', {
+        template: "#cider-settings",
+        props: [],
+        data: function () {
+            return {
+                app: this.$root,
+                themes: ipcRenderer.sendSync("get-themes"),
+                tabIndex: 0,
+                canChangeHash: false
+            }
+        }, watch: {
+            tabIndex: function (val) {
+                if (this.canChangeHash) {
+                    window.location.hash = `#settings/${val}`
+                }
+            }
+        },
+        mounted: function () {
+            this.$nextTick(function () {
+                if (window.location.hash.split("/").length > 1) {
+                    this.tabIndex = parseInt(window.location.hash.split("/")[1])
+                    console.debug("tabIndex", this.tabIndex)
+                    this.canChangeHash = true
+                }else{
+                    this.canChangeHash = true
+                }
+            })
 
-				let keyBind = [];
-				const keyBindTimeout = setTimeout(function () {
-					keyBind = [];
-					document.body.removeChild(blur);
-				}, 30000);
-				const keyBindUpdate = function (e) {
-					if (document.body.contains(blur)) {
-						if (e.key == 'Escape') {
-							document.body.removeChild(blur);
-							clearTimeout(keyBindTimeout);
-							return;
-						} else {
-							if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
-								keyBind.push(e.key.toUpperCase());
-							} else {
-								keyBind.push(e.key);
-							}
-							if (keyBind.length === 2) {
-								if (keyBind[0] !== keyBind[1]) {
-									app.cfg.general.keybindings[action] = keyBind
-									document.body.removeChild(blur);
-									clearTimeout(keyBindTimeout);
-									notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
-									bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
-										if (ok) ipcRenderer.invoke("relaunchApp")
-									})
-								} else {
-									keyBind = [];
-								}
-							}
-						}
-					}
-				};
-				document.addEventListener('keydown', keyBindUpdate);
-			},
-			keyBindReset: function () {
-				app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "S"];
-				app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "F"];
-				app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
-				app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
-				app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
-				app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
-				app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Shift", "A"];
-				app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift", "P"];
-				app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Shift", "C"];
-				app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Shift", "S"];
-				app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
-				notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
-				bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
-					if (ok) ipcRenderer.invoke("relaunchApp")
-				})
-			},
-			gitHubExplore() {
-				app.appRoute("themes-github")
-			},
-			copyLogs() {
-				ipcRenderer.send('fetch-log')
-				notyf.success(app.getLz('term.share.success'));
-			},
-			openAppData() {
-				ipcRenderer.send('open-appdata')
-			},
-			getLanguages: function () {
-				let langs = this.$root.lzListing
-				let categories = {
-					"main": [],
-					"fun": [],
-					"unsorted": []
-				}
-				// sort by category if category is undefined or empty put it in "unsorted"
-				for (let i = 0; i < langs.length; i++) {
-					if (langs[i].category === undefined || langs[i].category === "") {
-						categories.unsorted.push(langs[i])
-					} else {
-						categories[langs[i].category].push(langs[i])
-					}
-				}
-				// return
-				return categories
-			},
-			addExperiment(flag) {
-				app.cfg.advanced.experiments.push(flag);
-			},
-			removeExperiment(flag) {
-				app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
-			},
-			toggleAudioContext: function () {
-				if (app.cfg.advanced.AudioContext === true) {
-					if (navigator.hardwareConcurrency < 6) {
-						bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
-							if (result) {
-								CiderAudio.init();
-								if (app.cfg.audio.normalization === true) {
-									CiderAudio.normalizerOn()
-								}
-								if (app.cfg.audio.spatial === true) {
-									CiderAudio.spatialOn()
-									CiderAudio.hierarchical_loading();
-								}
-							}
-						})
-					} else {
-						CiderAudio.init();
-						if (app.cfg.audio.normalization === true) {
-							CiderAudio.normalizerOn()
-						}
-						if (app.cfg.audio.spatial === true) {
-							CiderAudio.spatialOn()
-							CiderAudio.hierarchical_loading();
-						}
-					}
-				} else {
-					CiderAudio.off();
-				}
-			},
-			toggleNormalization: function () {
-				if (app.cfg.audio.normalization) {
-					CiderAudio.normalizerOn()
-				} else {
-					CiderAudio.normalizerOff()
-				}
-			},
-			changeAudioQuality: function () {
-				1
-				app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
-			},
-			toggleUserInfo: function () {
-				app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
-			},
-			sendDataToMTT: function () {
-				ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
-				//  setStoreValue does not change plugin store values somehow
-				ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
-			},
-			checkIfUpdateDisabled() {
-				if (app.cfg.main.UPDATABLE) return;
+            if (app.cfg.lastfm.enabled) {
+                const element = document.getElementById('lfmConnect');
+                if (element) {
+                    element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
+                    element.onclick = app.LastFMDeauthorize;
+                }
+            }
+        },
+        methods: {
+            windowBgStyleChange() {
+                this.$root.getNowPlayingArtworkBG(undefined, true)
+                if (this.$root.cfg.visual.window_background_style === "mica") {
+                    this.$root.spawnMica()
+                }
+            },
+            reinstallWidevineCDM() {
+                bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
+                    if (ok) {
+                        ipcRenderer.invoke("reinstall-widevine-cdm");
+                    }
+                })
+            },
+            keyBindUpdate: function (action) {
+                const blur = document.createElement('div');
+                blur.className = 'blur';
+                blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
+                blur.style.position = 'fixed';
+                blur.style.top = '0';
+                blur.style.left = '0';
+                blur.style.width = '100%';
+                blur.style.height = '100%';
+                blur.style.zIndex = '9999';
+                blur.style.display = 'flex';
+                blur.style.alignItems = 'center';
+                blur.style.justifyContent = 'center';
+                blur.style.fontSize = '2em';
+                blur.style.color = 'white';
+                blur.innerHTML = 'Press a combination of two keys to update keybinding. Press Escape key to go back.'
+                document.body.appendChild(blur);
 
-				let updateFields = document.getElementsByClassName('update-check');
-				for (let i = 0; i < updateFields.length; i++) {
-					updateFields[i].style = "opacity: 0.5; pointer-events: none;";
-					updateFields[i].title = "Not available on this type of build";
-				}
+                let keyBind = [];
+                const keyBindTimeout = setTimeout(function () {
+                    keyBind = [];
+                    document.body.removeChild(blur);
+                }, 30000);
+                const keyBindUpdate = function (e) {
+                    if (document.body.contains(blur)) {
+                        if (e.key == 'Escape') {
+                            document.body.removeChild(blur);
+                            clearTimeout(keyBindTimeout);
+                            return;
+                        } else {
+                            if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
+                                keyBind.push(e.key.toUpperCase());
+                            } else {
+                                keyBind.push(e.key);
+                            }
+                            if (keyBind.length === 2) {
+                                if (keyBind[0] !== keyBind[1]) {
+                                    app.cfg.general.keybindings[action] = keyBind
+                                    document.body.removeChild(blur);
+                                    clearTimeout(keyBindTimeout);
+                                    notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
+                                    bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                                        if (ok) ipcRenderer.invoke("relaunchApp")
+                                    })
+                                } else {
+                                    keyBind = [];
+                                }
+                            }
+                        }
+                    }
+                };
+                document.addEventListener('keydown', keyBindUpdate);
+            },
+            keyBindReset: function () {
+                app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "S"];
+                app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "F"];
+                app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
+                app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
+                app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
+                app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
+                app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Shift", "A"];
+                app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift", "P"];
+                app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Shift", "C"];
+                app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Shift", "S"];
+                app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
+                notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
+                bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                    if (ok) ipcRenderer.invoke("relaunchApp")
+                })
+            },
+            gitHubExplore() {
+                app.appRoute("themes-github")
+            },
+            copyLogs() {
+                ipcRenderer.send('fetch-log')
+                notyf.success(app.getLz('term.share.success'));
+            },
+            openAppData() {
+                ipcRenderer.send('open-appdata')
+            },
+            getLanguages: function () {
+                let langs = this.$root.lzListing
+                let categories = {
+                    "main": [],
+                    "fun": [],
+                    "unsorted": []
+                }
+                // sort by category if category is undefined or empty put it in "unsorted"
+                for (let i = 0; i < langs.length; i++) {
+                    if (langs[i].category === undefined || langs[i].category === "") {
+                        categories.unsorted.push(langs[i])
+                    } else {
+                        categories[langs[i].category].push(langs[i])
+                    }
+                }
+                // return
+                return categories
+            },
+            addExperiment(flag) {
+                app.cfg.advanced.experiments.push(flag);
+            },
+            removeExperiment(flag) {
+                app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
+            },
+            toggleAudioContext: function () {
+                if (app.cfg.advanced.AudioContext === true) {
+                    if (navigator.hardwareConcurrency < 6) {
+                        bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
+                            if (result) {
+                                CiderAudio.init();
+                                if (app.cfg.audio.normalization === true) {
+                                    CiderAudio.normalizerOn()
+                                }
+                                if (app.cfg.audio.spatial === true) {
+                                    CiderAudio.spatialOn()
+                                    CiderAudio.hierarchical_loading();
+                                }
+                            }
+                        })
+                    } else {
+                        CiderAudio.init();
+                        if (app.cfg.audio.normalization === true) {
+                            CiderAudio.normalizerOn()
+                        }
+                        if (app.cfg.audio.spatial === true) {
+                            CiderAudio.spatialOn()
+                            CiderAudio.hierarchical_loading();
+                        }
+                    }
+                } else {
+                    CiderAudio.off();
+                }
+            },
+            toggleNormalization: function () {
+                if (app.cfg.audio.normalization) {
+                    CiderAudio.normalizerOn()
+                } else {
+                    CiderAudio.normalizerOff()
+                }
+            },
+            changeAudioQuality: function () {
+                1
+                app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
+            },
+            toggleUserInfo: function () {
+                app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
+            },
+            sendDataToMTT: function () {
+                ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
+                //  setStoreValue does not change plugin store values somehow
+                ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
+            },
+            checkIfUpdateDisabled() {
+                if (app.cfg.main.UPDATABLE) return;
 
-			},
-			promptForRelaunch() {
-				bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
-					if (result) {
-						ipcRenderer.send('relaunchApp', '');
-					}
-				});
-			},
-			authCC() {
-				ipcRenderer.send('cc-auth')
-			},
-			logoutCC() {
-				ipcRenderer.send('cc-logout')
-			},
-		}
-	})
+                let updateFields = document.getElementsByClassName('update-check');
+                for (let i = 0; i < updateFields.length; i++) {
+                    updateFields[i].style = "opacity: 0.5; pointer-events: none;";
+                    updateFields[i].title = "Not available on this type of build";
+                }
+
+            },
+            promptForRelaunch() {
+                bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
+                    if (result) {
+                        ipcRenderer.send('relaunchApp', '');
+                    }
+                });
+            },
+            authCC() {
+                ipcRenderer.send('cc-auth')
+            },
+            logoutCC() {
+                ipcRenderer.send('cc-logout')
+            },
+        }
+    })
 </script>
\ No newline at end of file