diff --git a/zubhub_frontend/zubhub/src/assets/images/cream.png b/zubhub_frontend/zubhub/src/assets/images/cream.png
new file mode 100644
index 000000000..5038b635e
Binary files /dev/null and b/zubhub_frontend/zubhub/src/assets/images/cream.png differ
diff --git a/zubhub_frontend/zubhub/src/assets/images/space.png b/zubhub_frontend/zubhub/src/assets/images/space.png
new file mode 100644
index 000000000..4eac05783
Binary files /dev/null and b/zubhub_frontend/zubhub/src/assets/images/space.png differ
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/button/buttonStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/button/buttonStyles.js
index 9767cc299..d95d040ac 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/components/button/buttonStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/components/button/buttonStyles.js
@@ -3,8 +3,12 @@ import { colors } from "../../../colors";
 const styles = theme => ({
   primaryButtonStyle: {
     backgroundColor: 'var(--primary-color3)',
-    borderRadius: 30,
+    borderRadius: theme.spacing(1),
     color: 'white',
+    '&.disabled': {
+      color: '#7BA8AB',
+      background: 'rgba(0, 184, 196, 0.10)',
+    },
     '&:hover': {
       backgroundColor: 'var(--secondary-color6)',
     },
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js
index 8e951117b..b0b74f85e 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js
@@ -1,127 +1,188 @@
-import { fade } from '@mui/material/styles';
-
-const styles = theme => ({
-  root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
-    flex: '1 0 auto',
-    // background: 'var(--primary-color2)',
-    // background:
-    //   'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
-  },
-  containerStyle: {
-    maxWidth: '600px',
-    [theme.breakpoints.up('1600')]: {
-      maxWidth: '950px',
+export const mainStyles = theme => ({
+  wrapper: {
+    marginTop: theme.spacing(10),
+    [theme.breakpoints.down('lg')]: {
+      marginTop: theme.spacing(10),
     },
-    [theme.breakpoints.down('400')]: {
-      marginTop:'30px',
+    [theme.breakpoints.down('md')]: {
+      marginTop: theme.spacing(5),
     },
   },
-  cardStyle: {
-    border: 0,
-    borderRadius: 15,
-    boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
-    color: 'white',
-    padding: '0 30px',
-  },
-  titleStyle: {
-    fontWeight: 'bold',
-    fontSize: '1.7rem',
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '2.5rem',
-    },
+  gridContainer: {
+    alignItems: 'center',
+    borderRadius: theme.spacing(1),
   },
-  descStyle: {
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '1.7rem',
+  header: {
+    color: theme.palette.text.primary,
+    fontSize: theme.spacing(5),
+    fontWeight: 800,
+    lineHeight: '50px',
+    [theme.breakpoints.down('sm')]: {
+      lineHeight: 'unset',
+      fontSize: '15px',
     },
   },
-  customLabelStyle: {
-    '&.MuiFormLabel-root.Mui-focused': {
-      color: 'var(--primary-color3)',
+  subHeader: {
+    color: theme.palette.text.primary,
+    fontSize: theme.spacing(3),
+    fontWeight: 800,
+    lineHeight: 'normal',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '18px',
+      fontWeight: 700,
     },
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '1.7rem',
+  },
+  text: {
+    fontSize: theme.spacing(2),
+    fontWeight: 400,
+    lineHeight: '32px',
+    color: theme.palette.text.secondary,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '12px',
+      lineHeight: 'unset',
     },
   },
-  customInputStyle: {
-    borderRadius: 15,
-    '&.MuiOutlinedInput-notchedOutline': {
-      border: '2px solid var(--primary-color3)',
-      boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`,
+  header2: {
+    color: theme.palette.text.primary,
+    fontSize: '30px',
+    fontWeight: 700,
+    lineHeight: '50px',
+  },
+  subHeader2: {
+    color: theme.palette.text.primary,
+    fontSize: '18px',
+    fontWeight: 600,
+    lineHeight: '24px',
+  },
+  text2: {
+    marginBottom: '40px'
+  },
+  wizard: {
+    width: '100%',
+  },
+  outlinedInput: {
+    borderRadius: theme.spacing(1),
+    paddingInline: theme.spacing(3),
+    gap: theme.spacing(3),
+    '& .MuiOutlinedInput-input': {
+      padding: '20px 0',
     },
     '&.MuiOutlinedInput-root': {
       '&:hover fieldset': {
-        border: '2px solid var(--primary-color3)',
-        boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`,
+        border: `1px solid ${theme.palette.primary.light}`,
       },
       '&.Mui-focused fieldset': {
-        border: '2px solid var(--primary-color3)',
-        boxShadow: `rgba(var(--primary-color3), 0.2rem) 0 0 0 0.2rem`,
-      },
-      [theme.breakpoints.up('1600')]: {
-        fontSize: '1.7rem',
+        border: `2px solid ${theme.palette.primary.light}`,
       },
     },
   },
-  secondaryLink: {
-    color: 'var(--primary-color3)',
-    '&:hover': {
-      color: 'var(--secondary-color6)',
+  formControl: {
+    gap: theme.spacing(3),
+    [theme.breakpoints.down('md')]: {
+      gap: theme.spacing(2),
     },
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '1.2rem',
+    [theme.breakpoints.down('sm')]: {
+      gap: theme.spacing(1),
     },
   },
-  center: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+  inputIcon: {
+    fontSize: theme.spacing(3),
+    fill: theme.palette.grey[400],
   },
-  dividerText: {
-    whiteSpace: 'nowrap',
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '1.2rem',
+  button: {
+    fontSize: '18px',
+    fontWeight: 600,
+    paddingBlock: '20px',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '12px',
+      padding: '5px 16px',
     },
   },
-  divider: {
-    width: '30%',
-    marginRight: '1em',
-    marginLeft: '1em',
-    [theme.breakpoints.up('1600')]: {
-      height: '0.1em',
+  spaceBackground: {
+    width: '100%',
+    height: '100%',
+  },
+  backContainer: {
+    borderRadius: '50%',
+    background: theme.palette.background.default,
+    padding: '10px',
+  },
+  backIcon: {
+    fontSize: theme.spacing(3),
+  },
+  gridControl: {
+    background: theme.palette.background.default,
+    padding: '0 40px',
+    boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)',
+  },
+});
+
+export const step1Styles = theme => ({
+  paper: {
+    cursor: 'pointer',
+    width: '350px',
+    height: '300px',
+    borderRadius: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(2),
+    justifyContent: 'center',
+    [theme.breakpoints.down('sm')]: {
+      padding: theme.spacing(2, 3),
+      width: '342px',
+      height: '124px',
+      alignItems: 'unset',
     },
-    [theme.breakpoints.down('510')]: {
-      width: '20%',
+    '&.selected': {
+      border: '3px solid var(--primary-color3)',
     },
-    [theme.breakpoints.down('381')]: {
-      marginLeft: '0.5em',
-      marginRight: '0.5em',
+  },
+  icon: {
+    fill: '#00B8C4',
+    fontSize: '64px',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: 'unset',
+      height: '32px',
+      width: '32px',
     },
   },
-  textDecorationNone: {
-    textDecoration: 'none',
+});
+
+export const step2Styles = theme => ({
+  container: {
+    background: theme.palette.background.paper,
+    borderRadius: theme.spacing(1),
+    padding: theme.spacing(8, 5),
+    boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)',
   },
-  errorBox: {
-    width: '100%',
-    padding: '1em',
-    borderRadius: 6,
-    borderWidth: '1px',
-    borderColor: 'var(--primary-color2)',
-    backgroundColor: 'var(--secondary-color1)',
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '1.5rem',
-    },
+});
+
+export const step3Styles = theme => ({});
+
+export const step4Styles = theme => ({});
+export const step5Styles = theme => ({
+  label: {
+    gap: theme.spacing(3),
   },
-  error: {
-    color: 'var(--primary-color2)',
+  formControl: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(5),
+    alignItems: 'left',
   },
-  fieldHelperTextStyle: {
-    [theme.breakpoints.up('1600')]: {
-      fontSize: '1.2rem',
+  fieldSet: {
+    padding: `20px ${theme.spacing(3)}`,
+    borderWidth: '1px',
+    borderColor: theme.palette.grey[300],
+    borderStyle: 'solid',
+    borderRadius: theme.spacing(1),
+    '&:hover': {
+      borderColor: theme.palette.primary.light,
+    },
+    '&.selected': {
+      borderWidth: '3px',
+      borderColor: theme.palette.primary.light,
     },
   },
 });
-
-export default styles;
diff --git a/zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx b/zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx
index 9be26b6be..2b0b535e3 100644
--- a/zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx
+++ b/zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx
@@ -76,6 +76,8 @@ function NavBar(props) {
   const [searchType, setSearchType] = useState(getQueryParams(window.location.href).get('type') || SearchType.PROJECTS);
   const formRef = useRef();
   const token = useSelector(state => state.auth.token);
+  const pathname = props.location?.pathname
+  const hideSearchAndActions = pathname === '/signup' || pathname === '/login';
 
   const [state, setState] = React.useState({
     username: null,
@@ -215,11 +217,14 @@ function NavBar(props) {
       <AppBar className={classes.navBarStyle}>
         <Container id="navbar-root" className={classes.mainContainerStyle}>
           <Toolbar className={classes.toolBarStyle}>
-            <Hidden mdUp>
-              <Box style={{ marginRight: 10 }} onClick={toggleDrawer}>
-                <MenuIcon />
-              </Box>
-            </Hidden>
+            {!hideSearchAndActions && (
+              <Hidden mdUp>
+                <Box style={{ marginRight: 10 }} onClick={toggleDrawer}>
+                  <MenuIcon />
+                </Box>
+              </Hidden>
+            )}
+
             <Box className={classes.logoStyle}>
               <Link to="/">
                 <img src={zubhub?.header_logo_url ? zubhub.header_logo_url : logo} alt="logo" />
@@ -268,6 +273,8 @@ function NavBar(props) {
                   ))}
                 </Select>
               </Box>
+              {
+                !hideSearchAndActions && (
               <form
                 action="/search"
                 className={clsx(classes.searchFormStyle, classes.removeOn894)}
@@ -334,25 +341,28 @@ function NavBar(props) {
                   </FormGroup>
                 </FormControl>
               </form>
+              )
+            }
             </Box>
-            <div className={classes.navActionStyle}>
-              <SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} />
-
-              <NotificationButton />
-              <Hidden smDown>
-                {props.auth.username && (
-                  <Box>
-                    <Typography className={clsx(common_classes.title2, classes.username)}>
-                      {props.auth.username}
-                    </Typography>
-                    {/* Todo: Change this subheading based on current role of user */}
-                    <Typography className="">Creator</Typography>
-                  </Box>
-                )}
-              </Hidden>
-
+            {!hideSearchAndActions && (
+              <div className={classes.navActionStyle}>
+                <SearchOutlined onClick={toggleSearchBar} className={classes.addOn894} />
+
+                <NotificationButton />
+                <Hidden smDown>
+                  {props.auth.username && (
+                    <Box>
+                      <Typography className={clsx(common_classes.title2, classes.username)}>
+                        {props.auth.username}
+                      </Typography>
+                      {/* Todo: Change this subheading based on current role of user */}
+                      <Typography className="">Creator</Typography>
+                    </Box>
+                  )}
+                </Hidden>
               <AvatarButton navigate={props.navigate} />
             </div>
+            )}
           </Toolbar>
           {open_search_form ? (
             <ClickAwayListener onClickAway={e => handleSetState(closeSearchFormOrIgnore(e))}>
@@ -455,4 +465,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
+export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
\ No newline at end of file
diff --git a/zubhub_frontend/zubhub/src/components/form/errorMessage/ErrorMessage.jsx b/zubhub_frontend/zubhub/src/components/form/errorMessage/ErrorMessage.jsx
new file mode 100644
index 000000000..5027230e3
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/form/errorMessage/ErrorMessage.jsx
@@ -0,0 +1,9 @@
+import { FormHelperText } from '@mui/material';
+import React from 'react';
+
+const CustomErrorMessage = props => {
+  const { name, touched, errors } = props;
+  return <FormHelperText error>{touched[name] && errors[name] && <>{errors[name]}</>}</FormHelperText>;
+};
+
+export default CustomErrorMessage;
diff --git a/zubhub_frontend/zubhub/src/components/index.js b/zubhub_frontend/zubhub/src/components/index.js
index 82af1f05c..08712750c 100644
--- a/zubhub_frontend/zubhub/src/components/index.js
+++ b/zubhub_frontend/zubhub/src/components/index.js
@@ -15,16 +15,27 @@ import Modal from "./modals/Modal";
 import PreviewActivity from "./previewActivity/PreviewActivity";
 import PreviewProject from "./previewProject/PreviewProject";
 import Pill from "./pill/Pill";
+import CustomErrorMessage from './form/errorMessage/ErrorMessage';
 import ProtectedRoute from './protected_route/ProtectedRoute';
 
 export {
-    Comments,
-    CustomButton, Dropdown,
-    Editor, Gallery, ImageInput,
-    LabeledLine, Modal, OrDivider, PreviewProject,
-    SelectFromPills, Sidenav, TagsInput, VideoInput,
-    Collapsible,
-    PreviewActivity,
-    Pill,
-    ProtectedRoute,
+  Comments,
+  CustomButton,
+  Dropdown,
+  Editor,
+  Gallery,
+  ImageInput,
+  LabeledLine,
+  Modal,
+  OrDivider,
+  PreviewProject,
+  SelectFromPills,
+  Sidenav,
+  TagsInput,
+  VideoInput,
+  Collapsible,
+  PreviewActivity,
+  Pill,
+  ProtectedRoute,
+  CustomErrorMessage,
 };
diff --git a/zubhub_frontend/zubhub/src/views/login/Login.jsx b/zubhub_frontend/zubhub/src/views/login/Login.jsx
index 4cd0500aa..b0e1fa9cd 100644
--- a/zubhub_frontend/zubhub/src/views/login/Login.jsx
+++ b/zubhub_frontend/zubhub/src/views/login/Login.jsx
@@ -1,273 +1,148 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-
 import { connect } from 'react-redux';
-
-import { makeStyles } from '@mui/styles';
-import Visibility from '@mui/icons-material/Visibility';
-import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import * as AuthActions from '../../store/actions/authActions';
 import {
-  Grid,
   Box,
-  Divider,
-  Container,
-  Card,
-  CardActionArea,
-  CardContent,
-  Typography,
+  Grid,
+  FormControl,
+  FormLabel,
+  OutlinedInput,
   InputAdornment,
+  Typography,
   IconButton,
-  OutlinedInput,
-  InputLabel,
-  FormHelperText,
-  FormControl,
+  FormControlLabel,
+  Checkbox
 } from '@mui/material';
+import { CustomButton, CustomErrorMessage } from '../../components';
+import { TfiLock, TfiArrowLeft } from 'react-icons/tfi';
+import { SlEye, SlUser } from 'react-icons/sl';
+import { BsEyeSlash } from 'react-icons/bs';
+import { makeStyles } from '@mui/styles';
+import { useState } from 'react';
+import { mainStyles, step2Styles } from '../../assets/js/styles/views/login/loginStyles';
+import { handleLogin, validationSchema } from './loginScripts';
+import { useFormik } from 'formik';
 
-import {
-  validationSchema,
-  handleClickShowPassword,
-  handleMouseDownPassword,
-  login,
-} from './loginScripts';
-
-import { withFormik } from 'formik';
-
-import CustomButton from '../../components/button/Button';
-import * as AuthActions from '../../store/actions/authActions';
-import styles from '../../assets/js/styles/views/login/loginStyles';
-const useStyles = makeStyles(styles);
+const useMainStyles = makeStyles(mainStyles);
+const useStyles = makeStyles(step2Styles);
 
-/**
- * @function Login View
- * @author Raymond Ndibe <ndiberaymond1@gmail.com>
- *
- * @todo - describe function's signature
- */
-function Login(props) {
+const Login = props => {
+  const [{ password }, setShowPassword] = useState({ password: false });
   const classes = useStyles();
-
-  const [state, setState] = React.useState({
-    show_password: false,
-  });
-
-  const handleSetState = obj => {
-    if (obj) {
-      Promise.resolve(obj).then(obj => {
-        setState(state => ({ ...state, ...obj }));
-      });
-    }
-  };
-
-  const { show_password } = state;
-  const { t } = props;
+  const mainClasses = useMainStyles();
+  const {
+    errors,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    touched,
+  } = useFormik({
+    initialValues: {
+      username: '',
+      password: '',
+      remember: false
+    },
+    validationSchema: validationSchema,
+    onSubmit: async (values) => await handleLogin(props, values)
+  })
 
   return (
-    <Box className={classes.root}>
-      <Container className={classes.containerStyle}>
-        <Card className={classes.cardStyle}>
-          <CardActionArea>
-            <CardContent>
-              <form
-                className="auth-form"
-                name="login"
-                noValidate="noValidate"
-                onSubmit={e => handleSetState(login(e, props))}
-              >
-                <Typography
-                  gutterBottom
-                  variant="h5"
-                  component="h2"
-                  color="textPrimary"
-                  className={classes.titleStyle}
-                >
-                  {t('login.welcomeMsg.primary')}
-                </Typography>
-                <Typography
-                  className={classes.descStyle}
-                  variant="body2"
-                  color="textSecondary"
-                  component="p"
-                >
-                  {t('login.welcomeMsg.secondary')}
-                </Typography>
-                <Grid container spacing={3}>
-                  <Grid item xs={12}>
-                    <Box
-                      component="p"
-                      className={
-                        props.status &&
-                        props.status['non_field_errors'] &&
-                        classes.errorBox
-                      }
-                    >
-                      {props.status && props.status['non_field_errors'] && (
-                        <Box component="span" className={classes.error}>
-                          {props.status['non_field_errors']}
-                        </Box>
-                      )}
-                    </Box>
-                  </Grid>
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['username']) ||
-                        (props.touched['username'] && props.errors['username'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="username"
-                      >
-                        {t('login.inputs.username.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        className={classes.customInputStyle}
-                        id="username"
-                        name="username"
-                        type="text"
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                        label={t('login.inputs.username.label')}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['username']) ||
-                          (props.touched['username'] &&
-                            props.errors['username'] &&
-                            t(
-                              `login.inputs.username.errors.${props.errors['username']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['password']) ||
-                        (props.touched['password'] && props.errors['password'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="password"
-                      >
-                        {t('login.inputs.password.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        className={classes.customInputStyle}
-                        id="password"
-                        name="password"
-                        type={show_password ? 'text' : 'password'}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                        endAdornment={
-                          <InputAdornment position="end">
-                            <IconButton
-                              aria-label="toggle password visibility"
-                              onClick={() =>
-                                handleSetState(handleClickShowPassword(state))
-                              }
-                              onMouseDown={handleMouseDownPassword}
-                              edge="end"
-                            >
-                              {show_password ? (
-                                <Visibility />
-                              ) : (
-                                <VisibilityOff />
-                              )}
-                            </IconButton>
-                          </InputAdornment>
-                        }
-                        label={t('login.inputs.password.label')}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['password']) ||
-                          (props.touched['password'] &&
-                            props.errors['password'] &&
-                            t(
-                              `login.inputs.password.errors.${props.errors['password']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-                  <Grid item xs={12}>
-                    <CustomButton
-                      variant="contained"
-                      size="large"
-                      type="submit"
-                      primaryButtonStyle
-                      customButtonStyle
-                      fullWidth
-                    >
-                      {t('login.inputs.submit')}
-                    </CustomButton>
-                  </Grid>
-                </Grid>
-              </form>
-              <Grid container spacing={3}>
-                <Grid item xs={12}>
-                  <Box className={classes.center}>
-                    <Divider className={classes.divider} />
-                    <Typography
-                      className={classes.dividerText}
-                      variant="body2"
-                      color="textSecondary"
-                      component="p"
-                    >
-                      {t('login.notAMember')}
-                    </Typography>
-                    <Divider className={classes.divider} />
-                  </Box>
-                </Grid>
-                <Grid item xs={12}>
-                  <Link to="/signup" className={classes.textDecorationNone}>
-                    <CustomButton
-                      variant="outlined"
-                      size="large"
-                      secondaryButtonStyle
-                      customButtonStyle
-                      fullWidth
-                    >
-                      {t('login.signup')}
-                    </CustomButton>
-                  </Link>
-                </Grid>
-                <Grid item xs={12}>
-                  <Box className={classes.center}>
-                    <Link
-                      to="/password-reset"
-                      className={classes.secondaryLink}
-                    >
-                      {t('login.forgotPassword')}
-                    </Link>
-                  </Box>
-                </Grid>
-              </Grid>
-            </CardContent>
-          </CardActionArea>
-        </Card>
-      </Container>
+    <Box width={'100%'}>
+      <Grid
+        container
+        direction="column"
+        maxWidth={'600px'}
+        margin={'auto'}
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+        className={classes.container}
+      >
+        <form onSubmit={handleSubmit}>
+        <Grid item>
+          <Typography align="center" className={mainClasses.header2}>
+            Welcome to ZubHub !
+          </Typography>
+          <Typography align="center" className={mainClasses.text2}>
+          Log Into your ZubHub account to share ideas
+          </Typography>
+        </Grid>
+        <Grid item>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['username'] && errors['username']}>
+            <FormLabel className={mainClasses.subHeader2}>Username or Email address</FormLabel>
+            <OutlinedInput
+              id="username"
+              name="username"
+              type="text"
+              placeholder="Enter username or email address"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <SlUser className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            />
+           <CustomErrorMessage name="username" errors={errors} touched={touched} />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['password'] && errors['password']}>
+            <FormLabel className={mainClasses.subHeader2}>Password</FormLabel>
+            <OutlinedInput
+              name="password"
+              id="password"
+              type={password ? 'text' : 'password'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter password"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <TfiLock className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+              endAdornment={
+                <InputAdornment>
+                  <IconButton onClick={() => setShowPassword({ password: !password })}>
+                    {password ? (
+                      <BsEyeSlash className={mainClasses.inputIcon} />
+                    ) : (
+                      <SlEye className={mainClasses.inputIcon} />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="password" errors={errors} touched={touched} />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <FormControl>
+            <FormControlLabel
+              name="remember"
+              id="remember"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              label="Remember me"
+              control={<Checkbox />}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <CustomButton
+          type='submit'
+            className={mainClasses.button}
+            primaryButtonStyle
+            fullWidth
+          >
+            Login
+          </CustomButton>
+        </Grid>
+        </form>
+      </Grid>
     </Box>
   );
-}
+};
 
 Login.propTypes = {
   auth: PropTypes.object.isRequired,
@@ -295,12 +170,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(
-  withFormik({
-    mapPropsToValue: () => ({
-      username: '',
-      password: '',
-    }),
-    validationSchema,
-  })(Login),
-);
+)(Login);
diff --git a/zubhub_frontend/zubhub/src/views/login/loginScripts.js b/zubhub_frontend/zubhub/src/views/login/loginScripts.js
index 61084b1a6..722674e31 100644
--- a/zubhub_frontend/zubhub/src/views/login/loginScripts.js
+++ b/zubhub_frontend/zubhub/src/views/login/loginScripts.js
@@ -27,11 +27,9 @@ export const handleMouseDownPassword = e => {
  *
  * @todo - describe function's signature
  */
-export const login = (e, props) => {
-  e.preventDefault();
-  props.setFieldTouched('username', true);
+export const handleLogin = (props, values) => {
   return props
-    .login({ values: props.values, navigate: props.navigate })
+    .login({ values, navigate: props.navigate })
     .catch(error => {
       const messages = JSON.parse(error.message);
       if (typeof messages === 'object') {
@@ -61,4 +59,5 @@ export const login = (e, props) => {
 export const validationSchema = Yup.object().shape({
   username: Yup.string().required('required'),
   password: Yup.string().min(8, 'min').required('required'),
+  remember: Yup.boolean()
 });
diff --git a/zubhub_frontend/zubhub/src/views/signup/EducatorsForm.jsx b/zubhub_frontend/zubhub/src/views/signup/EducatorsForm.jsx
new file mode 100644
index 000000000..0a0b9c691
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/EducatorsForm.jsx
@@ -0,0 +1,284 @@
+import {
+  Box,
+  Grid,
+  FormControl,
+  FormLabel,
+  OutlinedInput,
+  InputAdornment,
+  Typography,
+  MenuItem,
+  Select,
+  FormControlLabel,
+  Checkbox,
+  IconButton,
+} from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { CustomErrorMessage, CustomButton } from '../../components';
+import { SlEnvolope, SlUser, SlEye } from 'react-icons/sl';
+import { BsEyeSlash } from 'react-icons/bs';
+import { TfiLocationPin, TfiLock, TfiAngleDown, TfiControlRecord } from 'react-icons/tfi';
+import { makeStyles } from '@mui/styles';
+import { mainStyles } from './signupStyles';
+import dayjs from 'dayjs';
+import 'dayjs/locale/de';
+import { useState } from 'react';
+
+const useMainStyles = makeStyles(mainStyles);
+
+const EducatorsForm = props => {
+  const [{ password, confirmPassword }, setShowPassword] = useState({ password: false, confirmPassword: false });
+  const mainClasses = useMainStyles();
+  const {
+    setFieldValue,
+    errors,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    touched,
+    values: { dateOfBirth },
+  } = props;
+
+  const getMaxDate = () => {
+    const currentDate = new Date();
+    const maxDate = new Date();
+    maxDate.setFullYear(currentDate.getFullYear() - 12);
+    return dayjs(maxDate);
+  };
+
+  return (
+    <Box width="100%">
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        maxWidth="600px"
+        margin="0 auto"
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+        className={mainClasses.gridControl}
+        borderRadius={1}
+        pb={3}
+      >
+        <Grid item>
+          <Typography align="center" className={mainClasses.header2}>
+            Welcome to ZubHub !
+          </Typography>
+          <Typography align="center" className={mainClasses.text2}>
+            Create projects, share ideas, make friends. It’s free{' '}
+          </Typography>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['username'] && errors['username']}>
+            <FormLabel className={mainClasses.subHeader2}>Username</FormLabel>
+            <OutlinedInput
+              name="username"
+              id="username"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter a username"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <SlUser className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="username" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['email'] && errors['email']}>
+            <FormLabel className={mainClasses.subHeader2}>Email Address</FormLabel>
+            <OutlinedInput
+              name="email"
+              id="email"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter your email address"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <SlEnvolope className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="email" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width="100%">
+          <FormControl
+            fullWidth
+            className={mainClasses.formControl}
+            error={touched['dateOfBirth'] && errors['dateOfBirth']}
+          >
+            <FormLabel className={mainClasses.subHeader2}>When were you born?</FormLabel>
+            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
+              <DatePicker
+                defaultValue={getMaxDate()}
+                value={dayjs(dateOfBirth)}
+                maxDate={getMaxDate()}
+                name="dateOfBirth"
+                onChange={date => setFieldValue('dateOfBirth', date)}
+                onBlur={handleBlur}
+                slotProps={{
+                  inputAdornment: { position: 'start' },
+                  textField: {
+                    placeholder: 'dd/mm/yyyy',
+                  },
+                }}
+              />
+            </LocalizationProvider>
+            <CustomErrorMessage name="dateOfBirth" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width="100%">
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['location'] && errors['location']}>
+            <FormLabel className={mainClasses.subHeader2}>Where do you live?</FormLabel>
+            <Select
+              labelId="select-label"
+              name="location"
+              id="location"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              defaultValue="none"
+              input={<OutlinedInput />}
+              className={mainClasses.outlinedInput}
+              IconComponent={() => <TfiAngleDown style={{ fontSize: '24px', fill: '#bdbdbd', marginLeft: '24px' }} />}
+              startAdornment={
+                <InputAdornment>
+                  <TfiLocationPin className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            >
+              <MenuItem value="none" disabled>
+                <Typography color="dimgrey">Select country</Typography>
+              </MenuItem>
+              <MenuItem value={'testing'}>Test location</MenuItem>
+            </Select>
+            <CustomErrorMessage name="location" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width="100%">
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['gender'] && errors['gender']}>
+            <FormLabel className={mainClasses.subHeader2}>What's your gender?</FormLabel>
+            <Select
+              labelId="gender-select-label"
+              name="gender"
+              id="gender"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              defaultValue="none"
+              input={<OutlinedInput />}
+              className={mainClasses.outlinedInput}
+              IconComponent={() => <TfiAngleDown style={{ fontSize: '24px', fill: '#bdbdbd', marginLeft: '24px' }} />}
+              startAdornment={
+                <InputAdornment>
+                  <TfiControlRecord className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            >
+              <MenuItem value="none" disabled>
+                <Typography color="dimgrey">Select a gender</Typography>
+              </MenuItem>
+              <MenuItem value="male">Male</MenuItem>
+              <MenuItem value="female">Female</MenuItem>
+              <MenuItem value="other">Other</MenuItem>
+              <MenuItem value="unspecified">Prefer not to say</MenuItem>
+            </Select>
+            <CustomErrorMessage name="gender" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['password'] && errors['password']}>
+            <FormLabel className={mainClasses.subHeader2}>Password</FormLabel>
+            <OutlinedInput
+              name="password"
+              id="password"
+              type={password ? 'text' : 'password'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter your password"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <TfiLock className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+              endAdornment={
+                <InputAdornment>
+                  <IconButton onClick={() => setShowPassword({ password: !password })}>
+                    {password ? (
+                      <BsEyeSlash className={mainClasses.inputIcon} />
+                    ) : (
+                      <SlEye className={mainClasses.inputIcon} />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="password" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl
+            fullWidth
+            className={mainClasses.formControl}
+            error={touched['confirmPassword'] && errors['confirmPassword']}
+          >
+            <FormLabel className={mainClasses.subHeader2}>Confirm Password</FormLabel>
+            <OutlinedInput
+              name="confirmPassword"
+              id="confirmPassword"
+              type={confirmPassword ? 'text' : 'password'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter password again"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <TfiLock className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+              endAdornment={
+                <InputAdornment>
+                  <IconButton onClick={() => setShowPassword({ confirmPassword: !confirmPassword })}>
+                    {confirmPassword ? (
+                      <BsEyeSlash className={mainClasses.inputIcon} />
+                    ) : (
+                      <SlEye className={mainClasses.inputIcon} />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="confirmPassword" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <FormControl>
+            <FormControlLabel
+              name="sendTips"
+              id="sendTips"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              label="Send me personalised recommendations and learning tips."
+              control={<Checkbox />}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <CustomButton onClick={handleSubmit} className={mainClasses.button} primaryButtonStyle fullWidth>
+            Create Your Account
+          </CustomButton>
+        </Grid>
+        <Grid item>
+          <Typography align="center">By signing up you agree to our Terms and Services and Privacy Policy</Typography>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default EducatorsForm;
diff --git a/zubhub_frontend/zubhub/src/views/signup/Signup.jsx b/zubhub_frontend/zubhub/src/views/signup/Signup.jsx
index 492f8e15c..45fd32636 100644
--- a/zubhub_frontend/zubhub/src/views/signup/Signup.jsx
+++ b/zubhub_frontend/zubhub/src/views/signup/Signup.jsx
@@ -1,678 +1,79 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import clsx from 'clsx';
+import StepWizard from 'react-step-wizard';
 import PropTypes from 'prop-types';
-
+import * as AuthActions from '../../store/actions/authActions';
 import { connect } from 'react-redux';
-
-import { withFormik } from 'formik';
-
-import 'intl-tel-input/build/css/intlTelInput.css';
-
+import { Step1, Step2, Step3, Step4, Step5, Step6 } from './steps';
+import { useRef, useState, useEffect } from 'react';
+import { useFormik } from 'formik';
+import { Container, Grid, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import Visibility from '@mui/icons-material/Visibility';
-import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import {
-  Grid,
-  Box,
-  Divider,
-  Container,
-  Card,
-  CardActionArea,
-  CardContent,
-  Select,
-  MenuItem,
-  Typography,
-  InputAdornment,
-  IconButton,
-  OutlinedInput,
-  Tooltip,
-  ClickAwayListener,
-  InputLabel,
-  FormHelperText,
-  FormControl,
-  FormControlLabel,
-  Checkbox,
-} from '@mui/material';
-
-import {
-  vars,
-  validationSchema,
-  initIntlTelInput,
-  handleMouseDownPassword,
-  getLocations,
-  signup,
-  handleTooltipOpen,
-  handleTooltipClose,
-  handleToggleSubscribeBox,
-  handleLocationChange,
-  setLabelWidthOfStaticFields,
-} from './signupScripts';
-
-import CustomButton from '../../components/button/Button';
-import * as AuthActions from '../../store/actions/authActions';
-import styles from '../../assets/js/styles/views/signup/signupStyles';
-
-const useStyles = makeStyles(styles);
+import { customValidation, formikSchema } from './signupScripts';
+import { mainStyles } from './signupStyles';
+import { Link } from 'react-router-dom';
 
-/**
- * @function Signup View
- * @author Raymond Ndibe <ndiberaymond1@gmail.com>
- *
- * @todo - describe function's signature
- */
+const useStyles = makeStyles(mainStyles);
 function Signup(props) {
-  const classes = useStyles();
-
-  const refs = {
-    phone_el: React.useRef(null),
-    location_el: React.useRef(null),
-    date_of_birth_el: React.useRef(null),
-  };
-
-  const [state, setState] = React.useState({
-    locations: [],
-    show_password1: false,
-    show_password2: false,
-    tool_tip_open: false,
-    subscribe_box_checked: false,
+  const { getLocations } = props;
+  const [locations, setLocations] = useState([]);
+  const mainClasses = useStyles();
+
+  const formik = useFormik({
+    ...formikSchema,
+    validate: values => {
+      return customValidation(values, props);
+    },
+    onSubmit: (values, formikHelpers) => {
+      console.log(values, formikHelpers, props);
+    },
   });
+  const wizardRef = useRef(null);
+  const [activeStep, setActiveStep] = useState(1);
 
-  React.useEffect(() => {
-    handleSetState(getLocations(props));
-  }, []);
-
-  React.useEffect(() => {
-    initIntlTelInput(props, refs);
-  }, [refs.phone_el]);
-
-  React.useEffect(() => {
-    setLabelWidthOfStaticFields(refs, document, props);
-  }, [props.i18n.language]);
-
-  React.useEffect(() => {
-    if (props.touched['email']) {
-      vars.email_field_touched = true;
-    } else {
-      vars.email_field_touched = false;
+  const wizardGo = (direction, stepErrorsAvailable) => {
+    if (stepErrorsAvailable) {
+      return;
     }
-
-    if (props.touched['phone']) {
-      vars.phone_field_touched = true;
-    } else {
-      vars.phone_field_touched = false;
+    if (direction === 'next') {
+      wizardRef.current.nextStep();
+      setActiveStep(step => step + 1);
     }
-  }, [props.touched['email'], props.touched['phone']]);
-
-  const handleSetState = obj => {
-    if (obj) {
-      Promise.resolve(obj).then(obj => {
-        setState(state => ({ ...state, ...obj }));
-      });
+    if (direction === 'prev') {
+      wizardRef.current.previousStep();
+      setActiveStep(step => step - 1);
     }
   };
 
-  const {
-    locations,
-    tool_tip_open,
-    show_password1,
-    show_password2,
-    subscribe_box_checked,
-  } = state;
-  const { t } = props;
-
-  return (
-    <Box className={classes.root}>
-      <Container className={classes.containerStyle}>
-        <Card className={classes.cardStyle}>
-          <CardActionArea>
-            <CardContent>
-              <form
-                className="auth-form"
-                name="signup"
-                noValidate="noValidate"
-                onSubmit={e => signup(e, props)}
-              >
-                <Typography
-                  gutterBottom
-                  variant="h5"
-                  component="h2"
-                  color="textPrimary"
-                  className={classes.titleStyle}
-                >
-                  {t('signup.welcomeMsg.primary')}
-                </Typography>
-                <Typography
-                  className={classes.descStyle}
-                  variant="body2"
-                  color="textSecondary"
-                  component="p"
-                >
-                  {t('signup.welcomeMsg.secondary')}
-                </Typography>
-                <Grid container spacing={3}>
-                  <Grid item xs={12}>
-                    <Box
-                      component="p"
-                      className={
-                        props.status &&
-                        props.status['non_field_errors'] &&
-                        classes.errorBox
-                      }
-                    >
-                      {props.status && props.status['non_field_errors'] && (
-                        <Box component="span" className={classes.error}>
-                          {props.status['non_field_errors']}
-                        </Box>
-                      )}
-                    </Box>
-                  </Grid>
-                  <Grid item xs={12}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['username']) ||
-                        (props.touched['username'] && props.errors['username'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="username"
-                      >
-                        {t('signup.inputs.username.label')}
-                      </InputLabel>
-                      <ClickAwayListener
-                        onClickAway={() => handleSetState(handleTooltipClose())}
-                      >
-                        <Tooltip
-                          title={t('signup.tooltips.noRealName')}
-                          placement="top-start"
-                          arrow
-                          onClose={() => handleSetState(handleTooltipClose())}
-                          PopperProps={{
-                            disablePortal: true,
-                          }}
-                          open={tool_tip_open}
-                          disableFocusListener
-                          disableHoverListener
-                          disableTouchListener
-                        >
-                          <OutlinedInput
-                            className={classes.customInputStyle}
-                            id="username"
-                            name="username"
-                            type="text"
-                            onClick={() => handleSetState(handleTooltipOpen())}
-                            onChange={props.handleChange}
-                            onBlur={props.handleBlur}
-                            label={t('signup.inputs.username.label')}
-                          />
-                        </Tooltip>
-                      </ClickAwayListener>
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['username']) ||
-                          (props.touched['username'] &&
-                            props.errors['username'] &&
-                            t(
-                              `signup.inputs.username.errors.${props.errors['username']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['user_location']) ||
-                        (props.touched['user_location'] &&
-                          props.errors['user_location'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        id="user_location"
-                      >
-                        {t('signup.inputs.location.label')}
-                      </InputLabel>
-                      <Select
-                        ref={refs.location_el}
-                        labelId="user_location"
-                        id="user_location"
-                        name="user_location"
-                        className={classes.customInputStyle}
-                        value={
-                          props.values.user_location
-                            ? props.values.user_location
-                            : ''
-                        }
-                        onChange={e => handleLocationChange(e, props)}
-                        onBlur={props.handleBlur}
-                        // label="Location"
-                        label={t('signup.inputs.location.label')}
-                      >
-                        <MenuItem value="">
-                          <em>None</em>
-                        </MenuItem>
-                        {Array.isArray(locations) &&
-                          locations.map(location => (
-                            <MenuItem key={location.name} value={location.name}>
-                              {location.name}
-                            </MenuItem>
-                          ))}
-                      </Select>
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['user_location']) ||
-                          (props.touched['user_location'] &&
-                            props.errors['user_location'] &&
-                            t(
-                              `signup.inputs.location.errors.${props.errors['user_location']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
+  useEffect(() => {
+    const response = getLocations({ ...props });
 
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['dateOfBirth']) ||
-                        (props.touched['dateOfBirth'] &&
-                          props.errors['dateOfBirth'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="dateOfBirth"
-                        shrink
-                      >
-                        {t('signup.inputs.dateOfBirth.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        ref={refs.date_of_birth_el}
-                        className={clsx(classes.customInputStyle)}
-                        id="dateOfBirth"
-                        name="dateOfBirth"
-                        type="date"
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['dateOfBirth']) ||
-                          (props.touched['dateOfBirth'] &&
-                            props.errors['dateOfBirth'] &&
-                            t(
-                              `signup.inputs.dateOfBirth.errors.${props.errors['dateOfBirth']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['phone']) ||
-                        (props.touched['phone'] && props.errors['phone'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        shrink
-                        htmlFor="phone"
-                      >
-                        {t('signup.inputs.phone.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        ref={refs.phone_el}
-                        className={clsx(
-                          classes.customInputStyle,
-                          classes.locationInputStyle,
-                        )}
-                        id="phone"
-                        name="phone"
-                        type="phone"
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['phone']) ||
-                          (props.touched['phone'] &&
-                            props.errors['phone'] &&
-                            t(
-                              `signup.inputs.phone.errors.${props.errors['phone']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['email']) ||
-                        (props.touched['email'] && props.errors['email'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="email"
-                      >
-                        {t('signup.inputs.email.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        className={classes.customInputStyle}
-                        id="email"
-                        name="email"
-                        type="text"
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                        label={t('signup.inputs.email.label')}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['email']) ||
-                          (props.touched['email'] &&
-                            props.errors['email'] &&
-                            t(
-                              `signup.inputs.email.errors.${props.errors['email']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['password1']) ||
-                        (props.touched['password1'] &&
-                          props.errors['password1'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="password1"
-                      >
-                        {t('signup.inputs.password1.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        className={classes.customInputStyle}
-                        id="password1"
-                        name="password1"
-                        type={show_password1 ? 'text' : 'password'}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                        endAdornment={
-                          <InputAdornment position="end">
-                            <IconButton
-                              aria-label={t(
-                                'signup.ariaLabel.togglePasswordVisibility',
-                              )}
-                              onClick={() =>
-                                setState({
-                                  ...state,
-                                  show_password1: !show_password1,
-                                })
-                              }
-                              onMouseDown={handleMouseDownPassword}
-                              edge="end"
-                            >
-                              {show_password1 ? (
-                                <Visibility />
-                              ) : (
-                                <VisibilityOff />
-                              )}
-                            </IconButton>
-                          </InputAdornment>
-                        }
-                        label={t('signup.inputs.password1.label')}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['password1']) ||
-                          (props.touched['password1'] &&
-                            props.errors['password1'] &&
-                            t(
-                              `signup.inputs.password1.errors.${props.errors['password1']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12} sm={6} md={6}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="normal"
-                      error={
-                        (props.status && props.status['password2']) ||
-                        (props.touched['password2'] &&
-                          props.errors['password2'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="password2"
-                      >
-                        {t('signup.inputs.password2.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        className={classes.customInputStyle}
-                        id="password2"
-                        name="password2"
-                        type={show_password2 ? 'text' : 'password'}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                        endAdornment={
-                          <InputAdornment position="end">
-                            <IconButton
-                              aria-label={t(
-                                'signup.ariaLabel.togglePasswordVisibility',
-                              )}
-                              onClick={() =>
-                                setState({
-                                  ...state,
-                                  show_password2: !show_password2,
-                                })
-                              }
-                              onMouseDown={handleMouseDownPassword}
-                              edge="end"
-                            >
-                              {show_password2 ? (
-                                <Visibility />
-                              ) : (
-                                <VisibilityOff />
-                              )}
-                            </IconButton>
-                          </InputAdornment>
-                        }
-                        label={t('signup.inputs.password2.label')}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        {(props.status && props.status['password2']) ||
-                          (props.touched['password2'] &&
-                            props.errors['password2'] &&
-                            t(
-                              `signup.inputs.password2.errors.${props.errors['password2']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-
-                  <Grid item xs={12}>
-                    <FormControl
-                      className={clsx(classes.margin, classes.textField)}
-                      variant="outlined"
-                      size="small"
-                      fullWidth
-                      margin="small"
-                      error={
-                        (props.status && props.status['bio']) ||
-                        (props.touched['bio'] && props.errors['bio'])
-                      }
-                    >
-                      <InputLabel
-                        className={classes.customLabelStyle}
-                        htmlFor="bio"
-                      >
-                        {t('signup.inputs.bio.label')}
-                      </InputLabel>
-                      <OutlinedInput
-                        className={classes.customInputStyle}
-                        id="bio"
-                        name="bio"
-                        type="text"
-                        multiline
-                        rows={6}
-                        rowsMax={6}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                        label={t('signup.inputs.bio.label')}
-                      />
-                      <FormHelperText
-                        className={classes.fieldHelperTextStyle}
-                        error
-                      >
-                        <Typography
-                          color="textSecondary"
-                          variant="caption"
-                          component="span"
-                          className={classes.fieldHelperTextStyle}
-                        >
-                          {t('signup.inputs.bio.helpText')}
-                        </Typography>
-                        <br />
-                        {(props.status && props.status['bio']) ||
-                          (props.touched['bio'] &&
-                            props.errors['bio'] &&
-                            t(
-                              `signup.inputs.bio.errors.${props.errors['bio']}`,
-                            ))}
-                      </FormHelperText>
-                    </FormControl>
-                  </Grid>
-                  <Grid item xs={12}>
-                    <FormControlLabel
-                      value={subscribe_box_checked}
-                      onChange={e =>
-                        handleSetState(
-                          handleToggleSubscribeBox(e, props, state),
-                        )
-                      }
-                      control={
-                        <Checkbox
-                          name="subscribe"
-                          id="subscribe"
-                          color="primary"
-                        />
-                      }
-                      label={
-                        <Typography
-                          color="textSecondary"
-                          variant="caption"
-                          component="span"
-                          className={classes.fieldHelperTextStyle}
-                        >
-                          {t('signup.unsubscribe')}
-                        </Typography>
-                      }
-                      labelPlacement="end"
-                    />
-                  </Grid>
+    if (response) {
+      Promise.resolve(response).then(data => setLocations(data));
+    }
+  }, [getLocations]);
 
-                  <Grid item xs={12}>
-                    <CustomButton
-                      variant="contained"
-                      size="large"
-                      primaryButtonStyle
-                      type="submit"
-                      fullWidth
-                      customButtonStyle
-                    >
-                      {t('signup.inputs.submit')}
-                    </CustomButton>
-                  </Grid>
-                </Grid>
-              </form>
-              <Grid container spacing={3}>
-                <Grid item xs={12}>
-                  <Box className={classes.center}>
-                    <Divider className={classes.divider} />
-                    <Typography
-                      variant="body2"
-                      color="textSecondary"
-                      component="p"
-                    >
-                      {t('signup.alreadyAMember')}
-                    </Typography>
-                    <Divider className={classes.divider} />
-                  </Box>
-                </Grid>
-                <Grid item xs={12}>
-                  <Link to="/login" className={classes.textDecorationNone}>
-                    <CustomButton
-                      variant="outlined"
-                      size="large"
-                      secondaryButtonStyle
-                      customButtonStyle
-                      fullWidth
-                    >
-                      {t('signup.login')}
-                    </CustomButton>
-                  </Link>
-                </Grid>
-              </Grid>
-            </CardContent>
-          </CardActionArea>
-        </Card>
-      </Container>
-    </Box>
+  return (
+    <Container>
+      <Grid container direction="column" alignItems="center" className={mainClasses.wrapper}>
+        <Grid sx={{ width: '100%' }}>
+          <StepWizard initialStep={activeStep} ref={wizardRef} className={mainClasses.wizard}>
+            <Step1 {...formik} goAction={wizardGo} {...props} />
+            <Step2 {...formik} goAction={wizardGo} {...props} locations={locations} />
+            <Step3 {...formik} goAction={wizardGo} {...props} locations={locations} />
+            <Step4 {...formik} goAction={wizardGo} {...props} />
+            <Step5 {...formik} goAction={wizardGo} {...props} />
+            <Step6 {...formik} goAction={wizardGo} {...props} />
+          </StepWizard>
+        </Grid>
+        <Grid mt={5} mb={5}>
+          <Typography>
+            Already have an account?{' '}
+            <Link style={{ color: 'var(--primary-color3)', textDecoration: 'none', fontWeight: 600 }} to="/login">
+              Login{' '}
+            </Link>
+          </Typography>
+        </Grid>
+      </Grid>
+    </Container>
   );
 }
 
@@ -703,20 +104,4 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(
-  withFormik({
-    mapPropsToValue: () => ({
-      username: '',
-      email: '',
-      phone: '',
-      user_location: '',
-      password1: '',
-      password2: '',
-      bio: '',
-    }),
-    validationSchema,
-  })(Signup),
-);
+export default connect(mapStateToProps, mapDispatchToProps)(Signup);
diff --git a/zubhub_frontend/zubhub/src/views/signup/signupScripts.js b/zubhub_frontend/zubhub/src/views/signup/signupScripts.js
index f042d4530..b54899fd6 100644
--- a/zubhub_frontend/zubhub/src/views/signup/signupScripts.js
+++ b/zubhub_frontend/zubhub/src/views/signup/signupScripts.js
@@ -214,32 +214,67 @@ export const setLabelWidthOfStaticFields = (refs, document, props) => {
  * @todo - describe object's function
  */
 export const validationSchema = Yup.object().shape({
+  role: Yup.string().required('Please choose a role'),
   username: Yup.string().required('required'),
-  email: Yup.string()
-    .email('invalid')
-    .test('email_is_empty', 'phoneOrEmail', function (value) {
-      return vars.email_field_touched && !value && !this.parent.phone
-        ? false
-        : true;
-    }),
-  phone: Yup.string()
-    .test('phone_is_invalid', 'invalid', function () {
-      return vars.iti.isValidNumber() || !vars.iti.getNumber() ? true : false;
-    })
-    .test('phone_is_empty', 'phoneOrEmail', function () {
-      return vars.phone_field_touched &&
-        !vars.iti.getNumber() &&
-        !this.parent.email
-        ? false
-        : true;
-    }),
-  dateOfBirth: Yup.date().max(new Date(new Date().getFullYear() - 12, 1, 1), 'oldEnough').required('required'),
-  user_location: Yup.string().min(1, 'min').required('required'),
-  password1: Yup.string().min(8, 'min').required('required'),
-  password2: Yup.string()
-    .oneOf([Yup.ref('password1'), null], 'noMatch')
+  email: Yup.string().email('invalid').required('Add your email'),
+  // .test('email_is_empty', 'phoneOrEmail', function (value) {
+  //   return vars.email_field_touched && !value && !this.parent.phone ? false : true;
+  // }),
+  phone: Yup.string(),
+  // .test('phone_is_invalid', 'invalid', function () {
+  //   return vars.iti.isValidNumber() || !vars.iti.getNumber() ? true : false;
+  // })
+  // .test('phone_is_empty', 'phoneOrEmail', function () {
+  //   return vars.phone_field_touched && !vars.iti.getNumber() && !this.parent.email ? false : true;
+  // }),
+  dateOfBirth: Yup.date().required('required'),
+  location: Yup.string().min(1, 'min').required('required'),
+  password: Yup.string().min(8, 'min').required('required'),
+  confirmPassword: Yup.string()
+    .oneOf([Yup.ref('confirmPassword'), null], 'noMatch')
     .required('required'),
   bio: Yup.string().max(255, 'tooLong'),
+  parentEmail: Yup.string().email(),
+  parentPhone: Yup.string(),
+  gender: Yup.string().required('Choose your gender'),
+  sendTips: Yup.boolean(),
 });
 
 // /^[+][0-9]{9,15}$/g.test(value)
+
+export const formikSchema = {
+  initialValues: {
+    dateOfBirth: '',
+    role: '',
+    username: '',
+    email: '',
+    phone: '',
+    location: '',
+    password: '',
+    confirmPassword: '',
+    bio: '',
+    parentEmail: '',
+    parentPhone: '',
+    gender: null,
+    sendTips: false,
+  },
+  validationSchema,
+};
+
+export const customValidation = (values, props) => {
+  const errors = {};
+  const { role, parentEmail, parentPhone } = values;
+
+  if (role === 'creator') {
+    errors.email = null;
+
+    if (!parentEmail && !parentPhone) {
+      errors.parentEmail = 'Please provide either parent email or phone number';
+      errors.parentPhone = 'Please provide either parent email or phone number';
+    } else {
+      errors.parentEmail = null;
+      errors.parentPhone = null;
+    }
+  }
+  return errors;
+};
diff --git a/zubhub_frontend/zubhub/src/views/signup/signupStyles.js b/zubhub_frontend/zubhub/src/views/signup/signupStyles.js
new file mode 100644
index 000000000..df26829e6
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/signupStyles.js
@@ -0,0 +1,186 @@
+export const mainStyles = theme => ({
+  wrapper: {
+    marginTop: theme.spacing(10),
+    [theme.breakpoints.down('lg')]: {
+      marginTop: theme.spacing(10),
+    },
+    [theme.breakpoints.down('md')]: {
+      marginTop: theme.spacing(5),
+    },
+  },
+  gridContainer: {
+    alignItems: 'center',
+    borderRadius: theme.spacing(1),
+  },
+  header: {
+    color: theme.palette.text.primary,
+    fontSize: theme.spacing(5),
+    fontWeight: 800,
+    lineHeight: '50px',
+    [theme.breakpoints.down('sm')]: {
+      lineHeight: 'unset',
+      fontSize: '20px',
+    },
+  },
+  subHeader: {
+    color: theme.palette.text.primary,
+    fontSize: theme.spacing(3),
+    fontWeight: 800,
+    lineHeight: 'normal',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '18px',
+      fontWeight: 700,
+    },
+  },
+  text: {
+    fontSize: theme.spacing(2),
+    fontWeight: 400,
+    lineHeight: '32px',
+    color: theme.palette.text.secondary,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '12px',
+      lineHeight: 'unset',
+    },
+  },
+  header2: {
+    color: theme.palette.text.primary,
+    fontSize: '30px',
+    fontWeight: 700,
+    lineHeight: '50px',
+  },
+  subHeader2: {
+    color: theme.palette.text.primary,
+    fontSize: '18px',
+    fontWeight: 600,
+    lineHeight: '24px',
+  },
+  text2: {},
+  wizard: {
+    width: '100%',
+  },
+  outlinedInput: {
+    borderRadius: theme.spacing(1),
+    paddingInline: theme.spacing(3),
+    gap: theme.spacing(3),
+    '& .MuiOutlinedInput-input': {
+      padding: '20px 0',
+    },
+    '&.MuiOutlinedInput-root': {
+      '&:hover fieldset': {
+        border: `1px solid ${theme.palette.primary.light}`,
+      },
+      '&.Mui-focused fieldset': {
+        border: `2px solid ${theme.palette.primary.light}`,
+      },
+    },
+  },
+  formControl: {
+    gap: theme.spacing(3),
+    [theme.breakpoints.down('md')]: {
+      gap: theme.spacing(2),
+    },
+    [theme.breakpoints.down('sm')]: {
+      gap: theme.spacing(1),
+    },
+  },
+  inputIcon: {
+    fontSize: theme.spacing(3),
+    fill: theme.palette.grey[400],
+  },
+  button: {
+    fontSize: '18px',
+    fontWeight: 600,
+    paddingBlock: '20px',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '12px',
+      padding: '5px 16px',
+    },
+  },
+  spaceBackground: {
+    width: '100%',
+    height: '100%',
+  },
+  backContainer: {
+    borderRadius: '50%',
+    background: theme.palette.background.default,
+    padding: '10px',
+  },
+  backIcon: {
+    fontSize: theme.spacing(3),
+  },
+  gridControl: {
+    background: theme.palette.background.default,
+    padding: '0 40px',
+    boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)',
+  },
+});
+
+export const step1Styles = theme => ({
+  paper: {
+    cursor: 'pointer',
+    width: '350px',
+    height: '300px',
+    borderRadius: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(2),
+    justifyContent: 'center',
+    [theme.breakpoints.down('sm')]: {
+      padding: theme.spacing(2, 3),
+      width: '342px',
+      height: '124px',
+      alignItems: 'unset',
+    },
+    '&.selected': {
+      border: '3px solid var(--primary-color3)',
+    },
+  },
+  icon: {
+    fill: '#00B8C4',
+    fontSize: '64px',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: 'unset',
+      height: '32px',
+      width: '32px',
+    },
+  },
+});
+
+export const step2Styles = theme => ({
+  container: {
+    background: theme.palette.background.paper,
+    borderRadius: theme.spacing(1),
+    padding: theme.spacing(8, 5),
+    boxShadow: '2px 4px 5px 0px rgba(0, 184, 196, 0.05)',
+  },
+});
+
+export const step3Styles = theme => ({});
+
+export const step4Styles = theme => ({});
+export const step5Styles = theme => ({
+  label: {
+    gap: theme.spacing(3),
+  },
+  formControl: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(5),
+    alignItems: 'left',
+  },
+  fieldSet: {
+    padding: `20px ${theme.spacing(3)}`,
+    borderWidth: '1px',
+    borderColor: theme.palette.grey[300],
+    borderStyle: 'solid',
+    borderRadius: theme.spacing(1),
+    '&:hover': {
+      borderColor: theme.palette.primary.light,
+    },
+    '&.selected': {
+      borderWidth: '3px',
+      borderColor: theme.palette.primary.light,
+    },
+  },
+});
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/index.js b/zubhub_frontend/zubhub/src/views/signup/steps/index.js
new file mode 100644
index 000000000..e970fbdef
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/index.js
@@ -0,0 +1,8 @@
+import Step1 from './step1/Step1';
+import Step2 from './step2/Step2';
+import Step3 from './step3/Step3';
+import Step4 from './step4/Step4';
+import Step5 from './step5/Step5';
+import Step6 from './step6/Step6';
+
+export { Step1, Step2, Step3, Step4, Step5, Step6 };
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/step1/Step1.jsx b/zubhub_frontend/zubhub/src/views/signup/steps/step1/Step1.jsx
new file mode 100644
index 000000000..071796c10
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/step1/Step1.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Box, Grid, Paper, Typography } from '@mui/material';
+import { FaUserGraduate, FaChalkboardUser } from 'react-icons/fa6';
+import { makeStyles } from '@mui/styles';
+import { mainStyles, step1Styles } from '../../signupStyles';
+import { CustomButton } from '../../../../components';
+
+const useMainStyles = makeStyles(mainStyles);
+const useStepStyles = makeStyles(step1Styles);
+
+const Step1 = props => {
+  const mainClasses = useMainStyles();
+  const classes = useStepStyles();
+  const {
+    goAction,
+    values: { role },
+    setFieldValue,
+  } = props;
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Grid
+        container
+        justifyContent="center"
+        alignItems="center"
+        className={classes.gridContainer}
+        rowSpacing={{ xs: 4, sm: 6, md: 10 }}
+      >
+        <Grid item>
+          <Typography align="center" className={mainClasses.header}>
+            Welcome to ZubHub !
+          </Typography>
+          <Typography align="center" mt={2} className={mainClasses.text}>
+            Connect with students, educators, and the ZubHub community. To get started, choose an account type.
+          </Typography>
+        </Grid>
+        <Grid item sx={{ width: '100%' }}>
+          <Grid container justifyContent="space-around" rowGap={2}>
+            <Grid item>
+              <Paper
+                component="div"
+                onClick={() => setFieldValue('role', 'creator')}
+                variant="elevation"
+                elevation={2}
+                className={clsx([classes.paper, role === 'creator' && 'selected'])}
+              >
+                <FaUserGraduate className={classes.icon} />
+                <Typography className={mainClasses.subHeader}>Creator</Typography>
+                <Typography className={mainClasses.text}>I am a Creator, who wants to create</Typography>
+              </Paper>
+            </Grid>
+            <Grid item>
+              <Paper
+                component="div"
+                onClick={() => setFieldValue('role', 'educator')}
+                className={clsx([classes.paper, role === 'educator' && 'selected'])}
+                variant="elevation"
+                elevetion={2}
+              >
+                <FaChalkboardUser className={classes.icon} />
+                <Typography className={mainClasses.subHeader}>Educator</Typography>
+                <Typography className={mainClasses.text}>I am an Educator, looking to inspire</Typography>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item>
+          <CustomButton
+            disabled={!role}
+            className={clsx([classes.button, !role && 'disabled'])}
+            primaryButtonStyle
+            onClick={() => goAction('next', false)}
+          >
+            {!role ? 'CHOOSE A ROLE' : role === 'creator' ? 'JOIN AS A CREATOR' : 'JOIN AS AN EDUCATOR'}
+          </CustomButton>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Step1;
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/step2/Step2.jsx b/zubhub_frontend/zubhub/src/views/signup/steps/step2/Step2.jsx
new file mode 100644
index 000000000..0424c6f9e
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/step2/Step2.jsx
@@ -0,0 +1,166 @@
+import {
+  Box,
+  Grid,
+  FormControl,
+  FormLabel,
+  OutlinedInput,
+  InputAdornment,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import { CustomButton, CustomErrorMessage } from '../../../../components';
+import { TfiLock, TfiArrowLeft } from 'react-icons/tfi';
+import { SlEye, SlUser } from 'react-icons/sl';
+import { BsEyeSlash } from 'react-icons/bs';
+import { makeStyles } from '@mui/styles';
+import { useState } from 'react';
+import { mainStyles, step2Styles } from '../../signupStyles';
+import EducatorsForm from '../../EducatorsForm';
+
+const useMainStyles = makeStyles(mainStyles);
+const useStyles = makeStyles(step2Styles);
+const Step2 = props => {
+  console.log(props, 'afafadh');
+  const [{ password, confirmPassword }, setShowPassword] = useState({ password: false, confirmPassword: false });
+  const classes = useStyles();
+  const mainClasses = useMainStyles();
+  const {
+    errors,
+    handleChange,
+    handleBlur,
+    goAction,
+    touched,
+    values: { role },
+  } = props;
+
+  const errorsAvailable = errors['username'] || errors['password'] || errors['confirmPassword'];
+
+  if (role === 'educator') {
+    return <EducatorsForm {...props} />;
+  }
+
+  return (
+    <Box width={'100%'}>
+      <Grid
+        container
+        direction="column"
+        maxWidth={'600px'}
+        margin={'auto'}
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+        className={classes.container}
+      >
+        <Grid alignSelf="flex-start">
+          <IconButton onClick={() => goAction('prev', false)} className={mainClasses.backContainer}>
+            <TfiArrowLeft className={mainClasses.backIcon} />
+          </IconButton>
+        </Grid>
+        <Grid item>
+          <Typography align="center" className={mainClasses.header2}>
+            Welcome to ZubHub !
+          </Typography>
+          <Typography align="center" className={mainClasses.text2}>
+            Create projects, share ideas, make friends. It’s free{' '}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['username'] && errors['username']}>
+            <FormLabel className={mainClasses.subHeader2}>Username</FormLabel>
+            <OutlinedInput
+              id="username"
+              name="username"
+              type="text"
+              placeholder="Enter a username"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <SlUser className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="username" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl fullWidth className={mainClasses.formControl} error={touched['password'] && errors['password']}>
+            <FormLabel className={mainClasses.subHeader2}>Password</FormLabel>
+            <OutlinedInput
+              name="password"
+              id="password"
+              type={password ? 'text' : 'password'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter your password"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <TfiLock className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+              endAdornment={
+                <InputAdornment>
+                  <IconButton onClick={() => setShowPassword({ password: !password })}>
+                    {password ? (
+                      <BsEyeSlash className={mainClasses.inputIcon} />
+                    ) : (
+                      <SlEye className={mainClasses.inputIcon} />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="password" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item width={'100%'}>
+          <FormControl
+            fullWidth
+            className={mainClasses.formControl}
+            error={touched['confirmPassword'] && errors['confirmPassword']}
+          >
+            <FormLabel className={mainClasses.subHeader2}>Confirm Password</FormLabel>
+            <OutlinedInput
+              name="confirmPassword"
+              id="confirmPassword"
+              type={confirmPassword ? 'text' : 'password'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder="Enter password again"
+              className={mainClasses.outlinedInput}
+              startAdornment={
+                <InputAdornment>
+                  <TfiLock className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+              endAdornment={
+                <InputAdornment>
+                  <IconButton onClick={() => setShowPassword({ confirmPassword: !confirmPassword })}>
+                    {confirmPassword ? (
+                      <BsEyeSlash className={mainClasses.inputIcon} />
+                    ) : (
+                      <SlEye className={mainClasses.inputIcon} />
+                    )}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="confirmPassword" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <CustomButton
+            onClick={() => goAction('next', !!errorsAvailable)}
+            className={mainClasses.button}
+            primaryButtonStyle
+            fullWidth
+          >
+            NEXT
+          </CustomButton>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Step2;
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/step3/Step3.jsx b/zubhub_frontend/zubhub/src/views/signup/steps/step3/Step3.jsx
new file mode 100644
index 000000000..6e1898da0
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/step3/Step3.jsx
@@ -0,0 +1,114 @@
+// import { ArrowBackOutlined, LocationOnOutlined } from '@mui/icons-material';
+import { TfiLocationPin, TfiArrowLeft, TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
+import {
+  Box,
+  Button,
+  FormControl,
+  Grid,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  Typography,
+} from '@mui/material';
+import { CustomButton, CustomErrorMessage } from '../../../../components';
+import SpaceBackground from '../../../../assets/images/space.png';
+import { makeStyles } from '@mui/styles';
+import { mainStyles, step3Styles } from '../../signupStyles';
+
+const useMainStyles = makeStyles(mainStyles);
+const useStyles = makeStyles(step3Styles);
+
+const Step3 = props => {
+  const mainClasses = useMainStyles();
+  const { locations, errors, handleChange, handleBlur, goAction, touched } = props;
+
+  return (
+    <Box width="100%">
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        maxWidth="600px"
+        margin="0 auto"
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+      >
+        <Grid item>
+          <Grid>
+            <div style={{ position: 'absolute', marginLeft: '40px', marginTop: '40px' }}>
+              <IconButton onClick={() => goAction('prev', false)} className={mainClasses.backContainer}>
+                <TfiArrowLeft className={mainClasses.backIcon} />
+              </IconButton>
+            </div>
+          </Grid>
+          <Grid>
+            <img src={SpaceBackground} alt="" className={mainClasses.spaceBackground} />
+          </Grid>
+        </Grid>
+        <Grid
+          item
+          container
+          direction="column"
+          alignItems="center"
+          rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+          className={mainClasses.gridControl}
+        >
+          <Grid item>
+            <Typography maxWidth="342px" align="center" className={mainClasses.header2}>
+              What country do you live in?
+            </Typography>
+          </Grid>
+          <Grid item width="100%">
+            <FormControl fullWidth error={touched['location'] && errors['location']}>
+              <Select
+                id="location"
+                labelId="select-label"
+                name="location"
+                defaultValue="none"
+                onChange={handleChange}
+                onBlur={handleBlur}
+                input={<OutlinedInput />}
+                className={mainClasses.outlinedInput}
+                IconComponent={() => <TfiAngleDown style={{ fontSize: '24px', fill: '#bdbdbd', marginLeft: '24px' }} />}
+                startAdornment={
+                  <InputAdornment>
+                    <TfiLocationPin className={mainClasses.inputIcon} />
+                  </InputAdornment>
+                }
+              >
+                <MenuItem value="none" disabled>
+                  <Typography color="dimgrey">Select a location</Typography>
+                </MenuItem>
+                <MenuItem value="testing">
+                  <Typography color="black">Testing</Typography>
+                </MenuItem>
+                {Array.isArray(locations) &&
+                  locations?.map((location, index) => (
+                    <MenuItem key={index} value={location.name}>
+                      {location.name}
+                    </MenuItem>
+                  ))}
+              </Select>
+              <CustomErrorMessage name="location" {...props} />
+            </FormControl>
+          </Grid>
+          <Grid item width="100%">
+            <CustomButton
+              onClick={() => goAction('next', !!errors['location'])}
+              primaryButtonStyle
+              fullWidth
+              className={mainClasses.button}
+            >
+              Next
+            </CustomButton>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Step3;
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/step4/Step4.jsx b/zubhub_frontend/zubhub/src/views/signup/steps/step4/Step4.jsx
new file mode 100644
index 000000000..713e1304a
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/step4/Step4.jsx
@@ -0,0 +1,107 @@
+import { Box, FormControl, Grid, Typography, IconButton, InputAdornment } from '@mui/material';
+import { CustomErrorMessage, CustomButton } from '../../../../components';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { TfiArrowLeft, TfiAngleDown } from 'react-icons/tfi';
+import CreamBackground from '../../../../assets/images/cream.png';
+import { makeStyles } from '@mui/styles';
+import { mainStyles, step4Styles } from '../../signupStyles';
+import dayjs from 'dayjs';
+import 'dayjs/locale/de';
+
+const useMainStyles = makeStyles(mainStyles);
+const useStyles = makeStyles(step4Styles);
+
+const Step4 = props => {
+  const mainClasses = useMainStyles();
+  const {
+    errors,
+    setFieldValue,
+    handleBlur,
+    goAction,
+    touched,
+    values: { dateOfBirth },
+  } = props;
+
+  const getMaxDate = () => {
+    const currentDate = new Date();
+    const maxDate = new Date();
+    maxDate.setFullYear(currentDate.getFullYear() - 12);
+    return dayjs(maxDate);
+  };
+
+  return (
+    <Box width="100%">
+      <Grid
+        container
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        maxWidth="600px"
+        margin="0 auto"
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+      >
+        <Grid item>
+          <Grid>
+            <div style={{ position: 'absolute', marginLeft: '40px', marginTop: '40px' }}>
+              <IconButton onClick={() => goAction('prev', false)} className={mainClasses.backContainer}>
+                <TfiArrowLeft className={mainClasses.backIcon} />
+              </IconButton>
+            </div>
+          </Grid>
+          <Grid>
+            <img src={CreamBackground} alt="" className={mainClasses.spaceBackground} />
+          </Grid>
+        </Grid>
+        <Grid
+          item
+          container
+          direction="column"
+          alignItems="center"
+          rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+          className={mainClasses.gridControl}
+        >
+          <Grid item>
+            <Typography maxWidth="342px" align="center" className={mainClasses.header2}>
+              When were you born?
+            </Typography>
+          </Grid>
+          <Grid item width="100%">
+            <FormControl fullWidth error={touched['dateOfBirth'] && errors['dateOfBirth']}>
+              <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
+                <DatePicker
+                  defaultValue={getMaxDate()}
+                  value={dayjs(dateOfBirth)}
+                  maxDate={getMaxDate()}
+                  name="dateOfBirth"
+                  onChange={date => setFieldValue('dateOfBirth', date)}
+                  onBlur={handleBlur}
+                  slotProps={{
+                    inputAdornment: { position: 'start' },
+                    textField: {
+                      placeholder: 'dd/mm/yyyy',
+                    },
+                  }}
+                />
+              </LocalizationProvider>
+              <CustomErrorMessage name="dateOfBirth" {...props} />
+            </FormControl>
+          </Grid>
+          <Grid item width="100%">
+            <CustomButton
+              fullWidth
+              primaryButtonStyle
+              className={mainClasses.button}
+              onClick={() => goAction('next', !!errors['dateOfBirth'])}
+            >
+              Next
+            </CustomButton>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Step4;
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/step5/Step5.jsx b/zubhub_frontend/zubhub/src/views/signup/steps/step5/Step5.jsx
new file mode 100644
index 000000000..e1f8dbf37
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/step5/Step5.jsx
@@ -0,0 +1,83 @@
+import { Box, FormControl, FormControlLabel, Grid, Radio, Typography, IconButton, RadioGroup } from '@mui/material';
+import { CustomErrorMessage, CustomButton } from '../../../../components';
+import { TfiArrowLeft } from 'react-icons/tfi';
+import { makeStyles } from '@mui/styles';
+import { mainStyles, step5Styles } from '../../signupStyles';
+
+const useMainStyles = makeStyles(mainStyles);
+const useStyles = makeStyles(step5Styles);
+
+const Step5 = props => {
+  const mainClasses = useMainStyles();
+  const classes = useStyles();
+  const { errors, handleBlur, handleChange, goAction } = props;
+  return (
+    <Box width={'100%'}>
+      <Grid
+        container
+        direction="column"
+        maxWidth={'600px'}
+        margin={'0 auto'}
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+        className={mainClasses.gridControl}
+        alignItems="center"
+        borderRadius={1}
+      >
+        <Grid item alignSelf={'flex-start'}>
+          <Grid>
+            <div style={{ position: 'absolute', marginLeft: '40px', marginTop: '40px' }}>
+              <IconButton onClick={() => goAction('prev', false)} className={mainClasses.backContainer}>
+                <TfiArrowLeft className={mainClasses.backIcon} />
+              </IconButton>
+            </div>
+          </Grid>
+          <Grid></Grid>
+        </Grid>
+        <Grid item>
+          <Typography align="center" className={mainClasses.header2}>
+            What’s your gender?
+          </Typography>
+          <Typography align="center" className={mainClasses.text2}>
+            ZubHub welcomes people of all genders.
+          </Typography>
+        </Grid>
+        <Grid item width="100%">
+          <FormControl fullWidth className={classes.formControl}>
+            <RadioGroup name="gender" onChange={handleChange} onBlur={handleBlur} className={classes.formControl}>
+              <Grid component="fieldset" className={classes.fieldSet}>
+                <FormControlLabel className={classes.label} value="male" control={<Radio />} label="Male" />
+              </Grid>
+              <Grid component="fieldset" className={classes.fieldSet}>
+                <FormControlLabel className={classes.label} value="female" control={<Radio />} label="Female" />
+              </Grid>
+              <Grid component="fieldset" className={classes.fieldSet}>
+                <FormControlLabel className={classes.label} value="other" control={<Radio />} label="Other" />
+              </Grid>
+              <Grid component="fieldset" className={classes.fieldSet}>
+                <FormControlLabel
+                  className={classes.label}
+                  value="unspecified"
+                  control={<Radio />}
+                  label="Prefer not to say"
+                />
+              </Grid>
+              <CustomErrorMessage name="gender" {...props} />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+        <Grid item width="100%">
+          <CustomButton
+            onClick={() => goAction('next', !!errors['gender'])}
+            className={mainClasses.button}
+            primaryButtonStyle
+            fullWidth
+          >
+            NEXT
+          </CustomButton>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Step5;
diff --git a/zubhub_frontend/zubhub/src/views/signup/steps/step6/Step6.jsx b/zubhub_frontend/zubhub/src/views/signup/steps/step6/Step6.jsx
new file mode 100644
index 000000000..0879c159b
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/views/signup/steps/step6/Step6.jsx
@@ -0,0 +1,118 @@
+import {
+  Box,
+  Grid,
+  FormControl,
+  FormLabel,
+  OutlinedInput,
+  InputAdornment,
+  Typography,
+  FormControlLabel,
+  Checkbox,
+  IconButton,
+} from '@mui/material';
+import { SlPhone, SlEnvolope } from 'react-icons/sl';
+import { TfiArrowLeft } from 'react-icons/tfi';
+import { CustomErrorMessage, CustomButton } from '../../../../components';
+import { makeStyles } from '@mui/styles';
+import { mainStyles, step4Styles } from '../../signupStyles';
+
+const useMainStyles = makeStyles(mainStyles);
+const useStyles = makeStyles(step4Styles);
+
+const Step6 = props => {
+  const mainClasses = useMainStyles();
+  const { errors, handleChange, handleBlur, goAction, touched, handleSubmit } = props;
+
+  return (
+    <Box width={'100%'}>
+      <Grid
+        container
+        direction="column"
+        maxWidth={'600px'}
+        margin={'auto'}
+        rowSpacing={{ xs: 2, sm: 3, md: 5 }}
+        className={mainClasses.gridControl}
+        borderRadius={1}
+      >
+        <Grid alignSelf="flex-start">
+          <IconButton onClick={() => goAction('prev', false)} className={mainClasses.backContainer}>
+            <TfiArrowLeft className={mainClasses.backIcon} />
+          </IconButton>
+        </Grid>
+        <Grid item>
+          <Typography align="center" className={mainClasses.header2}>
+            Parents or Guardian Details
+          </Typography>
+        </Grid>
+        <Grid item>
+          <FormControl
+            fullWidth
+            className={mainClasses.formControl}
+            error={touched['parentEmail'] && errors['parentEmail']}
+          >
+            <FormLabel className={mainClasses.subHeader2}>Parent's Emaol</FormLabel>
+            <OutlinedInput
+              name="parentEmail"
+              id="parentEmail"
+              placeholder="Enter parent's email address"
+              className={mainClasses.outlinedInput}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              startAdornment={
+                <InputAdornment>
+                  <SlEnvolope className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="parentEmail" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <FormControl
+            fullWidth
+            className={mainClasses.formControl}
+            error={touched['parentPhone'] && errors['parentPhone']}
+          >
+            <FormLabel className={mainClasses.subHeader2}>Parent's Phone number</FormLabel>
+            <OutlinedInput
+              name="parentPhone"
+              id="parentPhone"
+              placeholder="Enter parent's phone number"
+              className={mainClasses.outlinedInput}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              startAdornment={
+                <InputAdornment>
+                  <SlPhone className={mainClasses.inputIcon} />
+                </InputAdornment>
+              }
+            />
+            <CustomErrorMessage name="parentPhone" {...props} />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <FormControl>
+            <FormControlLabel
+              id="sendTips"
+              name="sendTips"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              label="Send me personalised recommendations and learning tips."
+              control={<Checkbox />}
+            />
+          </FormControl>
+        </Grid>
+        <Grid item>
+          <CustomButton onClick={handleSubmit} className={mainClasses.button} primaryButtonStyle fullWidth>
+            Create Your Account
+          </CustomButton>
+        </Grid>
+        <Grid item>
+          <Typography align="center">By signing up you agree to our Terms and Services and Privacy Policy</Typography>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Step6;