diff --git a/packages/frontend/core/src/components/sign-in/sign-in.tsx b/packages/frontend/core/src/components/sign-in/sign-in.tsx
index 9a9f33e99b..f10161229f 100644
--- a/packages/frontend/core/src/components/sign-in/sign-in.tsx
+++ b/packages/frontend/core/src/components/sign-in/sign-in.tsx
@@ -165,6 +165,7 @@ export const SignInStep = ({
         <OAuth redirectUrl={state.redirectUrl} />
 
         <AuthInput
+          className={style.authInput}
           label={t['com.affine.settings.email']()}
           placeholder={t['com.affine.auth.sign.email.placeholder']()}
           onChange={setEmail}
@@ -176,6 +177,7 @@ export const SignInStep = ({
         />
 
         <Button
+          className={style.signInButton}
           style={{ width: '100%' }}
           size="extraLarge"
           data-testid="continue-login-button"
diff --git a/packages/frontend/core/src/components/sign-in/style.css.ts b/packages/frontend/core/src/components/sign-in/style.css.ts
index c83413b73a..b9382f5dd9 100644
--- a/packages/frontend/core/src/components/sign-in/style.css.ts
+++ b/packages/frontend/core/src/components/sign-in/style.css.ts
@@ -84,3 +84,11 @@ export const skipSection = style({
   flexDirection: 'column',
   alignItems: 'center',
 });
+
+export const authInput = style({
+  backgroundColor: cssVarV2.button.signinbutton.background,
+});
+
+export const signInButton = style({
+  backgroundColor: cssVarV2.button.signinbutton.background,
+});