diff --git a/components/Header/header.js b/components/Header/header.js
index 2d2372a..7479a20 100644
--- a/components/Header/header.js
+++ b/components/Header/header.js
@@ -31,7 +31,7 @@ const Header = () => {
             <div>
                 <ul className={styles.navbarNav}>
                     <li className={styles.navbarLink}><Link href="/login"><a>Login</a></Link></li>
-                    <li className={styles.navbarLink}><Link href="/registration"><a>Register</a></Link></li>
+                    <li className={styles.navbarLink}><Link href="/registration"><a>Signup</a></Link></li>
                 </ul>
             </div>}
         </nav>
diff --git a/mock/routes.js b/mock/routes.js
index 236bf3e..b6eb71e 100644
--- a/mock/routes.js
+++ b/mock/routes.js
@@ -103,6 +103,19 @@ router.get('/logout', auth, (req, res) => {
   }))
   res.status(200).send()
 })
+router.post('/registration',(req,res)=>{
+  let newuserdetails ={
+      name:req.body.name,
+      username:req.body.username,
+      phone:req.body.phonenumber,
+      location:req.body.location,
+      email:req.body.email,
+      password:req.body.password
+     }
+  
+  console.log(newuserdetails)
+
+  })
 
 router.post('/registration',(req,res)=>{
 let newuserdetails =new user({
diff --git a/package-lock.json b/package-lock.json
index 6ef576c..744cb54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -158,6 +158,11 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz",
       "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw=="
     },
+    "@types/lodash": {
+      "version": "4.14.168",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
+      "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q=="
+    },
     "@types/node": {
       "version": "14.14.41",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.41.tgz",
@@ -642,6 +647,11 @@
         "ms": "2.0.0"
       }
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -839,24 +849,18 @@
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
       "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
     },
-    "fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+    "formik": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
+      "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
       "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      },
-      "dependencies": {
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        }
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
       }
     },
     "fsevents": {
@@ -963,6 +967,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -1205,6 +1217,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -1277,6 +1294,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.1.22",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
@@ -1700,6 +1722,11 @@
         "react-is": "^16.8.1"
       }
     },
+    "property-expr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
+      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+    },
     "public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -1801,6 +1828,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -2035,6 +2067,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -2058,6 +2095,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
     "tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -2071,6 +2113,11 @@
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
       "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw=="
     },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "tty-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
@@ -2229,6 +2276,20 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "yup": {
+      "version": "0.32.9",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.9.tgz",
+      "integrity": "sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "@types/lodash": "^4.14.165",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.15",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 11be2f8..c719034 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
   "dependencies": {
     "axios": "^0.21.1",
     "bootstrap": "^5.0.0-beta3",
+    "formik": "^2.2.6",
     "next": "10.1.3",
     "react": "17.0.2",
     "react-contenteditable": "^3.3.5",
     "react-dom": "17.0.2",
     "sass": "^1.32.11",
-    "twemoji": "^13.0.2"
+    "twemoji": "^13.0.2",
+    "yup": "^0.32.9"
   }
 }
diff --git a/pages/registration.js b/pages/registration.js
index cc2c78f..47af77c 100644
--- a/pages/registration.js
+++ b/pages/registration.js
@@ -1,148 +1,137 @@
-import Layout from '../components/Layout/layout'
+import { useFormik } from 'formik';
 import SEO from '../components/seo'
