diff --git a/src/component/auth/Forgetpwd2.jsx b/src/component/auth/Forgetpwd2.jsx
index ea728d7..ccdb727 100644
--- a/src/component/auth/Forgetpwd2.jsx
+++ b/src/component/auth/Forgetpwd2.jsx
@@ -1,39 +1,44 @@
 import React, { useEffect, useState } from 'react'
-import LoginImg from '../../assets/bg/login.svg'
+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 { Link } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query'
+import { recoverPWD } from '../../services/services';
+
+const validationSchema = Yup.object().shape({
+    username: 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"),
+  })
+
+  const initialValues = {
+    username: ''
+  };
 
 export default function Forgetpwd2() {
 
-  const navigate = useNavigate()
-
-  const [email, setEmail] = useState('')
-
-  const handleChange = ({target:{value}}) => {
-    setEmail(value)
-  }
-
-  const forgetPwd = useMutation({
-    mutationFn: (email) => {
-        // if(!email.username || !email.password){
-        //     throw new Error('Please provide all email marked *')
-        // }
-        // return loginUser('panel/auth/login', {email})
-        throw new Error('Unable to complete, try again later!')
+  const mutation = useMutation({
+    mutationFn: (fields) => {
+        return recoverPWD(fields)
     },
-    onError: (error) => {
-        console.log(error)
-    },
-      onSuccess: (res) => {
-        // const {token} = res?.data?.data
-        // if(token){
-        //     navigate('/dash') // later add redux to dispatch state
-        // }
-    }
+    // onSuccess: (res) => {
+    //     console.log('res', res)
+    // }
   })
 
+  const recoverPWDSubmit = (values) => {
+    mutation.mutate(values)
+  }
+
   return (
     <div className="app">
         <div className="app-wrap">
@@ -46,29 +51,50 @@ export default function Forgetpwd2() {
                                     <div className="login p-50">
                                         <h1 className="mb-2">Recover Password</h1>
                                         <p>Please enter your email.</p>
-                                        <form className="mt-3 mt-sm-5">
-                                            <div className="row">
-                                                <div className="col-12">
-                                                    <div className="form-group">
-                                                        <label className="control-label text-black fw-bold">Email*</label>
-                                                        <input name='email' type="text" onChange={handleChange} value={email} className="form-control" placeholder="Email" />
+                                        <Formik
+                                        initialValues={initialValues}
+                                        validationSchema={validationSchema}
+                                        onSubmit={recoverPWDSubmit}
+                                        >
+                                            {(props) => {
+                                            return (
+                                                <Form className='mt-2 mt-sm-5'>
+                                                    <div className="row">
+                                                    {!mutation.isSuccess ?
+                                                        <>
+                                                            <div className="col-12">
+                                                                <div className="form-group">
+                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Email*</label>
+                                                                    <input type="email" name='username' className="form-control" placeholder="Email" value={props.values.username} onChange={props.handleChange} />
+                                                                </div>
+                                                            </div>
+                                                            {mutation.error &&
+                                                            <>
+                                                            <div className="col-12  mt-3">
+                                                                <p className='text-danger'>{mutation.error.message}</p>
+                                                            </div>
+                                                            </>
+                                                            }
+                                                            <div className="col-12 mt-3 text-end">
+                                                                <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Send'}</button>
+                                                            </div>
+                                                        </>
+                                                    :
+                                                    <div className='col-12'>
+                                                        <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                            <h4 className='p-4 text-black'>Check your email to continue password reset.</h4>
+                                                            <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                                        </div>
                                                     </div>
-                                                </div>
-                                                {forgetPwd.error &&
-                                                <>
-                                                 <div className="col-12  mt-3">
-                                                    <p className='text-danger'>{forgetPwd.error.message}</p>
-                                                </div>
-                                                </>
-                                                }
-                                                <div className="col-12 mt-3 text-end">
-                                                    <button type='button' onClick={()=>{forgetPwd.mutate(email)}} className="btn btn-primary text-uppercase">Send</button>
-                                                </div>
-                                                <div className="col-12  mt-3">
-                                                    <p>Go <Link to={siteLinks.home}> Back</Link></p>
-                                                </div>
-                                            </div>
-                                        </form>
+                                                    }
+                                                        <div className="col-12  mt-3">
+                                                            <p>Go <Link to={siteLinks.home}> Back</Link></p>
+                                                        </div>
+                                                    </div>
+                                                </Form>
+                                            );
+                                            }}
+                                        </Formik>
                                     </div>
                                 </div>
                             </div>
diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx
index 51ac181..57a34a9 100644
--- a/src/component/auth/Login2.jsx
+++ b/src/component/auth/Login2.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { useDispatch } from 'react-redux'
 
-import LoginImg from '../../assets/bg/login.svg'
+// import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
diff --git a/src/component/auth/Signup2.jsx b/src/component/auth/Signup2.jsx
index a2f6f7f..7699f34 100644
--- a/src/component/auth/Signup2.jsx
+++ b/src/component/auth/Signup2.jsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
-import LoginImg from '../../assets/bg/login.svg'
+// import LoginImg from '../../assets/bg/login.svg'
 
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
 import { signUpUser } from '../../services/services';
@@ -12,10 +12,10 @@ import { signUpUser } from '../../services/services';
 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"
-      )
+    //   .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"),
@@ -37,17 +37,12 @@ const validationSchema = Yup.object().shape({
 
 export default function Signup2() {
 
-  const navigate = useNavigate()
-
-  const [successBox, setSuccessBox] = useState(false)
-
   const mutation = useMutation({
     mutationFn: (fields) => {
         return signUpUser(fields)
     },
     onSuccess: (res) => {
-          console.log('res', res)
-          setSuccessBox(true)
+        console.log('res', res)
     }
   })
 
diff --git a/src/services/services.js b/src/services/services.js
index e964dcf..76cc837 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -50,7 +50,7 @@ export const loginUser = (reqData) => {
     return postAuxEnd('/panel/auth/login', postData, false)
 }
 
-// FUNCTION TO LOGIN USER IN
+// FUNCTION TO REGISTER USER
 export const signUpUser = (reqData) => {
     let postData = {
         ...reqData
@@ -59,6 +59,14 @@ export const signUpUser = (reqData) => {
 }
 
 
+// FUNCTION TO RESET USER PASSWORD
+export const recoverPWD = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/reset', postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD DATA
 export const accountDashboard = () => {
     return getAuxEnd(`/panel/account/dash`)