diff --git a/src/app/[locale]/account/layout.tsx b/src/app/[locale]/account/layout.tsx
index 705b062d..5637627c 100644
--- a/src/app/[locale]/account/layout.tsx
+++ b/src/app/[locale]/account/layout.tsx
@@ -127,6 +127,8 @@ function AccountLayoutContent({
       maxWidth='xl'
       sx={{
         mx: 'auto',
+        my: { xs: 3, md: 5 },
+        px: { xs: 2, sm: 3, md: 4 },
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
diff --git a/src/app/[locale]/complete-registration/CompleteRegistration.tsx b/src/app/[locale]/complete-registration/CompleteRegistration.tsx
index 2d84892d..62c3c86d 100644
--- a/src/app/[locale]/complete-registration/CompleteRegistration.tsx
+++ b/src/app/[locale]/complete-registration/CompleteRegistration.tsx
@@ -15,6 +15,7 @@ import {
   Checkbox,
   CssBaseline,
   FormControlLabel,
+  Paper,
 } from '@mui/material';
 import { useAppDispatch, useRegistrationFlowRedirect } from '../../hooks';
 import { refreshUserInformation } from '../../store/profile-reducer';
@@ -101,14 +102,23 @@ export default function CompleteRegistration(): React.ReactElement {
   });
 
   return (
-    <Container component='main' maxWidth='sm'>
+    <Container component='main' maxWidth='sm' sx={{ my: { xs: 4, sm: 6 } }}>
       <CssBaseline />
-      <Box
+      <Paper
+        elevation={0}
+        variant='outlined'
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          p: { xs: 3, sm: 4 },
+          borderRadius: 2,
+          backgroundColor: 'background.paper',
         }}
       >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
         <Typography
           component='h1'
           variant='h5'
@@ -218,6 +228,7 @@ export default function CompleteRegistration(): React.ReactElement {
           </Alert>
         ) : null}
       </Box>
+      </Paper>
     </Container>
   );
 }
diff --git a/src/app/[locale]/sign-in/SignIn.tsx b/src/app/[locale]/sign-in/SignIn.tsx
index 8821fc16..af3ae4de 100644
--- a/src/app/[locale]/sign-in/SignIn.tsx
+++ b/src/app/[locale]/sign-in/SignIn.tsx
@@ -34,6 +34,7 @@ import {
   Divider,
   IconButton,
   InputAdornment,
+  Paper,
   Snackbar,
   Tooltip,
   useTheme,
@@ -124,7 +125,7 @@ export default function SignIn(): React.ReactElement {
   };
 
   return (
-    <Container component='main' maxWidth='xs'>
+    <Container component='main' maxWidth='sm' sx={{ my: { xs: 4, sm: 6 } }}>
       <Backdrop
         open={isLoading}
         sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
@@ -150,12 +151,21 @@ export default function SignIn(): React.ReactElement {
         </Alert>
       </Snackbar>
       <CssBaseline />
-      <Box
+      <Paper
+        elevation={0}
+        variant='outlined'
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          p: { xs: 3, sm: 4 },
+          borderRadius: 2,
+          backgroundColor: 'background.paper',
         }}
       >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
         <Typography
           component='h1'
           variant='h5'
@@ -320,6 +330,7 @@ export default function SignIn(): React.ReactElement {
           Sign in With Apple
         </Button>
       </Box>
+      </Paper>
     </Container>
   );
 }
diff --git a/src/app/[locale]/sign-up/SignUp.tsx b/src/app/[locale]/sign-up/SignUp.tsx
index 964424bd..d1b3d279 100644
--- a/src/app/[locale]/sign-up/SignUp.tsx
+++ b/src/app/[locale]/sign-up/SignUp.tsx
@@ -27,6 +27,7 @@ import {
   Alert,
   IconButton,
   InputAdornment,
+  Paper,
   Snackbar,
   Tooltip,
 } from '@mui/material';
@@ -145,7 +146,7 @@ export default function SignUp(): React.ReactElement {
   };
 
   return (
-    <Container component='main' maxWidth='xs'>
+    <Container component='main' maxWidth='sm' sx={{ my: { xs: 4, sm: 6 } }}>
       <Snackbar
         open={showNoEmailSnackbar}
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
@@ -164,12 +165,21 @@ export default function SignUp(): React.ReactElement {
         </Alert>
       </Snackbar>
       <CssBaseline />
-      <Box
+      <Paper
+        elevation={0}
+        variant='outlined'
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
+          p: { xs: 3, sm: 4 },
+          borderRadius: 2,
+          backgroundColor: 'background.paper',
         }}
       >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
         <Typography
           component='h1'
           variant='h5'
@@ -401,6 +411,7 @@ export default function SignUp(): React.ReactElement {
           Sign Up With Apple
         </Button>
       </Box>
+      </Paper>
     </Container>
   );
 }
diff --git a/src/app/[locale]/verify-email/PostRegistration.tsx b/src/app/[locale]/verify-email/PostRegistration.tsx
index 26775780..52b23fc9 100644
--- a/src/app/[locale]/verify-email/PostRegistration.tsx
+++ b/src/app/[locale]/verify-email/PostRegistration.tsx
@@ -5,7 +5,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import { EmailOutlined, InfoOutlined, Sync } from '@mui/icons-material';
-import { Alert, Button } from '@mui/material';
+import { Alert, Button, Paper } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
 import { emailVerified, verifyEmail } from '../../store/profile-reducer';
 import {
@@ -53,15 +53,22 @@ export default function PostRegistration(): React.ReactElement {
   }, []);
 
   return (
-    <Container component='main' maxWidth='sm'>
-      <Box
+    <Container component='main' maxWidth='sm' sx={{ my: { xs: 4, sm: 6 } }}>
+      <Paper
+        elevation={0}
+        variant='outlined'
         sx={{
-          ml: 2,
-          mr: 2,
-          display: 'flex',
-          flexDirection: 'column',
+          p: { xs: 3, sm: 4 },
+          borderRadius: 2,
+          backgroundColor: 'background.paper',
         }}
       >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
         <Typography
           component='h1'
           variant='h5'
@@ -106,6 +113,7 @@ export default function PostRegistration(): React.ReactElement {
           verified.
         </Box>
       </Box>
+      </Paper>
     </Container>
   );
 }