diff --git a/packages/frontend/apps/electron/src/main/constants.ts b/packages/frontend/apps/electron/src/main/constants.ts
index d27e44fc1f..f97cf4e0fa 100644
--- a/packages/frontend/apps/electron/src/main/constants.ts
+++ b/packages/frontend/apps/electron/src/main/constants.ts
@@ -1,6 +1,15 @@
-export const mainWindowOrigin = 'file://.';
-export const onboardingViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}onboarding`;
-export const shellViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}shell.html`;
-export const backgroundWorkerViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}background-worker.html`;
-export const customThemeViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}theme-editor`;
-export const popupViewUrl = `${mainWindowOrigin}${mainWindowOrigin.endsWith('/') ? '' : '/'}popup.html`;
+export const mainHost = '.';
+export const anotherHost = 'another-host';
+
+export const mainWindowOrigin = `file://${mainHost}`;
+export const anotherOrigin = `file://${anotherHost}`;
+
+export const onboardingViewUrl = `${mainWindowOrigin}/onboarding`;
+export const shellViewUrl = `${mainWindowOrigin}/shell.html`;
+export const backgroundWorkerViewUrl = `${mainWindowOrigin}/background-worker.html`;
+export const customThemeViewUrl = `${mainWindowOrigin}/theme-editor.html`;
+
+// mitigate the issue that popup window share the same zoom level of the main window
+// Notes from electron official docs:
+// "The zoom policy at the Chromium level is same-origin, meaning that the zoom level for a specific domain propagates across all instances of windows with the same domain. Differentiating the window URLs will make zoom work per-window."
+export const popupViewUrl = `${anotherOrigin}/popup.html`;
diff --git a/packages/frontend/apps/electron/src/main/protocol.ts b/packages/frontend/apps/electron/src/main/protocol.ts
index c8745dde7b..4cf26ed443 100644
--- a/packages/frontend/apps/electron/src/main/protocol.ts
+++ b/packages/frontend/apps/electron/src/main/protocol.ts
@@ -4,6 +4,7 @@ import { app, net, protocol, session } from 'electron';
 import cookieParser from 'set-cookie-parser';
 
 import { resourcesPath } from '../shared/utils';
+import { anotherHost, mainHost } from './constants';
 import { logger } from './logger';
 
 protocol.registerSchemesAsPrivileged([
@@ -43,6 +44,10 @@ function isNetworkResource(pathname: string) {
 async function handleFileRequest(request: Request) {
   const urlObject = new URL(request.url);
 
+  if (urlObject.host === anotherHost) {
+    urlObject.host = mainHost;
+  }
+
   const isAbsolutePath = urlObject.host !== '.';
 
   // Redirect to webpack dev server if defined