diff --git a/src/component/auth/CSignup.jsx b/src/component/auth/CSignup.jsx
index c38db83..c2b203d 100644
--- a/src/component/auth/CSignup.jsx
+++ b/src/component/auth/CSignup.jsx
@@ -2,35 +2,27 @@ 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, useParams, useSearchParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
-import { signUpUser } from '../../services/services';
+import { verifyEmail } from '../../services/services';
+
+import { IoMdArrowDropdown } from "react-icons/io";
 
 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")
+    country: Yup.string().required("Username is required"),
+    username: Yup.string().min(3, "Minimum 3 characters")
       .max(50, "Maximum 50 characters")
-      .required("Email is required"),
+      .required("Username is required"),
       password: Yup.string().required("Password is required"),
       confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
-    // lastname: Yup.string().required("Lastname is required"),
-    // isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
   })
 
   const initialValues = {
-    email: '',
+    username: '',
     password: '',
+    country: '',
     confirmpassword: '',
-    // lastname: '',
-    // isChecked: false,
   };
 
 export default function CSignup() {
@@ -39,19 +31,33 @@ export default function CSignup() {
 
     const navigate = useNavigate()
 
-  const mutation = useMutation({
+// API to verify email link
+  const verifyLink = useMutation({
     mutationFn: (fields) => {
-        return signUpUser(fields)
+        return verifyEmail(fields)
     },
     onSuccess: (res) => {
         console.log('res', res)
+    },
+    onError: (err) => {
+        console.log('err', err)
     }
   })
 
-  const CSignUp = (values) => {
-    // helpers.resetForm()
-    // console.log('values', values, helpers)
-    // mutation.mutate(values)
+  const cSignup = useMutation({
+    mutationFn: (fields) => {
+        return null
+    },
+    onSuccess: (res) => {
+        console.log('res', res)
+    },
+    onError: (err) => {
+        console.log('err', err)
+    }
+  })
+  
+  const completeSignup = (values) => {
+    // cSignup()
     console.log('values', values)
   }
 
@@ -59,7 +65,8 @@ export default function CSignup() {
     if(!jwt){
         return navigate(siteLinks.login, {replace: true})
     }
-  })
+    verifyLink.mutate({verify_link: jwt})
+  }, [])
 
   return (
     <div className="app">
@@ -72,87 +79,117 @@ export default function CSignup() {
                             <div className="mt-5 d-flex">
                                 <div className="bg-white register p-5">
                                     <h1 className="mb-2">MERMS Panel</h1>
-                                    <p>Welcome, Enter your password.</p>
-                                    <Formik
-                                        initialValues={initialValues}
-                                        validationSchema={validationSchema}
-                                        onSubmit={CSignUp}
+                                    {/* <p>Welcome, Enter your password.</p> */}
+                                    <div
                                     >
-                                        {(props) => {
-                                        return (
-                                            <Form className='mt-2 mt-sm-5'>
-                                                <div className="row">
-                                                    {!mutation.isSuccess ?
-                                                        <>
-                                                            {/* <div className="col-12 col-sm-6">
-                                                                <div className="form-group">
-                                                                    <label className={`text-black fw-bold 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 className="col-12">
-                                                                <div className="form-group">
-                                                                    <label className={`text-black fw-bold 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 className="col-12">
-                                                                <div className="form-group">
-                                                                    <label className={`text-black fw-bold 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 className="col-12">
-                                                                <div className="form-group">
-                                                                    <label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
-                                                                    <input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
-                                                                </div>
-                                                            </div>
-                                                            
-                                                            {/* <div className="col-12">
-                                                                <div className="form-check">
-                                                                    <input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
-                                                                    <label className="form-check-label" htmlFor="gridCheck">
-                                                                        I accept terms & policy
-                                                                    </label>
-                                                                </div>
-                                                                <span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
-                                                            </div> */}
-
-                                                            {mutation.error &&
-                                                                <>
-                                                                <div className="col-12">
-                                                                    <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...' : 'Continue'}</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.</h4>
-                                                                <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                        <div className='mt-2'>
+                                            <div className="row">
+                                                {verifyLink.isPending ?
+                                                    <div className='col-12'>
+                                                        <div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                            <div className="col-12 d-flex flex-column justify-content-center align-items-center">
+                                                                <p className='text-black'>loading...</p>
                                                             </div>
                                                         </div>
-                                                    }
+                                                    </div>
+                                                    : verifyLink.isSuccess ?
+                                                        <div className='col-12'>
+                                                            <Formik
+                                                                initialValues={initialValues}
+                                                                validationSchema={validationSchema}
+                                                                onSubmit={completeSignup}
+                                                            >
+                                                                {(props) => {
+                                                                return (
+                                                                    <Form className='mt-2'>
+                                                                        <div className="row">
+                                                                            <>
+                                                                                <div className="col-12">
+                                                                                    <div className="form-group">
+                                                                                        <label className={`text-black fw-bold control-label`}>Email:</label>
+                                                                                        {/* <input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} /> */}
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div className="col-12">
+                                                                                    <div class="form-group" data-select2-id="7">
+                                                                                        <label className={`text-black fw-bold control-label ${(props.errors.country && props.touched.country) && 'text-danger'}`}>Country*</label>
+                                                                                        <div className='position-relative'>
+                                                                                            <select class="js-basic-single form-control select2-hidden-accessible" name="country" data-select2-id="1" tabindex="-1" aria-hidden="true" value={props.values.country} onChange={props.handleChange}>
+                                                                                                <option value="" data-select2-id="3">Select</option>
+                                                                                                <option value="AK" data-select2-id="3">Alaska</option>
+                                                                                            </select>
+                                                                                            <IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
+                                                                                        </div>
+                                                                                        {/* <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="2" style="width: 1570px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-state-g2-container"><span class="select2-selection__rendered" id="select2-state-g2-container" role="textbox" aria-readonly="true" title="Alaska">Alaska</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> */}
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div className="col-12">
+                                                                                    <div className="form-group">
+                                                                                        <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
+                                                                                        <input type="username" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div className="col-12">
+                                                                                    <div className="form-group">
+                                                                                        <label className={`text-black fw-bold 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 className="col-12">
+                                                                                    <div className="form-group">
+                                                                                        <label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
+                                                                                        <input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
+                                                                                    </div>
+                                                                                </div>
+                                                                                
+                                                                                {/* <div className="col-12">
+                                                                                    <div className="form-check">
+                                                                                        <input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
+                                                                                        <label className="form-check-label" htmlFor="gridCheck">
+                                                                                            I accept terms & policy
+                                                                                        </label>
+                                                                                    </div>
+                                                                                    <span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
+                                                                                </div> */}
 
-                                                    <div className="col-12 mt-3 text-center">
-                                                        <Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
-                                                    </div>
-                                                    
-                                                    <div className="col-12 mt-3 text-center">
-                                                        {/* <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p> */}
-                                                        <p>Ready our Privacy Statement</p>
-                                                    </div>
+                                                                                {cSignup.error &&
+                                                                                    <>
+                                                                                    <div className="col-12">
+                                                                                        <p className='text-danger'>{cSignup.error.message}</p>
+                                                                                    </div>
+                                                                                    </>
+                                                                                }
+
+                                                                                <div className="col-12 mt-3 text-end">
+                                                                                    <button type='submit' className="btn btn-primary text-uppercase">{cSignup.isPending ? 'loading...' : 'Continue'}</button>
+                                                                                </div>
+                                                                            </>
+                                                                        </div>
+                                                                    </Form>
+                                                                );
+                                                                }}
+                                                            </Formik>
+                                                        </div>
+                                                    :
+                                                        <div className='col-12'>
+                                                            <div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                                <div className="col-12 d-flex flex-column justify-content-center align-items-center">
+                                                                    <p className='text-danger'>{verifyLink?.error?.message}</p>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                }
+
+                                                <div className="col-12 mt-3 text-center">
+                                                    <Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
                                                 </div>
-                                            </Form>
-                                        );
-                                        }}
-                                    </Formik>
+                                                
+                                                <div className="col-12 mt-3 text-center">
+                                                    <p>Read our Privacy Statement</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/src/services/services.js b/src/services/services.js
index 700be83..d1c41ee 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -58,6 +58,14 @@ export const signUpUser = (reqData) => {
     return postAuxEnd('/panel/auth/register', postData, false)
 }
 
+// FUNCTION TO VERIFY EMAIL
+export const verifyEmail = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/register/verify', postData, false)
+}
+
 
 // FUNCTION TO RESET USER PASSWORD
 export const recoverPWD = (reqData) => {