diff --git a/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts b/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts
index 997e26696e..a79594a3e7 100644
--- a/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts
+++ b/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts
@@ -7,6 +7,7 @@ export const scrollableContainer = style({
   alignItems: 'center',
   height: '100vh',
   padding: '0 200px',
+  backgroundColor: 'var(--affine-background-primary-color)',
   '@media': {
     'screen and (max-width: 1024px)': {
       padding: '80px 36px',