use variant title for form title

src/components/Form/FormPaper/HeaderText.tsx

@@ -3,14 +3,7 @@ import { Typography, TypographyProps } from '@mui/material';
 
 const FormPaperHeaderText: FC<TypographyProps> = ({ sx, ...props }) => {
     return (
-        <Typography
+        <Typography variant="title" sx={{ mb: 8, ...sx }} {...props}>
-            css={`
-                font-size: 32px;
-                font-weight: 600;
-                line-height: 40px;
-            `}
-            sx={{ mb: 8, ...sx }}
-            {...props}>
             {props.children}
         </Typography>
     );

src/components/Form/FormPaper/index.tsx

@@ -2,7 +2,7 @@ import { Paper, styled } from '@mui/material';
 
 const FormPaper = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(4, 2),
-    width: '360px',
+    maxWidth: '360px',
     marginRight: theme.spacing(10),
     [theme.breakpoints.down('md')]: {
         marginRight: theme.spacing(5),

src/pages/login/index.tsx

@@ -37,7 +37,7 @@ export default function Home() {
         </VerticallyCentered>
     ) : (
         <FormContainer>
-            <FormPaper sx={{ minWidth: '320px' }}>
+            <FormPaper>
                 <Login signUp={register} />
             </FormPaper>
         </FormContainer>

src/themes/darkThemeOptions.tsx

@@ -156,6 +156,7 @@ const darkThemeOptions = createTheme({
             fontSize: '32px',
             lineHeight: '40px',
             fontWeight: 600,
+            display: 'block',
         },
         fontFamily: ['Inter', 'sans-serif'].join(','),
     },