diff --git a/src/renderer/style.less b/src/renderer/style.less
index 341e71a4..1f0f0863 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -68,10 +68,10 @@ body[platform='linux'] {
 body.notransparency::before {
   content: "";
   position: absolute;
-  top:0;
-  left:0;
-  right:0;
-  bottom:0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   opacity: 0.5;
   background-image: url(data:image/png;base64,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);
 }
@@ -145,7 +145,7 @@ body.notransparency::before {
 }
 
 .bgGradientMaterial-base {
-  position:relative;
+  position: relative;
 }
 
 .bgGradientMaterial-base::before {
@@ -235,13 +235,14 @@ input[type="text"], input[type="number"] {
   z-index: -1;
 
   .bg-artwork.a {
-    top:0;
-    left:0;
+    top: 0;
+    left: 0;
     //mix-blend-mode: luminosity;
   }
+
   .bg-artwork.b {
-    bottom:0;
-    right:0;
+    bottom: 0;
+    right: 0;
     animation-direction: reverse;
     animation-delay: 10s;
   }
@@ -348,94 +349,94 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .content-inner.centered {
-height: 100%;
-display: flex;
-flex-flow: column;
-justify-content: center;
-align-items: center;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .app-drawer {
-width: 300px;
-flex: 0 0 auto;
-position: absolute;
-right: 16px;
-top: 3%;
-background: #1c1c1c8f;
-border-radius: 12px;
-z-index: 9;
-height: 94%;
-backdrop-filter: blur(40px) saturate(180%);
-box-shadow: var(--ciderShadow-Generic);
-overflow: hidden;
-
-.bgArtworkMaterial {
-  display: none;
+  width: 300px;
+  flex: 0 0 auto;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  right: 16px;
+  top: 3%;
+  background: #1c1c1c8f;
+  border-radius: 12px;
+  z-index: 9;
+  height: 94%;
+  backdrop-filter: blur(40px) saturate(180%);
+  box-shadow: var(--ciderShadow-Generic);
+  overflow: hidden;
 
-  .bg-artwork-container .bg-artwork {
-    filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
+  .bgArtworkMaterial {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    .bg-artwork-container .bg-artwork {
+      filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
+    }
   }
 }
-}
 
 .search-input-container {
-position: relative;
+  position: relative;
 }
 
 .search-input {
-width: 100%;
-padding: 6px;
-border-radius: 6px;
-border: 1px solid rgb(200 200 200 / 10%);
-font-family: inherit;
-font-size: 14px;
-background: rgb(100 100 100 / 25%);
-color: rgb(200 200 200);
-font-weight: 500;
-padding-left: 32px;
-position: relative;
-filter: contrast(0.1);
+  width: 100%;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid rgb(200 200 200 / 10%);
+  font-family: inherit;
+  font-size: 14px;
+  background: rgb(100 100 100 / 25%);
+  color: rgb(200 200 200);
+  font-weight: 500;
+  padding-left: 32px;
+  position: relative;
+  filter: contrast(0.1);
 }
 
 .search-input:focus {
-outline: none;
-border-bottom: 1px solid var(--keyColor);
+  outline: none;
+  border-bottom: 1px solid var(--keyColor);
 }
 
 .search-input--icon {
-content: '';
-width: 100%;
-height: 100%;
-display: block;
-position: absolute;
-top: 0px;
-left: 0px;
-background-image: url('assets/search.svg');
-background-position: 10px;
-background-repeat: no-repeat;
-background-size: 12px;
-pointer-events: none;
-opacity: 0.55;
+  content: '';
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-image: url('assets/search.svg');
+  background-position: 10px;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  pointer-events: none;
+  opacity: 0.55;
 }
 
 .app-sidebar-header {
-font-size: 14px;
-padding: 11px;
-font-weight: 600;
+  font-size: 14px;
+  padding: 11px;
+  font-weight: 600;
 }
 
 .app-sidebar-header-text {
-font-size: 11px;
-margin: 6px 3px;
-font-weight: 600;
-opacity: 0.50;
+  font-size: 11px;
+  margin: 6px 3px;
+  font-weight: 600;
+  opacity: 0.50;
 }
 
 .app-sidebar-footer {
-padding: 11px;
+  padding: 11px;
 
   .app-playback-controls {
     .control-buttons {
@@ -443,6 +444,7 @@ padding: 11px;
       justify-content: center;
       align-content: center;
     }
+
     .volume {
       display: flex;
     }
@@ -450,556 +452,558 @@ padding: 11px;
 }
 
 .app-sidebar-button {
-width: 100%;
-padding: 0px;
-font-family: inherit;
-display: flex;
-border-radius: 6px;
-border: 1px solid rgb(200 200 200 / 5%);
-background: rgb(100 100 100 / 25%);
-color: #eee;
-font-weight: 500;
-align-items: center;
+  width: 100%;
+  padding: 0px;
+  font-family: inherit;
+  display: flex;
+  border-radius: 6px;
+  border: 1px solid rgb(200 200 200 / 5%);
+  background: rgb(100 100 100 / 25%);
+  color: #eee;
+  font-weight: 500;
+  align-items: center;
 
-&.active {
-  background: rgb(200 200 200 / 15%);
-  animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
-}
+  &.active {
+    background: rgb(200 200 200 / 15%);
+    animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
+  }
 }
 
 @keyframes usermenuBtnClick {
-0% {
-  transform: translateY(0px);
-}
+  0% {
+    transform: translateY(0px);
+  }
 
-50% {
-  transform: translateY(-6px);
-}
+  50% {
+    transform: translateY(-6px);
+  }
 
-100% {
-  transform: translateY(0px);
-}
+  100% {
+    transform: translateY(0px);
+  }
 }
 
 .app-sidebar-button > .sidebar-user-icon {
-width: 32px;
-height: 32px;
-border-radius: 100%;
-background-image: var(--artwork);
-margin: 10px;
-flex: 0 0 auto;
-box-shadow: var(--mediaItemShadow);
-background-size: contain;
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  background-image: var(--artwork);
+  margin: 10px;
+  flex: 0 0 auto;
+  box-shadow: var(--mediaItemShadow);
+  background-size: contain;
 }
 
 .app-sidebar-button > .sidebar-user-text {
-width: 100%;
-display: flex;
-font-size: 14px;
-flex-direction: column;
+  width: 100%;
+  display: flex;
+  font-size: 14px;
+  flex-direction: column;
 }
 
 .app-sidebar-button > .sidebar-user-text .fullname {
-text-align: left;
+  text-align: left;
 }
 
 .app-sidebar-button > .sidebar-user-text .handle-text {
-font-size: 12px;
-opacity: 0.7;
-text-align: left;
+  font-size: 12px;
+  opacity: 0.7;
+  text-align: left;
 }
 
 .app-sidebar-notification {
-text-align: center;
-font-size: 12px;
-min-height: 60px;
-display: flex;
-justify-content: center;
-align-items: center;
-border-top: 1px solid rgb(200 200 200 / 15%);
-background: rgb(0 0 0 / 15%);
-flex-direction: column;
-padding: 20px 0px;
+  text-align: center;
+  font-size: 12px;
+  min-height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid rgb(200 200 200 / 15%);
+  background: rgb(0 0 0 / 15%);
+  flex-direction: column;
+  padding: 20px 0px;
 
-&.libraryNotification {
-  flex-direction: row;
-  padding: 0px;
-  .message {
-    flex-grow: 1;
+  &.libraryNotification {
+    flex-direction: row;
+    padding: 0px;
+
+    .message {
+      flex-grow: 1;
+    }
+
+    .spinner {
+      width: 46px;
+      height: 30px;
+      margin-left: 1em;
+    }
   }
-  .spinner {
-    width: 46px;
-    height: 30px;
-    margin-left: 1em;
-  }
-}
 }
 
 .app-sidebar-content {
-padding: 8px;
-overflow-y: scroll;
-overflow-y: overlay;
-height: 100%;
+  padding: 8px;
+  overflow-y: scroll;
+  overflow-y: overlay;
+  height: 100%;
 }
 
 #cmenu() {
-.container {
-  position: absolute;
-  width: 100%;
-  padding: 10px;
-  z-index: 1;
-}
-
-.body {
-  background: #242424;
-  padding: 6px;
-  border-radius: 6px;
-  width: 100%;
-  box-shadow: var(--ciderShadow-Generic);
-}
-
-.item {
-  background: transparent;
-  display: block;
-  width: 100%;
-  text-align: left;
-  color: #eee;
-  font-family: inherit;
-  font-size: 15px;
-  padding: 8px 12px;
-  border: 0px;
-  appearance: none;
-  border-radius: 6px;
-  margin: 2px 0px;
-
-  &:hover {
-    background: var(--keyColor);
+  .container {
+    position: absolute;
+    width: 100%;
+    padding: 10px;
+    z-index: 1;
+  }
+
+  .body {
+    background: #242424;
+    padding: 6px;
+    border-radius: 6px;
+    width: 100%;
+    box-shadow: var(--ciderShadow-Generic);
+  }
+
+  .item {
+    background: transparent;
+    display: block;
+    width: 100%;
+    text-align: left;
+    color: #eee;
+    font-family: inherit;
+    font-size: 15px;
+    padding: 8px 12px;
+    border: 0px;
+    appearance: none;
+    border-radius: 6px;
+    margin: 2px 0px;
+
+    &:hover {
+      background: var(--keyColor);
+    }
   }
-}
 }
 
 .search-hints-container {
-top: 44px;
-#cmenu.container();
+  top: 44px;
+  #cmenu.container();
 
-.search-hints {
-  #cmenu.body();
+  .search-hints {
+    #cmenu.body();
 
-  .search-hint {
-    #cmenu.item();
+    .search-hint {
+      #cmenu.item();
+    }
   }
 }
-}
 
 .usermenu-container {
-bottom: 66px;
-#cmenu.container();
+  bottom: 66px;
+  #cmenu.container();
 
-.usermenu-body {
-  #cmenu.body();
+  .usermenu-body {
+    #cmenu.body();
 
-  .usermenu-item {
-    #cmenu.item();
+    .usermenu-item {
+      #cmenu.item();
+    }
   }
 }
-}
 
 .context-menu {
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-background: rgba(0, 0, 0, 0.0);
-z-index: 100;
-
-.context-menu-item {
-  background: transparent;
-  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  text-align: left;
-  color: #eee;
-  font-family: inherit;
-  font-size: 14px;
-  padding: 6px 12px;
-  border: 0px;
-  appearance: none;
-  border-radius: 6px;
-  margin: 2px 0px;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.0);
+  z-index: 100;
 
-  &:hover {
-    background: var(--selected);
-    cursor: pointer;
+  .context-menu-item {
+    background: transparent;
+    display: flex;
+    width: 100%;
+    text-align: left;
+    color: #eee;
+    font-family: inherit;
+    font-size: 14px;
+    padding: 6px 12px;
+    border: 0px;
+    appearance: none;
+    border-radius: 6px;
+    margin: 2px 0px;
+
+    &:hover {
+      background: var(--selected);
+      cursor: pointer;
+    }
+
+    &:active {
+      background: var(--selected-click);
+    }
   }
 
-  &:active {
-    background: var(--selected-click);
-  }
-}
+  .context-menu-body {
+    background: #242424;
+    padding: 6px;
+    border-radius: 6px;
+    box-shadow: var(--ciderShadow-Generic);
 
-.context-menu-body {
-  background: #242424;
-  padding: 6px;
-  border-radius: 6px;
-  box-shadow: var(--ciderShadow-Generic);
+    &.context-menu-open {
+      animation-duration: .10s;
+      animation-name: contextMenuIn;
+      animation-iteration-count: 1;
+      animation-easings: var(--appleEase);
+    }
 
-  &.context-menu-open {
-    animation-duration: .10s;
-    animation-name: contextMenuIn;
-    animation-iteration-count: 1;
-    animation-easings: var(--appleEase);
+    &.context-menu-close {
+      animation-duration: .10s;
+      animation-name: contextMenuOut;
+      animation-iteration-count: 1;
+      animation-easings: var(--appleEase);
+    }
   }
-
-  &.context-menu-close {
-    animation-duration: .10s;
-    animation-name: contextMenuOut;
-    animation-iteration-count: 1;
-    animation-easings: var(--appleEase);
-  }
-}
 }
 
 @keyframes contextMenuIn {
-0% {
-  transform: scale(0.9);
-  opacity: 0;
-}
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
 
-100% {
-  transform: scale(1);
-  opacity: 1;
-}
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 @keyframes contextMenuOut {
-0% {
-  transform: scale(1);
-  opacity: 1;
-}
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
 
-100% {
-  transform: scale(0.9);
-  opacity: 0;
-}
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
 }
 
 .hidden-opacity {
-opacity: 0;
-height: 0px;
-width: 0px;
-margin: 0px;
+  opacity: 0;
+  height: 0px;
+  width: 0px;
+  margin: 0px;
 }
 
 .spinner {
-background-image: url("assets/spinner.svg");
-background-position: center;
-background-repeat: no-repeat;
-background-size: contain;
-width: 50px;
-height: 50px;
-display: inline-block;
+  background-image: url("assets/spinner.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
 }
 
 .app-sidebar-content::-webkit-scrollbar {
-display: none;
+  display: none;
 }
 
 .app-sidebar-content:hover::-webkit-scrollbar {
-display: initial;
+  display: initial;
 }
 
 .app-sidebar-item {
-display: flex;
-width: 100%;
-padding: 8px 12px;
-font-weight: 400;
-font-family: inherit;
-font-size: 14px;
-margin: 6px 0px;
-border: 1px solid transparent;
-border-radius: 6px;
-background: transparent;
-color: #eee;
-transition: transform .1s;
-text-align: left;
+  display: flex;
+  width: 100%;
+  padding: 8px 12px;
+  font-weight: 400;
+  font-family: inherit;
+  font-size: 14px;
+  margin: 6px 0px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #eee;
+  transition: transform .1s;
+  text-align: left;
 
-&.app-sidebar-item-playlist {
-  -webkit-user-drag: element;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  &.app-sidebar-item-playlist {
+    -webkit-user-drag: element;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .app-sidebar-item:hover {
-border: 1px solid rgb(200 200 200 / 5%);
-background: rgb(200 200 200 / 15%);
+  border: 1px solid rgb(200 200 200 / 5%);
+  background: rgb(200 200 200 / 15%);
 }
 
 .app-sidebar-item:active {
-border: 1px solid rgb(200 200 200 / 5%);
-background: rgb(200 200 200 / 15%);
-transform: scale(0.98);
-transition: transform 0s;
+  border: 1px solid rgb(200 200 200 / 5%);
+  background: rgb(200 200 200 / 15%);
+  transform: scale(0.98);
+  transition: transform 0s;
 }
 
 .app-sidebar-item.active {
-border: 1px solid rgb(200 200 200 / 5%);
-background: rgb(200 200 200 / 15%);
-transform: scale(1);
-transition: transform 0s;
+  border: 1px solid rgb(200 200 200 / 5%);
+  background: rgb(200 200 200 / 15%);
+  transform: scale(1);
+  transition: transform 0s;
 }
 
 .app-sidebar-item.active::after {
-content: '';
-width: 4px;
-height: 16px;
-display: block;
-position: absolute;
-top: calc(100% - 72%);
-border-radius: 10px;
-left: 0px;
-background: var(--keyColor);
+  content: '';
+  width: 4px;
+  height: 16px;
+  display: block;
+  position: absolute;
+  top: calc(100% - 72%);
+  border-radius: 10px;
+  left: 0px;
+  background: var(--keyColor);
 }
 
 .app-chrome {
-background: var(--color1);
-width: 100%;
-height: var(--chromeHeight);
-display: flex;
-flex-direction: row;
--webkit-app-region: drag;
+  background: var(--color1);
+  width: 100%;
+  height: var(--chromeHeight);
+  display: flex;
+  flex-direction: row;
+  -webkit-app-region: drag;
 }
 
 .mv-chrome {
-position: absolute;
-top: 0;
-right: 0;
-width: 90%;
-height: 55px;
--webkit-app-region: drag;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 90%;
+  height: 55px;
+  -webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome--left,
 .app-chrome .app-chrome--center,
 .app-chrome .app-chrome--right {
-height: 100%;
-width: 100%;
-display: flex;
-justify-content: center;
-align-items: center;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .app-chrome .app-chrome--left {
-width: 30%;
-justify-content: left;
+  width: 30%;
+  justify-content: left;
 }
 
 .app-chrome .app-chrome--center {
-width: 100%;
+  width: 100%;
 }
 
 .app-chrome .app-chrome--right {
-width: 30%;
-justify-content: right;
+  width: 30%;
+  justify-content: right;
 }
 
 .app-chrome .app-chrome-item {
-height: 100%;
-width: auto;
-display: flex;
-justify-content: center;
-align-items: center;
--webkit-app-region: no-drag;
-height: auto;
+  height: 100%;
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-app-region: no-drag;
+  height: auto;
 }
 
 .app-chrome .app-chrome-item.generic {
-width: 50px;
-opacity: 0.70;
+  width: 50px;
+  opacity: 0.70;
 }
 
 .app-chrome .app-chrome-item.volume {
-width: 100px;
-margin-right: 6px;
+  width: 100px;
+  margin-right: 6px;
 }
 
 .app-chrome-item.volume-icon {
-opacity: 0.7;
-background-image: url(http://localhost:9000/assets/volume-up.svg);
-height: 15px;
-width: 30px;
-background-repeat: no-repeat;
+  opacity: 0.7;
+  background-image: url(http://localhost:9000/assets/volume-up.svg);
+  height: 15px;
+  width: 30px;
+  background-repeat: no-repeat;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-transition: all var(--appleTransition);
+  transition: all var(--appleTransition);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
-background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
-transform: scale(1.2);
+  background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+  transform: scale(1.2);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
-background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
-transform: scale(1);
+  background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+  transform: scale(1);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range] {
-width: 100%;
+  width: 100%;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range] {
--webkit-appearance: none;
-height: 4px;
-background: rgba(255, 255, 255, 0.4);
-border-radius: 5px;
-background-size: 70% 100%;
-background-repeat: no-repeat;
+  -webkit-appearance: none;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 5px;
+  background-size: 70% 100%;
+  background-repeat: no-repeat;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
--webkit-appearance: none;
-height: 14px;
-width: 14px;
-border-radius: 50%;
-background: rgb(50 50 50);
-cursor: default;
-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+  -webkit-appearance: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: rgb(50 50 50);
+  cursor: default;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
--webkit-appearance: none;
-box-shadow: none;
-border: none;
-background: transparent;
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
 }
 
 .app-chrome .back-button {
-height: 100%;
-width: 60px;
+  height: 100%;
+  width: 60px;
 }
 
 .app-chrome .app-chrome-item.full-height {
-height: 100%;
+  height: 100%;
 }
 
 .app-chrome .app-chrome-item > .app-title {
-width: 100px;
-font-size: 13px;
-background: url("./logotmp.svg");
-background-size: 90px;
-background-repeat: no-repeat;
-background-position: center;
-height: 100%;
-margin-right: 16px;
-margin-left: 16px;
-image-rendering: -webkit-optimize-contrast;
--webkit-app-region: drag;
+  width: 100px;
+  font-size: 13px;
+  background: url("./logotmp.svg");
+  background-size: 90px;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 100%;
+  margin-right: 16px;
+  margin-left: 16px;
+  image-rendering: -webkit-optimize-contrast;
+  -webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome-item > .window-controls {
-width: 138px;
-font-size: 13px;
-height: 100%;
-display: flex;
+  width: 138px;
+  font-size: 13px;
+  height: 100%;
+  display: flex;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div {
-height: 100%;
-width: 32px;
+  height: 100%;
+  width: 32px;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div:hover {
-background: rgb(200 200 200 / 10%);
+  background: rgb(200 200 200 / 10%);
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.close {
-width: 100%;
-height: 100%;
-background-image: var(--gfx-closeBtn);
-background-position: center;
-background-repeat: no-repeat;
--webkit-app-region: no-drag;
+  width: 100%;
+  height: 100%;
+  background-image: var(--gfx-closeBtn);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-app-region: no-drag;
 
-&:hover {
-  background-color: rgb(196, 43, 28)
-}
+  &:hover {
+    background-color: rgb(196, 43, 28)
+  }
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minmax {
-background-image: var(--gfx-maxBtn);
-background-position: center;
-background-repeat: no-repeat;
--webkit-app-region: no-drag;
-width: 100%;
-height: 100%;
+  background-image: var(--gfx-maxBtn);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-app-region: no-drag;
+  width: 100%;
+  height: 100%;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
-background-image: var(--gfx-restoreBtn);
+  background-image: var(--gfx-restoreBtn);
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minimize {
-background-image: var(--gfx-minBtn);
-background-position: center;
-background-repeat: no-repeat;
--webkit-app-region: no-drag;
-width: 100%;
-height: 100%;
+  background-image: var(--gfx-minBtn);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-app-region: no-drag;
+  width: 100%;
+  height: 100%;
 }
 
 .app-chrome .app-chrome-item.playback-controls {
-width: 80%;
-height: 90%;
-display: flex;
-max-width: 500px;
-border-left: 1px solid rgb(200 200 200 / 8%);
-border-right: 1px solid rgb(200 200 200 / 8%);
+  width: 80%;
+  height: 90%;
+  display: flex;
+  max-width: 500px;
+  border-left: 1px solid rgb(200 200 200 / 8%);
+  border-right: 1px solid rgb(200 200 200 / 8%);
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls {
-display: flex;
-justify-content: center;
-align-content: center;
-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-name {
-font-weight: 600;
-text-align: center;
-font-size: 13px;
-height: 1.3em;
-line-height: 1.3em;
-overflow: hidden;
-max-width: 360px;
+  font-weight: 600;
+  text-align: center;
+  font-size: 13px;
+  height: 1.3em;
+  line-height: 1.3em;
+  overflow: hidden;
+  max-width: 360px;
 
-.song-name-normal {
-  height: inherit;
-}
-
-&.song-artist-marquee {
-  > marquee {
-    //margin-bottom: -3px;
+  .song-name-normal {
+    height: inherit;
+  }
+
+  &.song-artist-marquee {
+    > marquee {
+      //margin-bottom: -3px;
+    }
   }
-}
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
-font-weight: 400;
-font-size: 10px;
-height: 1.2em;
-line-height: 1.3em;
-overflow: hidden;
-margin: 0 0 0.5em;
+  font-weight: 400;
+  font-size: 10px;
+  height: 1.2em;
+  line-height: 1.3em;
+  overflow: hidden;
+  margin: 0 0 0.5em;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-artist {
-font-weight: 400;
-font-size: 12px;
-text-align: center;
-/*height: 1.2em;
-line-height: 1.2em;*/
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  /*height: 1.2em;
+  line-height: 1.2em;*/
   overflow: hidden;
   z-index: 1;
   max-width: 360px;
@@ -1595,7 +1599,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   overflow-x: hidden;
   display: flex;
   flex-flow: column;
-  font-family: 'Inter', 'Noto Sans JP','Source Han Sans SC', 'Source Han Sans HK','Noto Sans SC','Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
+  font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
 }
 
 .lyric-body .no-lyrics {
@@ -1605,7 +1609,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-weight: bold;
   font-size: 26px;
 }
- 
+
 .lyric-line {
   --bgSpeed: 1s;
   appearance: none;
@@ -1690,7 +1694,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 .lyrics-translation {
   font-size: 1.6rem;
   font-weight: 450;
-  font-family: 'Inter', 'Noto Sans JP','Noto Sans SC','Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
+  font-family: 'Inter', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
   filter: contrast(0.5);
 }
 
@@ -1709,7 +1713,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .lyric-body:hover + .lyric-footer, .lyric-footer:hover {
-  display: flex; 
+  display: flex;
 }
 
 .modular-fs .app-drawer .lyric-footer {
@@ -1848,7 +1852,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     padding: 6px 16px;
     margin: 4px;
 
-    >img {
+    > img {
       width: 30px;
       margin: 0px 16px 0px 0px;
       pointer-events: none;
@@ -1857,12 +1861,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       image-rendering: -webkit-optimize-contrast;
     }
   }
+
   .sponsorBtn {
     display: inline-flex;
     justify-content: center;
     align-items: center;
 
-    >img {
+    > img {
       width: 26px;
       margin: 0px 16px 0px 0px;
       pointer-events: none;
@@ -1942,6 +1947,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .folder-button-active {
     background: rgb(255 255 255 / 12%);
   }
+
   .folder-body {
     background: #ffffff0a;
     border-radius: 10px;
@@ -2316,6 +2322,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 // Library - Songs page
 .library-page {
   padding: 0px;
+
   .library-header {
     position: sticky;
     top: 0;
@@ -2485,7 +2492,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: var(--ciderShadow-Generic);
     width: 36px;
     height: 36px;
-    float:right;
+    float: right;
     border: 0px;
     cursor: pointer;
     z-index: 5;
@@ -2793,33 +2800,55 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .menu-panel {
-  height: 100%;
   width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: #000000a3;
   display: flex;
-  flex-flow: column;
+  justify-content: center;
+  align-items: center;
 
-  .menu-option {
-    text-align: left;
+  .menu-panel-body {
     display: flex;
-    width: 100%;
-    padding: 16px;
-    appearance: none;
-    border: 0px;
-    font: inherit;
-    background: transparent;
-    color: inherit;
+    flex-flow: column;
+    background: #585858ba;
+    position: relative;
+    min-height: 300px;
+    min-width: 300px;
+    box-shadow: var(--ciderShadow-Generic);
+    border-radius: var(--mediaItemRadius);
+    backdrop-filter: blur(16px) saturate(180%);
+    overflow: hidden;
+    font-size: 14px;
 
-    &:hover {
-      background: var(--selected);
-    }
+    .menu-option {
+      text-align: left;
+      display: flex;
+      width: 100%;
+      padding: 16px;
+      appearance: none;
+      border: 0px;
+      font: inherit;
+      background: transparent;
+      color: inherit;
 
-    &:active {
-      background: var(--selected-click);
+      &:hover {
+        background: var(--selected);
+      }
+
+      &:active {
+        background: var(--selected-click);
+      }
     }
   }
 
+
   .menu-header-text {
     margin: 18px 6px;
+
     .close-btn {
       width: 50px;
       height: 42px;
@@ -2948,6 +2977,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   &.hmedia-scroller-card {
     height: 370px;
+
     .mediaitem-card {
       margin: 12px;
     }
@@ -3056,6 +3086,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex: 0 0 auto;
     width: 40px;
     text-align: center;
+
     button {
       appearance: none;
       border: 0px;
@@ -3068,6 +3099,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &:hover {
     background: rgb(200 200 200 / 10%);
     box-shadow: var(--mediaItemShadow);
+
     .overlay-play {
       opacity: 1;
     }
@@ -3085,10 +3117,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     color: #eee;
   }
 
-//  list item compact
+  //  list item compact
   &.compact {
     height: 40px;
     font-size: 13px;
+
     .artwork {
       display: none;
     }
@@ -3445,9 +3478,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       background: rgba(50, 50, 50, 0.7);
       cursor: pointer;
       transition: opacity 0.1s var(--appleEase);
-      :hover{
+
+      :hover {
         border-radius: 50%;
-        background: rgba(250, 0, 0, 0.7); 
+        background: rgba(250, 0, 0, 0.7);
       }
     }
 
@@ -3549,6 +3583,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       overflow: hidden;
       border-radius: 0px;
       margin: 0;
+
       .mediaitem-artwork {
         border-radius: 0px;
 
@@ -3566,15 +3601,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       &::before {
         background: var(--bgartwork);
         content: "";
-        top:0;
-        left:0;
-        bottom:0;
-        right:0;
-        position:absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        position: absolute;
         background-size: cover;
         background-position: bottom;
         z-index: 0;
-        opacity:1;
+        opacity: 1;
         filter: brightness(0.5) blur(50px) saturate(180%);
       }
     }
@@ -3762,19 +3797,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     background-color: rgba(200, 200, 200, 0.7);
   }
 
-  .playback-button--small{
+  .playback-button--small {
     opacity: 0.7;
   }
 
-  .right-col{
+  .right-col {
     height: 50vh;
   }
 
   @media only screen and (max-width: 1023px) {
     .display--large {
-        display: flex !important;
+      display: flex !important;
     }
   }
+
   .display--large {
     display: flex;
 
@@ -3796,7 +3832,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       height: 4px;
       background-color: rgb(200 200 200 / 10%);
       border-radius: 2px;
-  
+
       &::-webkit-slider-thumb {
         opacity: 1;
         transform: scale(0.5);
@@ -3809,14 +3845,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         cursor: default;
         transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
       }
-       
-    } 
+
+    }
 
 
   }
-  
 
-  .background{
+
+  .background {
     position: absolute;
     background-size: cover;
     width: 100%;
@@ -3826,30 +3862,29 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       position: absolute;
       width: 100%;
       height: 100%;
-  
-      .bg-artwork-container{
+
+      .bg-artwork-container {
         z-index: unset;
       }
-      
+
       .bg-artwork-container .bg-artwork {
         filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
       }
 
-      .no-animation{
-        animation : unset;
+      .no-animation {
+        animation: unset;
       }
     }
   }
 
 
+  .lyrics-col {
 
-  .lyrics-col{
-
-        height: 62vh;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        width: 80%;
+    height: 62vh;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 80%;
 
     ::-webkit-scrollbar-thumb {
       box-shadow: unset;
@@ -3859,25 +3894,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
     }
 
-    .no-lyrics{
+    .no-lyrics {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
     }
 
-    .lyric-line{
+    .lyric-line {
       font-size: 35px;
     }
 
-  } 
+  }
 
-  .queue-col{
+  .queue-col {
 
     width: 60vh;
     height: 50vh;
 
-    .queue-title{
+    .queue-title {
       opacity: 0.6;
     }
 
@@ -3892,9 +3927,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     &:hover ::-webkit-scrollbar-thumb {
       box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
     }
-  } 
-  
-  .tab-toggles{
+  }
+
+  .tab-toggles {
     display: flex;
     position: absolute;
     bottom: 0;
@@ -3902,18 +3937,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     width: 15vh;
     height: 5vh;
     justify-content: space-evenly;
-    
+
     .queue {
-      background-image: url("./assets/list.svg") ;
+      background-image: url("./assets/list.svg");
       padding: 0.5vh;
       width: 2.5vh;
       height: 2.5vh;
       background-origin: content-box;
       background-repeat: no-repeat;
     }
-    
+
     .lyrics {
-      background-image: url("./assets/quote-right.svg") ;
+      background-image: url("./assets/quote-right.svg");
       padding: 0.5vh;
       width: 2.5vh;
       height: 2.5vh;
@@ -3938,12 +3973,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       height: 50vh;
     }
 
-    .controls-parents{
+    .controls-parents {
       width: 50vh;
     }
 
-    .app-playback-controls  {
-      .song-artist , .song-name {
+    .app-playback-controls {
+      .song-artist, .song-name {
         font-weight: 600;
         text-align: center;
         font-size: 0.9em;
@@ -3956,16 +3991,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         .song-name-normal {
           height: inherit;
         }
-      
+
         &.song-artist-marquee {
           > marquee {
             //margin-bottom: -3px;
           }
         }
       }
+
       .song-artist {
         font-size: 0.875em;
       }
+
       .song-name {
         width: unset !important;
         margin-top: 0.15vh;
@@ -3988,7 +4025,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       input[type="range"] {
         width: 100%;
       }
-      >div {
+
+      > div {
         width: 100%;
         text-align: center;
       }
@@ -4012,7 +4050,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         overflow: hidden;
         margin: 0 0 0.5em;
       }
-    
+
       &:hover {
         > input[type=range] {
           &::-webkit-slider-thumb {
@@ -4022,14 +4060,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
           }
         }
       }
-    
-       input[type=range] {
+
+      input[type=range] {
         appearance: none;
         width: 100%;
         height: 4px;
         background-color: rgb(200 200 200 / 10%);
         border-radius: 2px;
-    
+
         &::-webkit-slider-thumb {
           opacity: 0;
           transform: scale(0.5);
@@ -4042,7 +4080,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
           cursor: default;
           transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
         }
-    
+
         &::-moz-range-thumb {
           width: 8px;
           height: 8px;
@@ -4059,8 +4097,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       width: 100%;
       justify-content: center;
     }
-    
-  } 
+
+  }
 }
 
 /* Cider */
@@ -4075,17 +4113,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   width: 18px;
   background: var(--color);
 }
+
 .sidebar-icon {
   width: 18px;
   height: 18px;
   margin-right: 8px;
 
-  >.svg-icon {
+  > .svg-icon {
     width: 100%;
     height: 100%;
     --color: #aaa;
   }
-  >svg {
+
+  > svg {
     width: 100%;
     height: 100%;
     color: #aaa;
@@ -4115,6 +4155,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
     .bgArtworkMaterial {
       display: block;
+
       &::before {
         top: -50%;
         left: -20%;
@@ -4137,15 +4178,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         transform-origin: center;
         animation: fsLyricIn var(--appleEase) .2s;
         opacity: 0.9;
-        text-shadow:
-                  -1px -1px 0 #000,
-                  0   -1px 0 #000,
-                  1px -1px 0 #000,
-                1px  0   0 #000,
-                1px  1px 0 #000,
-                0    1px 0 #000,
-                -1px  1px 0 #000,
-                -1px  0   0 #000;
+        text-shadow: -1px -1px 0 #000,
+          0   -1px 0 #000,
+          1px -1px 0 #000,
+        1px 0 0 #000,
+        1px 1px 0 #000,
+        0 1px 0 #000,
+        -1px 1px 0 #000,
+        -1px 0 0 #000;
 
         &:not(.active) {
           display: none;
@@ -4164,12 +4204,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 @keyframes fsLyricIn {
   0% {
-      opacity: 0;
-      transform: scale(0.98)
+    opacity: 0;
+    transform: scale(0.98)
   }
   100% {
-      opacity: 1;
-      transform: scale(1);
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
@@ -4360,7 +4400,7 @@ div#captions {
   background: rgba(0, 0, 0, 0.6);
   color: yellow;
   white-space: pre-line;
-  font-family: 'Inter', 'Noto Sans JP','Source Han Sans SC', 'Source Han Sans HK','Source Han Sans SC', 'Source Han Sans HK','Noto Sans SC','Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
+  font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
 }
 
 [v-cloak] {
@@ -4474,6 +4514,7 @@ body.no-gpu {
   .bg-artwork-container {
     display: none;
   }
+
   #navigation-bar {
     backdrop-filter: unset;
     mix-blend-mode: unset;
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
index 249b8b0f..664755e3 100644
--- a/src/renderer/views/components/menu-panel.ejs
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -1,12 +1,13 @@
 <script type="text/x-template" id="cider-menu-panel">
-    <div class="menu-panel">
-        <div class="menu-header-text">
+    <div class="menu-panel" @click.self="menuPanel.visible = false" >
+
+    <div class="menu-panel-body">
+        <div class="menu-header-text" v-if="content.name != ''">
             <div class="row">
                 <div class="col">
                     <h3 class="queue-header-text">{{ content.name }}</h3>
                 </div>
             </div>
-            <button @click="menuPanel.visible = false" class="close-btn"></button>
         </div>
         <div class="menu-body">
             <template v-for="item in content.items">
@@ -19,6 +20,7 @@
             </template>
         </div>
     </div>
+    </div>
 </script>
 
 
@@ -34,7 +36,6 @@
             }
         },
         mounted() {
-
         },
         methods: {
             canDisplay(item) {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 6b804a11..1266e2ba 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -326,7 +326,7 @@
                         </div>
                     </div>
                 </div>
-                <div id="app-content" @click="menuPanel.visible = false">
+                <div id="app-content">
                     <div id="navigation-bar">
                         <button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
                         <button class="nav-item"
@@ -538,11 +538,9 @@
                         <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                     </div>
                 </transition>
-                <transition name="drawertransition">
-                    <div class="app-drawer" v-if="menuPanel.visible">
-                        <cider-menu-panel>
+                <transition name="modal">
+                        <cider-menu-panel v-if="menuPanel.visible">
                         </cider-menu-panel>
-                    </div>
                 </transition>
 
             </div>