diff --git a/src/pages/authentication/AuthWrapper.js b/src/pages/authentication/AuthWrapper.js
index f5b6b4c..8ec5b56 100644
--- a/src/pages/authentication/AuthWrapper.js
+++ b/src/pages/authentication/AuthWrapper.js
@@ -190,17 +190,20 @@ const AuthWrapper = ({ children }) => {
           direction="row"
           justifyContent="space-between"
           alignItems="center"
-          sx={{ minHeight: '87vh' }}
+          sx={{
+            minHeight: { xs: '100vh', md: '87vh' },
+            flexDirection: { xs: 'column', md: 'row' }
+          }}
         >
-          <Grid item xs={12} md={8} lg={8} xl={8}>
+          <Grid item xs={12} md={8} lg={8} xl={8} sx={{ flexShrink: { xs: 0, md: 1 } }}>
             <Grid
               container
               direction="column"
-              justifyContent="flex-start"
-              alignItems="flex-start"
-              sx={{ minHeight: { md: 'calc(87vh)' } }}
+              justifyContent={{ xs: 'center', md: 'flex-start' }}
+              alignItems={{ xs: 'center', md: 'flex-start' }}
+              sx={{ minHeight: { xs: '45vh', md: 'calc(87vh)' } }}
             >
-              <Grid item xs={12} sx={{ ml: 4 }}>
+              <Grid item xs={12} sx={{ px: { xs: 2 }, pl: { md: 4 }, pt: { xs: 4, sm: 2, md: 1.5 }, pb: { xs: 4, sm: 0 } }}>
                 {checkPaymentSuspension() ? (
                   <Typography style={{ color: 'red', textAlign: 'flex-start' }}>
                     <div
@@ -233,7 +236,7 @@ const AuthWrapper = ({ children }) => {
                 spacing={2}
                 sx={{ minHeight: { md: 'calc(50vh)' } }}
               >
-                <Grid item xs={12} sx={{ ml: 4, mt: 12, display: { xs: 'none', sm: 'block' } }}>
+                <Grid item xs={12} sx={{ mt: { sm: 2, md: 12 }, display: { xs: 'none', sm: 'block' } }}>
                   <Typography style={{ textAlign: 'center', fontSize: '1.8rem' }}>
                     <FormattedMessage id="HKSARGOV" />
                   </Typography>
@@ -255,12 +258,29 @@ const AuthWrapper = ({ children }) => {
             </Grid>
           </Grid>
 
-          <Grid item xs={12} md={4} lg={4} xl={4}>
+          <Grid
+            item
+            xs={12}
+            md={4}
+            lg={4}
+            xl={4}
+            sx={{
+              flex: { xs: '1 1 0%', md: '0 0 auto' },
+              minHeight: { xs: 0, md: 'auto' },
+              display: { xs: 'flex', md: 'block' },
+              alignItems: { xs: 'center', md: 'stretch' },
+              justifyContent: { xs: 'center', md: 'flex-start' }
+            }}
+          >
             <Grid
               container
               justifyContent="center"
               alignItems="center"
-              sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' } }}
+              sx={{
+                minHeight: { xs: '100%', md: 'calc(90vh - 112px)' },
+                height: { xs: '100%', md: 'auto' },
+                width: { xs: '100%', md: 'auto' }
+              }}
             >
               <Grid item xs={12} md={11} lg={11} xl={11}>
                 <AuthCard>{children}</AuthCard>