diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
index 57d293c0490a54..458568bf87b837 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -50,7 +50,10 @@ export default function SignInCard() {
   };
 
   const handleSubmit = (event) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -126,6 +129,7 @@ export default function SignInCard() {
             <FormLabel htmlFor="password">Password</FormLabel>
             <Link
               component="button"
+              type="button"
               onClick={handleClickOpen}
               variant="body2"
               sx={{ alignSelf: 'baseline' }}
@@ -172,7 +176,6 @@ export default function SignInCard() {
       <Divider>or</Divider>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Google')}
@@ -181,7 +184,6 @@ export default function SignInCard() {
           Sign in with Google
         </Button>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index d4ad50ec2f2323..1d7c67ae007f25 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -50,7 +50,10 @@ export default function SignInCard() {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -126,6 +129,7 @@ export default function SignInCard() {
             <FormLabel htmlFor="password">Password</FormLabel>
             <Link
               component="button"
+              type="button"
               onClick={handleClickOpen}
               variant="body2"
               sx={{ alignSelf: 'baseline' }}
@@ -172,7 +176,6 @@ export default function SignInCard() {
       <Divider>or</Divider>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Google')}
@@ -181,7 +184,6 @@ export default function SignInCard() {
           Sign in with Google
         </Button>
         <Button
-          type="submit"
           fullWidth
           variant="outlined"
           onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
index e905157adc4a27..4367ff2986136e 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
@@ -70,7 +70,7 @@ export default function SignInSide() {
             sx={{
               justifyContent: 'center',
               gap: { xs: 6, sm: 12 },
-              p: 2,
+              p: { xs: 2, sm: 4 },
               m: 'auto',
             }}
           >
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
index ed202630073b53..2528450b27c228 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -70,7 +70,7 @@ export default function SignInSide() {
             sx={{
               justifyContent: 'center',
               gap: { xs: 6, sm: 12 },
-              p: 2,
+              p: { xs: 2, sm: 4 },
               m: 'auto',
             }}
           >
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index 60a4646c64e3b0..5ee1b6c65f4143 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  padding: 20,
-  marginTop: '10vh',
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   '&::before': {
     content: '""',
     display: 'block',
@@ -72,7 +75,10 @@ export default function SignIn(props) {
   };
 
   const handleSubmit = (event) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -155,6 +161,7 @@ export default function SignIn(props) {
                 <FormLabel htmlFor="password">Password</FormLabel>
                 <Link
                   component="button"
+                  type="button"
                   onClick={handleClickOpen}
                   variant="body2"
                   sx={{ alignSelf: 'baseline' }}
@@ -206,7 +213,6 @@ export default function SignIn(props) {
           <Divider>or</Divider>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Google')}
@@ -215,7 +221,6 @@ export default function SignIn(props) {
               Sign in with Google
             </Button>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index eb9933a865b0db..1da8c3e8b8a34a 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  padding: 20,
-  marginTop: '10vh',
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   '&::before': {
     content: '""',
     display: 'block',
@@ -72,7 +75,10 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    if (emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       email: data.get('email'),
@@ -155,6 +161,7 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
                 <FormLabel htmlFor="password">Password</FormLabel>
                 <Link
                   component="button"
+                  type="button"
                   onClick={handleClickOpen}
                   variant="body2"
                   sx={{ alignSelf: 'baseline' }}
@@ -206,7 +213,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
           <Divider>or</Divider>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Google')}
@@ -215,7 +221,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
               Sign in with Google
             </Button>
             <Button
-              type="submit"
               fullWidth
               variant="outlined"
               onClick={() => alert('Sign in with Facebook')}
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js
index dd1d788aab5982..9d0afb35b8ed18 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -37,8 +37,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
-  height: '100%',
-  padding: 4,
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
@@ -53,12 +56,12 @@ export default function SignUp() {
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const defaultTheme = createTheme({ palette: { mode } });
   const SignUpTheme = createTheme(getSignUpTheme(mode));
+  const [nameError, setNameError] = React.useState(false);
+  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
-  const [nameError, setNameError] = React.useState(false);
-  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   // This code only runs on the client side, to determine the system color preference
   React.useEffect(() => {
     // Check if there is a preferred mode in localStorage
@@ -122,7 +125,10 @@ export default function SignUp() {
   };
 
   const handleSubmit = (event) => {
-    event.preventDefault();
+    if (nameError || emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       name: data.get('name'),
@@ -142,122 +148,112 @@ export default function SignUp() {
       <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
         <CssBaseline enableColorScheme />
         <SignUpContainer direction="column" justifyContent="space-between">
-          <Stack
-            sx={{
-              justifyContent: 'center',
-              height: '100dvh',
-              p: 2,
-            }}
-          >
-            <Card variant="outlined">
-              <SitemarkIcon />
-              <Typography
-                component="h1"
-                variant="h4"
-                sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-              >
-                Sign up
-              </Typography>
-              <Box
-                component="form"
-                onSubmit={handleSubmit}
-                sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-              >
-                <FormControl>
-                  <FormLabel htmlFor="name">Full name</FormLabel>
-                  <TextField
-                    autoComplete="name"
-                    name="name"
-                    required
-                    fullWidth
-                    id="name"
-                    placeholder="Jon Snow"
-                    error={nameError}
-                    helperText={nameErrorMessage}
-                    color={nameError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="email">Email</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    id="email"
-                    placeholder="your@email.com"
-                    name="email"
-                    autoComplete="email"
-                    variant="outlined"
-                    error={emailError}
-                    helperText={emailErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="password">Password</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    name="password"
-                    placeholder="••••••"
-                    type="password"
-                    id="password"
-                    autoComplete="new-password"
-                    variant="outlined"
-                    error={passwordError}
-                    helperText={passwordErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControlLabel
-                  control={<Checkbox value="allowExtraEmails" color="primary" />}
-                  label="I want to receive updates via email."
-                />
-                <Button
-                  type="submit"
+          <Card variant="outlined">
+            <SitemarkIcon />
+            <Typography
+              component="h1"
+              variant="h4"
+              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+            >
+              Sign up
+            </Typography>
+            <Box
+              component="form"
+              onSubmit={handleSubmit}
+              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+            >
+              <FormControl>
+                <FormLabel htmlFor="name">Full name</FormLabel>
+                <TextField
+                  autoComplete="name"
+                  name="name"
+                  required
                   fullWidth
-                  variant="contained"
-                  onClick={validateInputs}
-                >
-                  Sign up
-                </Button>
-                <Typography sx={{ textAlign: 'center' }}>
-                  Already have an account?{' '}
-                  <span>
-                    <Link
-                      href="/material-ui/getting-started/templates/sign-in/"
-                      variant="body2"
-                      sx={{ alignSelf: 'center' }}
-                    >
-                      Sign in
-                    </Link>
-                  </span>
-                </Typography>
-              </Box>
-              <Divider>
-                <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-              </Divider>
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                <Button
-                  type="submit"
+                  id="name"
+                  placeholder="Jon Snow"
+                  error={nameError}
+                  helperText={nameErrorMessage}
+                  color={nameError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="email">Email</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  id="email"
+                  placeholder="your@email.com"
+                  name="email"
+                  autoComplete="email"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Google')}
-                  startIcon={<GoogleIcon />}
-                >
-                  Sign up with Google
-                </Button>
-                <Button
-                  type="submit"
+                  error={emailError}
+                  helperText={emailErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  name="password"
+                  placeholder="••••••"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Facebook')}
-                  startIcon={<FacebookIcon />}
-                >
-                  Sign up with Facebook
-                </Button>
-              </Box>
-            </Card>
-          </Stack>
+                  error={passwordError}
+                  helperText={passwordErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControlLabel
+                control={<Checkbox value="allowExtraEmails" color="primary" />}
+                label="I want to receive updates via email."
+              />
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                onClick={validateInputs}
+              >
+                Sign up
+              </Button>
+              <Typography sx={{ textAlign: 'center' }}>
+                Already have an account?{' '}
+                <span>
+                  <Link
+                    href="/material-ui/getting-started/templates/sign-in/"
+                    variant="body2"
+                    sx={{ alignSelf: 'center' }}
+                  >
+                    Sign in
+                  </Link>
+                </span>
+              </Typography>
+            </Box>
+            <Divider>
+              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+            </Divider>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Google')}
+                startIcon={<GoogleIcon />}
+              >
+                Sign up with Google
+              </Button>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Facebook')}
+                startIcon={<FacebookIcon />}
+              >
+                Sign up with Facebook
+              </Button>
+            </Box>
+          </Card>
         </SignUpContainer>
       </ThemeProvider>
     </TemplateFrame>
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
index ce73b97e4438c2..a375bae9d1f15f 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -42,8 +42,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
-  height: '100%',
-  padding: 4,
+  minHeight: '100%',
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(4),
+  },
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
@@ -58,12 +61,12 @@ export default function SignUp() {
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const defaultTheme = createTheme({ palette: { mode } });
   const SignUpTheme = createTheme(getSignUpTheme(mode));
+  const [nameError, setNameError] = React.useState(false);
+  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
-  const [nameError, setNameError] = React.useState(false);
-  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
   // This code only runs on the client side, to determine the system color preference
   React.useEffect(() => {
     // Check if there is a preferred mode in localStorage
@@ -127,7 +130,10 @@ export default function SignUp() {
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    if (nameError || emailError || passwordError) {
+      event.preventDefault();
+      return;
+    }
     const data = new FormData(event.currentTarget);
     console.log({
       name: data.get('name'),
@@ -146,124 +152,113 @@ export default function SignUp() {
     >
       <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
         <CssBaseline enableColorScheme />
-
         <SignUpContainer direction="column" justifyContent="space-between">
-          <Stack
-            sx={{
-              justifyContent: 'center',
-              height: '100dvh',
-              p: 2,
-            }}
-          >
-            <Card variant="outlined">
-              <SitemarkIcon />
-              <Typography
-                component="h1"
-                variant="h4"
-                sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-              >
-                Sign up
-              </Typography>
-              <Box
-                component="form"
-                onSubmit={handleSubmit}
-                sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-              >
-                <FormControl>
-                  <FormLabel htmlFor="name">Full name</FormLabel>
-                  <TextField
-                    autoComplete="name"
-                    name="name"
-                    required
-                    fullWidth
-                    id="name"
-                    placeholder="Jon Snow"
-                    error={nameError}
-                    helperText={nameErrorMessage}
-                    color={nameError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="email">Email</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    id="email"
-                    placeholder="your@email.com"
-                    name="email"
-                    autoComplete="email"
-                    variant="outlined"
-                    error={emailError}
-                    helperText={emailErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControl>
-                  <FormLabel htmlFor="password">Password</FormLabel>
-                  <TextField
-                    required
-                    fullWidth
-                    name="password"
-                    placeholder="••••••"
-                    type="password"
-                    id="password"
-                    autoComplete="new-password"
-                    variant="outlined"
-                    error={passwordError}
-                    helperText={passwordErrorMessage}
-                    color={passwordError ? 'error' : 'primary'}
-                  />
-                </FormControl>
-                <FormControlLabel
-                  control={<Checkbox value="allowExtraEmails" color="primary" />}
-                  label="I want to receive updates via email."
-                />
-                <Button
-                  type="submit"
+          <Card variant="outlined">
+            <SitemarkIcon />
+            <Typography
+              component="h1"
+              variant="h4"
+              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+            >
+              Sign up
+            </Typography>
+            <Box
+              component="form"
+              onSubmit={handleSubmit}
+              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+            >
+              <FormControl>
+                <FormLabel htmlFor="name">Full name</FormLabel>
+                <TextField
+                  autoComplete="name"
+                  name="name"
+                  required
                   fullWidth
-                  variant="contained"
-                  onClick={validateInputs}
-                >
-                  Sign up
-                </Button>
-                <Typography sx={{ textAlign: 'center' }}>
-                  Already have an account?{' '}
-                  <span>
-                    <Link
-                      href="/material-ui/getting-started/templates/sign-in/"
-                      variant="body2"
-                      sx={{ alignSelf: 'center' }}
-                    >
-                      Sign in
-                    </Link>
-                  </span>
-                </Typography>
-              </Box>
-              <Divider>
-                <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-              </Divider>
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                <Button
-                  type="submit"
+                  id="name"
+                  placeholder="Jon Snow"
+                  error={nameError}
+                  helperText={nameErrorMessage}
+                  color={nameError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="email">Email</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  id="email"
+                  placeholder="your@email.com"
+                  name="email"
+                  autoComplete="email"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Google')}
-                  startIcon={<GoogleIcon />}
-                >
-                  Sign up with Google
-                </Button>
-                <Button
-                  type="submit"
+                  error={emailError}
+                  helperText={emailErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <TextField
+                  required
                   fullWidth
+                  name="password"
+                  placeholder="••••••"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
                   variant="outlined"
-                  onClick={() => alert('Sign up with Facebook')}
-                  startIcon={<FacebookIcon />}
-                >
-                  Sign up with Facebook
-                </Button>
-              </Box>
-            </Card>
-          </Stack>
+                  error={passwordError}
+                  helperText={passwordErrorMessage}
+                  color={passwordError ? 'error' : 'primary'}
+                />
+              </FormControl>
+              <FormControlLabel
+                control={<Checkbox value="allowExtraEmails" color="primary" />}
+                label="I want to receive updates via email."
+              />
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                onClick={validateInputs}
+              >
+                Sign up
+              </Button>
+              <Typography sx={{ textAlign: 'center' }}>
+                Already have an account?{' '}
+                <span>
+                  <Link
+                    href="/material-ui/getting-started/templates/sign-in/"
+                    variant="body2"
+                    sx={{ alignSelf: 'center' }}
+                  >
+                    Sign in
+                  </Link>
+                </span>
+              </Typography>
+            </Box>
+            <Divider>
+              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+            </Divider>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Google')}
+                startIcon={<GoogleIcon />}
+              >
+                Sign up with Google
+              </Button>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={() => alert('Sign up with Facebook')}
+                startIcon={<FacebookIcon />}
+              >
+                Sign up with Facebook
+              </Button>
+            </Box>
+          </Card>
         </SignUpContainer>
       </ThemeProvider>
     </TemplateFrame>