diff --git a/src/pages/components/DeleteUser.tsx b/src/pages/components/DeleteUser.tsx
index 65bf4b8..595ea30 100644
--- a/src/pages/components/DeleteUser.tsx
+++ b/src/pages/components/DeleteUser.tsx
@@ -31,9 +31,9 @@ export function DeleteUser() {
       verifyCode: '',
       token: '',
     },
-    validateOnChange: false,
     validationSchema: yup.object({
       verifyCode: yup.verifyCodeSchema,
+      password: yup.string().required('请输入密码'),
     }),
     onSubmit: async (values) => {
       await api.user.deleteUser(values)
@@ -62,6 +62,7 @@ export function DeleteUser() {
       <Button color="error" onClick={() => setOpen(true)}>
         删除用户
       </Button>
+
       <Dialog
         open={open}
         fullWidth
@@ -70,16 +71,17 @@ export function DeleteUser() {
       >
         <DialogTitle>删除用户</DialogTitle>
         <DialogContent dividers>
-          <TextField
-            {...formik.getFieldProps('email')}
-            disabled
-            helperText={' '}
-            fullWidth
-            label="邮箱"
-            sx={{ mt: 1 }}
-          />
-          <Grid container spacing={2}>
-            <Grid>
+          <Grid container spacing={[2, 1]}>
+            <Grid xs={12}>
+              <TextField
+                {...formik.getFieldProps('email')}
+                disabled
+                helperText=" "
+                fullWidth
+                label="邮箱"
+              />
+            </Grid>
+            <Grid xs={8}>
               <TextField
                 {...formik.getFieldProps('verifyCode')}
                 required
@@ -90,35 +92,35 @@ export function DeleteUser() {
                 fullWidth
                 label="验证码"
                 autoComplete="verifyCode"
-                autoFocus
-                sx={{ mt: 1 }}
               />
             </Grid>
-            <Grid mt={2} sx={{ flexGrow: 1 }}>
+            <Grid xs={4}>
               <Button
                 size="large"
                 fullWidth
                 variant="contained"
                 disabled={countdown > 0}
+                sx={{ mt: 1 }}
                 onClick={sendVerifyCode}
               >
                 {countdown > 0 ? countdown : '发送验证码'}
               </Button>
             </Grid>
+            <Grid xs={12}>
+              <TextField
+                {...formik.getFieldProps('password')}
+                required
+                error={formik.touched.password && !!formik.errors.password}
+                helperText={
+                  (formik.touched.password && formik.errors.password) || ' '
+                }
+                fullWidth
+                label="密码"
+                type="password"
+                autoComplete="current-password"
+              />
+            </Grid>
           </Grid>
-          <TextField
-            {...formik.getFieldProps('password')}
-            required
-            error={formik.touched.password && !!formik.errors.password}
-            helperText={
-              (formik.touched.password && formik.errors.password) || ' '
-            }
-            fullWidth
-            label="密码"
-            type="password"
-            autoComplete="current-password"
-            sx={{ mt: 1 }}
-          />
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>取消</Button>
@@ -127,16 +129,18 @@ export function DeleteUser() {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/* 二次确认对话框 */}
       <Dialog maxWidth="xs" open={confirm}>
         <DialogTitle>确定删除？</DialogTitle>
-        <DialogContent dividers>
+        <DialogContent>
           <DialogContentText>
             该用户的所有数据将被不可逆地抹除！
           </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setConfrim(false)}>取消</Button>
-          <Button color="error" type="submit" onClick={formik.submitForm}>
+          <Button color="error" onClick={formik.submitForm}>
             确定删除
           </Button>
         </DialogActions>
diff --git a/src/pages/forget-password.tsx b/src/pages/forget-password.tsx
index 52d2694..d992c52 100644
--- a/src/pages/forget-password.tsx
+++ b/src/pages/forget-password.tsx
@@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
 import Link from '@mui/material/Link'
 import Grid from '@mui/material/Unstable_Grid2'
-import Box from '@mui/material/Box'
 import KeyIcon from '@mui/icons-material/Key'
 import Typography from '@mui/material/Typography'
 import Container from '@mui/material/Container'
@@ -28,7 +27,6 @@ export default function ForgetPassword() {
       token: '',
       userId: '',
     },
-    validateOnChange: false,
     validationSchema: yup.object({
       email: yup.emailSchema,
       password: yup.passwordSchema,
@@ -46,7 +44,6 @@ export default function ForgetPassword() {
 
   async function sendVerifyCode() {
     await formik.validateField('email')
-    if (formik.errors.email) return
     setCountdown(COUNTDOWN_SECONDS)
     try {
       const res = await api.email.sendEmailVerifyCode({
@@ -61,27 +58,29 @@ export default function ForgetPassword() {
   }
 
   return (
-    <Container component="main" sx={{ width: 400 }}>
-      <Box
-        sx={{
-          marginTop: '20vh',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
+    <Container
+      component="main"
+      maxWidth="xs"
+      sx={{
+        marginTop: '20vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Avatar sx={{ bgcolor: 'primary.main' }}>
+        <KeyIcon />
+      </Avatar>
+      <Typography component="h1" variant="h5" mt={1} mb={3}>
+        找回密码
+      </Typography>
+      <Grid
+        container
+        component="form"
+        spacing={[2, 1]}
+        onSubmit={formik.handleSubmit}
       >
-        <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
-          <KeyIcon />
-        </Avatar>
-        <Typography component="h1" variant="h5">
-          找回密码
-        </Typography>
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          noValidate
-          sx={{ mt: 1, width: '100%' }}
-        >
+        <Grid xs={12}>
           <TextField
             {...formik.getFieldProps('email')}
             required
@@ -93,34 +92,32 @@ export default function ForgetPassword() {
             autoFocus
             sx={{ mt: 1 }}
           />
-          <Grid container spacing={2}>
-            <Grid>
-              <TextField
-                {...formik.getFieldProps('verifyCode')}
-                required
-                error={formik.touched.verifyCode && !!formik.errors.verifyCode}
-                helperText={
-                  (formik.touched.verifyCode && formik.errors.verifyCode) || ' '
-                }
-                fullWidth
-                label="验证码"
-                autoComplete="verifyCode"
-                autoFocus
-                sx={{ mt: 1 }}
-              />
-            </Grid>
-            <Grid mt={2} sx={{ flexGrow: 1 }}>
-              <Button
-                size="large"
-                fullWidth
-                variant="contained"
-                disabled={countdown > 0}
-                onClick={sendVerifyCode}
-              >
-                {countdown > 0 ? countdown : '发送验证码'}
-              </Button>
-            </Grid>
-          </Grid>
+        </Grid>
+        <Grid xs={8}>
+          <TextField
+            {...formik.getFieldProps('verifyCode')}
+            required
+            error={formik.touched.verifyCode && !!formik.errors.verifyCode}
+            helperText={
+              (formik.touched.verifyCode && formik.errors.verifyCode) || ' '
+            }
+            fullWidth
+            label="验证码"
+            autoComplete="verifyCode"
+          />
+        </Grid>
+        <Grid xs={4} mt={1}>
+          <Button
+            size="large"
+            fullWidth
+            variant="contained"
+            disabled={countdown > 0}
+            onClick={sendVerifyCode}
+          >
+            {countdown > 0 ? countdown : '发送验证码'}
+          </Button>
+        </Grid>
+        <Grid xs={12}>
           <TextField
             {...formik.getFieldProps('password')}
             required
@@ -132,18 +129,17 @@ export default function ForgetPassword() {
             label="新密码"
             type="password"
             autoComplete="current-password"
-            sx={{ mt: 1 }}
           />
-          <Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
+        </Grid>
+        <Grid xs={12}>
+          <Button type="submit" fullWidth variant="contained">
             重置密码
           </Button>
-          <Grid container justifyContent="flex-end" sx={{ mt: 2 }}>
-            <Grid>
-              <Link href="/login">登录</Link>
-            </Grid>
-          </Grid>
-        </Box>
-      </Box>
+        </Grid>
+        <Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
+          <Link href="/login">登录</Link>
+        </Grid>
+      </Grid>
     </Container>
   )
 }
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 99e9162..8989064 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -2,7 +2,7 @@ import Avatar from '@mui/material/Avatar'
 import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
 import Link from '@mui/material/Link'
-import Grid from '@mui/material/Grid'
+import Grid from '@mui/material/Unstable_Grid2'
 import Box from '@mui/material/Box'
 import LoginIcon from '@mui/icons-material/Login'
 import Typography from '@mui/material/Typography'
@@ -20,10 +20,9 @@ export default function Login() {
       email: '',
       password: '',
     },
-    validateOnChange: false,
     validationSchema: yup.object({
       email: yup.emailSchema,
-      // password: yup.passwordSchema,
+      password: yup.string().required('请输入密码'),
     }),
     onSubmit: async (values) => {
       const res = await api.user.login(values)
@@ -34,68 +33,63 @@ export default function Login() {
   })
 
   return (
-    <Container component="main" sx={{ width: 400 }}>
-      <Box
-        sx={{
-          marginTop: '20vh',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
-          <LoginIcon />
-        </Avatar>
-        <Typography component="h1" variant="h5">
-          登录
-        </Typography>
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          noValidate
+    <Container
+      component="main"
+      maxWidth="xs"
+      sx={{
+        marginTop: '20vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Avatar sx={{ bgcolor: 'primary.main' }}>
+        <LoginIcon />
+      </Avatar>
+      <Typography component="h1" variant="h5" mt={1} mb={3}>
+        登录
+      </Typography>
+      <Box component="form" onSubmit={formik.handleSubmit}>
+        <TextField
+          {...formik.getFieldProps('email')}
+          required
+          error={formik.touched.email && !!formik.errors.email}
+          helperText={(formik.touched.email && formik.errors.email) || ' '}
+          fullWidth
+          label="邮箱"
+          autoComplete="email"
+          autoFocus
           sx={{ mt: 1 }}
-        >
-          <TextField
-            {...formik.getFieldProps('email')}
-            required
-            error={formik.touched.email && !!formik.errors.email}
-            helperText={(formik.touched.email && formik.errors.email) || ' '}
-            fullWidth
-            label="邮箱"
-            autoComplete="email"
-            autoFocus
-            sx={{ mt: 1 }}
-          />
-          <TextField
-            {...formik.getFieldProps('password')}
-            required
-            error={formik.touched.password && !!formik.errors.password}
-            helperText={
-              (formik.touched.password && formik.errors.password) || ' '
-            }
-            fullWidth
-            label="密码"
-            type="password"
-            autoComplete="current-password"
-            sx={{ mt: 1 }}
-          />
-          <Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
-            登录
-          </Button>
-          <Grid container sx={{ mt: 2 }}>
-            <Grid item xs>
-              <Link href="/forget-password" variant="body2">
-                忘记密码？
-              </Link>
-            </Grid>
-            <Grid item>
-              <Typography component="span" variant="body2">
-                没有账号？
-              </Typography>
-              <Link href="/register">注册</Link>
-            </Grid>
+        />
+        <TextField
+          {...formik.getFieldProps('password')}
+          required
+          error={formik.touched.password && !!formik.errors.password}
+          helperText={
+            (formik.touched.password && formik.errors.password) || ' '
+          }
+          fullWidth
+          label="密码"
+          type="password"
+          autoComplete="current-password"
+          sx={{ mt: 1 }}
+        />
+        <Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
+          登录
+        </Button>
+        <Grid container sx={{ mt: 2 }}>
+          <Grid xs>
+            <Link href="/forget-password" variant="body2">
+              忘记密码？
+            </Link>
           </Grid>
-        </Box>
+          <Grid>
+            <Typography component="span" variant="body2">
+              没有账号？
+            </Typography>
+            <Link href="/register">注册</Link>
+          </Grid>
+        </Grid>
       </Box>
     </Container>
   )
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index da29533..f8c55f9 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -3,7 +3,6 @@ import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
 import Link from '@mui/material/Link'
 import Grid from '@mui/material/Unstable_Grid2'
-import Box from '@mui/material/Box'
 import AppRegistrationIcon from '@mui/icons-material/AppRegistration'
 import Typography from '@mui/material/Typography'
 import Container from '@mui/material/Container'
@@ -26,7 +25,6 @@ export default function Register() {
       verifyCode: '',
       token: '',
     },
-    validateOnChange: false,
     validationSchema: yup.object({
       email: yup.emailSchema,
       password: yup.passwordSchema,
@@ -42,7 +40,6 @@ export default function Register() {
 
   async function sendVerifyCode() {
     await formik.validateField('email')
-    if (formik.errors.email) return
     setCountdown(COUNTDOWN_SECONDS)
     try {
       const res = await api.email.sendEmailVerifyCode({
@@ -56,27 +53,29 @@ export default function Register() {
   }
 
   return (
-    <Container component="main" sx={{ width: 400 }}>
-      <Box
-        sx={{
-          marginTop: '20vh',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
+    <Container
+      component="main"
+      maxWidth="xs"
+      sx={{
+        marginTop: '20vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Avatar sx={{ bgcolor: 'primary.main' }}>
+        <AppRegistrationIcon />
+      </Avatar>
+      <Typography component="h1" variant="h5" mt={1} mb={3}>
+        注册
+      </Typography>
+      <Grid
+        container
+        component="form"
+        spacing={[2, 1]}
+        onSubmit={formik.handleSubmit}
       >
-        <Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
-          <AppRegistrationIcon />
-        </Avatar>
-        <Typography component="h1" variant="h5">
-          注册
-        </Typography>
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          noValidate
-          sx={{ mt: 1, width: '100%' }}
-        >
+        <Grid xs={12}>
           <TextField
             {...formik.getFieldProps('email')}
             required
@@ -88,34 +87,32 @@ export default function Register() {
             autoFocus
             sx={{ mt: 1 }}
           />
-          <Grid container spacing={2}>
-            <Grid>
-              <TextField
-                {...formik.getFieldProps('verifyCode')}
-                required
-                error={formik.touched.verifyCode && !!formik.errors.verifyCode}
-                helperText={
-                  (formik.touched.verifyCode && formik.errors.verifyCode) || ' '
-                }
-                fullWidth
-                label="验证码"
-                autoComplete="verifyCode"
-                autoFocus
-                sx={{ mt: 1 }}
-              />
-            </Grid>
-            <Grid mt={2} sx={{ flexGrow: 1 }}>
-              <Button
-                size="large"
-                fullWidth
-                variant="contained"
-                disabled={countdown > 0}
-                onClick={sendVerifyCode}
-              >
-                {countdown > 0 ? countdown : '发送验证码'}
-              </Button>
-            </Grid>
-          </Grid>
+        </Grid>
+        <Grid xs={8}>
+          <TextField
+            {...formik.getFieldProps('verifyCode')}
+            required
+            error={formik.touched.verifyCode && !!formik.errors.verifyCode}
+            helperText={
+              (formik.touched.verifyCode && formik.errors.verifyCode) || ' '
+            }
+            fullWidth
+            label="验证码"
+            autoComplete="verifyCode"
+          />
+        </Grid>
+        <Grid xs={4} mt={1}>
+          <Button
+            size="large"
+            fullWidth
+            variant="contained"
+            disabled={countdown > 0}
+            onClick={sendVerifyCode}
+          >
+            {countdown > 0 ? countdown : '发送验证码'}
+          </Button>
+        </Grid>
+        <Grid xs={12}>
           <TextField
             {...formik.getFieldProps('password')}
             required
@@ -124,24 +121,25 @@ export default function Register() {
               (formik.touched.password && formik.errors.password) || ' '
             }
             fullWidth
-            label="密码"
+            label="新密码"
             type="password"
             autoComplete="current-password"
-            sx={{ mt: 1 }}
           />
-          <Button type="submit" fullWidth variant="contained" sx={{ mt: 1 }}>
-            注册
+        </Grid>
+        <Grid xs={12}>
+          <Button type="submit" fullWidth variant="contained">
+            重置密码
           </Button>
-          <Grid container justifyContent="flex-end" sx={{ mt: 2 }}>
-            <Grid>
-              <Typography component="span" variant="body2">
-                已有账号？
-              </Typography>
-              <Link href="/login">登录</Link>
-            </Grid>
+        </Grid>
+        <Grid xs={12} container justifyContent="flex-end" sx={{ mt: 2 }}>
+          <Grid>
+            <Typography component="span" variant="body2">
+              已有账号？
+            </Typography>
+            <Link href="/login">登录</Link>
           </Grid>
-        </Box>
-      </Box>
+        </Grid>
+      </Grid>
     </Container>
   )
 }