diff --git a/open-source/src/pages/signup.jsx b/open-source/src/pages/signup.jsx
new file mode 100644
index 0000000..6d97bb8
--- /dev/null
+++ b/open-source/src/pages/signup.jsx
@@ -0,0 +1,311 @@
+import {
+ Box,
+ Button,
+ CircularProgress,
+ FormControl,
+ InputLabel,
+ Input,
+ Stack,
+ SvgIcon,
+ TextField,
+ Typography,
+ Checkbox,
+ Collapse,
+ Alert,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import Link from 'next/link';
+import DefaultIcon from '../../components/common/icon/DefaultIcon';
+import { ArrowLeft, ArrowLeftIcon, Home, Mail } from '../../res/icons/icons';
+// import { signIn, signOut, useSession } from 'next-auth/react'
+import { useRouter } from 'next/router';
+import { useContext, useState } from 'react';
+import PasswordInput from '../../components/common/inputfields/PasswordInput';
+// import { AuthServer } from '../../services/auth'
+import FeaturedIcon from '../../components/common/icon/FeaturedIcon';
+import OtpInput from '../../components/common/inputfields/OtpInput';
+import AuthLayout from '../../components/common/layout/AuthLayout';
+import api from '../../lib/utils/axios/auth';
+import { SessionContext } from '../../lib/context/PublishedSession';
+
+const SignUp = () => {
+ const [error, setError] = useState();
+ const [info, setInfo] = useState();
+ const [isLoading, setIsLoading] = useState(false);
+ const [agreedTnC, setAgreedTnC] = useState(false);
+ const [email, setEmail] = useState('');
+ const [otp, setOtp] = useState('');
+ const [step, setStep] = useState(1);
+ const router = useRouter();
+
+ const { signIn } = useContext(SessionContext);
+
+ const handleSignUp = async (values) => {
+ setError('');
+ setIsLoading(true);
+ setEmail(values.email);
+ const user = {
+ email: values.email,
+ password1: values.password,
+ password2: values.password,
+ };
+ console.log(user);
+ api.user
+ .signup(user)
+ .then((data) => {
+ setStep(2);
+ })
+ .catch((err) => {
+ console.log('error', err);
+ setError(Object.values(err)[0]);
+ })
+ .finally(() => {
+ setIsLoading(false);
+ });
+ };
+
+ const formik = useFormik({
+ initialValues: {
+ email: '',
+ password: '',
+ },
+ onSubmit: handleSignUp,
+ });
+
+ const toggleTnC = () => {
+ setAgreedTnC(!agreedTnC);
+ };
+
+ const resendCode = () => {
+ setInfo('');
+ console.log('resend to', email);
+ AuthServer.get('rest-auth/otp/verify/?email=' + email)
+ .then((res) => {
+ console.log(res.data);
+ setInfo(res.data);
+ })
+ .catch((err) => {
+ setError(err.response.data.Msg);
+ });
+ };
+
+ const verifyOtp = () => {
+ setIsLoading(true);
+ setInfo('');
+ const payload = {
+ email,
+ otp,
+ };
+ console.log(payload);
+ api.user
+ .verifyOtp(payload)
+ .then((data) => {
+ console.log(data);
+ return signIn({
+ email: formik.values.email,
+ password: formik.values.password,
+ });
+ })
+ .then((res) => {
+ router.replace('/creator/create-publication');
+ })
+ .catch((err) => {
+ console.log(err);
+ setError(Object.values(err)[0]);
+ })
+ .finally(() => {
+ setIsLoading(false);
+ });
+ };
+
+ if (step === 1)
+ return (
+
+
+ }
+ sx={{
+ gap: '8px',
+ padding: '8px 14px',
+ backgroundColor: 'grayIron.100',
+ width: 'fit-content',
+ }}
+ >
+ Go back
+
+
+
+
+
+ Create an account
+
+
+ Start for free
+
+
+ {error}
+
+
+
+
+
+
+
+
+
+
+
+ I agree to{' '}
+
+
+ Terms and Conditions
+
+
+
+
+
+
+
+
+ Already have an account?
+
+
+
+
+ );
+
+ if (step === 2)
+ return (
+
+
+
+
+ Verify your email
+
+
+
+ {info || error}
+
+
+
+
+ We{"'"}ve sent a code to {email}
+
+
+
+
+ Didn{"'"}t get a code?{' '}
+
+ Click to resend.
+
+
+
+
+
+
+
+ );
+};
+
+SignUp.getLayout = function getLayout(page) {
+ return {page};
+};
+
+export default SignUp;