diff --git a/src/main/plugins/menubar.ts b/src/main/plugins/menubar.ts
index 9546e5d8..a51b6b05 100644
--- a/src/main/plugins/menubar.ts
+++ b/src/main/plugins/menubar.ts
@@ -37,7 +37,7 @@ export default class Thumbar {
                 {
                     label: utils.getLocale(utils.getStoreValue('general.language'), 'term.settings'),
                     accelerator: utils.getStoreValue("general.keybindings.settings").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('settings')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.openSettingsPage()`)
                 },
                 ...(this.isMac ? [
                     {type: 'separator'},
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 366b3827..85c28f83 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -928,10 +928,10 @@ const app = new Vue({
                 app.mk.nowPlayingItem.attributes.name = e.title
                 app.mk.nowPlayingItem.attributes.artistName = e.performer
                 app.mk.nowPlayingItem.attributes.albumName = e.album
-                if(e.links[1]) {
+                if (e.links[1]) {
                     app.currentArtUrl = e.links[1].url
                     app.currentArtUrlRaw = e.links[1].url
-                }else{
+                } else {
                     app.currentArtUrl = e.links[0].url
                     app.currentArtUrlRaw = e.links[0].url
                 }
@@ -944,7 +944,7 @@ const app = new Vue({
                     self.$refs.queue.updateQueue();
                 }
                 this.currentSongInfo = a
-                if (this.currentSongInfo === null || this.currentSongInfo === undefined) {return;} // EVIL EMPTY OBJECTS BE GONE
+                if (this.currentSongInfo === null || this.currentSongInfo === undefined) { return; } // EVIL EMPTY OBJECTS BE GONE
 
                 console.debug("songinfo: " + JSON.stringify(a))
                 if (app.cfg.advanced.AudioContext) {
@@ -959,7 +959,7 @@ const app = new Vue({
                     } catch (e) {
                         localStorage.setItem("playingBitrate", "256")
                     }
-                    if (!app.cfg.audio.normalization) {CiderAudio.hierarchical_loading();}
+                    if (!app.cfg.audio.normalization) { CiderAudio.hierarchical_loading(); }
 
                 }
 
@@ -976,16 +976,16 @@ const app = new Vue({
                                 previewURL = response.data.data[0].attributes.previews[0].url
                                 if (previewURL)
                                     console.debug("[Cider][MaikiwiSoundCheck] previewURL response.data.data[0].attributes.previews[0].url: " + previewURL)
-                                    ipcRenderer.send('getPreviewURL', previewURL)
+                                ipcRenderer.send('getPreviewURL', previewURL)
                             })
                         } else {
                             if (previewURL)
                                 console.debug("[Cider][MaikiwiSoundCheck] previewURL in app.mk.nowPlayingItem.previewURL: " + previewURL)
-                                ipcRenderer.send('getPreviewURL', previewURL)
+                            ipcRenderer.send('getPreviewURL', previewURL)
                         }
 
                     } catch (e) {
-                        if (e instanceof TypeError === false) {console.debug("[Cider][MaikiwiSoundCheck] normalizer function err: " + e)}
+                        if (e instanceof TypeError === false) { console.debug("[Cider][MaikiwiSoundCheck] normalizer function err: " + e) }
                     }
                 }
 
@@ -1300,7 +1300,7 @@ const app = new Vue({
             results.forEach(result => {
                 try {
                     if (result.relationships?.catalog?.data[0]?.attributes?.inFavorites) {
-                        if(!favs.includes(result.relationships?.catalog?.data[0].id)) {
+                        if (!favs.includes(result.relationships?.catalog?.data[0].id)) {
                             favs.push(result.relationships?.catalog?.data[0].id)
                         }
                     }
@@ -1313,8 +1313,8 @@ const app = new Vue({
             return favs
         },
         async setArtistFavorite(id, val = true) {
-            if(val) {
-                if(!app.cfg.home.followedArtists.includes(id)) {
+            if (val) {
+                if (!app.cfg.home.followedArtists.includes(id)) {
                     app.cfg.home.followedArtists.push(id)
                 }
                 await app.mk.api.v3.music(`/v1/me/favorites`, {
@@ -1327,8 +1327,8 @@ const app = new Vue({
                         method: "POST"
                     }
                 })
-            }else{
-                if(app.cfg.home.followedArtists.includes(id)) {
+            } else {
+                if (app.cfg.home.followedArtists.includes(id)) {
                     app.cfg.home.followedArtists.splice(app.cfg.home.followedArtists.indexOf(id), 1)
                 }
                 await app.mk.api.v3.music(`/v1/me/favorites`, {
@@ -1460,7 +1460,7 @@ const app = new Vue({
                 },
                 {
                     name: app.getLz("action.refresh"),
-                    action: ()=>{
+                    action: () => {
                         this.refreshPlaylists()
                     }
                 }
@@ -2018,8 +2018,8 @@ const app = new Vue({
 
         async getNowPlayingItemDetailed(target) {
             let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
-            if(nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
-                nowPlayingItem.playParams = {kind: "songs"}
+            if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
+                nowPlayingItem.playParams = { kind: "songs" }
                 nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
                 nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id
                 nowPlayingItem.id = app.mk.nowPlayingItem.id
@@ -4331,8 +4331,7 @@ const app = new Vue({
                             "name": app.getLz('settings.option.audio.audioLab'),
                             "hidden": true,
                             "action": function () {
-                                app.$store.state.pageState.settings.currentTabIndex = 2
-                                app.modals.settings = true
+                                app.openSettingsPage('audiolabs')
                             }
                         },
                     ]
@@ -4358,7 +4357,7 @@ const app = new Vue({
             try {
                 // if its a radio station, then change the attributes to match a song
                 const nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
-                if(nowPlayingItem.type == "radioStation" && app.mk.nowPlayingItem.id != -1) {
+                if (nowPlayingItem.type == "radioStation" && app.mk.nowPlayingItem.id != -1) {
                     nowPlayingItem.type = "song"
                     nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
                     nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id
@@ -4391,6 +4390,32 @@ const app = new Vue({
 
             }
         },
+        openSettingsPage(page) {
+            switch (page) {
+                case "general":
+                    this.$store.state.pageState.settings.currentTabIndex = 0
+                    break;
+                case "audio":
+                    this.$store.state.pageState.settings.currentTabIndex = 1
+                    break;
+                case "audiolabs":
+                    this.$store.state.pageState.settings.currentTabIndex = 2
+                    break;
+                case "visual":
+                    this.$store.state.pageState.settings.currentTabIndex = 3
+                    break;
+                case "lyrics":
+                    this.$store.state.pageState.settings.currentTabIndex = 4
+                    break;
+                case "connectivity":
+                    this.$store.state.pageState.settings.currentTabIndex = 5
+                    break;
+                case "advanced":
+                    this.$store.state.pageState.settings.currentTabIndex = 6
+                    break;
+            }
+            app.modals.settings = true
+        },
         LastFMDeauthorize() {
             ipcRenderer.invoke('setStoreValue', 'lastfm.enabled', false).catch((e) => console.error(e));
             ipcRenderer.invoke('setStoreValue', 'lastfm.auth_token', '').catch((e) => console.error(e));
@@ -4649,7 +4674,7 @@ const app = new Vue({
                         label: app.getLz('dialog.ok'),
                     },
                     cancel: {
-                        label:  app.getLz('dialog.cancel'),
+                        label: app.getLz('dialog.cancel'),
                     },
                 },
                 callback: function (result) {
diff --git a/src/renderer/views/components/audio-controls.ejs b/src/renderer/views/components/audio-controls.ejs
index e82ec798..1903f7a5 100644
--- a/src/renderer/views/components/audio-controls.ejs
+++ b/src/renderer/views/components/audio-controls.ejs
@@ -1,10 +1,10 @@
 <script type="text/x-template" id="audio-controls">
-    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
-         @contextmenu.self="app.resetState()">
+    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioControls = false"
+         @contextmenu.self="app.modals.audioControls = false">
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{app.getLz('term.audioControls')}}</div>
-                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
+                <button class="close-btn" @click="app.modals.audioControls = false" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="md-option-line">
diff --git a/src/renderer/views/components/audio-playbackrate.ejs b/src/renderer/views/components/audio-playbackrate.ejs
index 0e86d0ca..3347a0ff 100644
--- a/src/renderer/views/components/audio-playbackrate.ejs
+++ b/src/renderer/views/components/audio-playbackrate.ejs
@@ -1,10 +1,10 @@
 <script type="text/x-template" id="audio-playbackrate">
-    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
-         @contextmenu.self="app.resetState()">
+    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioPlaybackRate = false"
+         @contextmenu.self="app.modals.audioPlaybackRate = false">
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
-                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
+                <button class="close-btn" @click="app.modals.audioPlaybackRate = false" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="md-option-line">
diff --git a/src/renderer/views/components/audio-settings.ejs b/src/renderer/views/components/audio-settings.ejs
index ba4ce904..44b768fd 100644
--- a/src/renderer/views/components/audio-settings.ejs
+++ b/src/renderer/views/components/audio-settings.ejs
@@ -1,10 +1,10 @@
 <script type="text/x-template" id="audio-settings">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
+        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false" @contextmenu.self="app.modals.audioSettings = false">
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
-                    <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
+                    <button class="close-btn" @click="app.modals.audioSettings = false" :aria-label="app.getLz('action.close')"></button>
                 </div>
                 <div class="modal-content">
                     <button class="playlist-item"
@@ -23,7 +23,7 @@
                         <div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
                     </button>
                     <button class="playlist-item"
-                            @click="$root.appRoute('audiolabs')" style="width:100%;">
+                            @click="$root.openSettingsPage('audiolabs')" style="width:100%;">
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
                         <div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
                     </button>
diff --git a/src/renderer/views/components/equalizer.ejs b/src/renderer/views/components/equalizer.ejs
index 2e7639ca..5dbad35c 100644
--- a/src/renderer/views/components/equalizer.ejs
+++ b/src/renderer/views/components/equalizer.ejs
@@ -291,7 +291,7 @@
                 })
             },
             close() {
-                app.resetState()
+                app.modals.equalizer = false
             },
             changeVibrantBass() {
                 if (app.cfg.audio.equalizer.vibrantBass !== '0') {