diff --git a/src/langs/fa.json b/src/langs/fa.json
index ab83ec6..d078ca9 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -748,6 +748,7 @@
     "group_add": "ساخت گروه",
     "submit_group": "ثبت گروه",
     "error_count_users": "حداقل یک کاربر باید انتخاب شود",
+    "error_count_roles": "حداقل یک نقش باید انتخاب شود",
     "list_user_group": "لیست گروه های کاربری",
     "groups": "گروه ها",
     "group_name": "نام گروه",
diff --git a/src/pages/users/Create.tsx b/src/pages/users/Create.tsx
index ab967e7..89b4d30 100644
--- a/src/pages/users/Create.tsx
+++ b/src/pages/users/Create.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { TickCircle } from 'iconsax-react'
 import Input from '../../components/Input'
-import Select from '../../components/Select'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
 import UploadBoxDraggble from '../../components/UploadBoxDraggble'
 import { useFormik } from 'formik'
 import { CreateUserType, RoleItemType } from './types/UserTypes'
@@ -45,7 +45,7 @@ const CreateUser: FC = () => {
             repeatPassword: '',
             phone: '',
             profilePic: '',
-            roleId: ''
+            roleIds: []
         },
         validationSchema: Yup.object({
             email: Yup.string().email('Invalid email').required(t('errors.required')),
@@ -54,7 +54,7 @@ const CreateUser: FC = () => {
             password: Yup.string().required(t('errors.required')),
             repeatPassword: Yup.string().required(t('errors.required')),
             phone: Yup.string().required(t('errors.required')),
-            roleId: Yup.string().required(t('errors.required')),
+            roleIds: Yup.array().of(Yup.string()).min(1, t('user.error_count_roles')),
         }),
         onSubmit: async (values) => {
             if (file) {
@@ -76,6 +76,15 @@ const CreateUser: FC = () => {
         }
     })
 
+    const handleRoleToggle = (roleId: string) => {
+        const currentRoleIds = formik.values.roleIds
+        if (currentRoleIds.includes(roleId)) {
+            formik.setFieldValue('roleIds', currentRoleIds.filter((id) => id !== roleId))
+        } else {
+            formik.setFieldValue('roleIds', [...currentRoleIds, roleId])
+        }
+    }
+
     return (
         <div className='mt-4'>
             <div className='flex justify-between items-center'>
@@ -117,22 +126,29 @@ const CreateUser: FC = () => {
                             error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                         />
                     </div>
-                    <div className='rowTwoInput mt-8'>
-                        {/* <Input
-                            label={t('user.title_job')}
-                        /> */}
-                        <Select
-                            label={t('user.role')}
-                            placeholder={t('select')}
-                            items={getRoles.data?.data?.roles?.map((item: RoleItemType) => {
-                                return {
-                                    label: item.name,
-                                    value: item.id
-                                }
-                            })}
-                            {...formik.getFieldProps('roleId')}
-                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
-                        />
+                    <div className='mt-8'>
+                        <div className='text-sm'>
+                            {t('user.role')}
+                        </div>
+
+                        <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                            {
+                                getRoles.data?.data?.roles?.map((item: RoleItemType) => (
+                                    <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                                        <CheckBoxComponent
+                                            checked={formik.values.roleIds.includes(item.id)}
+                                            onChange={() => handleRoleToggle(item.id)}
+                                        />
+                                        <div className='mt-0.5'>{item.name}</div>
+                                    </div>
+                                ))
+                            }
+                        </div>
+                        {
+                            formik.touched.roleIds && formik.errors.roleIds ?
+                                <div className='text-xs text-red mt-2'>{formik.errors.roleIds}</div>
+                                : null
+                        }
                     </div>
 
                     <div className='rowTwoInput mt-8'>
diff --git a/src/pages/users/Update.tsx b/src/pages/users/Update.tsx
index 0dfb715..c170e46 100644
--- a/src/pages/users/Update.tsx
+++ b/src/pages/users/Update.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { TickCircle } from 'iconsax-react'
 import Input from '../../components/Input'
-import Select from '../../components/Select'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
 import UploadBoxDraggble from '../../components/UploadBoxDraggble'
 import { useFormik } from 'formik'
 import { CreateUserType, RoleItemType } from './types/UserTypes'
@@ -46,14 +46,14 @@ const UpdateUser: FC = () => {
             repeatPassword: '',
             phone: '',
             profilePic: '',
-            roleId: ''
+            roleIds: []
         },
         validationSchema: Yup.object({
             email: Yup.string().email('Invalid email').required(t('errors.required')),
             firstName: Yup.string().required(t('errors.required')),
             lastName: Yup.string().required(t('errors.required')),
             phone: Yup.string().required(t('errors.required')),
-            roleId: Yup.string().required(t('errors.required')),
+            roleIds: Yup.array().of(Yup.string()).min(1, t('user.error_count_roles')),
         }),
         onSubmit: async (values) => {
             if (values.password === '') {
@@ -81,12 +81,30 @@ const UpdateUser: FC = () => {
 
     useEffect(() => {
         if (userDetail?.data) {
-            formik.setValues(userDetail?.data?.admin)
-            formik.setFieldValue('roleId', userDetail?.data?.admin?.roles?.[0]?.id)
+            const admin = userDetail.data.admin
+            formik.setValues({
+                email: admin.email,
+                firstName: admin.firstName,
+                lastName: admin.lastName,
+                phone: admin.phone,
+                profilePic: admin.profilePic,
+                password: '',
+                repeatPassword: '',
+                roleIds: admin.roles.map((role) => role.id),
+            })
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userDetail])
 
+    const handleRoleToggle = (roleId: string) => {
+        const currentRoleIds = formik.values.roleIds
+        if (currentRoleIds.includes(roleId)) {
+            formik.setFieldValue('roleIds', currentRoleIds.filter((id) => id !== roleId))
+        } else {
+            formik.setFieldValue('roleIds', [...currentRoleIds, roleId])
+        }
+    }
+
     return (
         <div className='mt-4'>
             <div className='flex justify-between items-center'>
@@ -128,22 +146,29 @@ const UpdateUser: FC = () => {
                             error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                         />
                     </div>
-                    <div className='rowTwoInput mt-8'>
-                        {/* <Input
-                            label={t('user.title_job')}
-                        /> */}
-                        <Select
-                            label={t('user.role')}
-                            placeholder={t('select')}
-                            items={getRoles.data?.data?.roles?.map((item: RoleItemType) => {
-                                return {
-                                    label: item.name,
-                                    value: item.id
-                                }
-                            })}
-                            {...formik.getFieldProps('roleId')}
-                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
-                        />
+                    <div className='mt-8'>
+                        <div className='text-sm'>
+                            {t('user.role')}
+                        </div>
+
+                        <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                            {
+                                getRoles.data?.data?.roles?.map((item: RoleItemType) => (
+                                    <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                                        <CheckBoxComponent
+                                            checked={formik.values.roleIds.includes(item.id)}
+                                            onChange={() => handleRoleToggle(item.id)}
+                                        />
+                                        <div className='mt-0.5'>{item.name}</div>
+                                    </div>
+                                ))
+                            }
+                        </div>
+                        {
+                            formik.touched.roleIds && formik.errors.roleIds ?
+                                <div className='text-xs text-red mt-2'>{formik.errors.roleIds}</div>
+                                : null
+                        }
                     </div>
 
                     <div className='rowTwoInput mt-8'>
diff --git a/src/pages/users/types/UserTypes.ts b/src/pages/users/types/UserTypes.ts
index 56a0f60..b43fcf3 100644
--- a/src/pages/users/types/UserTypes.ts
+++ b/src/pages/users/types/UserTypes.ts
@@ -42,7 +42,7 @@ export type CreateUserType = {
   password?: string;
   repeatPassword?: string;
   email: string;
-  roleId: string;
+  roleIds: string[];
   profilePic?: string;
 };