diff --git a/src/renderer/assets/CiderMenu.svg b/src/renderer/assets/CiderMenu.svg
new file mode 100644
index 00000000..fd48fa55
--- /dev/null
+++ b/src/renderer/assets/CiderMenu.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 75 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.30081,0,0,0.30081,-51.9562,-60.4543)">
+        <g transform="matrix(1.26848,0,0,1.26848,167,195.512)">
+            <circle cx="101" cy="102.5" r="79.5" style="fill:rgb(15,15,15);"/>
+        </g>
+        <g transform="matrix(0.260038,0,0,0.260038,167,195.511)">
+            <g id="Release.afdesign">
+                <g>
+                    <path d="M501,21C765.367,21 980,235.633 980,500C980,764.367 765.367,979 501,979C236.633,979 22,764.367 22,500C22,235.633 236.633,21 501,21ZM501,169C683.684,169 832,317.316 832,500C832,682.684 683.684,831 501,831C318.316,831 170,682.684 170,500C170,317.316 318.316,169 501,169Z" style="fill:rgb(255,38,84);"/>
+                    <path d="M501,224C653.053,224 776.5,347.447 776.5,499.5C776.5,651.553 653.053,775 501,775C348.947,775 225.5,651.553 225.5,499.5C225.5,347.447 348.947,224 501,224ZM589.165,492.207C595.163,495.672 595.163,504.328 589.165,507.793L439.502,594.256C433.502,597.722 426,593.392 426,586.463L426,413.537C426,406.608 433.502,402.278 439.502,405.744L589.165,492.207Z" style="fill:rgb(255,38,84);"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index b2b9305a..40b1907f 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -1,20 +1,24 @@
+#app.navbar {
+  --navigationBarHeight: 38px;
+}
+
 #app.twopanel {
   --chromeHeight1: 42px;
   --chromeHeight2: 76px;
-  --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
+  --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
 
   .app-chrome {
     .app-mainmenu {
-      margin-left: 10px;
-      width: 88px;
+      width : 30px;
+      height: 30px;
     }
 
     height: var(--chromeHeight1);
 
     &.chrome-bottom {
-      height: var(--chromeHeight2);
+      height    : var(--chromeHeight2);
       box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
-      z-index: 1;
+      z-index   : 1;
     }
   }
 
