diff --git a/frontend/css/components.css b/frontend/css/components.css
index ffcf13b..95b1da9 100644
--- a/frontend/css/components.css
+++ b/frontend/css/components.css
@@ -151,6 +151,7 @@
 /* ── Toolbar ──────────────────────────────────────────────────────────────── */
 
 .gd-toolbar {
+  --mac-window-controls-width: 80px;
   display: flex;
   align-items: stretch;
   grid-column: 1 / -1;
@@ -227,6 +228,57 @@
   color: #ffffff;
 }
 
+.gd-toolbar-macos .gd-window-controls {
+  align-items: center;
+  gap: 8px;
+  width: var(--mac-window-controls-width);
+  padding: 0 14px;
+  border-left: 0;
+  border-right: 1px solid rgba(229, 161, 62, 0.12);
+}
+
+.gd-toolbar-macos .gd-toolbar-left {
+  width: calc(320px - var(--mac-window-controls-width));
+}
+
+.gd-toolbar-macos .gd-window-control {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  color: rgba(60, 64, 67, 0.72);
+}
+
+.gd-toolbar-macos .gd-window-control svg {
+  opacity: 0;
+  transform: scale(0.72);
+  transition: opacity 0.12s ease;
+}
+
+.gd-toolbar-macos .gd-window-controls:hover .gd-window-control svg {
+  opacity: 1;
+}
+
+.gd-toolbar-macos .gd-window-close {
+  background: #ff5f57;
+}
+
+.gd-toolbar-macos .gd-window-minimize {
+  background: #ffbd2e;
+}
+
+.gd-toolbar-macos .gd-window-maximize {
+  background: #28c840;
+}
+
+.gd-toolbar-macos .gd-window-control:hover {
+  color: rgba(36, 41, 47, 0.8);
+}
+
+.gd-toolbar-macos .gd-window-close:hover {
+  background: #ff5f57;
+  color: rgba(36, 41, 47, 0.8);
+}
+
 .gd-external-actions {
   display: flex;
   align-items: center;
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 84a3fb4..eebea1e 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -70,6 +70,16 @@ const WINDOW_MINIMIZE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" ar
 const WINDOW_MAXIMIZE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M2.75 2h6.5c.414 0 .75.336.75.75v6.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 2 9.25v-6.5c0-.414.336-.75.75-.75Zm.75 1.5v5h5v-5h-5Z"/></svg>`;
 const WINDOW_CLOSE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L4.94 6 2.22 8.72a.75.75 0 1 0 1.06 1.06L6 7.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L7.06 6l2.72-2.72a.75.75 0 0 0-1.06-1.06L6 4.94 3.28 2.22Z"/></svg>`;
 
+function currentPlatform() {
+  const platform = navigator.userAgentData?.platform || navigator.platform || "";
+  const userAgent = navigator.userAgent || "";
+  const value = `${platform} ${userAgent}`.toLowerCase();
+
+  if (value.includes("mac")) return "macos";
+  if (value.includes("win")) return "windows";
+  return "linux";
+}
+
 function currentTauriWindow() {
   const tauriWindow = window.__TAURI__?.window;
   if (tauriWindow?.getCurrentWindow) {
@@ -211,6 +221,26 @@ function externalEditorOptionsTemplate(state) {
   `;
 }
 
+function windowControlsTemplate(isMacos = false) {
+  const controls = isMacos
+    ? [
+        { action: "close", label: "Close", icon: WINDOW_CLOSE_ICON, className: "gd-window-close" },
+        { action: "minimize", label: "Minimize", icon: WINDOW_MINIMIZE_ICON, className: "gd-window-minimize" },
+        { action: "maximize", label: "Maximize", icon: WINDOW_MAXIMIZE_ICON, className: "gd-window-maximize" },
+      ]
+    : [
+        { action: "minimize", label: "Minimize", icon: WINDOW_MINIMIZE_ICON, className: "gd-window-minimize" },
+        { action: "maximize", label: "Maximize", icon: WINDOW_MAXIMIZE_ICON, className: "gd-window-maximize" },
+        { action: "close", label: "Close", icon: WINDOW_CLOSE_ICON, className: "gd-window-close" },
+      ];
+
+  return `<div class="gd-window-controls" role="group" aria-label="Window controls">
+    ${controls.map((control) => `
+      <button class="gd-window-control ${control.className}" type="button" data-window-action="${control.action}" title="${control.label}" aria-label="${control.label} window">${control.icon}</button>
+    `).join("")}
+  </div>`;
+}
+
 function statusLabel(status = "") {
   const labels = {
     modified: "Modified",
@@ -1160,6 +1190,9 @@ function dashboardView() {
   const displayRepoName = currentRepositoryName();
   const displayBranchName = currentBranchName();
   const hasLocalRepo = Boolean(state.selectedRepoPath);
+  const isMacos = currentPlatform() === "macos";
+  const toolbarPlatformClass = isMacos ? "gd-toolbar-macos" : "gd-toolbar-standard";
+  const windowControlsHTML = windowControlsTemplate(isMacos);
 
   // ── Repository identity ─────────────────────────────────────────────────
   const repoIdentity = (() => {
@@ -1184,6 +1217,7 @@ function dashboardView() {
 
   // ── Toolbar ─────────────────────────────────────────────────────────────
   const toolbarHTML = `
+    ${isMacos ? windowControlsHTML : ""}
     <div class="gd-toolbar-left">
       <button class="gd-toolbar-cell gd-repo-cell" type="button" data-open-modal="repos" title="${escapeHtml(state.selectedRepoPath || repoIdentity.primary)}">
         <span class="gd-cell-icon">${LOCAL_REPO_ICON}</span>
@@ -1277,11 +1311,7 @@ function dashboardView() {
         </div>` : ""}
       </div>
     </div>
-    <div class="gd-window-controls" role="group" aria-label="Window controls">
-      <button class="gd-window-control" type="button" data-window-action="minimize" title="Minimize" aria-label="Minimize window">${WINDOW_MINIMIZE_ICON}</button>
-      <button class="gd-window-control" type="button" data-window-action="maximize" title="Maximize" aria-label="Maximize window">${WINDOW_MAXIMIZE_ICON}</button>
-      <button class="gd-window-control gd-window-close" type="button" data-window-action="close" title="Close" aria-label="Close window">${WINDOW_CLOSE_ICON}</button>
-    </div>
+    ${isMacos ? "" : windowControlsHTML}
   `;
 
   // ── Sidebar content ─────────────────────────────────────────────────────
@@ -1431,7 +1461,7 @@ function dashboardView() {
   // ── Assemble ─────────────────────────────────────────────────────────────
   appRoot.innerHTML = `
     <div class="layout">
-      <header class="gd-toolbar">
+      <header class="gd-toolbar ${toolbarPlatformClass}">
         ${toolbarHTML}
       </header>
       <aside class="gd-left">