diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js
index f428dfc978e5..fc53f563e3ab 100644
--- a/src/components/withWindowDimensions.js
+++ b/src/components/withWindowDimensions.js
@@ -71,10 +71,12 @@ export default function (WrappedComponent) {
         onDimensionChange(newDimensions) {
             const {window} = newDimensions;
             const isSmallScreenWidth = window.width <= variables.mobileResponsiveWidthBreakpoint;
+            const isMediumScreenWidth = !isSmallScreenWidth && window.width <= variables.mediumScreenResponsiveWidthBreakpoint;
             this.setState({
                 windowHeight: window.height,
                 windowWidth: window.width,
                 isSmallScreenWidth,
+                isMediumScreenWidth,
             });
         }
 
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
index 4164c902b128..93d4cadd159c 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -19,11 +19,14 @@ const propTypes = {
      * on form type (set password, sign in, etc.) */
     welcomeText: PropTypes.string.isRequired,
 
+    /* Flag to check medium screen with device */
+    isMediumScreenWidth: PropTypes.string.isRequired,
+
     ...withLocalizePropTypes,
 };
 
 const SignInPageLayoutWide = props => (
-    <View style={[styles.signInPageInner]}>
+    <View style={[styles.flex1, styles.signInPageInner]}>
         <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
             <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
                 <View style={[
@@ -61,7 +64,9 @@ const SignInPageLayoutWide = props => (
                 styles.justifyContentAround,
                 styles.backgroundBlue,
                 styles.pb10Percentage,
-                styles.p20,
+                !props.isMediumScreenWidth && styles.p20,
+                props.isMediumScreenWidth && styles.p10,
+                props.isMediumScreenWidth && styles.alignItemsCenter,
             ]}
             >
                 <View style={[styles.dFlex, styles.flexColumnReverse, styles.alignItemsCenter, styles.w50]}>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index dc07a96af5a3..1a5a88a4c7ad 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -9,7 +9,14 @@ const propTypes = {
 
 const SignInPageLayout = props => (
     !props.isSmallScreenWidth
-        ? <SignInPageLayoutWide welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutWide>
+        ? (
+            <SignInPageLayoutWide
+                welcomeText={props.welcomeText}
+                isMediumScreenWidth={props.isMediumScreenWidth}
+            >
+                {props.children}
+            </SignInPageLayoutWide>
+        )
         : <SignInPageLayoutNarrow welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutNarrow>
 );
 
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index a376ad817217..0d7a2a936b6e 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -184,7 +184,9 @@ export default {
     p5: {
         padding: 20,
     },
-
+    p10: {
+        padding: 40,
+    },
     p20: {
         padding: 80,
     },