diff --git a/src/renderer/assets/feather/hard-drive.svg b/src/renderer/assets/feather/hard-drive.svg
new file mode 100644
index 00000000..30305b6c
--- /dev/null
+++ b/src/renderer/assets/feather/hard-drive.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hard-drive">
+  <path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zM6 16h.01M10 16h.01"/>
+</svg>
diff --git a/src/renderer/assets/feather/headphones.svg b/src/renderer/assets/feather/headphones.svg
new file mode 100644
index 00000000..6c197a70
--- /dev/null
+++ b/src/renderer/assets/feather/headphones.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones">
+  <path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
+  <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/pen-tool.svg b/src/renderer/assets/feather/pen-tool.svg
new file mode 100644
index 00000000..304803a1
--- /dev/null
+++ b/src/renderer/assets/feather/pen-tool.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool" width="20" height="20">
+  <path d="m12 19 7-7 3 3-7 7-3-3z"/>
+  <path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586"/>
+  <circle cx="11" cy="11" r="2"/>
+</svg>
diff --git a/src/renderer/assets/feather/zap.svg b/src/renderer/assets/feather/zap.svg
new file mode 100644
index 00000000..8e71dd07
--- /dev/null
+++ b/src/renderer/assets/feather/zap.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" width="20" height="20">
+  <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
+</svg>
diff --git a/src/renderer/assets/settings.svg b/src/renderer/assets/settings.svg
new file mode 100644
index 00000000..41f574c0
--- /dev/null
+++ b/src/renderer/assets/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/audio/impulses/CAP_64.wav b/src/renderer/audio/impulses/CAP_64.wav
index ed2f442b..ac60adcc 100644
Binary files a/src/renderer/audio/impulses/CAP_64.wav and b/src/renderer/audio/impulses/CAP_64.wav differ
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 6868dd26..ddfc7b2b 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
   },
   async mounted() {
     if (this.svgIcon) {
-      this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
+      this.svgIconData = this.svgIcon;
     }
   },
   methods: {},
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index 978c0707..6b7ea0a1 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -338,7 +338,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 110px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;
@@ -353,7 +355,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 60px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;
diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less
index 1350f7f0..7cd68bd3 100644
--- a/src/renderer/less/helpers.less
+++ b/src/renderer/less/helpers.less
@@ -1,6 +1,6 @@
 .notyf__toast {
   -webkit-app-region: no-drag;
-  cursor            : pointer;
+  cursor: pointer;
 }
 
 .notyf-info {
@@ -9,142 +9,145 @@
 
 .tooltip-inner {
   background: #2f2f2f;
-  opacity   : 1;
-  border    : 1px solid rgb(0 0 0 / 35%);
+  opacity: 1;
+  border: 1px solid rgb(0 0 0 / 35%);
   transition: all 0.3s ease-in-out;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
 }
 
 .modal-fullscreen {
-  display        : flex;
+  display: flex;
   justify-content: center;
-  align-items    : center;
-  position       : fixed;
-  top            : 0;
-  left           : 0;
-  width          : 100%;
-  height         : 100%;
-  background     : rgba(0, 0, 0, 0.3);
-  z-index        : 1000;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
 
   .modal-window {
-    background   : #333;
+    background: #333;
     border-radius: 10px;
-    box-shadow   : var(--mediaItemShadow-Shadow);
-    display      : flex;
-    flex-flow    : column;
-    max-height   : 500px;
-    max-width    : 360px;
-    background   : #121212;
-    width        : 100%;
-    position     : relative;
+    box-shadow: var(--mediaItemShadow-Shadow);
+    display: flex;
+    flex-flow: column;
+    max-height: 500px;
+    max-width: 360px;
+    background: #121212;
+    width: 100%;
+    position: relative;
 
     &:after {
-      content       : "";
-      position      : absolute;
-      top           : 0;
-      left          : 0;
-      width         : 100%;
-      height        : 100%;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       pointer-events: none;
-      box-shadow    : var(--mediaItemShadow);
-      z-index       : 1;
-      border-radius : inherit;
+      box-shadow: var(--mediaItemShadow);
+      z-index: 1;
+      border-radius: inherit;
     }
 
     .modal-header {
-      width  : 100%;
+      width: 100%;
       padding: 6px;
     }
 
     .modal-content {
-      width     : 100%;
-      height    : 100%;
-      overflow  : hidden;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
       overflow-y: overlay;
     }
 
-    .modal-footer {}
+    .modal-footer {
+    }
   }
 }
 
 .spatialproperties-panel {
   .modal-window {
-    &:not(.airplay-modal){
-    height    : 700px;
-    max-height: 700px;
-    width     : 800px;
-    max-width : 800px;}
-    overflow  : hidden;
+    &:not(.airplay-modal) {
+      height: 700px;
+      max-height: 700px;
+      width: 800px;
+      max-width: 800px;
+    }
+
+    overflow: hidden;
 
     .info-header {
       padding-left: 12px;
     }
 
     .visual-container {
-      display        : flex;
+      display: flex;
       justify-content: center;
-      align-items    : center;
-      overflow       : hidden;
+      align-items: center;
+      overflow: hidden;
     }
 
     .visual {
-      position       : relative;
-      height         : 250px;
-      width          : 300px;
-      display        : inline-flex;
-      align-items    : flex-end;
+      position: relative;
+      height: 250px;
+      width: 300px;
+      display: inline-flex;
+      align-items: flex-end;
       justify-content: center;
-      filter         : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
-      margin         : 0 auto;
+      filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
+      margin: 0 auto;
 
       .face {
-        position     : absolute;
-        width        : calc(12px * 6);
-        height       : calc(12px * 6);
+        position: absolute;
+        width: calc(12px * 6);
+        height: calc(12px * 6);
         border-radius: 6px;
-        transform    : rotateX(60deg) rotateZ(-45deg);
-        transition   : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+        transform: rotateX(60deg) rotateZ(-45deg);
+        transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
       }
 
       .listener {
-        position     : absolute;
-        width        : 32px;
-        height       : 32px;
+        position: absolute;
+        width: 32px;
+        height: 32px;
         border-radius: 6px;
-        transform    : rotateX(60deg) rotateZ(-45deg);
-        transition   : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
-        background   : white;
-        color        : black;
-        z-index      : 2;
+        transform: rotateX(60deg) rotateZ(-45deg);
+        transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+        background: white;
+        color: black;
+        z-index: 2;
       }
 
       .audiosource {
-        position     : absolute;
-        width        : 32px;
-        height       : 32px;
+        position: absolute;
+        width: 32px;
+        height: 32px;
         border-radius: 6px;
-        transform    : rotateX(60deg) rotateZ(-45deg);
-        transition   : transform 0.2s linear, width 0.2s linear, height 0.2s linear;
-        background   : yellow;
-        z-index      : 2;
+        transform: rotateX(60deg) rotateZ(-45deg);
+        transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+        background: yellow;
+        z-index: 2;
       }
 
       .face:nth-of-type(1) {
         background: linear-gradient(45deg, #28223a, #1f2038);
-        z-index   : 1;
+        z-index: 1;
       }
 
       .face:nth-of-type(2) {
         background: linear-gradient(45deg, #7d53ad, #5763ff);
-        transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px);
-        opacity   : 0.7;
-        z-index   : 3;
+        transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
+        opacity: 0.7;
+        z-index: 3;
       }
     }
 
     .modal-header {
-      padding : 16px;
+      padding: 16px;
       position: relative;
       overflow: hidden;
 
@@ -162,14 +165,14 @@
 
 .addtoplaylist-panel {
   .modal-window {
-    max-height     : 600px;
-    max-width      : 400px;
-    background     : rgb(18 18 18 / 90%);
-    overflow       : hidden;
+    max-height: 600px;
+    max-width: 400px;
+    background: rgb(18 18 18 / 90%);
+    overflow: hidden;
     backdrop-filter: blur(16px) saturate(180%);
 
     .modal-header {
-      padding : 16px;
+      padding: 16px;
       position: relative;
 
       .modal-title {
@@ -182,34 +185,34 @@
     }
 
     .modal-search {
-      width   : 100%;
-      padding : 0px 16px;
+      width: 100%;
+      padding: 0px 16px;
       position: relative;
     }
 
     .playlist-item {
-      appearance : none;
-      border     : 0px;
-      text-align : left;
-      width      : 100%;
-      margin     : 0;
-      display    : flex;
-      background : rgba(32, 32, 32, 0.46);
-      color      : #eee;
+      appearance: none;
+      border: 0px;
+      text-align: left;
+      width: 100%;
+      margin: 0;
+      display: flex;
+      background: rgba(32, 32, 32, 0.46);
+      color: #eee;
       font-family: inherit;
-      font-size  : 0.98em;
-      padding    : 6px 12px;
+      font-size: 0.98em;
+      padding: 6px 12px;
       align-items: center;
-      flex-flow  : row;
+      flex-flow: row;
 
       .icon {
-        pointer-events : none;
-        width          : 32px;
-        height         : 32px;
-        display        : flex;
+        pointer-events: none;
+        width: 32px;
+        height: 32px;
+        display: flex;
         justify-content: center;
-        align-items    : center;
-        margin-right   : 6px;
+        align-items: center;
+        margin-right: 6px;
       }
 
       .name {
@@ -236,35 +239,35 @@
 }
 
 .menu-panel {
-  width             : 100%;
-  height            : 100%;
-  position          : fixed;
-  top               : 0;
-  left              : 0;
-  z-index           : 100001;
-  display           : flex;
-  justify-content   : center;
-  align-items       : center;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100001;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   -webkit-app-region: no-drag;
 
   .menu-header-body {
-    padding   : 6px;
-    display   : flex;
+    padding: 6px;
+    display: flex;
     background: rgb(200 200 200 / 10%);
 
     .menu-option-header {
-      width          : 40px;
-      height         : 40px;
-      display        : flex;
+      width: 40px;
+      height: 40px;
+      display: flex;
       justify-content: center;
-      align-items    : center;
-      border-radius  : var(--mediaItemRadius);
-      appearance     : none;
-      border         : 0;
-      background     : transparent;
+      align-items: center;
+      border-radius: var(--mediaItemRadius);
+      appearance: none;
+      border: 0;
+      background: transparent;
 
       &.active {
-        .sidebar-icon>.svg-icon {
+        .sidebar-icon > .svg-icon {
           --color: var(--keyColor);
         }
       }
@@ -280,62 +283,62 @@
   }
 
   .menu-panel-body {
-    display        : flex;
-    flex-flow      : column;
-    background     : rgb(30 30 30 / 45%);
+    display: flex;
+    flex-flow: column;
+    background: rgb(30 30 30 / 45%);
     backdrop-filter: blur(32px) saturate(180%);
-    position       : relative;
-    min-width      : 200px;
-    box-shadow     : var(--ciderShadow-Generic);
-    border-radius  : var(--panelRadius);
-    overflow       : hidden;
-    font-size      : 13px;
+    position: relative;
+    min-width: 200px;
+    box-shadow: var(--ciderShadow-Generic);
+    border-radius: var(--panelRadius);
+    overflow: hidden;
+    font-size: 13px;
 
 
     .menu-option {
       text-align: left;
-      display   : flex;
+      display: flex;
       appearance: none;
-      border    : 0px;
-      font      : inherit;
+      border: 0px;
+      font: inherit;
       background: transparent;
-      color     : inherit;
-      margin    : 0 auto;
-      position  : relative;
-      width     : 100%;
-      padding   : 9px 14px;
+      color: inherit;
+      margin: 0 auto;
+      position: relative;
+      width: 100%;
+      padding: 9px 14px;
       align-items: center;
 
       &::before {
-        background   : var(--hover);
+        background: var(--hover);
         border-radius: 6px;
-        content      : "";
-        --sizeY      : 3px;
-        --sizeX      : 4px;
-        top          : var(--sizeY);
-        left         : var(--sizeX);
-        bottom       : var(--sizeY);
-        right        : var(--sizeX);
-        position     : absolute;
-        opacity      : 0;
-        transform    : scale(0.98);
-        z-index      : -1;
-        transition   : transform .25s ease-out, opacity .25s ease-out;
+        content: "";
+        --sizeY: 3px;
+        --sizeX: 4px;
+        top: var(--sizeY);
+        left: var(--sizeX);
+        bottom: var(--sizeY);
+        right: var(--sizeX);
+        position: absolute;
+        opacity: 0;
+        transform: scale(0.98);
+        z-index: -1;
+        transition: transform .25s ease-out, opacity .25s ease-out;
       }
 
       &:hover {
         &::before {
           transition: transform 0s ease-in, opacity 0s ease-in;
-          opacity   : 1;
-          transform : scale(1);
+          opacity: 1;
+          transform: scale(1);
         }
       }
 
       &:active {
         &::before {
           transition: transform .1s ease-in-out, opacity .1s ease-in-out;
-          opacity   : 1;
-          transform : scale(0.98);
+          opacity: 1;
+          transform: scale(0.98);
           background: var(--selected-click);
         }
       }
@@ -375,25 +378,25 @@
   }
 
   .menu-body {
-    overflow : overlay;
-    height   : 100%;
-    display  : flex;
+    overflow: overlay;
+    height: 100%;
+    display: flex;
     flex-flow: column;
-    gap      : 0px;
-    padding  : 0px;
-    position : relative;
+    gap: 0px;
+    padding: 0px;
+    position: relative;
   }
 
   .menu-footer {
-    width  : 100%;
+    width: 100%;
     padding: 12px;
   }
 }
 
 .queue-panel {
-  height   : 100%;
-  width    : 100%;
-  display  : flex;
+  height: 100%;
+  width: 100%;
+  display: flex;
   flex-flow: column;
 
   .queue-header-text {
@@ -402,52 +405,52 @@
 
   .queue-body {
     overflow: overlay;
-    height  : 100%;
+    height: 100%;
   }
 
   .queue-footer {
-    width  : 100%;
+    width: 100%;
     padding: 12px;
   }
 
   .autoplay {
-    background     : rgb(200 200 200 / 15%);
-    display        : flex;
+    background: rgb(200 200 200 / 15%);
+    display: flex;
     justify-content: center;
-    appearance     : none;
-    border         : 0;
-    border-radius  : 6px;
-    height         : 32px;
-    width          : 32px;
+    appearance: none;
+    border: 0;
+    border-radius: 6px;
+    height: 32px;
+    width: 32px;
   }
 
   .infinity {
     content: url("./assets/infinity.svg");
-    margin : auto;
+    margin: auto;
   }
 }
 
 
 .moreinfo-modal {
   .modal-window {
-    height     : 70%;
-    max-height : 100%;
-    width      : 45%;
-    max-width  : 100%;
-    overflow   : hidden;
+    height: 70%;
+    max-height: 100%;
+    width: 45%;
+    max-width: 100%;
+    overflow: hidden;
     line-height: 1.25;
   }
 
   .modal-content {
-    padding  : 1em;
+    padding: 1em;
     font-size: 0.8rem;
 
     br {
-      display      : block;
+      display: block;
       /* makes it have a width */
-      content      : "";
+      content: "";
       /* clears default height */
-      margin       : 2em;
+      margin: 2em;
       margin-bottom: -0.6rem;
     }
   }
@@ -457,7 +460,7 @@
 
     .modal-title {
       text-align: unset !important;
-      width     : 100%;
+      width: 100%;
 
       &:not(.modal-subtitle) {
         font-size: 25px;
@@ -479,8 +482,9 @@
       top: 0;
       left: 0;
       z-index: -1;
-      filter:blur(32px) brightness(50%) saturate(280%);
+      filter: blur(32px) brightness(50%) saturate(280%);
     }
+
     .popover-artwork {
       width: 200px;
       height: 200px;
@@ -491,7 +495,8 @@
     .song-name {
       font-weight: 600;
     }
-    .song-artist,.song-album {
+
+    .song-artist, .song-album {
       opacity: 0.75;
       cursor: pointer;
 
@@ -500,4 +505,20 @@
       }
     }
   }
+}
+
+._svg-icon {
+  --icon: url("./assets/chevron-left.svg");
+  --size: 1em;
+  width: var(--size);
+  height: var(--size);
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  background: rgb(255 255 255 / 76%);
+  -webkit-mask-repeat: no-repeat;
+
+  &.md {
+    --size: 1.2em;
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/main/app.js b/src/renderer/main/app.js
index 097c0556..058c5b25 100644
--- a/src/renderer/main/app.js
+++ b/src/renderer/main/app.js
@@ -7,6 +7,7 @@ import {Events} from './events.js'
 import { wsapi } from "./wsapi_interop.js"
 import { MusicKitTools } from "./musickittools.js"
 import { spawnMica } from "./mica.js"
+import { svgIcon } from './components/svg-icon.js'
 
 
 // Define window objects
diff --git a/src/renderer/main/components/svg-icon.js b/src/renderer/main/components/svg-icon.js
new file mode 100644
index 00000000..0ad99d2a
--- /dev/null
+++ b/src/renderer/main/components/svg-icon.js
@@ -0,0 +1,20 @@
+export const svgIcon = Vue.component("svg-icon", {
+    template: `
+        <div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
+    `,
+    props: {
+        name: {
+            type: String,
+            required: false
+        },
+        classes: {
+            type: String,
+            required: false
+        },
+        url: {
+            type: String,
+            required: true,
+            default: "./assets/repeat.svg"
+        }
+    }
+})
\ No newline at end of file
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 73fa53b3..bf4a67bd 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -245,6 +245,7 @@ const app = new Vue({
         notyf: notyf,
         idleTimer: null,
         idleState: false,
+        appVisible: true
     },
     watch: {
         cfg: {
@@ -276,6 +277,12 @@ const app = new Vue({
         }, false)
     },
     methods: {
+        hotReload() {
+            this.appVisible = false
+            setTimeout(() => {
+                this.appVisible = true
+            }, 1000)
+        },
         setWindowHash(route = "") {
             window.location.hash = `#${route}`;
         },
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 5f2d4808..0d986506 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -858,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-sidebar-item {
+  --iconSize: 18px;
   display: flex;
   width: 100%;
   padding: 8px 12px;
@@ -872,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   transition: transform 0.1s;
   text-align: left;
   align-items: center;
+  gap: 12px;
 
   &.app-sidebar-item-playlist {
     -webkit-user-drag: element;
@@ -887,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     }
   }
 
+  >._svg-icon {
+    --size: var(--iconSize);
+  }
+
 }
 
 .app-sidebar-item:hover {
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 8d30c9dd..3e43cf80 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -158,23 +158,10 @@
       </div>
       <template v-if="!cfg.general.sidebarCollapsed.playlists">
         <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
-          <div class="sidebar-icon">
-            <svg
-              width="46"
-              height="46"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M12 5v14"></path>
-              <path d="M5 12h14"></path>
-            </svg>
+          <svg-icon url="./assets/feather/plus.svg"></svg-icon>
+          <div class="sidebar-item-text">
+            {{ getLz("action.createNew") }}
           </div>
-          {{ getLz("action.createNew") }}
         </button>
         <sidebar-playlist
           v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index f7df7049..b028c6e5 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -6,7 +6,7 @@
         <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
             <b-tab>
                 <template #title>
-                    <div>⚙️</div>
+                    <div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
                     <div>
                         {{ $root.getLz('settings.header.general') }}
                     </div>
@@ -234,7 +234,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🔊</div>
+                    <div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
                     <div>
                         {{ $root.getLz('settings.header.audio') }}
                     </div>
@@ -372,7 +372,7 @@
             </b-tab>
             <b-tab v-if="app.cfg.advanced.AudioContext">
                 <template #title>
-                    <div>✨</div>
+                    <div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
                     <div>
                         {{ $root.getLz('settings.option.audio.audioLab') }}
                     </div>
@@ -383,7 +383,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🎨</div>
+                    <div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
                     <div>
                         {{ $root.getLz('settings.header.visual') }}
                     </div>
@@ -624,7 +624,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🎤</div>
+                    <div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
                     <div>
                         {{ $root.getLz('settings.header.lyrics') }}
                     </div>
@@ -963,7 +963,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🔌</div>
+                    <div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
                     <div>
                         {{ $root.getLz('settings.header.connectivity') }}
                     </div>
@@ -1147,7 +1147,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>💻</div>
+                    <div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
                     <div>
                         {{$root.getLz('settings.header.advanced')}}
                     </div>
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index 82bbe83c..6d276618 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -9,7 +9,7 @@
                 :href="item.href"
                 @click='clickEvent()'>
             <template v-if="!renaming">
-                <div class="sidebar-icon" :key="item.id" v-html="icon"></div> {{ item.attributes.name }}
+                <svg-icon :url="icon"/> {{ item.attributes.name }}
                 <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
             </template>
             <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
@@ -57,9 +57,9 @@
         },
         async mounted() {
             if (this.item.type !== "library-playlist-folders") {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
+                this.icon = ("./assets/feather/list.svg")
             } else {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
+                this.icon = ("./assets/feather/folder.svg")
             }
             let playlistMap = this.$root.playlists.trackMapping
             if (this.relateMediaItems.length != 0) {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 2be194bf..32bee000 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -2,23 +2,23 @@
 <html lang="en">
 
 <head>
-    <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
-    <link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
-    <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
-    <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
-    <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
-    <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
-    <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
-    <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
-    <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
+    <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
+    <link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
+    <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
+    <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
+    <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
+    <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
+    <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
+    <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
+    <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Cider</title>
-    <link rel="stylesheet/less" type="text/css" href="style.less" />
-    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less" />
+    <link rel="stylesheet/less" type="text/css" href="style.less"/>
+    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
     <script src="./lib/less.js"></script>
-    <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js" ) %>"></script>
+    <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
     <script src="./lib/vue-horizontal.js"></script>
     <script src="./lib/smoothscroll.js"></script>
     <script src="./lib/vuex.min.js"></script>
@@ -55,7 +55,7 @@
             align-items: center;
         }
 
-        #LOADER>svg {
+        #LOADER > svg {
             width: 128px;
         }
 
@@ -67,60 +67,64 @@
     </style>
 </head>
 
-<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>">
-    <div id="LOADER">
-        <%- include("../assets/cider-round.svg") %>
-    </div>
-    <div id="app" :class="getAppClasses()"
-    :window-state="chrome.windowState"
-    :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
-        <transition name="fsModeSwitch">
-            <div id="app-main" v-show="appMode == 'player'">
-                <%- include('app/chrome-top'); %>
-                    <%- include('app/app-navigation'); %>
-                        <%- include('app/chrome-bottom'); %>
-            </div>
-        </transition>
-        <transition name="fsModeSwitch">
-            <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
-                <fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
-                    :richlyrics="richlyrics"></fullscreen-view>
-            </div>
-        </transition>
-        <transition name="fsModeSwitch">
-            <div class="fullscreen-view-container" v-if="appMode == 'mini'">
-                <mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
-                </mini-view>
-            </div>
-        </transition>
-        <transition name="fsModeSwitch">
-            <div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
-                <cider-oobe></cider-oobe>
-            </div>
-        </transition>
-        <%- include('app/panels'); %>
-            <div class="cursor" v-if="chrome.showCursor"></div>
-    </div>
+<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
+      platform="<%= env.platform %>">
+<div id="LOADER">
+    <%- include("../assets/cider-round.svg") %>
+</div>
+<div id="app" :class="getAppClasses()"
+     v-if="appVisible"
+     :window-state="chrome.windowState"
+     :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
+     :window-style="cfg.visual.directives.windowLayout">
+    <transition name="fsModeSwitch">
+        <div id="app-main" v-show="appMode == 'player'">
+            <%- include('app/chrome-top'); %>
+            <%- include('app/app-navigation'); %>
+            <%- include('app/chrome-bottom'); %>
+        </div>
+    </transition>
+    <transition name="fsModeSwitch">
+        <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
+            <fullscreen-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics"
+                             :richlyrics="richlyrics"></fullscreen-view>
+        </div>
+    </transition>
+    <transition name="fsModeSwitch">
+        <div class="fullscreen-view-container" v-if="appMode == 'mini'">
+            <mini-view :image="currentArtUrlRaw" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics">
+            </mini-view>
+        </div>
+    </transition>
+    <transition name="fsModeSwitch">
+        <div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
+            <cider-oobe></cider-oobe>
+        </div>
+    </transition>
+    <%- include('app/panels'); %>
+    <div class="cursor" v-if="chrome.showCursor"></div>
+</div>
 
-    <% for(var i=0; i < Object.keys(env.components).length ; i++) {%>
-        <%- include(env.components[i]); %>
-            <% } %>
+<% for(var i = 0; i < Object.keys(env.components).length ; i++) { %>
+    <%- include(env.components[i]); %>
+<% } %>
 
+<script async
+        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
+        data-web-components>
+</script>
+<script src="index.js?v=1"></script>
 
-                <script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
-                </script>
-                <script src="index.js?v=1"></script>
-
-                <script type="text/x-template" id="am-musiccovershelf">
+<script type="text/x-template" id="am-musiccovershelf">
     <h1>{{ component.attributes.title.stringForDisplay }}</h1>
 </script>
 
-                <!-- Sidebar Item -->
-                <script type="text/x-template" id="sidebar-library-item">
+<!-- Sidebar Item -->
+<script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
-        <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
-        {{ name }}
+        <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
+        <span class="sidebar-item-text">{{ name }}</span>
     </button>
 </script>
 
diff --git a/src/renderer/views/pages/zoo.ejs b/src/renderer/views/pages/zoo.ejs
index b8c955b7..e9a2d92d 100644
--- a/src/renderer/views/pages/zoo.ejs
+++ b/src/renderer/views/pages/zoo.ejs
@@ -1,5 +1,6 @@
 <script type="text/x-template" id="cider-zoo">
     <div class="content-inner">
+        <svg-icon/>
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         {{ $store.state.test }}