diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
index 114d39187c39df47d2bfd6c10ee1c284b35afe13..26aace7d991add0e7066d31bb0a6ed3c375c154b 100644
--- a/src/components/Auth/SignInForm/SignInForm.tsx
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -134,7 +134,12 @@ export const SignInForm: FC = () => {
 
         <MuiThemeProvider theme={themeResp}>
           <Grid item container>
-            <Grid item xs={12} color="primary">
+            <Grid
+              item
+              xs={12}
+              color="primary"
+              className={classes.paddingBottom}
+            >
               <Typography>
                 New here? &nbsp;
                 <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
diff --git a/src/components/Auth/SignInForm/useStyles.ts b/src/components/Auth/SignInForm/useStyles.ts
index 8711ab2cc5b14c0311481b88fb46b6867d834a52..3af22d136f8594d86ae7d5f0c785fe2f094b7e1b 100644
--- a/src/components/Auth/SignInForm/useStyles.ts
+++ b/src/components/Auth/SignInForm/useStyles.ts
@@ -17,5 +17,8 @@ export const useStyles = makeStyles((theme: Theme) =>
     paddingTop: {
       paddingTop: theme.spacing(10),
     },
+    paddingBottom: {
+      paddingBottom: theme.spacing(10),
+    },
   }),
 );
diff --git a/src/components/Auth/SignUpForm/SignUpForm.tsx b/src/components/Auth/SignUpForm/SignUpForm.tsx
index b947b51260790a2c723816f22f4b1f84e0e6061c..4a80095f9f637f0918b6acfea8b5be548b51b74a 100644
--- a/src/components/Auth/SignUpForm/SignUpForm.tsx
+++ b/src/components/Auth/SignUpForm/SignUpForm.tsx
@@ -1,7 +1,16 @@
 import React, { FC } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button } from '@material-ui/core';
-
+import {
+  Button,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  Grid,
+  Typography,
+  Link,
+  Hidden,
+} from '@material-ui/core';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import axios from 'axios';
 import { InputField } from 'components/Auth/InputField/InputField';
 import { useStyles } from 'components/Auth/SignUpForm/useStyles';
@@ -21,6 +30,9 @@ export const SignUpForm: FC = () => {
     notes: string;
   };
 
+  let themeResp = createMuiTheme();
+  themeResp = responsiveFontSizes(themeResp);
+
   const { control, errors, handleSubmit } = useForm<FormData>();
 
   const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
