diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index dbd0bb490..6f3ffc674 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -69,6 +69,8 @@ function createWindow() {
   win = new BrowserWindow({
     width: 1200,
     height: 800,
+    titleBarStyle: 'hiddenInset',
+    trafficLightPosition: { x: 16, y: 12 },
     webPreferences: {
       preload: path.join(__dirname, '../preload/index.cjs'),
       // Enable node integration for IPC
diff --git a/apps/desktop/src/renderer/src/pages/layout.tsx b/apps/desktop/src/renderer/src/pages/layout.tsx
index 4f3e38677..e1d9cb1df 100644
--- a/apps/desktop/src/renderer/src/pages/layout.tsx
+++ b/apps/desktop/src/renderer/src/pages/layout.tsx
@@ -29,12 +29,18 @@ export default function Layout() {
 
   return (
     <div className="h-dvh flex flex-col bg-background">
-      {/* Header */}
-      <header className="flex items-center justify-between px-4 py-3 border-b">
+      {/* Header with drag region for macOS */}
+      <header
+        className="flex items-center justify-between px-4 py-3 border-b pl-20"
+        style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+      >
         <div className="flex items-center gap-2">
           <span className="text-lg font-semibold">Multica</span>
         </div>
-        <div className="flex items-center gap-1">
+        <div
+          className="flex items-center gap-1"
+          style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+        >
           <Button variant="ghost" size="icon">
             <HugeiconsIcon icon={Settings02Icon} className="size-5" />
           </Button>