-import{useState, useEffect} from 'react';
-const registration  =() => {
-   const {handleChange,values,handleSubmit} = useform();
-    return(
-        <div>
-            <form>
-
-                <div>
-                    <label htmlFor='username'>
-                        username
-                        <input type='text'
-                               name='username'
-                               placeholder ="username"
-                               value={values.username}
-                               onChange ={handleChange}
-                               />
-                    </label>
-                </div>
-                <div>
-                    <label htmlFor='name'>
-                      name
-                        <input type='text'
-                               name='name'
-                               placeholder ="name"
-                               value={values.name}
-                               onChange ={handleChange}
-                        />
-                    </label>
-                </div>
-                <div>
-                <label htmlFor='location'>
-                       location
-                        <input type='text'
-                               name='location'
-                               placeholder ="location"
-                               value={values.location}
-                               onChange ={handleChange}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label htmlFor='phone'>
-                       ph number
-                        <input type='text'
-                               name='phonenumber'
-                               placeholder ="phonenumber"
-                               value={values.phonenumber}
-                               onChange ={handleChange}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label htmlFor='email'>
-                        email
-                        <input type='text'
-                               name='email'
-                               placeholder ="email"
-                               value={values.email}
-                               onChange ={handleChange}
-                               />
-                    </label>
-                </div>
-                <div>
-                    <label htmlFor='password'>
-                        password
-                        <input type='password'
-                               name='password1'
-                               placeholder ="password"
-                               value={values.password1}
-                               onChange ={handleChange}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label htmlFor='password'>
-                        confirm password
-                        <input type='password'
-                               name='password2'
-                               placeholder ="password"
-                               value={values.password2}
-                               onChange ={handleChange}
-                        />
-                    </label>
-                </div>
-                <button  type='submit' onClick={handleSubmit}>
-                    sign up
-                </button>
-            </form>
-        </div>
-
-    )
-}
-const useform =()=>{
-    const [values,setValues] = useState({
-        username:'',
-        email:'',
-        location:'',
-        password1:'',
-        password2:''
-
-    });
-    const [error, setError]= useState({});
-    const [submit,setsubmit] = useState(false);
-    const handleChange =e =>{
-        const { name,value}=e.target;
-        if(values.password1!=values.password2){
-            return alert("password not the same")
-        }
-        else{
-            values.password =values.password1
-        }
-
+import Layout from '../components/Layout/layout'
+import Router from 'next/router'
 
+const validate = values => {
+    const errors = {};
+  
+    if (!values.username) {
+        errors.username = 'Username required';
+    } else if (!/^[A-Za-z]+/.test(values.name.trim())) {
+        errors.name = 'Enter a valid name';
+    }
 
-        setValues({
-            ...values,
-            [name]:value
-        });
-    };
-    const handleSubmit = async(e)=>{
-        e.preventDefault()
-        setsubmit(true);
-        const {name,value}=e.target;
-        let userdetails ={
-            ...values,
-            [name]:value
-        }
+    if (!values.email) {
+        errors.email = 'Email required';
+    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
+        errors.email = 'Email address is invalid';
+    }
+  
+    if (!values.password) {
+        errors.password = 'Password is required';
+    } else if (values.password.length < 6) {
+        errors.password = 'Password needs to be 6 characters or more';
+    }
 
+    if (!values.passwordconfirm) {
+        errors.passwordconfirm = 'Password is required';
+    } else if (values.passwordconfirm !== values.password) {
+        errors.passwordconfirm = 'Passwords do not match';
+    }
+    return errors;
+}
 
-        const res = await fetch(`${process.env.API}/registration`, {
+const  SignupForm = () => {
+    const formik = useFormik({
+        initialValues: {
+            name: '',
+            username: '',
+            email: '',
+            location:'',
+            phonenumber:'',
+            password:'',
+            passwordconfirm:''
+        },
+        validate,
+        onSubmit: values => {
+            console.warn(values)
+            const res =  fetch(`${process.env.API}/registration`, {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(userdetails),
+                body: JSON.stringify(values),
                 credentials: 'include'
-        })
+            })
+        },
+    });
+  
+    return (
+        <Layout>
+            <SEO title ="Signup | Macebook"/>
+            <form onSubmit={formik.handleSubmit}>
+               <div><label htmlFor="Name"> Name</label>
+                   <input
+                       id="name"
+                       name="name"
+                       type="text"
+                       onChange={formik.handleChange}
+                       value={formik.values.name}
+                   />
+                   {formik.errors.name ? <div>{formik.errors.name}</div> : null}</div>
 
+               <div><label htmlFor="username">User Name</label>
+                   <input
+                       id="username"
+                       name="username"
+                       type="text"
+                       onChange={formik.handleChange}
+                       value={formik.values.username}
+                   />
+                   {formik.errors.username ? <div>{formik.errors.username}</div> : null}</div>
 
+                <div><label htmlFor="email">Email Address</label>
+                    <input
+                        id="email"
+                        name="email"
+                        type="email"
+                        onChange={formik.handleChange}
+                        value={formik.values.email}
+                    />
+                    {formik.errors.email ? <div>{formik.errors.email}</div> : null}</div>
 
-    }
-    return {handleChange,values,handleSubmit}
-};
+                <div><label htmlFor="phonenumber">Phone number</label>
+                    <input
+                        id="phonenumber"
+                        name="phonenumber"
+                        type="phonenumber"
+                        onChange={formik.handleChange}
+                        value={formik.values.phonenumber}
+                    />
+                    {formik.errors.phonenumber ? <div>{formik.errors.phonenumber}</div> : null}</div>
 
+                <div><label htmlFor="location">Location</label>
+                    <input
+                        id="location"
+                        name="location"
+                        type="text"
+                        onChange={formik.handleChange}
+                        value={formik.values.location}
+                    />
+                    {formik.errors.location ? <div>{formik.errors.location}</div> : null}</div>
 
-export default registration
+                <div><label htmlFor="password">password</label>
+                    <input
+                        id="password"
+                        name="password"
+                        type="password"
+                        onChange={formik.handleChange}
+                        value={formik.values.password}
+                    />
+                    {formik.errors.password ? <div>{formik.errors.password}</div> : null}</div>
 
+                <div><label htmlFor="password">password</label>
+                    <input
+                        id="passwordconfirm"
+                        name="passwordconfirm"
+                        type="password"
+                        onChange={formik.handleChange}
+                        value={formik.values.passwordconfirm}
+                    />
+                    {formik.errors.passwordconfirm ? <div>{formik.errors.passwordconfirm}</div> : null}</div>
 
+                <div><button type="submit">Sign up</button></div>
+            </form>
+        </Layout>
+    );
+};
+export default SignupForm
\ No newline at end of file