diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
similarity index 66%
rename from src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
rename to src/pages/signin/SignInPageLayout/SignInPageContent.js
index b17e12753313..5d7d6d2eb4d4 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -11,9 +11,10 @@ import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Form from '../../../components/Form';
 import compose from '../../../libs/compose';
-import scrollViewContentContainerStyles from './signInPageStyles.js';
+import scrollViewContentContainerStyles from './signInPageStyles';
 import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView';
 import withKeyboardState from '../../../components/withKeyboardState';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -26,31 +27,35 @@ const propTypes = {
     /** Whether to show welcome text on a particular page */
     shouldShowWelcomeText: PropTypes.bool.isRequired,
 
-    /** SafeArea insets */
-    insets: PropTypes.shape(PropTypes.object),
-
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
-const defaultProps = {
-    insets: {},
-};
-
-const SignInPageLayoutNarrow = props => (
+const SignInPageContent = props => (
     <ScrollView
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
         style={[
             styles.h100,
             styles.alignSelfCenter,
+            !props.isSmallScreenWidth && styles.signInPageWideLeftContainer,
+        ]}
+        contentContainerStyle={[
+            scrollViewContentContainerStyles,
+            !props.isSmallScreenWidth && styles.ph6,
         ]}
-        contentContainerStyle={scrollViewContentContainerStyles}
     >
-        <Form style={[styles.flex1, styles.signInPageNarrowContentContainer, styles.alignSelfStretch, styles.ph5]}>
+        <Form style={[
+            styles.flex1,
+            styles.alignSelfStretch,
+            props.isSmallScreenWidth && styles.signInPageNarrowContentContainer,
+            props.isSmallScreenWidth ? styles.ph5 : styles.ph4,
+        ]}
+        >
             <LoginKeyboardAvoidingView
                 behavior="position"
                 contentContainerStyle={[
-                    styles.mt40Percentage,
+                    props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : styles.signInPageWideLeftContentMargin,
                     styles.mb3,
                     StyleUtils.getModalPaddingStyles({
                         shouldAddBottomSafeAreaPadding: true,
@@ -59,7 +64,11 @@ const SignInPageLayoutNarrow = props => (
                     }),
                 ]}
             >
-                <View style={[styles.componentHeightLarge, styles.mb2]}>
+                <View style={[
+                    styles.componentHeightLarge,
+                    ...(props.isSmallScreenWidth ? [styles.mb2] : [styles.mt6, styles.mb5]),
+                ]}
+                >
                     <ExpensifyCashLogo
                         width={variables.componentSizeLarge}
                         height={variables.componentSizeLarge}
@@ -73,18 +82,20 @@ const SignInPageLayoutNarrow = props => (
                 {props.children}
             </LoginKeyboardAvoidingView>
         </Form>
-        <View style={[styles.mb5, styles.alignSelfCenter, styles.signInPageNarrowContentContainer, styles.ph5]}>
+        <View style={[styles.mb5, styles.alignSelfCenter, props.isSmallScreenWidth && styles.signInPageNarrowContentContainer, styles.ph5]}>
             <TermsAndLicenses />
         </View>
     </ScrollView>
 );
 
-SignInPageLayoutNarrow.propTypes = propTypes;
-SignInPageLayoutNarrow.defaultProps = defaultProps;
-SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow';
+SignInPageContent.propTypes = propTypes;
+SignInPageContent.displayName = 'SignInPageContent';
 
 export default compose(
+    withWindowDimensions,
     withLocalize,
+
+    // KeyboardState HOC is needed to trigger recalculation of the UI when keyboard opens or closes
     withKeyboardState,
     withSafeAreaInsets,
-)(SignInPageLayoutNarrow);
+)(SignInPageContent);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
deleted file mode 100755
index d62a942be99c..000000000000
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import SVGImage from '../../../components/SVGImage';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
-import ExpensifyText from '../../../components/ExpensifyText';
-import variables from '../../../styles/variables';
-import TermsAndLicenses from '../TermsAndLicenses';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Form from '../../../components/Form';
-
-const propTypes = {
-    /** The children to show inside the layout */
-    children: PropTypes.node.isRequired,
-
-    /** Welcome text to show in the header of the form, changes depending
-     * on form type (set password, sign in, etc.) */
-    welcomeText: PropTypes.string.isRequired,
-
-    /* Flag to check medium screen with device */
-    isMediumScreenWidth: PropTypes.bool.isRequired,
-
-    /** Whether to show welcome text on a particular page */
-    shouldShowWelcomeText: PropTypes.bool.isRequired,
-
-    ...withLocalizePropTypes,
-};
-
-const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
-
-const SignInPageLayoutWide = props => (
-    <View style={[styles.flex1, styles.signInPageInner]}>
-        <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
-            <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
-                <View style={[
-                    styles.flex1,
-                    styles.dFlex,
-                    styles.flexColumn,
-                    styles.mt40Percentage,
-                    styles.signInPageFormContainer,
-                    styles.alignSelfCenter,
-                ]}
-                >
-                    <View style={[styles.flex1]}>
-                        <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
-                            <ExpensifyCashLogo
-                                width={variables.componentSizeLarge}
-                                height={variables.componentSizeLarge}
-                            />
-                        </View>
-                        {props.shouldShowWelcomeText && (
-                            <ExpensifyText style={[styles.mv5, styles.textLabel, styles.h3]}>
-                                {props.welcomeText}
-                            </ExpensifyText>
-                        )}
-                        <Form>{props.children}</Form>
-                    </View>
-                    <View style={[styles.mv5]}>
-                        <TermsAndLicenses />
-                    </View>
-                </View>
-            </View>
-            <View style={[
-                styles.flexGrow1,
-                StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-                props.isMediumScreenWidth && styles.alignItemsCenter,
-            ]}
-            >
-                <SVGImage
-                    width="100%"
-                    height="100%"
-                    src={backgroundStyle.backgroundImageUri}
-                    resizeMode={props.isMediumScreenWidth ? 'contain' : 'cover'}
-                />
-            </View>
-        </View>
-    </View>
-);
-
-SignInPageLayoutWide.propTypes = propTypes;
-SignInPageLayoutWide.displayName = 'SignInPageLayoutWide';
-
-export default withLocalize(SignInPageLayoutWide);
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 813b051de259..e0495202839e 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import SignInPageLayoutNarrow from './SignInPageLayoutNarrow';
-import SignInPageLayoutWide from './SignInPageLayoutWide';
+import SignInPageContent from './SignInPageContent';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import SVGImage from '../../../components/SVGImage';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -18,26 +21,42 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInPageLayout = props => (
-    !props.isSmallScreenWidth
-        ? (
-            <SignInPageLayoutWide
-                welcomeText={props.welcomeText}
-                isMediumScreenWidth={props.isMediumScreenWidth}
-                shouldShowWelcomeText={props.shouldShowWelcomeText}
-            >
-                {props.children}
-            </SignInPageLayoutWide>
-        )
-        : (
-            <SignInPageLayoutNarrow
-                welcomeText={props.welcomeText}
-                shouldShowWelcomeText={props.shouldShowWelcomeText}
-            >
-                {props.children}
-            </SignInPageLayoutNarrow>
-        )
-);
+const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
+
+const SignInPageLayout = (props) => {
+    const content = (
+        <SignInPageContent
+            welcomeText={props.welcomeText}
+            shouldShowWelcomeText={props.shouldShowWelcomeText}
+        >
+            {props.children}
+        </SignInPageContent>
+    );
+
+    if (props.isSmallScreenWidth) {
+        return content;
+    }
+
+    return (
+        <View style={[styles.flex1, styles.signInPageInner]}>
+            <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
+                {content}
+                <View style={[
+                    styles.flexGrow1,
+                    StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+                    props.isMediumScreenWidth && styles.alignItemsCenter,
+                ]}
+                >
+                    <SVGImage
+                        width="100%"
+                        height="100%"
+                        src={backgroundStyle.backgroundImageUri}
+                    />
+                </View>
+            </View>
+        </View>
+    );
+};
 
 SignInPageLayout.propTypes = propTypes;
 SignInPageLayout.displayName = 'SignInPageLayout';
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
similarity index 100%
rename from src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js
rename to src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
similarity index 100%
rename from src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js
rename to src/pages/signin/SignInPageLayout/signInPageStyles/index.js
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 5aae401b91a8..6fc13c5449d7 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -811,8 +811,17 @@ const styles = {
         maxWidth: 335,
     },
 
+    signInPageNarrowContentMargin: {
+        marginTop: '40%',
+    },
+
     signInPageWideLeftContainer: {
         width: 375,
+        maxWidth: 375,
+    },
+
+    signInPageWideLeftContentMargin: {
+        marginTop: '44.5%',
     },
 
     signInPageWideHeroContent: {
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 9696cc0e7afe..a33ea6fd95a7 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -125,10 +125,6 @@ export default {
         marginTop: 24,
     },
 
-    mt40Percentage: {
-        marginTop: '40%',
-    },
-
     mb0: {
         marginBottom: 0,
     },