diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx
index 2a8aaa30be..6a2ba3f33a 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx
@@ -4,6 +4,11 @@ import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
+import {
+  StyledTwoFactorInstructions,
+  StyledTwoFactorMainContent,
+} from '@/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationStyles';
+import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth';
 import { extractSecretFromOtpUri } from '@/settings/two-factor-authentication/utils/extractSecretFromOtpUri';
 import { styled } from '@linaria/react';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -20,36 +25,12 @@ import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 
 const QRCode = resolveCjsModuleDefaultExport(QRCodeModule);
 
-const StyledMainContentContainer = styled.div`
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
-  text-align: center;
-`;
-
-const StyledTextContainer = styled.div`
-  align-items: center;
-  color: ${themeCssVariables.font.color.tertiary};
-  font-size: ${themeCssVariables.font.size.sm};
-
-  margin-bottom: ${themeCssVariables.spacing[4]};
-  max-width: 280px;
-  text-align: center;
-
-  & > a {
-    color: ${themeCssVariables.font.color.tertiary};
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-`;
-
 const StyledForm = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  max-width: 100%;
+  width: ${ONBOARDING_CONTENT_BLOCK_WIDTH}px;
 `;
 
 const StyledCopySetupKeyLink = styled.button`
@@ -94,13 +75,13 @@ export const SignInUpTwoFactorAuthenticationProvision = () => {
     <>
       <TwoFactorAuthenticationSetupEffect />
       <StyledForm>
-        <StyledTextContainer>
+        <StyledTwoFactorInstructions>
           <Trans>
             Use authenticator apps and browser extensions like 1Password, Authy,
             Microsoft Authenticator to generate one-time passwords
           </Trans>
-        </StyledTextContainer>
-        <StyledMainContentContainer>
+        </StyledTwoFactorInstructions>
+        <StyledTwoFactorMainContent>
           {!qrCode ? <Loader /> : <QRCode value={qrCode} />}
           {qrCode && (
             <StyledCopySetupKeyLink onClick={handleCopySetupKey}>
@@ -108,7 +89,7 @@ export const SignInUpTwoFactorAuthenticationProvision = () => {
               <Trans>Copy Setup Key</Trans>
             </StyledCopySetupKeyLink>
           )}
-        </StyledMainContentContainer>
+        </StyledTwoFactorMainContent>
         <MainButton
           title={t`Next`}
           onClick={handleClick}
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationStyles.ts b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationStyles.ts
new file mode 100644
index 0000000000..e6ca303c93
--- /dev/null
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationStyles.ts
@@ -0,0 +1,26 @@
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+export const StyledTwoFactorMainContent = styled.div`
+  margin-bottom: ${themeCssVariables.spacing[8]};
+  margin-top: ${themeCssVariables.spacing[4]};
+  text-align: center;
+`;
+
+export const StyledTwoFactorInstructions = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.tertiary};
+  font-size: ${themeCssVariables.font.size.sm};
+  margin-bottom: ${themeCssVariables.spacing[4]};
+  max-width: 280px;
+  text-align: center;
+
+  & > a {
+    color: ${themeCssVariables.font.color.tertiary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx
index 9a43669fcf..e769c0d098 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx
@@ -10,7 +10,12 @@ import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
+import {
+  StyledTwoFactorInstructions,
+  StyledTwoFactorMainContent,
+} from '@/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationStyles';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
+import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth';
 import { useCaptcha } from '@/client-config/hooks/useCaptcha';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -25,17 +30,12 @@ import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 
-const StyledMainContentContainer = styled.div`
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
-  text-align: center;
-`;
-
 const StyledForm = styled.form`
   align-items: center;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  max-width: 100%;
+  width: ${ONBOARDING_CONTENT_BLOCK_WIDTH}px;
 `;
 
 const StyledSlot = styled.div<{ isActive: boolean }>`
@@ -161,15 +161,6 @@ const StyledOTPContainer = styled.div`
 const StyledSlotGroup = styled.div`
   display: flex;
 `;
-const StyledTextContainer = styled.div`
-  align-items: center;
-  color: ${themeCssVariables.font.color.tertiary};
-  font-size: ${themeCssVariables.font.size.sm};
-
-  margin-bottom: ${themeCssVariables.spacing[4]};
-  max-width: 280px;
-  text-align: center;
-`;
 
 const StyledActionBackLinkContainer = styled.div`
   margin: ${themeCssVariables.spacing[3]} 0 0;
@@ -228,10 +219,10 @@ export const SignInUpTOTPVerification = () => {
 
   return (
     <StyledForm onSubmit={form.handleSubmit(submitOTP)}>
-      <StyledTextContainer>
+      <StyledTwoFactorInstructions>
         <Trans>Paste the code below</Trans>
-      </StyledTextContainer>
-      <StyledMainContentContainer>
+      </StyledTwoFactorInstructions>
+      <StyledTwoFactorMainContent>
         {/* // oxlint-disable-next-line react/jsx-props-no-spreading */}
         <Controller
           name="otp"
@@ -270,7 +261,7 @@ export const SignInUpTOTPVerification = () => {
             />
           )}
         />
-      </StyledMainContentContainer>
+      </StyledTwoFactorMainContent>
       <MainButton
         title={t`Submit`}
         type="submit"