diff --git a/src/pages/signin/ChooseSSOOrMagicCode.tsx b/src/pages/signin/ChooseSSOOrMagicCode.tsx
index 3895b303020b..4143c2b733e0 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.tsx
+++ b/src/pages/signin/ChooseSSOOrMagicCode.tsx
@@ -1,67 +1,100 @@
-import React from 'react';
-import {View} from 'react-native';
+import React, {useEffect} from 'react';
+import {Keyboard, 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} from '@src/types/onyx';
-import ValidateCodeForm from './ValidateCodeForm';
+import type {Account, Credentials} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
+import Terms from './Terms';
 
 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 & {
-    /** 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 that returns whether the user is using SAML or magic codes to log in */
+    setIsUsingMagicCode: (value: boolean) => void;
 };
 
-function ChooseSSOOrMagicCode({account, isUsingRecoveryCode, setIsUsingRecoveryCode}: ChooseSSOOrMagicCodeProps) {
+function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: ChooseSSOOrMagicCodeProps) {
     const styles = useThemeStyles();
+    const {isKeyboardShown} = useKeyboardState();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const loginTextAfterMagicCode = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
-    const loginText = account?.requiresTwoFactorAuth ? loginTextAfterMagicCode : translate('samlSignIn.orContinueWithMagicCode');
+
+    // This view doesn't have a field for user input, so dismiss the device keyboard if shown
+    useEffect(() => {
+        if (!isKeyboardShown) {
+            return;
+        }
+        Keyboard.dismiss();
+    }, [isKeyboardShown]);
 
     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')}
-                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')}
+                    isLoading={account?.isLoading}
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SAML_SIGN_IN);
+                    }}
+                />
 
-            <View style={[styles.mt5]}>
-                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{loginText}</Text>
-            </View>
+                <View style={[styles.mt5]}>
+                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>
+                        {translate('samlSignIn.orContinueWithMagicCode')}
+                    </Text>
+                </View>
 
-            <ValidateCodeForm
-                isVisible
-                isUsingRecoveryCode={isUsingRecoveryCode}
-                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
-            />
-        </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>
+        </>
     );
 }
 
 ChooseSSOOrMagicCode.displayName = 'ChooseSSOOrMagicCode';
 
-export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({account: {key: ONYXKEYS.ACCOUNT}})(ChooseSSOOrMagicCode);
+export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({
+    credentials: {key: ONYXKEYS.CREDENTIALS},
+    account: {key: ONYXKEYS.ACCOUNT},
+})(ChooseSSOOrMagicCode);
diff --git a/src/pages/signin/SignInPage.tsx b/src/pages/signin/SignInPage.tsx
index 94a4ce1f7951..38da932af6e8 100644
--- a/src/pages/signin/SignInPage.tsx
+++ b/src/pages/signin/SignInPage.tsx
@@ -279,12 +279,7 @@ function SignInPageInner({credentials, account, activeClients = [], preferredLoc
                 {!shouldShowAnotherLoginPageOpenedMessage && (
                     <>
                         {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
-                        {shouldShowChooseSSOOrMagicCode && (
-                            <ChooseSSOOrMagicCode
-                                isUsingRecoveryCode={isUsingRecoveryCode}
-                                setIsUsingRecoveryCode={setIsUsingRecoveryCode}
-                            />
-                        )}
+                        {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
                         {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
                     </>
                 )}
diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx
index 9071eb55ac26..3532c17181db 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.dBlock, styles.flexColumn, styles.overflowHidden, StyleUtils.getSignInBgStyles(theme)]}>
-                        <View style={[styles.dBlock, styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
+                    <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)]}>
                             <BackgroundImage
                                 isSmallScreen
                                 pointerEvents="none"