diff --git a/src/pages/signin/ChooseSSOOrMagicCode.tsx b/src/pages/signin/ChooseSSOOrMagicCode.tsx
index 4143c2b733e0..3895b303020b 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.tsx
+++ b/src/pages/signin/ChooseSSOOrMagicCode.tsx
@@ -1,100 +1,67 @@
-import React, {useEffect} from 'react';
-import {Keyboard, View} from 'react-native';
+import React from 'react';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
-import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
-import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as Session from '@userActions/Session';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Account, Credentials} from '@src/types/onyx';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
-import Terms from './Terms';
+import type {Account} from '@src/types/onyx';
+import ValidateCodeForm from './ValidateCodeForm';
 
 type ChooseSSOOrMagicCodeOnyxProps = {
-    /** The credentials of the logged in person */
-    credentials: OnyxEntry<Credentials>;
-
     /** The details about the account that the user is signing in with */
     account: OnyxEntry<Account>;
 };
 
 type ChooseSSOOrMagicCodeProps = ChooseSSOOrMagicCodeOnyxProps & {
-    /** Function that returns whether the user is using SAML or magic codes to log in */
-    setIsUsingMagicCode: (value: boolean) => void;
+    /** Determines if user is switched to using recovery code instead of 2fa code */
+    isUsingRecoveryCode: boolean;
+
+    /** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */
+    setIsUsingRecoveryCode: (value: boolean) => void;
 };
 
-function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: ChooseSSOOrMagicCodeProps) {
+function ChooseSSOOrMagicCode({account, isUsingRecoveryCode, setIsUsingRecoveryCode}: ChooseSSOOrMagicCodeProps) {
     const styles = useThemeStyles();
-    const {isKeyboardShown} = useKeyboardState();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth} = useWindowDimensions();
-
-    // This view doesn't have a field for user input, so dismiss the device keyboard if shown
-    useEffect(() => {
-        if (!isKeyboardShown) {
-            return;
-        }
-        Keyboard.dismiss();
-    }, [isKeyboardShown]);
+    const loginTextAfterMagicCode = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
+    const loginText = account?.requiresTwoFactorAuth ? loginTextAfterMagicCode : translate('samlSignIn.orContinueWithMagicCode');
 
     return (
-        <>
-            <View>
-                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
-                <Button
-                    isDisabled={isOffline}
-                    success
-                    large
-                    style={[styles.mv3]}
-                    text={translate('samlSignIn.useSingleSignOn')}
-                    isLoading={account?.isLoading}
-                    onPress={() => {
-                        Navigation.navigate(ROUTES.SAML_SIGN_IN);
-                    }}
-                />
+        <View>
+            <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
+            <Button
+                isDisabled={isOffline}
+                success
+                large
+                style={[styles.mv3]}
+                text={translate('samlSignIn.useSingleSignOn')}
+                onPress={() => {
+                    Navigation.navigate(ROUTES.SAML_SIGN_IN);
+                }}
+            />
 
-                <View style={[styles.mt5]}>
-                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>
-                        {translate('samlSignIn.orContinueWithMagicCode')}
-                    </Text>
-                </View>
-
-                <Button
-                    isDisabled={isOffline}
-                    style={[styles.mv3]}
-                    large
-                    text={translate('samlSignIn.useMagicCode')}
-                    isLoading={account?.isLoading && account?.loadingForm === (account?.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)}
-                    onPress={() => {
-                        Session.resendValidateCode(credentials?.login);
-                        setIsUsingMagicCode(true);
-                    }}
-                />
-                {!!account && !isEmptyObject(account.errors) && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(account)} />}
-                <ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} />
-            </View>
-            <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
-                <Terms />
+            <View style={[styles.mt5]}>
+                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{loginText}</Text>
             </View>
-        </>
+
+            <ValidateCodeForm
+                isVisible
+                isUsingRecoveryCode={isUsingRecoveryCode}
+                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+            />
+        </View>
     );
 }
 
 ChooseSSOOrMagicCode.displayName = 'ChooseSSOOrMagicCode';
 
-export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    account: {key: ONYXKEYS.ACCOUNT},
-})(ChooseSSOOrMagicCode);
+export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({account: {key: ONYXKEYS.ACCOUNT}})(ChooseSSOOrMagicCode);
diff --git a/src/pages/signin/SignInPage.tsx b/src/pages/signin/SignInPage.tsx
index 38da932af6e8..94a4ce1f7951 100644
--- a/src/pages/signin/SignInPage.tsx
+++ b/src/pages/signin/SignInPage.tsx
@@ -279,7 +279,12 @@ function SignInPageInner({credentials, account, activeClients = [], preferredLoc
                 {!shouldShowAnotherLoginPageOpenedMessage && (
                     <>
                         {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
-                        {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
+                        {shouldShowChooseSSOOrMagicCode && (
+                            <ChooseSSOOrMagicCode
+                                isUsingRecoveryCode={isUsingRecoveryCode}
+                                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+                            />
+                        )}
                         {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
                     </>
                 )}
diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx
index 3532c17181db..9071eb55ac26 100644
--- a/src/pages/signin/SignInPageLayout/index.tsx
+++ b/src/pages/signin/SignInPageLayout/index.tsx
@@ -144,8 +144,8 @@ function SignInPageLayout(
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
-                    <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(backgroundImageHeight), StyleUtils.getSignInBgStyles(theme)]}>
-                        <View style={[styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
+                    <View style={[styles.dBlock, styles.flexColumn, styles.overflowHidden, StyleUtils.getSignInBgStyles(theme)]}>
+                        <View style={[styles.dBlock, styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
                             <BackgroundImage
                                 isSmallScreen
                                 pointerEvents="none"