diff --git a/css/ghostkwebb.css b/css/ghostkwebb.css
index 2ec40b7..1c34fa1 100644
--- a/css/ghostkwebb.css
+++ b/css/ghostkwebb.css
@@ -16,6 +16,50 @@ html::-webkit-scrollbar, body::-webkit-scrollbar {
     display: none;
 }
 
+/* Native macOS Window Drag Regions */
+.mac-titlebar-drag {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 38px;
+    -webkit-app-region: drag;
+    z-index: 999;
+}
+
+.mac-edge-drag {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 18px;
+    -webkit-app-region: drag;
+    z-index: 998;
+}
+
+.mac-edge-drag-left {
+    left: 0;
+}
+
+.mac-edge-drag-right {
+    right: 0;
+}
+
+/* Interactive elements must not trigger window drag */
+.systembox,
+.w3-sidebar,
+#themoodbar,
+#theposebar,
+#thesidebar,
+.alertbox,
+.loadbox,
+button,
+select,
+input,
+a,
+kbd {
+    -webkit-app-region: no-drag;
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
diff --git a/css/openlive3d.css b/css/openlive3d.css
index 1b5849d..1f32ca1 100644
--- a/css/openlive3d.css
+++ b/css/openlive3d.css
@@ -13,6 +13,49 @@ html::-webkit-scrollbar, body::-webkit-scrollbar {
     display: none;
 }
 
+/* Native macOS Window Drag Regions */
+.mac-titlebar-drag {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 38px;
+    -webkit-app-region: drag;
+    z-index: 999;
+}
+
+.mac-edge-drag {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 18px;
+    -webkit-app-region: drag;
+    z-index: 998;
+}
+
+.mac-edge-drag-left {
+    left: 0;
+}
+
+.mac-edge-drag-right {
+    right: 0;
+}
+
+/* Interactive elements must not trigger window drag */
+.systembox,
+.w3-sidebar,
+#themoodbar,
+#theposebar,
+#thesidebar,
+.alertbox,
+.loadbox,
+button,
+select,
+input,
+a {
+    -webkit-app-region: no-drag;
+}
+
 canvas.vrm {
     position: absolute;
     top: 0%;
@@ -32,9 +75,10 @@ div.bgimg {
 
 div.systembox {
     position: absolute;
-    top: 5px;
-    left: 7px;
-    z-index: 3;
+    top: 38px;
+    left: 12px;
+    z-index: 1001;
+    cursor: pointer;
 }
 
 div.alertbox {
@@ -81,12 +125,14 @@ div.confkey {
 text.systemtext {
     color: #FFFFFF00;
     position: absolute;
-    top: 5px;
-    left: 50px;
+    top: 8px;
+    left: 55px;
     font-family: sans-serif;
     font-size: 28px;
+    line-height: 34px;
     cursor: pointer;
     user-select: none;
+    white-space: nowrap;
 }
 
 text.alerttext {
@@ -142,12 +188,27 @@ canvas.foregroundeffect {
     pointer-events: none;
 }
 
+#thesidebar {
+    padding-top: 40px;
+    z-index: 1000;
+}
+
+#themoodbar,
+#theposebar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 #themoodbar>div,
 #theposebar>div {
+    width: 100%;
     margin-bottom: 20px;
+    text-align: center;
 }
 
 #themoodbar img,
 #theposebar img {
-    margin-left: 12px;
+    margin: 0 auto;
+    display: block;
 }
\ No newline at end of file
diff --git a/js/gui/gui-layout.js b/js/gui/gui-layout.js
index 941eb22..6bf23ab 100644
--- a/js/gui/gui-layout.js
+++ b/js/gui/gui-layout.js
@@ -1049,7 +1049,7 @@ function createMoodLayout() {
     moodbar.innerHTML = "";
     let tmp = document.createElement("div");
     tmp.className = "w3-bar-item";
-    tmp.style.height = "80px";
+    tmp.style.height = "100px";
     tmp.style.color = "#0000";
     tmp.innerHTML = ".";
     moodbar.appendChild(tmp);