diff --git a/package.json b/package.json
index 0f1052d..17575fa 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
     "dayjs": "^1.11.13",
+    "formik": "^2.4.6",
     "react": "^18.3.1",
     "react-apexcharts": "^1.7.0",
     "react-big-calendar": "^1.17.0",
@@ -23,7 +24,8 @@
     "react-scripts": "5.0.1",
     "redux": "^5.0.1",
     "sass": "^1.82.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.6.0"
   },
   "scripts": {
     "start": "react-scripts start -e .env.development",
diff --git a/src/component/auth/Signup2.jsx b/src/component/auth/Signup2.jsx
index 9f23cdc..cef5962 100644
--- a/src/component/auth/Signup2.jsx
+++ b/src/component/auth/Signup2.jsx
@@ -1,13 +1,45 @@
 import React, { useEffect, useState } from 'react'
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
 import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 
+const validationSchema = Yup.object().shape({
+    email: Yup.string()
+      .email("Wrong email format")
+      .matches(
+        /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
+        "Invalid email format"
+      )
+      .min(3, "Minimum 3 characters")
+      .max(50, "Maximum 50 characters")
+      .required("Email is required"),
+    firstname: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
+    lastname: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
+    username: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
+    password: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
+  })
+
+  const initialValues = {
+    email: '',
+    firstname: '',
+    lastname: '',
+    username: '',
+    password: ''
+  };
+
 export default function Signup2() {
 
   const navigate = useNavigate()
 
+  const signUp = (values, helpers) => {
+    // helpers.resetForm()
+    console.log('values', values, helpers)
+  }
+
   return (
     <div className="app">
         <div className="app-wrap">
@@ -15,59 +47,69 @@ export default function Signup2() {
                 <div className="bg-white">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters">
-                        <div class="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
-                            <div class="d-flex align-items-center h-100-vh">
-                                <div class="register p-5">
-                                    <h1 class="mb-2">MERMS Panel</h1>
+                        <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
+                            <div className="d-flex align-items-center h-100-vh">
+                                <div className="register p-5">
+                                    <h1 className="mb-2">MERMS Panel</h1>
                                     <p>Welcome, Please create your account.</p>
-                                    <form class="mt-2 mt-sm-5">
-                                        <div class="row">
-                                            <div class="col-12 col-sm-6">
-                                                <div class="form-group">
-                                                    <label class="control-label">First Name*</label>
-                                                    <input type="text" class="form-control" placeholder="First Name" />
+                                    <Formik
+                                        initialValues={initialValues}
+                                        validationSchema={validationSchema}
+                                        onSubmit={signUp}
+                                    >
+                                        {(props) => {
+                                        return (
+                                            <Form className='mt-2 mt-sm-5'>
+                                                <div className="row">
+                                            <div className="col-12 col-sm-6">
+                                                <div className="form-group">
+                                                    <label className={`control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
+                                                    <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
                                                 </div>
                                             </div>
-                                            <div class="col-12 col-sm-6">
-                                                <div class="form-group">
-                                                    <label class="control-label">Last Name*</label>
-                                                    <input type="text" class="form-control" placeholder="Last Name" />
+                                            <div className="col-12 col-sm-6">
+                                                <div className="form-group">
+                                                    <label className={`control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
+                                                    <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
                                                 </div>
                                             </div>
-                                            <div class="col-12">
-                                                <div class="form-group">
-                                                    <label class="control-label">Email*</label>
-                                                    <input type="email" class="form-control" placeholder="Email" />
+                                            <div className="col-12">
+                                                <div className="form-group">
+                                                    <label className={`control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
+                                                    <input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
                                                 </div>
                                             </div>
-                                            <div class="col-12">
-                                                <div class="form-group">
-                                                    <label class="control-label">Username*</label>
-                                                    <input type="text" class="form-control" placeholder="Username" />
+                                            <div className="col-12">
+                                                <div className="form-group">
+                                                    <label className={`control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
+                                                    <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
                                                 </div>
                                             </div>
-                                            <div class="col-12">
-                                                <div class="form-group">
-                                                    <label class="control-label">Password*</label>
-                                                    <input type="password" class="form-control" placeholder="Password" />
+                                            <div className="col-12">
+                                                <div className="form-group">
+                                                    <label className={`control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
+                                                    <input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
                                                 </div>
                                             </div>
-                                            <div class="col-12">
-                                                <div class="form-check">
-                                                    <input class="form-check-input" type="checkbox" id="gridCheck" />
-                                                    <label class="form-check-label" for="gridCheck">
+                                            <div className="col-12">
+                                                <div className="form-check">
+                                                    <input className="form-check-input" type="checkbox" id="gridCheck" />
+                                                    <label className="form-check-label" htmlFor="gridCheck">
                                                         I accept terms & policy
                                                     </label>
                                                 </div>
                                             </div>
-                                            <div class="col-12 mt-3 text-end">
-                                                <button type='button' onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
+                                            <div className="col-12 mt-3 text-end">
+                                                <button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
                                             </div>
-                                            <div class="col-12  mt-3">
+                                            <div className="col-12  mt-3">
                                                 <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                             </div>
-                                        </div>
-                                    </form>
+                                                </div>
+                                            </Form>
+                                        );
+                                        }}
+                                    </Formik>
                                 </div>
                             </div>
                         </div>