@@ -55,166 +67,207 @@ export const SignUpForm: FC = () => {
   const classes = useStyles();
   return (
     <>
+      <MuiThemeProvider theme={themeResp}>
+        <Grid item container>
+          <Grid item xs={12} color="primary" className={classes.paddingTop}>
+            <Typography variant="h1">SIGN UP</Typography>
+          </Grid>
+        </Grid>
+      </MuiThemeProvider>
+
       <form
         className={classes.form}
         onSubmit={handleSubmit(onSubmit)}
         data-testid="Form"
       >
-        <InputField
-          name="email"
-          type="email"
-          control={control}
-          rules={{
-            validate: (value: string) =>
-              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
-            required: {
-              value: true,
-              message: 'Email is not valid',
-            },
-          }}
-          label="Email"
-          error={!!errors.email}
-          errorMessage="Insert email"
-        />
-
-        <InputField
-          name="password"
-          type="password"
-          control={control}
-          rules={{
-            minLength: 8,
-            maxLength: 60,
-            required: {
-              value: true,
-              message: 'Insert valid password',
-            },
-          }}
-          label="Password"
-          error={!!errors.password}
-          errorMessage="Insert valid password"
-        />
-
-        <InputField
-          name="username"
-          type="text"
-          control={control}
-          rules={{
-            maxLength: 150,
-            required: {
-              value: true,
-              message: 'Insert valid username',
-            },
-          }}
-          label="Username"
-          error={!!errors.username}
-          errorMessage="Insert valid username"
-        />
-
-        <InputField
-          name="firstName"
-          type="text"
-          control={control}
-          rules={{
-            maxLength: 150,
-            required: {
-              value: true,
-              message: 'Insert valid first name',
-            },
-          }}
-          label="First name"
-          error={!!errors.firstName}
-          errorMessage="Insert valid first name"
-        />
-
-        <InputField
-          name="lastName"
-          type="text"
-          control={control}
-          rules={{
-            maxLength: 150,
-            required: {
-              value: true,
-              message: 'Insert valid last name',
-            },
-          }}
-          label="Last name"
-          error={!!errors.lastName}
-          errorMessage="Insert valid last name"
-        />
-
-        <InputField
-          name="address"
-          type="text"
-          control={control}
-          rules={{
-            required: {
-              value: true,
-              message: 'Insert valid address',
-            },
-          }}
-          label="Address"
-          error={!!errors.address}
-          errorMessage="Insert valid address"
-        />
-
-        <InputField
-          name="phoneNumber"
-          type="number"
-          control={control}
-          rules={{
-            maxLength: 15,
-            required: {
-              value: true,
-              message: 'Insert valid phone number',
-            },
-          }}
-          label="Phone number"
-          error={!!errors.phoneNumber}
-          errorMessage="Insert valid phone number"
-        />
-
-        <InputField
-          name="memberCardNumber"
-          type="number"
-          control={control}
-          rules={{
-            maxLength: 20,
-            required: {
-              value: true,
-              message: 'Insert valid card number',
-            },
-          }}
-          label="Card number"
-          error={!!errors.memberCardNumber}
-          errorMessage="Insert valid card number"
-        />
-
-        <InputField
-          name="notes"
-          type="text"
-          control={control}
-          rules={{
-            required: {
-              value: true,
-              message: 'Add notes',
-            },
-          }}
-          label="Notes"
-          error={!!errors.notes}
-          errorMessage="Insert notes"
-        />
-
-        <Button
-          data-testid="Submit"
-          type="submit"
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-        >
-          Sign Up
-        </Button>
+        <Grid item container>
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="firstName"
+              type="text"
+              control={control}
+              rules={{
+                maxLength: 150,
+                required: {
+                  value: true,
+                  message: 'Insert valid first name',
+                },
+              }}
+              label="First name"
+              error={!!errors.firstName}
+              errorMessage="Insert valid first name"
+            />
+          </Grid>
+
+          <Hidden mdDown>
+            <Grid item xs={2} />
+          </Hidden>
+
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="lastName"
+              type="text"
+              control={control}
+              rules={{
+                maxLength: 150,
+                required: {
+                  value: true,
+                  message: 'Insert valid last name',
+                },
+              }}
+              label="Last name"
+              error={!!errors.lastName}
+              errorMessage="Insert valid last name"
+            />
+          </Grid>
+
+          <InputField
+            name="address"
+            type="text"
+            control={control}
+            rules={{
+              required: {
+                value: true,
+                message: 'Insert valid address',
+              },
+            }}
+            label="Address"
+            error={!!errors.address}
+            errorMessage="Insert valid address"
+          />
+
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="phoneNumber"
+              type="number"
+              control={control}
+              rules={{
+                maxLength: 15,
+                required: {
+                  value: true,
+                  message: 'Insert valid phone number',
+                },
+              }}
+              label="Phone number"
+              error={!!errors.phoneNumber}
+              errorMessage="Insert valid phone number"
+            />
+          </Grid>
+
+          <Hidden mdDown>
+            <Grid item xs={2} />
+          </Hidden>
+
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="memberCardNumber"
+              type="number"
+              control={control}
+              rules={{
+                maxLength: 20,
+                required: {
+                  value: true,
+                  message: 'Insert valid card number',
+                },
+              }}
+              label="Card number"
+              error={!!errors.memberCardNumber}
+              errorMessage="Insert valid card number"
+            />
+          </Grid>
+
+          <Grid item xs={12} className={classes.paddingBottomSmall}>
+            <InputField
+              name="notes"
+              type="text"
+              control={control}
+              rules={{
+                required: {
+                  value: true,
+                  message: 'Add notes',
+                },
+              }}
+              label="Notes"
+              error={!!errors.notes}
+              errorMessage="Insert notes"
+            />
+          </Grid>
+
+          <InputField
+            name="username"
+            type="text"
+            control={control}
+            rules={{
+              maxLength: 150,
+              required: {
+                value: true,
+                message: 'Insert valid username',
+              },
+            }}
+            label="Username"
+            error={!!errors.username}
+            errorMessage="Insert valid username"
+          />
+
+          <InputField
+            name="email"
+            type="email"
+            control={control}
+            rules={{
+              validate: (value: string) =>
+                /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
+              required: {
+                value: true,
+                message: 'Email is not valid',
+              },
+            }}
+            label="Email"
+            error={!!errors.email}
+            errorMessage="Insert email"
+          />
+
+          <InputField
+            name="password"
+            type="password"
+            control={control}
+            rules={{
+              minLength: 8,
+              maxLength: 60,
+              required: {
+                value: true,
+                message: 'Insert valid password',
+              },
+            }}
+            label="Password"
+            error={!!errors.password}
+            errorMessage="Insert valid password"
+          />
+
+          <Button
+            data-testid="Submit"
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+          >
+            Sign Up
+          </Button>
+        </Grid>
       </form>
+
+      <MuiThemeProvider theme={themeResp}>
+        <Grid item container>
+          <Grid item xs={12} color="primary" className={classes.paddingBottom}>
+            <Typography>
+              Already have an account? &nbsp;
+              <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`}>
+                Log in.
+              </Link>
+            </Typography>
+          </Grid>
+        </Grid>
+      </MuiThemeProvider>
     </>
   );
 };
diff --git a/src/components/Auth/SignUpForm/useStyles.ts b/src/components/Auth/SignUpForm/useStyles.ts
index 4a510bf92bf7cffee0efce3aebfd00998f44a3be..2928c5712f1aadc12d4e51b3507180d3c629e61b 100644
--- a/src/components/Auth/SignUpForm/useStyles.ts
+++ b/src/components/Auth/SignUpForm/useStyles.ts
@@ -14,5 +14,14 @@ export const useStyles = makeStyles((theme: Theme) =>
     submit: {
       margin: theme.spacing(3, 0, 2),
     },
+    paddingTop: {
+      paddingTop: theme.spacing(10),
+    },
+    paddingBottom: {
+      paddingBottom: theme.spacing(10),
+    },
+    paddingBottomSmall: {
+      paddingBottom: theme.spacing(5),
+    },
   }),
 );