diff --git a/src/i18n/README.md b/src/i18n/README.md
index 182e730b..cf5f1de4 100644
--- a/src/i18n/README.md
+++ b/src/i18n/README.md
@@ -515,3 +515,9 @@ Update 21/06/2022 20:39 UTC
 Update 23/06/2022 04:00 UTC
 
 * `settings.option.connectivity.lastfmScrobble.filterTypes`: Added to `en_US`
+
+
+Update 03/07/2022 20:00 UTC
+
+* `term.plugins`: Added to `en_US`
+* `settings.header.visual.styles`: Added to `en_US`
\ No newline at end of file
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index f2ef03fd..eea44749 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -184,8 +184,9 @@
   "term.top": "Top",
   "term.version": "Version",
   "term.noVideos": "No videos found.",
-  "term.plugin": "Plug-in",
-  "term.pluginMenu": "Plug-in Menu",
+  "term.plugins": "Plugins",
+  "term.plugin": "Plugin",
+  "term.pluginMenu": "Plugins Menu",
   "term.pluginMenu.none": "No interactive plugins",
   "term.replay": "Replay",
   "term.uniqueAlbums": "Unique Albums",
@@ -489,6 +490,7 @@
   "settings.prompt.visual.theme.github.URL": "Enter the URL of the theme you want to install",
   "settings.prompt.visual.theme.uninstallTheme": "Are you sure you want to uninstall {{ theme }}?",
   "settings.option.visual.theme.checkForUpdates": "Check for updates",
+  "settings.header.visual.styles": "Styles",
   "settings.option.visual.theme.manageStyles": "Manage Styles",
   "settings.option.visual.theme.uninstall": "Uninstall",
   "settings.option.visual.theme.viewInfo": "View Info",
diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json
index 256b937d..e5ff2481 100644
--- a/src/i18n/source/en_US.json
+++ b/src/i18n/source/en_US.json
@@ -180,8 +180,9 @@
   "term.top": "Top",
   "term.version": "Version",
   "term.noVideos": "No videos found.",
-  "term.plugin": "Plug-in",
-  "term.pluginMenu": "Plug-in Menu",
+  "term.plugins": "Plugins",
+  "term.plugin": "Plugin",
+  "term.pluginMenu": "Plugins Menu",
   "term.pluginMenu.none": "No interactive plugins",
   "term.replay": "Replay",
   "term.uniqueAlbums": "Unique Albums",
@@ -472,6 +473,7 @@
   "settings.prompt.visual.theme.github.URL": "Enter the URL of the theme you want to install",
   "settings.prompt.visual.theme.uninstallTheme": "Are you sure you want to uninstall {{ theme }}?",
   "settings.option.visual.theme.checkForUpdates": "Check for updates",
+  "settings.header.visual.styles": "Styles",
   "settings.option.visual.theme.manageStyles": "Manage Styles",
   "settings.option.visual.theme.uninstall": "Uninstall",
   "settings.option.visual.theme.viewInfo": "View Info",
diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index da39d7eb..9474189a 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -64,7 +64,7 @@ export class BrowserWindow {
                 "pages/groupings",
                 "pages/charts",
                 "pages/settings",
-                "pages/installed-themes",
+                //"pages/installed-themes",
                 "pages/listen_now",
                 "pages/radio",
                 "pages/home",
@@ -80,13 +80,12 @@ export class BrowserWindow {
                 "pages/about",
                 "pages/library-videos",
                 "pages/remote-pair",
-                "pages/themes-github",
-                "pages/plugins-github",
+                //"pages/themes-github",
+                //"pages/plugins-github",
                 "pages/replay",
                 "pages/audiolabs",
                 "pages/zoo",
                 "pages/plugin-renderer",
-                "pages/keybinds",
                 "pages/oobe",
                 "components/app-content",
                 "components/sidebar",
@@ -126,6 +125,10 @@ export class BrowserWindow {
                 "components/hello-world",
                 "components/inline-collection-list",
                 "components/settings-window",
+                "components/settings-keybinds",
+                "components/settings-themes",
+                "components/settings-themes-github",
+                "components/settings-plugins-github",
             ],
             appRoutes: [
                 {
@@ -275,6 +278,10 @@ export class BrowserWindow {
                     page: "replay",
                     component: `<replay-page></replay-page>`,
                     condition: `$root.page == 'replay'`
+                }, {
+                    page: "keydinds",
+                    component: `<keybinds-settings></keybinds-settings>`,
+                    condition: `$root.page == 'keybinds-settings'`
                 }
             ]
         },
diff --git a/src/renderer/assets/feather/plugins.svg b/src/renderer/assets/feather/plugins.svg
new file mode 100644
index 00000000..76eff3b0
--- /dev/null
+++ b/src/renderer/assets/feather/plugins.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32px"
+   height="32px"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg9"
+   sodipodi:docname="plugins.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs13" />
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="38.75829"
+     inkscape:cx="20.253731"
+     inkscape:cy="19.595808"
+     inkscape:window-width="1920"
+     inkscape:window-height="1044"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg9" />
+  <title
+     id="title2" />
+  <g
+     data-name="Layer 75"
+     id="Layer_75"
+     transform="matrix(1.333055,0,0,1.333055,-5.3322199,-5.325539)">
+    <path
+       d="m 23,28 h -5 a 1,1 0 0 1 -1,-1 3,3 0 0 0 -6,0 1,1 0 0 1 -1,1 H 5 A 1,1 0 0 1 4,27 V 22 A 1,1 0 0 1 5,21 3,3 0 0 0 5,15 1,1 0 0 1 4,14 V 9 A 1,1 0 0 1 5,8 h 4.1 a 5,5 0 0 1 9.8,0 H 23 a 1,1 0 0 1 1,1 v 4.1 a 5,5 0 0 1 0,9.8 V 27 a 1,1 0 0 1 -1,1 z M 18.9,26 H 22 v -4 a 1,1 0 0 1 1,-1 3,3 0 0 0 0,-6 1,1 0 0 1 -1,-1 V 10 H 18 A 1,1 0 0 1 17,9 3,3 0 0 0 11,9 1,1 0 0 1 10,10 H 6 v 3.1 a 5,5 0 0 1 0,9.8 V 26 h 3.1 a 5,5 0 0 1 9.8,0 z"
+       id="path4" />
+    <path
+       d="m 26,18.15 c -0.46,2.16 -5.94,2.36 -9.46,2.36 -3.52,0 -6.71,-2.43 -6.71,-3.64 h -1 A 4.17,4.17 0 0 1 9,18 4,4 0 0 1 5,22 v 5 h 5 a 4,4 0 0 1 8,0 h 5 v -5 a 4,4 0 0 0 3.1,-1.5 z"
+       id="path6" />
+  </g>
+</svg>
diff --git a/src/renderer/assets/feather/style.svg b/src/renderer/assets/feather/style.svg
new file mode 100644
index 00000000..e6eae9e2
--- /dev/null
+++ b/src/renderer/assets/feather/style.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24px"
+   height="24px"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="style-svgrepo-com.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="36.541667"
+     inkscape:cx="8.031927"
+     inkscape:cy="12.054732"
+     inkscape:window-width="1920"
+     inkscape:window-height="1044"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M23.14.93l-.07-.07A2.926 2.926 0 0 0 20.98 0a2.886 2.886 0 0 0-2.08.86L8.858 10.9a3.04 3.04 0 0 0-.53.72 7.793 7.793 0 0 0-4.1 1.621c-.191.144-.36.316-.5.51a6.08 6.08 0 0 0-.98 1.961c-.25.69-.59 1.631-1.22 3-.42.91-.75 1.541-.98 1.981a3.092 3.092 0 0 0-.54 1.631c.014.206.08.406.19.58a2.64 2.64 0 0 0 2.23 1.07 10.462 10.462 0 0 0 8.161-3.371c.378-.44.692-.932.93-1.461a7.882 7.882 0 0 0 .69-3.361.142.142 0 0 1 .02-.04c.325-.144.62-.347.87-.6L23.14 5.1A2.888 2.888 0 0 0 24 3.021 2.927 2.927 0 0 0 23.14.93zM9.7 18.317c-.17.368-.388.711-.65 1.02a8.393 8.393 0 0 1-6.891 2.6c.05-.1.11-.21.17-.32.24-.46.58-1.11 1.02-2.061a39.058 39.058 0 0 0 1.28-3.151c.14-.491.355-.957.64-1.381.062-.08.133-.154.21-.22a5.221 5.221 0 0 1 2.59-1.14c.121.537.396 1.027.79 1.411l.07.07c.35.357.788.616 1.27.75a5.614 5.614 0 0 1-.499 2.422zM21.73 3.691L11.678 13.735a.947.947 0 0 1-.67.28.983.983 0 0 1-.67-.28l-.07-.07a.948.948 0 0 1 0-1.34L20.309 2.271c.18-.173.42-.27.671-.271a.937.937 0 0 1 .67.27l.08.08c.36.374.36.967 0 1.341z"
+     fill="#494c4e"
+     fill-rule="evenodd"
+     id="path2"
+     style="fill:#000000;fill-opacity:1" />
+</svg>
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index d9bb93d8..32e0a739 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -23,8 +23,7 @@
 .github-themes-page {
   display: flex;
   flex-direction: column;
-  padding: 0px;
-  height: calc(100% - var(--navigationBarHeight));
+  height: 100%;
 
   .github-avatar {
     height: 42px;
@@ -51,10 +50,12 @@
   }
 
   .repos-list {
-    height: 100%;
-    overflow-y: overlay;
+    height: 85%;
     width: 320px;
     font-size: 14px;
+    position: absolute;
+    overflow: auto;
+    padding-bottom: 16px;
 
     > .list-group {
       margin: 0px;
@@ -74,11 +75,14 @@
   }
 
   .github-preview {
-    height: 100%;
+    height: 85%;
     flex: 1;
-    background: var(--color2);
     padding: 16px 32px;
-    overflow-y: overlay;
+    overflow: auto;
+    position: fixed;
+    width: calc(100% - 574px);
+    margin-left: 320px;
+    padding-bottom: 16px;
   }
 
   .gh-content {
@@ -90,6 +94,173 @@
 
   .gh-header {
     padding: 16px;
+
+    .header-text {
+      position: initial !important;
+      justify-content: left !important;
+    }
+  }
+
+  .installed-themes-page {
+    .style-editor-container {
+      height: 100%;
+      flex: 1;
+      background: var(--color2);
+      padding: 0px;
+      overflow-y: overlay;
+  
+      .list-group-item {
+        border-radius: 0px;
+      }
+    }
+  }
+}
+
+//Styles Page
+.installed-themes-page {
+
+  .themeContextMenu {
+    background: transparent;
+    color: var(--keyColor);
+    border: 0px;
+  }
+
+  .list-group-item {
+    &.addon {
+      background: rgb(86 86 86 / 20%);
+    }
+
+    &.applied {
+      background: var(--keyColor-disabled);
+      pointer-events: none;
+    }
+  }
+
+  .repo-header {
+    font-size: 16px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 50px;
+    z-index: 1;
+    background: rgba(36, 36, 36, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: var(--glassFilter);
+    overflow: hidden;
+    border-bottom: 1px solid rgb(0 0 0 / 18%);
+    border-top: 1px solid rgb(135 135 135 / 18%);
+  }
+
+  .gh-header {
+    z-index: 5;
+
+    .header-text {
+      position: initial !important;
+      justify-content: left !important;
+    }
+  }
+
+  .gh-content {
+    display: contents;
+    flex-direction: column;
+    padding: 0px;
+
+    .repos-list {
+      width: 320px;
+      position: fixed;
+      overflow: auto;
+      height: 90%;
+      font-size: 14px;
+      margin: 0 auto;
+      white-space: nowrap;
+
+      > .list-group {
+        margin: 0px;
+        padding-bottom: 16px;
+      }
+
+      .list-group-item {
+        padding: 12px 6px;
+  
+        &:hover {
+          filter: brightness(1.2);
+        }
+  
+        &:active {
+          filter: brightness(0.8);
+        }
+      }
+    }
+
+    .style-editor-container {
+      height: 90%;
+      flex: 1;
+      padding: 0px;
+      margin-left: 320px;
+      position: fixed;
+      overflow: auto;
+      width: calc(100% - 574px);
+      
+      .stylestack-editor {
+        padding-bottom: 16px;
+      }
+
+      .list-group-item {
+        border-radius: 0px;
+      }
+    }
+  }
+
+  .stylestack-editor {
+    width: 100%;
+
+    .btn,
+    .btn-group {
+      width: 100%;
+    }
+
+    .themeLabel {
+      display: flex;
+      align-items: center;
+    }
+
+    .handle {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .list-group-item {
+
+      &:hover {
+        cursor: grab;
+      }
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    .removeItem {
+      border: 0px;
+      background: transparent;
+      height: 32px;
+      font-weight: bold;
+      color: var(--textColor);
+      cursor: pointer;
+    }
+
+    .stylesDropdown {
+      > .dropdown-menu {
+        height: 300px;
+        overflow-y: overlay;
+      }
+    }
   }
 }
 
@@ -1286,107 +1457,6 @@
 
 /* Artist Page End */
 
-
-.installed-themes-page {
-
-  .themeContextMenu {
-    background: transparent;
-    color: var(--keyColor);
-    border: 0px;
-  }
-
-  .list-group-item {
-    &.addon {
-      background: rgb(86 86 86 / 20%);
-    }
-
-    &.applied {
-      background: var(--keyColor-disabled);
-      pointer-events: none;
-    }
-  }
-
-  .repo-header {
-    font-size: 16px;
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 50px;
-    z-index: 1;
-    background: rgba(36, 36, 36, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    backdrop-filter: var(--glassFilter);
-    overflow: hidden;
-    border-bottom: 1px solid rgb(0 0 0 / 18%);
-    border-top: 1px solid rgb(135 135 135 / 18%);
-  }
-
-  .style-editor-container {
-    height: 100%;
-    flex: 1;
-    background: var(--color2);
-    padding: 0px;
-    overflow-y: overlay;
-
-    .list-group-item {
-      border-radius: 0px;
-    }
-  }
-
-
-  .stylestack-editor {
-    width: 100%;
-
-    .btn,
-    .btn-group {
-      width: 100%;
-    }
-
-    .themeLabel {
-      display: flex;
-      align-items: center;
-    }
-
-    .handle {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .list-group-item {
-
-      &:hover {
-        cursor: grab;
-      }
-
-      &:active {
-        cursor: grabbing;
-      }
-    }
-
-    .removeItem {
-      border: 0px;
-      background: transparent;
-      height: 32px;
-      font-weight: bold;
-      color: var(--textColor);
-      cursor: pointer;
-    }
-
-    .stylesDropdown {
-      > .dropdown-menu {
-        height: 300px;
-        overflow-y: overlay;
-      }
-    }
-  }
-}
-
 // Settings page
 .settings-page {
   padding: 0px;
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index c1b4026c..36e18c36 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1120,7 +1120,7 @@ const app = new Vue({
                                     message: `[Themes] ${theme.name} has an update available.`
                                 })
                                 notify.on("click", () => {
-                                    app.appRoute("themes-github")
+                                    app.openSettingsPage("github-themes")
                                     notyf.dismiss(notify)
                                 })
                             }
@@ -4441,21 +4441,33 @@ const app = new Vue({
                 case "audiolabs":
                     this.$store.state.pageState.settings.currentTabIndex = 2
                     break;
-                case "visual":
+                case "styles":
                     this.$store.state.pageState.settings.currentTabIndex = 3
                     break;
-                case "lyrics":
+                case "visual":
                     this.$store.state.pageState.settings.currentTabIndex = 4
                     break;
-                case "connectivity":
+                case "plugins":
                     this.$store.state.pageState.settings.currentTabIndex = 5
                     break;
-                case "advanced":
+                case "lyrics":
                     this.$store.state.pageState.settings.currentTabIndex = 6
                     break;
-                case "keybindings":
+                case "connectivity":
                     this.$store.state.pageState.settings.currentTabIndex = 7
                     break;
+                case "advanced":
+                    this.$store.state.pageState.settings.currentTabIndex = 8
+                    break;
+                case "keybindings":
+                    this.$store.state.pageState.settings.currentTabIndex = 9
+                    break;
+                case "github-themes":
+                    this.$store.state.pageState.settings.currentTabIndex = 10
+                    break;
+                case "github-plugins":
+                    this.$store.state.pageState.settings.currentTabIndex = 11
+                    break;
             }
             app.modals.settings = true
         },
diff --git a/src/renderer/style.css b/src/renderer/style.css
index cc9b934e..4c8c1645 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -12985,8 +12985,8 @@ input[type=checkbox][switch]:checked:active::before {
 .github-themes-page {
   display: flex;
   flex-direction: column;
-  padding: 0px;
-  height: calc(100% - var(--navigationBarHeight));
+  padding-top: var(--chromeHeight1);
+  height: 100%;
 }
 .github-themes-page .github-avatar {
   height: 42px;
@@ -13042,6 +13042,129 @@ input[type=checkbox][switch]:checked:active::before {
 .github-themes-page .gh-header {
   padding: 16px;
 }
+.github-themes-page .installed-themes-page .style-editor-container {
+  height: 100%;
+  flex: 1;
+  background: var(--color2);
+  padding: 0px;
+  overflow-y: overlay;
+}
+.github-themes-page .installed-themes-page .style-editor-container .list-group-item {
+  border-radius: 0px;
+}
+.installed-themes-page .themeContextMenu {
+  background: transparent;
+  color: var(--keyColor);
+  border: 0px;
+}
+.installed-themes-page .list-group-item.addon {
+  background: rgba(86, 86, 86, 0.2);
+}
+.installed-themes-page .list-group-item.applied {
+  background: var(--keyColor-disabled);
+  pointer-events: none;
+}
+.installed-themes-page .repo-header {
+  font-size: 16px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 1;
+  background: rgba(36, 36, 36, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: var(--glassFilter);
+  overflow: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+  border-top: 1px solid rgba(135, 135, 135, 0.18);
+}
+.installed-themes-page .gh-header {
+  z-index: 5;
+}
+.installed-themes-page .gh-header .header-text {
+  position: initial;
+  justify-content: left;
+}
+.installed-themes-page .gh-content {
+  display: contents;
+  flex-direction: column;
+  padding: 0px;
+}
+.installed-themes-page .gh-content .repos-list {
+  width: 320px;
+  position: absolute;
+  overflow: auto;
+  height: 90%;
+  font-size: 14px;
+}
+.installed-themes-page .gh-content .repos-list > .list-group {
+  margin: 0px;
+  padding-bottom: 16px;
+}
+.installed-themes-page .gh-content .repos-list .list-group-item {
+  padding: 12px 6px;
+}
+.installed-themes-page .gh-content .repos-list .list-group-item:hover {
+  filter: brightness(1.2);
+}
+.installed-themes-page .gh-content .repos-list .list-group-item:active {
+  filter: brightness(0.8);
+}
+.installed-themes-page .gh-content .style-editor-container {
+  height: 90%;
+  flex: 1;
+  /* background: var(--color2); */
+  padding: 0px;
+  margin-left: 320px;
+  position: absolute;
+  overflow: auto;
+  width: calc(-webkit-fill-available - 320px);
+}
+.installed-themes-page .gh-content .style-editor-container .stylestack-editor {
+  padding-bottom: 16px;
+}
+.installed-themes-page .gh-content .style-editor-container .list-group-item {
+  border-radius: 0px;
+}
+.installed-themes-page .stylestack-editor {
+  width: 100%;
+}
+.installed-themes-page .stylestack-editor .btn,
+.installed-themes-page .stylestack-editor .btn-group {
+  width: 100%;
+}
+.installed-themes-page .stylestack-editor .themeLabel {
+  display: flex;
+  align-items: center;
+}
+.installed-themes-page .stylestack-editor .handle {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.installed-themes-page .stylestack-editor .list-group-item:hover {
+  cursor: grab;
+}
+.installed-themes-page .stylestack-editor .list-group-item:active {
+  cursor: grabbing;
+}
+.installed-themes-page .stylestack-editor .removeItem {
+  border: 0px;
+  background: transparent;
+  height: 32px;
+  font-weight: bold;
+  color: var(--textColor);
+  cursor: pointer;
+}
+.installed-themes-page .stylestack-editor .stylesDropdown > .dropdown-menu {
+  height: 300px;
+  overflow-y: overlay;
+}
 .library-page {
   padding: 0px;
 }
@@ -14037,81 +14160,6 @@ input[type=checkbox][switch]:checked:active::before {
   background: rgba(200, 200, 200, 0.1);
 }
 /* Artist Page End */
-.installed-themes-page .themeContextMenu {
-  background: transparent;
-  color: var(--keyColor);
-  border: 0px;
-}
-.installed-themes-page .list-group-item.addon {
-  background: rgba(86, 86, 86, 0.2);
-}
-.installed-themes-page .list-group-item.applied {
-  background: var(--keyColor-disabled);
-  pointer-events: none;
-}
-.installed-themes-page .repo-header {
-  font-size: 16px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 50px;
-  z-index: 1;
-  background: rgba(36, 36, 36, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  backdrop-filter: var(--glassFilter);
-  overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
-  border-top: 1px solid rgba(135, 135, 135, 0.18);
-}
-.installed-themes-page .style-editor-container {
-  height: 100%;
-  flex: 1;
-  background: var(--color2);
-  padding: 0px;
-  overflow-y: overlay;
-}
-.installed-themes-page .style-editor-container .list-group-item {
-  border-radius: 0px;
-}
-.installed-themes-page .stylestack-editor {
-  width: 100%;
-}
-.installed-themes-page .stylestack-editor .btn,
-.installed-themes-page .stylestack-editor .btn-group {
-  width: 100%;
-}
-.installed-themes-page .stylestack-editor .themeLabel {
-  display: flex;
-  align-items: center;
-}
-.installed-themes-page .stylestack-editor .handle {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.installed-themes-page .stylestack-editor .list-group-item:hover {
-  cursor: grab;
-}
-.installed-themes-page .stylestack-editor .list-group-item:active {
-  cursor: grabbing;
-}
-.installed-themes-page .stylestack-editor .removeItem {
-  border: 0px;
-  background: transparent;
-  height: 32px;
-  font-weight: bold;
-  color: var(--textColor);
-  cursor: pointer;
-}
-.installed-themes-page .stylestack-editor .stylesDropdown > .dropdown-menu {
-  height: 300px;
-  overflow-y: overlay;
-}
 .settings-page {
   padding: 0px;
 }
diff --git a/src/renderer/views/components/settings-keybinds.ejs b/src/renderer/views/components/settings-keybinds.ejs
new file mode 100644
index 00000000..24805c29
--- /dev/null
+++ b/src/renderer/views/components/settings-keybinds.ejs
@@ -0,0 +1,323 @@
+<script type="text/x-template" id="keybinds-settings">
+    <div class="keybinds-page">
+            <div class="md-option-header">
+                <span>{{$root.getLz('settings.option.general.keybindings')}}</span>
+            </div>
+        <div class="settings-option-body">
+            <div class="md-option-header-sub">
+                <span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.search')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('search')">
+                        {{app.cfg.general.keybindings.search.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.listnow')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('listnow')">
+                        {{app.cfg.general.keybindings.listnow.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.browse')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('browse')">
+                        {{app.cfg.general.keybindings.browse.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.recentAdd')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('recentAdd')">
+                        {{app.cfg.general.keybindings.recentAdd.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.songs')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('songs')">
+                        {{app.cfg.general.keybindings.songs.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.albums')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('albums')">
+                        {{app.cfg.general.keybindings.albums.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.artists')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('artists')">
+                        {{app.cfg.general.keybindings.artists.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-header-sub">
+                <span>{{$root.getLz('settings.option.general.keybindings.session')}}</span>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.private')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('togglePrivateSession')">
+                        {{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-header-sub">
+                <span>{{$root.getLz('settings.option.general.keybindings.control')}}</span>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.remote')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('webRemote')">
+                        {{app.cfg.general.keybindings.webRemote.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.audio')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('audioSettings')">
+                        {{app.cfg.general.keybindings.audioSettings.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.plugins')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('pluginMenu')">
+                        {{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.cast')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('castToDevices')">
+                        {{app.cfg.general.keybindings.castToDevices.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.settings')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('settings')">
+                        {{app.cfg.general.keybindings.settings.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-header-sub" v-if="app.platform !== 'darwin'">
+                <span>{{$root.getLz('settings.option.general.keybindings.interface')}}</span>
+            </div>
+            <div class="md-option-line" v-if="app.platform !== 'darwin'">
+                <div class="md-option-segment">
+                    {{$root.getLz('term.zoomin')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('zoomn')">
+                        {{app.cfg.general.keybindings.zoomn.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line" v-if="app.platform !== 'darwin'">
+                <div class="md-option-segment">
+                    {{$root.getLz('term.zoomout')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('zoomt')">
+                        {{app.cfg.general.keybindings.zoomt.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line" v-if="app.platform !== 'darwin'">
+                <div class="md-option-segment">
+                    {{$root.getLz('term.zoomreset')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('zoomrst')">
+                        {{app.cfg.general.keybindings.zoomrst.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-header-sub">
+                <span>{{$root.getLz('settings.option.general.keybindings.advanced')}}</span>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.developer')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('openDeveloperTools')">
+                        {{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
+                 {{$root.getLz('term.reset')}}
+            </button>
+        </div>
+
+    </div>
+</script>
+
+<script>
+    Vue.component('keybinds-settings', {
+        template: "#keybinds-settings",
+        props: [],
+        data: function () {
+            return {
+                app: this.$root
+            }
+        },
+        methods: {
+            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 = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
+                document.body.appendChild(blur);
+
+                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'));
+                                    app.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", "F"];
+                app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
+                app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
+                app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
+                app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
+                app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "A"];
+                app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
+                app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
+                app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
+                app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
+                app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
+                app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
+                app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
+                app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
+                app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
+                app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
+                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'));
+                app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                    if (ok) ipcRenderer.invoke("relaunchApp")
+                })
+            },
+            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
+            },
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/components/settings-plugins-github.ejs b/src/renderer/views/components/settings-plugins-github.ejs
new file mode 100644
index 00000000..4bd927ed
--- /dev/null
+++ b/src/renderer/views/components/settings-plugins-github.ejs
@@ -0,0 +1,188 @@
+<script type="text/x-template" id="plugins-github">
+    <div class="github-themes-page">
+        <div class="gh-header">
+            <div class="row">
+                <div class="col nopadding">
+                    <h1 class="header-text">{{$root.getLz('settings.header.visual.plugin.github.page')}}</h1>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
+                        {{$root.getLz('settings.option.visual.plugin.github.download')}}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="gh-content">
+            <div class="repos-list">
+                <ul class="list-group list-group-flush">
+                    <li @click="showRepo(repo)" class="list-group-item list-group-item-dark"
+                        :style="{'background': (repo.id == openRepo.id) ? 'var(--keyColor)' : ''}"
+                        v-for="repo in repos">
+                        <div class="row">
+                            <div class="col flex-center">
+                                <div>
+                                    <h4 class="repo-name">{{ (repo.description != null) ? repo.description : repo.full_name }}</h4>
+                                    <div>⭐ {{ repo.stargazers_count }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="github-preview" v-if="openRepo.full_name">
+                <div class="gh-preview-header">
+                    <div class="row nopadding">
+                        <div class="col nopadding flex-center">
+                            <div>
+                                <h3 class="repo-preview-name">{{ openRepo.description }}</h3>
+                                <div>
+                                    <div class="svg-icon inline" :style="{'--url': 'url(\'./assets/github.svg\')'}"></div>
+                                    <a class="repo-url" target="_blank" :href="openRepo.html_url">{{ openRepo.full_name
+                                        }}</a></div>
+                                <div>⭐ {{ openRepo.stargazers_count }}</div>
+                            </div>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="md-btn md-btn-primary" @click="installThemeRepo(openRepo)">
+                                <span v-if="!themesInstalled.includes(openRepo.full_name)">{{$root.getLz('action.install')}}</span>
+                                <span v-else>{{$root.getLz('action.update')}}</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <div v-html="openRepo.readme" class="github-content"></div>
+            </div>
+            <div class="github-preview" v-else>
+
+            </div>
+            </transition>
+        </div>
+    </div>
+</script>
+<script>
+    Vue.component('plugins-github', {
+        template: "#plugins-github",
+        props: [],
+        data: function () {
+            return {
+                repos: [],
+                openRepo: {
+                    id: -1,
+                    name: '',
+                    description: '',
+                    html_url: '',
+                    stargazers_count: 0,
+                    owner: {
+                        avatar_url: ''
+                    },
+                    readme: ""
+                },
+                themesInstalled: []
+            }
+        },
+        mounted() {
+            this.getRepos();
+            // this.getInstalledThemes();
+        },
+        methods: {
+            getInstalledThemes() {
+                let self = this
+                const themes = ipcRenderer.sendSync("get-themes")
+                // for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
+                themes.forEach(theme => {
+                    if (theme.github_repo !== "") {
+                        self.themesInstalled.push(theme.github_repo)
+                    }
+                })
+            },
+            showRepo(repo) {
+                const self = this
+                const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch(readmeUrl, requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.openRepo = repo
+                        self.openRepo.readme = self.convertReadMe(result);
+                    })
+                    .catch(error => {
+                        self.openRepo = repo
+                        self.openRepo.readme = `This repository doesn't have a README.md file.`;
+                        console.log('error', error)
+                    });
+            },
+            convertReadMe(text) {
+                return marked.parse(text)
+            },
+            installThemeRepo(repo) {
+                let self = this
+                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.plugin.github.install.confirm'), {
+                    repo: repo.full_name
+                });
+                app.confirm(msg, (res) => {
+                    if (res) {
+                        ipcRenderer.once("plugin-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = []
+                                notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
+                                app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
+                                    if (ok) {
+                                        ipcRenderer.invoke("relaunchApp")
+                                    } else {
+                                        return
+                                    }
+                                })
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.plugin.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-plugin", repo.html_url)
+                    }
+                })
+            },
+            installThemeURL() {
+                let self = this
+                app.prompt(app.getLz('settings.prompt.visual.plugin.github.URL'), (result) => {
+                    if (result) {
+                        ipcRenderer.once("plugin-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                app.confirm(app.getLz("settings.prompt.visual.plugin.github.success"), (ok)=>{
+                                    if (ok) {
+                                        ipcRenderer.invoke("relaunchApp")
+                                    } else {
+                                        return
+                                    }
+                                })
+                                notyf.success(app.getLz('settings.notyf.visual.plugin.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.plugin.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-plugin", result)
+                    }
+                });
+            },
+            getRepos() {
+                let self = this
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch("https://api.github.com/search/repositories?q=topic:cidermusicplugin fork:true&per_page=100", requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.repos = JSON.parse(result).items
+                    })
+                    .catch(error => console.log('error', error));
+            }
+        }
+    })
+</script>
diff --git a/src/renderer/views/components/settings-themes-github.ejs b/src/renderer/views/components/settings-themes-github.ejs
new file mode 100644
index 00000000..24f4aec9
--- /dev/null
+++ b/src/renderer/views/components/settings-themes-github.ejs
@@ -0,0 +1,197 @@
+<script type="text/x-template" id="themes-github">
+    <div class="github-themes-page">
+        <div class="gh-header">
+            <div class="row">
+                <div class="col nopadding">
+                    <h1 class="header-text">{{$root.getLz('settings.header.visual.theme.github.page')}}</h1>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.openSettingsPage('styles')">
+                        {{$root.getLz('settings.option.visual.theme.manageStyles')}}
+                    </button>
+                </div>
+                <div class="col-auto flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.checkForThemeUpdates()">
+                        {{ $root.getLz('settings.option.visual.theme.checkForUpdates') }}
+                    </button>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
+                        {{$root.getLz('settings.option.visual.theme.github.download')}}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="gh-content">
+            <div class="repos-list">
+                <ul class="list-group list-group-flush">
+                    <li @click="showRepo(repo)" class="list-group-item list-group-item-dark"
+                        :style="{'background': (repo.id == openRepo.id) ? 'var(--keyColor)' : ''}"
+                        v-for="repo in repos">
+                        <div class="row">
+                            <div class="col flex-center">
+                                <div>
+                                    <h4 class="repo-name">{{ (repo.description != null) ? repo.description :
+                                        repo.full_name }}</h4>
+                                    <div>⭐ {{ repo.stargazers_count }}</div>
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                <span v-if="themesInstalled.includes(repo.full_name.toLowerCase())"
+                                      class="codicon codicon-cloud-download"></span>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="github-preview" v-if="openRepo.full_name">
+                <div class="gh-preview-header">
+                    <div class="row nopadding">
+                        <div class="col nopadding flex-center">
+                            <div>
+                                <h3 class="repo-preview-name">{{ openRepo.description }}</h3>
+                                <div>
+                                    <div class="svg-icon inline"
+                                         :style="{'--url': 'url(\'./assets/github.svg\')'}"></div>
+                                    <a class="repo-url" target="_blank" :href="openRepo.html_url">{{ openRepo.full_name
+                                        }}</a></div>
+                                <div>⭐ {{ openRepo.stargazers_count }}</div>
+                            </div>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="md-btn md-btn-primary" @click="installThemeRepo(openRepo)">
+                                <span v-if="!themesInstalled.includes(openRepo.full_name.toLowerCase())">{{$root.getLz('action.install')}}</span>
+                                <span v-else>{{$root.getLz('action.update')}}</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <div v-html="openRepo.readme" class="github-content"></div>
+            </div>
+            <div class="github-preview" v-else>
+
+            </div>
+            </transition>
+        </div>
+    </div>
+</script>
+<script>
+    Vue.component('themes-github', {
+        template: "#themes-github",
+        props: [],
+        data: function () {
+            return {
+                repos: [],
+                openRepo: {
+                    id: -1,
+                    name: '',
+                    description: '',
+                    html_url: '',
+                    stargazers_count: 0,
+                    owner: {
+                        avatar_url: ''
+                    },
+                    readme: ""
+                },
+                themesInstalled: [],
+                themes: []
+            }
+        },
+        mounted() {
+            this.themes = ipcRenderer.sendSync("get-themes")
+            this.getRepos();
+            this.getInstalledThemes();
+        },
+        methods: {
+            openThemesFolder() {
+                ipcRenderer.invoke("open-path", "themes")
+            },
+            getInstalledThemes() {
+                let self = this
+                const themes = ipcRenderer.sendSync("get-themes")
+                // for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
+                themes.forEach(theme => {
+                    if (theme.github_repo !== "" && typeof theme.commit != "") {
+                        self.themesInstalled.push(theme.github_repo.toLowerCase())
+                    }
+                })
+            },
+            showRepo(repo) {
+                const self = this
+                const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch(readmeUrl, requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.openRepo = repo
+                        self.openRepo.readme = self.convertReadMe(result);
+                    })
+                    .catch(error => {
+                        self.openRepo = repo
+                        self.openRepo.readme = `This repository doesn't have a README.md file.`;
+                        console.log('error', error)
+                    });
+            },
+            convertReadMe(text) {
+                return marked.parse(text)
+            },
+            installThemeRepo(repo) {
+                let self = this
+                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
+                    repo: repo.full_name
+                });
+                app.confirm(msg, (res) => {
+                    if (res) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                self.getInstalledThemes()
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", repo.html_url)
+                    }
+                })
+            },
+            installThemeURL() {
+                let self = this
+                app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                    if (result) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", result)
+                    }
+                });
+            },
+            getRepos() {
+                let self = this
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true&per_page=100", requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        let items = JSON.parse(result).items
+                        self.repos = items
+                    })
+                    .catch(error => console.log('error', error));
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/components/settings-themes.ejs b/src/renderer/views/components/settings-themes.ejs
new file mode 100644
index 00000000..57f38d10
--- /dev/null
+++ b/src/renderer/views/components/settings-themes.ejs
@@ -0,0 +1,367 @@
+<script type="text/x-template" id="installed-themes">
+    <div class="installed-themes-page">
+        <div class="gh-header">
+            <div class="row">
+                <div class="col nopadding">
+                    <h1 class="header-text">
+                        {{ $root.getLz("settings.option.visual.theme.manageStyles") }}
+                    </h1>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.openSettingsPage('github-themes')">
+                        {{$root.getLz('settings.option.visual.theme.github.explore')}}
+                    </button>
+                </div>
+                <div class="col-auto  flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.checkForThemeUpdates()">
+                        {{ $root.getLz('settings.option.visual.theme.checkForUpdates') }}
+                    </button>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="openThemesFolder()">
+                        {{$root.getLz('settings.option.visual.theme.github.openfolder')}}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="gh-content">
+            <div class="repos-list">
+                <div class="repo-header">
+                    <h4>{{$root.getLz('settings.option.visual.theme.github.available')}}</h4>
+                </div>
+                <ul class="list-group list-group-flush">
+                    <template v-for="theme in themes">
+                        <li @click="addStyle(theme.file)"
+                        @contextmenu="contextMenu($event, theme)"
+                        class="list-group-item list-group-item-dark"
+                        :class="{'applied': $root.cfg.visual.styles.includes(theme.file)}">
+
+                            <b-row>
+                                <b-col class="themeLabel">{{theme.name}}</b-col>
+                                <template v-if="$root.cfg.visual.styles.includes(theme.file)">
+                                    <b-col sm="auto" v-if="theme.pack">
+                                        <button class="themeContextMenu codicon codicon-package"></button>
+                                    </b-col>
+                                    <b-col sm="auto">
+                                        <button class="themeContextMenu codicon codicon-check"></button>
+                                    </b-col>
+                                </template>
+                                <template v-else>
+                                    <b-col sm="auto" v-if="theme.pack">
+                                        <button class="themeContextMenu codicon codicon-package"></button>
+                                    </b-col>
+                                    <b-col sm="auto">
+                                        <button @click.stop="contextMenu($event, theme)" class="themeContextMenu codicon codicon-list-unordered"></button>
+                                    </b-col>
+                                </template>
+
+                            </b-row>
+                        </li>
+                        <li @click="addStyle(packEntry.file)"
+                        @contextmenu="contextMenu($event, theme)"
+                        class="list-group-item list-group-item-dark addon"
+                        v-for="packEntry in theme.pack"
+                        :class="{'applied': $root.cfg.visual.styles.includes(packEntry.file)}"
+                        v-if="theme.pack">
+
+                        <b-row>
+                            <b-col class="themeLabel">{{packEntry.name}}</b-col>
+                            <template v-if="$root.cfg.visual.styles.includes(packEntry.file)">
+                                <b-col sm="auto">
+                                    <button class="themeContextMenu codicon codicon-check"></button>
+                                </b-col>
+                            </template>
+                            <template v-else>
+                                <b-col sm="auto">
+                                    <button class="themeContextMenu codicon codicon-diff-added"></button>
+                                </b-col>
+                            </template>
+                        </b-row>
+                    </li>
+                    </template>
+                </ul>
+            </div>
+
+            <div class="style-editor-container">
+                <div class="repo-header">
+                    <h4>{{ $root.getLz("settings.option.visual.theme.github.applied") }} </h4>
+                </div>
+                <stylestack-editor ref="stackEditor"  v-if="themes.length != 0" :themes="themes"/>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+    // 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">
+                        <b-row>
+                            <b-col sm="auto">
+                                <div class="handle codicon codicon-grabber"></div>
+                            </b-col>
+                            <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
+                            <b-col sm="auto">
+                                <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
+                            </b-col>
+                        </b-row>
+                        </b-list-group-item>
+                </draggable>
+            </div>
+        `,
+        props: {
+            themes: {
+                type: Array,
+                default: [],
+                required: true
+            }
+        },
+        data: function () {
+            return {
+                selected: null,
+                newTheme: null,
+                themeList: []
+            }
+        },
+        mounted() {
+            console.log(this.themes)
+            this.themeList = [...this.themes]
+
+            this.themeList.forEach(theme => {
+                if (theme.pack) {
+                    theme.pack.forEach(packEntry => {
+                        packEntry.file = theme.file.replace('index.less', '') + packEntry.file
+                        this.themeList.push(packEntry)
+                    })
+                }
+            })
+        },
+        methods: {
+            gitHubExplore() {
+                this.$root.openSettingsPage("github-themes")
+            },
+            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('installed-themes', {
+        template: "#installed-themes",
+        props: [],
+        data: function () {
+            return {
+                repos: [],
+                openRepo: {
+                    id: -1,
+                    name: '',
+                    description: '',
+                    html_url: '',
+                    stargazers_count: 0,
+                    owner: {
+                        avatar_url: ''
+                    },
+                    readme: ""
+                },
+                themesInstalled: [],
+                themes: []
+            }
+        },
+        mounted() {
+            this.getThemesList();
+        },
+        methods: {
+            getThemesList() {
+                let self = this
+                let themes = ipcRenderer.sendSync("get-themes")
+                themes.unshift({
+                    name: "Acrylic Grain",
+                    file: "grain.less"
+                })
+                themes.unshift({
+                    name: "Sweetener",
+                    file: "sweetener.less"
+                })
+                themes.unshift({
+                    name: "Reduce Visuals",
+                    file: "reduce_visuals.less"
+                })
+                // themes.unshift({
+                //     name: "Inline Drawer",
+                //     file: "inline_drawer.less"
+                // })
+                themes.unshift({
+                    name: "Dark",
+                    file: "dark.less"
+                })
+                this.themes = themes
+            },
+            contextMenu(event, theme) {
+                let self = this
+                let menu = {
+                    items: {
+                        "uninstall": {
+                            name: app.getLz("settings.option.visual.theme.uninstall"),
+                            disabled: true,
+                            action: () => {
+                                app.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
+                                    theme: theme.name ?? theme.file
+                                }), (res) => {
+                                    if (res) {
+                                        console.debug(theme)
+                                        ipcRenderer.once("theme-uninstalled", (event, args) => {
+                                            console.debug(event, args)
+                                            self.getThemesList()
+                                        })
+                                        ipcRenderer.invoke("uninstall-theme", theme.path)
+                                    }
+                                })
+
+                            }
+                        },
+                        "viewInfo": {
+                            name: app.getLz("settings.option.visual.theme.viewInfo"),
+                            disabled: true,
+                            action: () => {
+
+                            }
+                        }
+                    }
+                }
+                if (theme.path) {
+                    menu.items.uninstall.disabled = false
+                }
+                this.$root.showMenuPanel(menu, event)
+            },
+            openThemesFolder() {
+                ipcRenderer.invoke("open-path", "themes")
+            },
+            getInstalledThemes() {
+                let self = this
+                const themes = ipcRenderer.sendSync("get-themes")
+                // for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
+                themes.forEach(theme => {
+                    if (theme.github_repo !== "" && typeof theme.commit != "") {
+                        self.themesInstalled.push(theme.github_repo.toLowerCase())
+                    }
+                })
+            },
+            addStyle(filename) {
+                this.$refs.stackEditor.addStyle(filename)
+            },
+            showRepo(repo) {
+                const self = this
+                const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch(readmeUrl, requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.openRepo = repo
+                        self.openRepo.readme = self.convertReadMe(result);
+                    })
+                    .catch(error => {
+                        self.openRepo = repo
+                        self.openRepo.readme = `This repository doesn't have a README.md file.`;
+                        console.log('error', error)
+                    });
+            },
+            convertReadMe(text) {
+                return marked.parse(text)
+            },
+            installThemeRepo(repo) {
+                let self = this
+                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
+                    repo: repo.full_name
+                });
+                app.confirm(msg, (res) => {
+                    if (res) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                self.getInstalledThemes()
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", repo.html_url)
+                    }
+                })
+            },
+            installThemeURL() {
+                let self = this
+                app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                    if (result) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", result)
+                    }
+                });
+            },
+            getRepos() {
+                let self = this
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        let items = JSON.parse(result).items
+                        self.repos = items
+                    })
+                    .catch(error => console.log('error', error));
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index 1236d71d..402c2cba 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -221,7 +221,7 @@
                                     {{$root.getLz('settings.option.general.keybindings')}}
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="app.$store.state.pageState.settings.currentTabIndex = 7">
+                                    <button class="md-btn" @click="$root.openSettingsPage('keybindings')">
                                         {{$root.getLz('action.open')}}
                                     </button>
                                 </div>
@@ -409,6 +409,17 @@
                     <audiolabs-page/>
                 </div>
             </b-tab>
+            <b-tab>
+                <template #title>
+                    <div><svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles" /></div>
+                    <div>
+                        {{ $root.getLz('settings.header.visual.styles') }}
+                    </div>
+                </template>
+                <div class="settings-tab-content">
+                    <installed-themes/>
+                </div>
+            </b-tab>
             <b-tab>
                 <template #title>
                     <div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
@@ -423,7 +434,7 @@
                             <span>{{$root.getLz('settings.header.visual')}}</span>
                         </div>
                         <div class="settings-option-body">
-                            <div class="md-option-line">
+                        <!--<div class="md-option-line">
                                 <div class="md-option-segment">
                                     {{$root.getLz('settings.header.visual.theme')}}
                                 </div>
@@ -432,7 +443,7 @@
                                         {{$root.getLz('settings.option.visual.theme.manageStyles')}}
                                     </button>
                                 </div>
-                            </div>
+                            </div>-->
                             <div class="md-option-line">
                                 <div class="md-option-segment">
                                     {{$root.getLz("settings.option.visual.windowStyle")}}
@@ -650,6 +661,17 @@
                     </div>
                 </div>
             </b-tab>
+            <b-tab>
+                <template #title>
+                    <div><svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins" /></div>
+                    <div>
+                        {{ $root.getLz('term.plugins') }}
+                    </div>
+                </template>
+                <div class="settings-tab-content">
+                    <plugins-github/>
+                </div>
+            </b-tab>
             <b-tab>
                 <template #title>
                     <div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
@@ -1227,16 +1249,16 @@
                         </div>
                         <div class="settings-option-body">
 
-                            <div class="md-option-line">
+                            <!--<div class="md-option-line">
                                 <div class="md-option-segment">
                                     {{$root.getLz('settings.option.visual.plugin.github.explore')}}
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="$root.appRoute('plugins-github')">{{
+                                    <button class="md-btn" @click="$root.openSettingsPage('github-plugins')">{{
                                         $root.getLz("settings.option.visual.plugin.github.explore") }}
                                     </button>
                                 </div>
-                            </div>
+                            </div> -->
 
                             <div class="md-option-line">
                                 <div class="md-option-segment">
@@ -1353,220 +1375,25 @@
             </b-tab>
             <!--keybinds Settings -->
             <b-tab id="hid">
-                <div class="keybinds-page">
-                    <div class="md-option-header">
-                        <span>{{$root.getLz('settings.option.general.keybindings')}}</span>
-                    </div>
-                    <div class="settings-option-body">
-                        <div class="md-option-header-sub">
-                            <span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.search')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('search')">
-                                    {{app.cfg.general.keybindings.search.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.listnow')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('listnow')">
-                                    {{app.cfg.general.keybindings.listnow.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.browse')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('browse')">
-                                    {{app.cfg.general.keybindings.browse.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.recentAdd')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('recentAdd')">
-                                    {{app.cfg.general.keybindings.recentAdd.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.songs')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('songs')">
-                                    {{app.cfg.general.keybindings.songs.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.albums')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('albums')">
-                                    {{app.cfg.general.keybindings.albums.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.artists')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('artists')">
-                                    {{app.cfg.general.keybindings.artists.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-header-sub">
-                            <span>{{$root.getLz('settings.option.general.keybindings.session')}}</span>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.private')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('togglePrivateSession')">
-                                    {{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-header-sub">
-                            <span>{{$root.getLz('settings.option.general.keybindings.control')}}</span>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.remote')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('webRemote')">
-                                    {{app.cfg.general.keybindings.webRemote.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.audio')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('audioSettings')">
-                                    {{app.cfg.general.keybindings.audioSettings.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.plugins')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('pluginMenu')">
-                                    {{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.cast')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('castToDevices')">
-                                    {{app.cfg.general.keybindings.castToDevices.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.settings')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('settings')">
-                                    {{app.cfg.general.keybindings.settings.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-header-sub" v-if="app.platform !== 'darwin'">
-                            <span>{{$root.getLz('settings.option.general.keybindings.interface')}}</span>
-                        </div>
-                        <div class="md-option-line" v-if="app.platform !== 'darwin'">
-                            <div class="md-option-segment">
-                                {{$root.getLz('term.zoomin')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('zoomn')">
-                                    {{app.cfg.general.keybindings.zoomn.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line" v-if="app.platform !== 'darwin'">
-                            <div class="md-option-segment">
-                                {{$root.getLz('term.zoomout')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('zoomt')">
-                                    {{app.cfg.general.keybindings.zoomt.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-line" v-if="app.platform !== 'darwin'">
-                            <div class="md-option-segment">
-                                {{$root.getLz('term.zoomreset')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('zoomrst')">
-                                    {{app.cfg.general.keybindings.zoomrst.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <div class="md-option-header-sub">
-                            <span>{{$root.getLz('settings.option.general.keybindings.advanced')}}</span>
-                        </div>
-                        <div class="md-option-line">
-                            <div class="md-option-segment">
-                                {{$root.getLz('settings.description.developer')}}
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn md-btn-small md-btn-block"
-                                        @click="keyBindUpdate('openDeveloperTools')">
-                                    {{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
-                                </button>
-                            </div>
-                        </div>
-                        <button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
-                            {{$root.getLz('term.reset')}}
-                        </button>
-                    </div>        
-                </div>
+                <template>
+                    <keybinds-settings/>
+                </template>
             </b-tab>
             <!--keybinds-settings -->
+            <!--Github-theme-settings -->
+            <b-tab id="hid">
+                <template>
+                    <themes-github/>
+                </template>
+            </b-tab>
+            <!--Github-theme-settings -->
+            <!--Github-Plugins -->
+            <b-tab id="hid">
+                <template>
+                    <plugins-github/>
+                </template>
+            </b-tab>
+            <!--Github-Plugins -->
             <!-- Connect Settings -->
             <!-- Not Prod Ready
             <b-tab :title="$root.getLz('settings.header.connect')">
@@ -1694,7 +1521,7 @@
                 })
             },
             gitHubExplore() {
-                app.appRoute("themes-github")
+                app.openSettingsPage("github-themes")
             },
             copyLogs() {
                 ipcRenderer.send('fetch-log')
@@ -1827,84 +1654,6 @@
                 const token = document.getElementById('lfmToken').value;
                 ipcRenderer.send('lastfm:auth', token);
             },
-            /* keybindings */
-            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 = '20';
-                blur.style.display = 'flex';
-                blur.style.alignItems = 'center';
-                blur.style.justifyContent = 'center';
-                blur.style.fontSize = '2em';
-                blur.style.color = 'white';
-                blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
-                document.body.appendChild(blur);
-
-                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'));
-                                    app.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", "F"];
-                app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
-                app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
-                app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
-                app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
-                app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "A"];
-                app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
-                app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
-                app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
-                app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
-                app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
-                app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
-                app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
-                app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
-                app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
-                app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
-                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'));
-                app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
-                    if (ok) ipcRenderer.invoke("relaunchApp")
-                })
-            },            
-            /* keybindings */
             openLocalSongsPathMenu() {
                 app.modals.pathMenu = true
             }
diff --git a/src/renderer/views/pages/installed-themes.ejs b/src/renderer/views/pages/installed-themes.ejs
index dbb99395..453fd424 100644
--- a/src/renderer/views/pages/installed-themes.ejs
+++ b/src/renderer/views/pages/installed-themes.ejs
@@ -1,5 +1,7 @@
-<script type="text/x-template" id="installed-themes">
-    <div class="content-inner github-themes-page installed-themes-page">
+//Not used for Now
+
+<!-- <script type="text/x-template" id="installed-themes">
+    <div class="installed-themes-page">
         <div class="gh-header">
             <div class="row">
                 <div class="col nopadding">
@@ -22,7 +24,6 @@
                         {{$root.getLz('settings.option.visual.theme.github.openfolder')}}
                     </button>
                 </div>
-
             </div>
         </div>
         <div class="gh-content">
@@ -365,4 +366,4 @@
             }
         }
     })
-</script>
\ No newline at end of file
+</script> -->
\ No newline at end of file
diff --git a/src/renderer/views/pages/plugins-github.ejs b/src/renderer/views/pages/plugins-github.ejs
index 15a08986..fb4d46d7 100644
--- a/src/renderer/views/pages/plugins-github.ejs
+++ b/src/renderer/views/pages/plugins-github.ejs
@@ -1,5 +1,7 @@
-<script type="text/x-template" id="plugins-github">
-    <div class="content-inner github-themes-page">
+//Not used for Now
+
+<!-- <script type="text/x-template" id="plugins-github">
+    <div class="github-themes-page">
         <div class="gh-header">
             <div class="row">
                 <div class="col nopadding">
@@ -186,3 +188,4 @@
         }
     })
 </script>
+ -->
\ No newline at end of file
diff --git a/src/renderer/views/pages/themes-github.ejs b/src/renderer/views/pages/themes-github.ejs
index afd9f895..a5f7dbab 100644
--- a/src/renderer/views/pages/themes-github.ejs
+++ b/src/renderer/views/pages/themes-github.ejs
@@ -1,5 +1,7 @@
-<script type="text/x-template" id="themes-github">
-    <div class="content-inner github-themes-page">
+//Not used for Now
+
+<!-- <script type="text/x-template" id="themes-github">
+    <div class="github-themes-page">
         <div class="gh-header">
             <div class="row">
                 <div class="col nopadding">
@@ -195,3 +197,4 @@
         }
     })
 </script>
+ -->
\ No newline at end of file