@@ -29,39 +33,39 @@
 
     .playback-button.play,
     .playback-button.pause {
-      width: 42px;
-      height: 42px;
+      width           : 42px;
+      height          : 42px;
       background-color: rgb(200 200 200 / 20%);
-      border-radius: 50%;
-      margin: 6px;
-      box-shadow: 0px 0px 0px 2px var(--keyColor);
+      border-radius   : 50%;
+      margin          : 6px;
+      box-shadow      : 0px 0px 0px 2px var(--keyColor);
     }
 
     .app-chrome--center {
-      display: flex;
+      display       : flex;
       flex-direction: column;
 
       .app-chrome-playback-controls {
-        display: flex;
-        z-index: 1;
+        display         : flex;
+        z-index         : 1;
         // margin-bottom: 12px;
       }
 
       .app-chrome-playback-duration {
-        position: relative;
-        width: 80%;
+        position          : relative;
+        width             : 80%;
         -webkit-app-region: no-drag;
-        height: 16px;
+        height            : 16px;
 
         .song-progress {
-          @bgColor: transparent;
-          height: 16px;
-          position: absolute;
-          bottom: 4px;
-          left: 0px;
-          right: 4px;
+          @bgColor  : transparent;
+          height    : 16px;
+          position  : absolute;
+          bottom    : 4px;
+          left      : 0px;
+          right     : 4px;
           background: @bgColor;
-          z-index: 0;
+          z-index   : 0;
 
 
           .song-duration {
@@ -70,41 +74,41 @@
 
           .song-duration p {
             font-weight: 400;
-            font-size: 10px;
-            height: 1.2em;
+            font-size  : 10px;
+            height     : 1.2em;
             line-height: 1.3em;
-            overflow: hidden;
-            margin: 0 0 0 0.25em;
+            overflow   : hidden;
+            margin     : 0 0 0 0.25em;
           }
 
           &:hover {
-            > input[type=range] {
+            >input[type=range] {
               &::-webkit-slider-thumb {
-                opacity: 1;
+                opacity  : 1;
                 transform: scale(1);
-                z-index: 1;
+                z-index  : 1;
               }
             }
           }
 
           input[type=range] {
-            appearance: none;
-            width: 100%;
-            height: 4px;
+            appearance      : none;
+            width           : 100%;
+            height          : 4px;
             background-color: rgb(200 200 200 / 10%);
-            border-radius: 2px;
+            border-radius   : 2px;
 
             &::-webkit-slider-thumb {
-              opacity: 0;
-              transform: scale(0.5);
+              opacity           : 0;
+              transform         : scale(0.5);
               -webkit-appearance: none;
-              appearance: none;
-              width: 12px;
-              height: 12px;
-              border-radius: 100%;
-              background: var(--keyColor);
-              cursor: default;
-              transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+              appearance        : none;
+              width             : 12px;
+              height            : 12px;
+              border-radius     : 100%;
+              background        : var(--keyColor);
+              cursor            : default;
+              transition        : opacity .10s var(--appleEase), transform .10s var(--appleEase);
             }
           }
         }
@@ -113,40 +117,40 @@
     }
 
     .app-chrome--left {
-      width: 30%;
+      width          : 30%;
       justify-content: flex-start;
-      align-items: flex-start;
+      align-items    : flex-start;
 
       .playback-controls {
         .artwork {
-          width: var(--chromeHeight2);
-          height: var(--chromeHeight2);
-          margin: 0px 6px 0px 0px;
+          width     : var(--chromeHeight2);
+          height    : var(--chromeHeight2);
+          margin    : 0px 6px 0px 0px;
           box-shadow: unset;
-          border: 0px;
+          border    : 0px;
 
           .mediaitem-artwork,
           img {
             border-radius: 0px;
-            box-shadow: unset;
-            border: 0px;
+            box-shadow   : unset;
+            border       : 0px;
           }
         }
 
         .playback-info {
           align-items: flex-start;
-          margin: 6px;
+          margin     : 6px;
 
           .song-name {
-            text-align: left;
-            font-size: 15px;
-            font-weight: initial;
-            width: 100%;
+            text-align        : left;
+            font-size         : 15px;
+            font-weight       : initial;
+            width             : 100%;
             -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
           }
 
           .song-artist-album {
-            width: 100%;
+            width             : 100%;
             -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
           }
 
@@ -156,29 +160,30 @@
 
           .song-artist-album-content {
             text-align: left;
-            font-size: 12px;
+            font-size : 12px;
           }
         }
 
 
-        width: 100%;
-        height: 100%;
+        width    : 100%;
+        height   : 100%;
         max-width: 100%;
-        border: 0px;
+        border   : 0px;
       }
 
       flex: 0 0 auto;
     }
 
     .app-chrome--right {
-      width: 30%;
-      flex: 0 0 auto;
+      width        : 30%;
+      flex         : 0 0 auto;
       padding-right: 8px;
     }
   }
+
   .collection-page {
     .top-fab {
-      bottom:96px;
+      bottom: 96px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index d1f60bf2..fb8b54c1 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1563,6 +1563,20 @@ input[type=checkbox][switch]:checked:active::before {
   background-image: url('./assets/backward.svg');
 }
 
+.playback-button {
+  &.navigation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    >svg {
+      height:16px;
+    width:16px;
+    pointer-events: none;
+    }
+  }
+}
+
 .playback-buttons {
   display: flex;
   align-items: center;
diff --git a/src/renderer/less/macosemu.less b/src/renderer/less/macosemu.less
new file mode 100644
index 00000000..d1b95e90
--- /dev/null
+++ b/src/renderer/less/macosemu.less
@@ -0,0 +1,45 @@
+#app.macosemu {
+
+
+
+  .app-chrome .app-chrome-item > .window-controls-macos {
+    @controlSize: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 96px;
+    @closeClr: rgb(255, 92, 92);
+    @minmaxClr: rgb(77, 202, 77);
+    @minClr: rgb(255, 189, 76);
+    @borderDarken: 55%;
+
+    div {
+      margin: 4px;
+      background-color: red;
+      border-radius: 100%;
+      flex: 0 0 auto;
+      background-image: unset !important;
+      //border: 1px solid white;
+      &.close {
+        box-shadow: 0px 0px 0px 1px darken(@closeClr, @borderDarken);
+        background-color: @closeClr;
+        width: @controlSize;
+        height: @controlSize;
+      }
+
+      &.minimize {
+        box-shadow: 0px 0px 0px 1px darken(@minClr, @borderDarken);
+        background-color: @minClr;
+        width: @controlSize;
+        height: @controlSize;
+      }
+
+      &.minmax {
+        box-shadow: 0px 0px 0px 1px darken(@minmaxClr, 45%);
+        background-color: @minmaxClr;
+        width: @controlSize;
+        height: @controlSize;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 7e94ff5f..05de1eb0 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -166,6 +166,9 @@ const app = new Vue({
                     "handle": "CiderUser",
                     "artwork": { "url": "./assets/logocut.png" }
                 }
+            },
+            forceDirectives: {
+
             },
             menuOpened: false,
             maximized: false,
@@ -573,6 +576,10 @@ const app = new Vue({
                 this.setTheme(this.cfg.visual.theme)
             }
 
+            if(this.platform == "darwin") {
+                this.chrome.windowControlPosition = "left"
+            }
+
             this.setLz(this.cfg.general.language)
             this.setLzManual()
             clearTimeout(this.hangtimer)
@@ -933,13 +940,20 @@ const app = new Vue({
                 less.refresh()
             }
         },
+        macOSEmu () {
+            this.chrome.forceDirectives["macosemu"] = {
+                value: true
+            }
+            this.chrome.windowControlPosition = "left"
+        },
         getThemeDirective(directive = "") {
             let directives = {}
             if (typeof this.chrome.appliedTheme.info.directives == "object") {
                 directives = this.chrome.appliedTheme.info.directives
             }
+            directives = Object.assign(directives, this.chrome.forceDirectives)
             if (directives[directive]) {
-                return this.chrome.appliedTheme.info.directives[directive].value
+                return directives[directive].value
             } else if (this.cfg.visual.directives[directive]) {
                 return this.cfg.visual.directives.windowLayout
             } else {
@@ -966,6 +980,9 @@ const app = new Vue({
             if (this.getThemeDirective('windowLayout') == 'twopanel') {
                 classes.twopanel = true
             }
+            if(this.getThemeDirective("macosemu") == true){
+                classes.macosemu = true
+            }
             return classes
         },
         invokeDrawer(panel) {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 55673bc1..b9726b0b 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -37,7 +37,7 @@
   --keyColor-deepPressed: #ff8a9c;
   --keyColor-deepPressed-rgb: 255, 138, 156;
   --keyColor-disabled: rgba(250, 88, 106, 0.35);
-  --navigationBarHeight: 38px;
+  --navigationBarHeight: 0px;
   --modalBackground: #262626;
   --songProgressColor: var(--keyColor);
   --songProgressBackground: #333;
@@ -853,6 +853,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   display: flex;
   flex-direction: row;
   -webkit-app-region: drag;
+
+  .vdiv {
+    width: 1px;
+    background: white;
+    opacity: 0.25;
+    height: 50%;
+    margin: 6px;
+  }
 }
 
 .mv-chrome {
@@ -996,13 +1004,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-chrome .app-chrome-item > .app-mainmenu {
-  width: 110px;
+  width: 34px;
   font-size: 13px;
-  background: url("./assets/AppChromeBtn.svg");
-  background-size: contain;
+  background: url("./assets/CiderMenu.svg");
+  background-size: auto;
   background-repeat: no-repeat;
   background-position: center;
-  height: 70%;
+  height: 34px;
   margin-right: 16px;
   margin-left: 16px;
   margin-top: 1.5px;
@@ -1016,10 +1024,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   &:active, &.active {
     background-color: var(--selected-click);
   }
-
-  &.active {
-    background-image: url("./assets/AppChromeBtn-Open.svg");
-  }
 }
 
 .app-chrome .app-chrome-item > .window-controls {
@@ -1027,6 +1031,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   font-size: 13px;
   height: 100%;
   display: flex;
+
+  &-macos {
+    width: 96px;
+  }
 }
 
 .app-chrome .app-chrome-item > .window-controls > div {
@@ -1077,9 +1085,9 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.mi
   display: none;
 }
 
-body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls {
-  display: none;
-}
+//body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls {
+//  display: none;
+//}
 
 body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minmax {
   display: none;
@@ -3216,4 +3224,5 @@ body[platform='darwin'] {
 @import url("less/macos.less");
 @import url("less/linux.less");
 @import url("less/compact.less");
-@import url("less/directives.less");
\ No newline at end of file
+@import url("less/directives.less");
+@import url("less/macosemu.less");
\ No newline at end of file
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index 4c220be4..dfa1cb33 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -1,5 +1,5 @@
 <div id="app-content" @scroll.passive="setContentScrollPos" :scrollpos="chrome.contentScrollPosY" scrollaxis="y" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
-    <div id="navigation-bar">
+    <div id="navigation-bar" v-if="getThemeDirective('appNavigation') == 'seperate'">
         <button class="nav-item" @click="navigateBack()">
             <%- include('../svg/chevron-left.svg') %>
         </button>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 17a9eafe..fe9ba113 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -1,7 +1,7 @@
 <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
     <div class="app-chrome--left">
         <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
-            <div class="window-controls">
+            <div class="window-controls-macos">
                 <div class="close" @click="ipcRenderer.send('close')"></div>
                 <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
                 <div class="minmax restore" v-if="chrome.maximized"
@@ -16,6 +16,20 @@
                     @click="mainMenuVisibility(true)"
                     :class="{active: chrome.menuOpened}"></button>
         </div>
+        <template v-if="getThemeDirective('appNavigation') != 'seperate'">
+            <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
+            <div class="app-chrome-item">
+                <button class="playback-button navigation" @click="navigateBack()">
+                    <%- include('../svg/chevron-left.svg') %>
+                </button>
+            </div>
+            <div class="app-chrome-item">
+                <button class="playback-button navigation" @click="navigateForward()">
+                    <%- include('../svg/chevron-right.svg') %>
+                </button>
+            </div>
+            <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
+        </template>
         <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
             <div class="app-chrome-item display--large">
                 <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@@ -142,7 +156,8 @@
                 </template>
             </div>
         </template>
-        <div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
+        <div class="app-chrome-item full-height" id="window-controls-container"
+             v-if="chrome.windowControlPosition == 'right'">
             <div class="window-controls">
                 <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
                 <div class="minmax restore" v-if="chrome.maximized"
@@ -152,5 +167,11 @@
                 <div class="close" @click="ipcRenderer.send('close')"></div>
             </div>
         </div>
+        <div class="app-chrome-item full-height" v-else-if="platform != 'darwin'">
+            <button class="app-mainmenu"
+                    @blur="mainMenuVisibility(false)"
+                    @click="mainMenuVisibility(true)"
+                    :class="{active: chrome.menuOpened}"></button>
+        </div>
     </div>
 </div>