diff --git a/packages/frontend/apps/electron/renderer/app.css.ts b/packages/frontend/apps/electron/renderer/app.css.ts
new file mode 100644
index 0000000000..eaf1a4df02
--- /dev/null
+++ b/packages/frontend/apps/electron/renderer/app.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const fallback = style({
+  paddingTop: 52,
+});
diff --git a/packages/frontend/apps/electron/renderer/shell/shell.css.ts b/packages/frontend/apps/electron/renderer/shell/shell.css.ts
index f128873abd..9b3c7d1d35 100644
--- a/packages/frontend/apps/electron/renderer/shell/shell.css.ts
+++ b/packages/frontend/apps/electron/renderer/shell/shell.css.ts
@@ -18,14 +18,13 @@ export const root = style({
 
 export const appTabsHeader = style({
   zIndex: 1,
+  position: 'absolute',
+  top: 0,
 });
 
 export const fallbackRoot = style({
-  position: 'absolute',
-  paddingTop: 52,
   width: '100%',
   height: '100%',
-  zIndex: 0,
 });
 
 export const splitViewFallback = style({
diff --git a/packages/frontend/core/src/components/affine/app-container.css.ts b/packages/frontend/core/src/components/affine/app-container.css.ts
new file mode 100644
index 0000000000..18aa43aa19
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/app-container.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const electronFallback = style({
+  paddingTop: 52,
+});
diff --git a/packages/frontend/core/src/components/affine/app-container.tsx b/packages/frontend/core/src/components/affine/app-container.tsx
index 3d4bc9386c..2541866782 100644
--- a/packages/frontend/core/src/components/affine/app-container.tsx
+++ b/packages/frontend/core/src/components/affine/app-container.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
@@ -7,6 +8,7 @@ import {
   AppContainer as AppContainerWithoutSettings,
   MainContainerFallback,
 } from '../workspace';
+import * as styles from './app-container.css';
 
 export const AppContainer = (props: WorkspaceRootProps) => {
   const { appSettings } = useAppSettingHelper();
@@ -31,7 +33,12 @@ export const AppFallback = ({
   className?: string;
 }>): ReactElement => {
   return (
-    <AppContainer className={className}>
+    <AppContainer
+      className={clsx(
+        className,
+        environment.isElectron && styles.electronFallback
+      )}
+    >
       <AppSidebarFallback />
       <MainContainerFallback>{children}</MainContainerFallback>
     </AppContainer>