diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
index 02911676d430..003bdbe6a968 100644
--- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
@@ -25,6 +25,7 @@ import Clipboard from '../../../../libs/Clipboard';
 import themeColors from '../../../../styles/themes/default';
 import localFileDownload from '../../../../libs/localFileDownload';
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
+import * as StyleUtils from '../../../../styles/StyleUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -67,7 +68,7 @@ function CodesPage(props) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
             />
             <FullPageOfflineBlockingView>
-                <ScrollView contentContainerStyle={styles.flex1}>
+                <ScrollView>
                     <Section
                         title={props.translate('twoFactorAuth.keepCodesSafe')}
                         icon={Illustrations.ShieldYellow}
@@ -95,7 +96,7 @@ function CodesPage(props) {
                                                 </Text>
                                             ))}
                                     </View>
-                                    <View style={styles.twoFactorAuthCodesButtonsContainer}>
+                                    <View style={[styles.twoFactorAuthCodesButtonsContainer, StyleUtils.getWrappingStyle(props.isExtraSmallScreenWidth)]}>
                                         <PressableWithDelayToggle
                                             text={props.translate('twoFactorAuth.copyCodes')}
                                             icon={Expensicons.Copy}
@@ -123,15 +124,15 @@ function CodesPage(props) {
                             )}
                         </View>
                     </Section>
-                    <FixedFooter style={[styles.twoFactorAuthFooter]}>
-                        <Button
-                            success
-                            text={props.translate('common.next')}
-                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
-                            isDisabled={isNextButtonDisabled}
-                        />
-                    </FixedFooter>
                 </ScrollView>
+                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                    <Button
+                        success
+                        text={props.translate('common.next')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
+                        isDisabled={isNextButtonDisabled}
+                    />
+                </FixedFooter>
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
index d3a53a0a03be..ec7435e292fc 100644
--- a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
@@ -138,7 +138,7 @@ function VerifyPage(props) {
                         <TwoFactorAuthForm />
                     </View>
                 </ScrollView>
-                <FixedFooter style={[styles.twoFactorAuthFooter]}>
+                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
                     <Button
                         success
                         text={props.translate('common.next')}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index b7b81488d71f..c9ff8e300fde 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1184,6 +1184,17 @@ function getOuterModalStyle(windowHeight, viewportOffsetTop) {
     return Browser.isMobile() ? {maxHeight: windowHeight, marginTop: viewportOffsetTop} : {};
 }
 
+/**
+ * Returns style object for flexWrap depending on the screen size
+ * @param {Boolean} isExtraSmallScreenWidth
+ * @return {Object}
+ */
+function getWrappingStyle(isExtraSmallScreenWidth) {
+    return {
+        flexWrap: isExtraSmallScreenWidth ? 'wrap' : 'nowrap',
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -1250,4 +1261,5 @@ export {
     getMentionTextColor,
     getHeightOfMagicCodeInput,
     getOuterModalStyle,
+    getWrappingStyle,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 70cfac3de847..69ec36e3f667 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2228,10 +2228,6 @@ const styles = {
         minWidth: 100,
     },
 
-    twoFactorAuthFooter: {
-        marginTop: 'auto',
-    },
-
     anonymousRoomFooter: {
         flexDirection: 'row',
         alignItems: 'center',
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index e1cbb7e42469..e6823e43e921 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -189,6 +189,10 @@ export default {
         marginTop: 44,
     },
 
+    mtAuto: {
+        marginTop: 'auto',
+    },
+
     mb0: {
         marginBottom: 0,
     },