diff --git a/packages/frontend/core/src/bootstrap/setup.ts b/packages/frontend/core/src/bootstrap/setup.ts
index 9e5c308680..5f192c21e2 100644
--- a/packages/frontend/core/src/bootstrap/setup.ts
+++ b/packages/frontend/core/src/bootstrap/setup.ts
@@ -4,6 +4,7 @@ import './edgeless-template';
 import { apis, events } from '@affine/electron-api';
 import { setupGlobal } from '@affine/env/global';
 import * as Sentry from '@sentry/react';
+import { debounce } from 'lodash-es';
 import { useEffect } from 'react';
 import {
   createRoutesFromChildren,
@@ -61,6 +62,11 @@ export function setup() {
     };
     apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
     events?.ui.onMaximized(handleMaximized);
+
+    const handleResize = debounce(() => {
+      apis?.ui.handleWindowResize().catch(console.error);
+    }, 50);
+    window.addEventListener('resize', handleResize);
   }
 
   performanceSetupLogger.info('done');
diff --git a/packages/frontend/electron/src/main/main-window.ts b/packages/frontend/electron/src/main/main-window.ts
index d461d2fdf0..4f067a63fb 100644
--- a/packages/frontend/electron/src/main/main-window.ts
+++ b/packages/frontend/electron/src/main/main-window.ts
@@ -53,7 +53,6 @@ async function createWindow(additionalArguments: string[]) {
       : isWindows()
         ? 'hidden'
         : 'default',
-    trafficLightPosition: { x: 20, y: 16 },
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
@@ -100,6 +99,8 @@ async function createWindow(additionalArguments: string[]) {
     if (browserWindow.isMaximized() || browserWindow.isFullScreen()) {
       uiSubjects.onMaximized.next(true);
     }
+
+    handleWebContentsResize().catch(logger.error);
   });
 
   browserWindow.on('close', e => {
@@ -135,18 +136,15 @@ async function createWindow(additionalArguments: string[]) {
 
   browserWindow.on('maximize', () => {
     uiSubjects.onMaximized.next(true);
-    browserWindow.setBackgroundMaterial('none');
   });
 
   // full-screen == maximized in UI on windows
   browserWindow.on('enter-full-screen', () => {
     uiSubjects.onMaximized.next(true);
-    browserWindow.setBackgroundMaterial('none');
   });
 
   browserWindow.on('unmaximize', () => {
     uiSubjects.onMaximized.next(false);
-    browserWindow.setBackgroundMaterial('none');
   });
 
   /**
@@ -274,3 +272,14 @@ export async function getCookie(url?: string, name?: string) {
   });
   return cookies;
 }
+
+// there is no proper way to listen to webContents resize event
+// we will rely on window.resize event in renderer instead
+export async function handleWebContentsResize() {
+  // right now when window is resized, we will relocate the traffic light positions
+  if (isMacOS()) {
+    const window = await getMainWindow();
+    const factor = window?.webContents.getZoomFactor() || 1;
+    window?.setWindowButtonPosition({ x: 20 * factor, y: 24 * factor - 6 });
+  }
+}
diff --git a/packages/frontend/electron/src/main/ui/handlers.ts b/packages/frontend/electron/src/main/ui/handlers.ts
index c97a40776d..f248b64402 100644
--- a/packages/frontend/electron/src/main/ui/handlers.ts
+++ b/packages/frontend/electron/src/main/ui/handlers.ts
@@ -4,7 +4,11 @@ import { getLinkPreview } from 'link-preview-js';
 import { isMacOS } from '../../shared/utils';
 import { persistentConfig } from '../config-storage/persist';
 import { logger } from '../logger';
-import { getMainWindow, initAndShowMainWindow } from '../main-window';
+import {
+  getMainWindow,
+  handleWebContentsResize,
+  initAndShowMainWindow,
+} from '../main-window';
 import { getOnboardingWindow } from '../onboarding';
 import type { NamespaceHandlers } from '../type';
 import { launchStage } from '../windows-manager/stage';
@@ -44,6 +48,9 @@ export const uiHandlers = {
       window.maximize();
     }
   },
+  handleWindowResize: async () => {
+    await handleWebContentsResize();
+  },
   handleCloseApp: async () => {
     app.quit();
   },