diff --git a/src/langs/fa.json b/src/langs/fa.json
index 9a1ced1..ff75285 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -540,8 +540,11 @@
     "title_role": "عنوان نقش",
     "permissions": "دسترسی ها",
     "status_role": "وضعیت نقش",
-    "error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید"
+    "error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید",
+    "is_admin": "آیا ادمین است؟"
   },
+  "yes": "بله",
+  "no": "خیر",
   "profile": {
     "account_user": "حساب کاربری",
     "image_profile": "تصویر حساب کاربری",
diff --git a/src/pages/users/Create.tsx b/src/pages/users/Create.tsx
index 8b4f95f..9ed7774 100644
--- a/src/pages/users/Create.tsx
+++ b/src/pages/users/Create.tsx
@@ -1,14 +1,80 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 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 UploadBoxDraggble from '../../components/UploadBoxDraggble'
+import { useFormik } from 'formik'
+import { CreateUserType, RoleItemType } from './types/UserTypes'
+import * as Yup from 'yup'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { useCreateUser, useGetRoles } from './hooks/useUserData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
 
 const CreateUser: FC = () => {
 
+    const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const getRoles = useGetRoles('')
+    const singleUpload = useSingleUpload()
+    const createUser = useCreateUser()
+
+    const handleCreateUser = (values: CreateUserType) => {
+        createUser.mutate(values, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                navigate(Pages.users.list)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const formik = useFormik<CreateUserType>({
+        initialValues: {
+            email: '',
+            firstName: '',
+            lastName: '',
+            password: '',
+            repeatPassword: '',
+            phone: '',
+            profilePic: '',
+            roleId: ''
+        },
+        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')),
+            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')),
+        }),
+        onSubmit: async (values) => {
+            if (file) {
+                const formData = new FormData()
+                formData.append('file', file)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.profilePic = data?.data?.url
+                        handleCreateUser(values)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                values.profilePic = undefined
+                handleCreateUser(values)
+            }
+        }
+    })
 
     return (
         <div className='mt-4'>
@@ -18,6 +84,8 @@ const CreateUser: FC = () => {
                 </div>
                 <Button
                     className='w-fit px-8'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createUser.isPending}
                 >
                     <div className='flex gap-2'>
                         <TickCircle
@@ -40,31 +108,43 @@ const CreateUser: FC = () => {
                     <div className='rowTwoInput mt-8'>
                         <Input
                             label={t('user.name')}
+                            {...formik.getFieldProps('firstName')}
+                            error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
                         />
                         <Input
                             label={t('user.family')}
+                            {...formik.getFieldProps('lastName')}
+                            error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
                         />
                     </div>
                     <div className='rowTwoInput mt-8'>
-                        <Input
+                        {/* <Input
                             label={t('user.title_job')}
-                        />
+                        /> */}
                         <Select
                             label={t('user.role')}
                             placeholder={t('select')}
-                            items={[
-                                { label: 'Admin', value: 'admin' },
-                                { label: 'User', value: 'user' },
-                            ]}
+                            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>
 
                     <div className='rowTwoInput mt-8'>
                         <Input
                             label={t('user.email')}
+                            {...formik.getFieldProps('email')}
+                            error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
                         />
                         <Input
                             label={t('user.phone_number')}
+                            {...formik.getFieldProps('phone')}
+                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
                         />
                     </div>
 
@@ -73,11 +153,17 @@ const CreateUser: FC = () => {
                 <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
                     <Input
                         label={t('user.password')}
+                        {...formik.getFieldProps('password')}
+                        error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
+                        type='password'
                     />
 
                     <div className='mt-8'>
                         <Input
                             label={t('user.reapeat_password')}
+                            {...formik.getFieldProps('repeatPassword')}
+                            error_text={formik.touched.repeatPassword && formik.errors.repeatPassword ? formik.errors.repeatPassword : ''}
+                            type='password'
                         />
                     </div>
 
@@ -88,7 +174,7 @@ const CreateUser: FC = () => {
                         <div className='mt-2'>
                             <UploadBoxDraggble
                                 label={t('user.image')}
-                                onChange={() => null}
+                                onChange={(file) => setFile(file[0])}
                             />
                         </div>
                     </div>
diff --git a/src/pages/users/List.tsx b/src/pages/users/List.tsx
index 4f02cd0..985b811 100644
--- a/src/pages/users/List.tsx
+++ b/src/pages/users/List.tsx
@@ -1,16 +1,21 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { Add, Eye } from 'iconsax-react'
-import Select from '../../components/Select'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
+import { useGetUsers } from './hooks/useUserData'
+import { UserItemType } from './types/UserTypes'
+import PageLoading from '../../components/PageLoading'
 
 const UsersList: FC = () => {
 
+    const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const [search, setSearch] = useState<string>('')
+    const getUsers = useGetUsers(search)
 
     return (
         <div className='mt-4'>
@@ -21,6 +26,7 @@ const UsersList: FC = () => {
                 <div>
                     <Button
                         className='px-5'
+                        onClick={() => navigate(Pages.users.create)}
                     >
                         <div className='flex gap-2'>
                             <Add
@@ -34,66 +40,62 @@ const UsersList: FC = () => {
             </div>
 
             <div className='flex justify-between items-center mt-12'>
-                <div className='flex gap-4'>
-                    <Select
-                        className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        placeholder={t('service.category')}
-                    />
-                </div>
+
                 <div>
                     <Input
                         variant='search'
                         placeholder={t('service.search')}
                         className='bg-white border border-border'
+                        onChangeSearchFinal={(value) => setSearch(value)}
                     />
                 </div>
             </div>
 
-            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                <table className='w-full text-sm '>
-                    <thead className='thead'>
-                        <tr>
-                            <Td text={t('user.name')} />
-                            <Td text={t('user.title_job')} />
-                            <Td text={t('user.email')} />
-                            <Td text={t('user.role')} />
-                            <Td text={t('detail')} />
-                            <Td text={''} />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr className='tr'>
-                            <Td text='مهرداد مظفری' />
-                            <Td text={'کارشناس فنی'} />
-                            <Td text={'info@example.com'} />
-                            <Td text={'سطح ۱'} />
-                            <Td text={''}>
-                                <Link to={Pages.ticket.detail + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
-                            <Td text={''} />
-                        </tr>
-                        <tr className='tr'>
-                            <Td text='مهرداد مظفری' />
-                            <Td text={'کارشناس فنی'} />
-                            <Td text={'info@example.com'} />
-                            <Td text={'سطح ۱'} />
-                            <Td text={''}>
-                                <Link to={Pages.ticket.detail + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
-                            <Td text={''} />
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            {
+                getUsers.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm '>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('user.name')} />
+                                    <Td text={t('user.email')} />
+                                    <Td text={t('user.role')} />
+                                    <Td text={t('detail')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getUsers.data?.data?.users?.map((item: UserItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={item.firstName + ' ' + item.lastName} />
+                                                <Td text={item.email} />
+                                                <Td text={''}>
+                                                    {
+                                                        item.roles.map((role) => (
+                                                            <div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
+                                                                {role.name}
+                                                            </div>
+                                                        ))
+                                                    }
+                                                </Td>
+                                                <Td text={''}>
+                                                    <Link to={Pages.ticket.detail + '1'}>
+                                                        <Eye size={20} color='#8C90A3' />
+                                                    </Link>
+                                                </Td>
+                                                <Td text={''} />
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
         </div>
     )
 }
diff --git a/src/pages/users/RolesList.tsx b/src/pages/users/RolesList.tsx
index e977937..a117591 100644
--- a/src/pages/users/RolesList.tsx
+++ b/src/pages/users/RolesList.tsx
@@ -1,15 +1,21 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
+import { Add } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
-import { Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
+import { useGetRoles } from './hooks/useUserData'
+import { RoleItemType } from './types/UserTypes'
 
 const RolesList: FC = () => {
 
+    const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const [search, setSearch] = useState<string>('')
+    const getRoles = useGetRoles(search)
+
 
     return (
         <div className='mt-4'>
@@ -20,6 +26,7 @@ const RolesList: FC = () => {
                 <div>
                     <Button
                         className='px-5'
+                        onClick={() => navigate(Pages.users.roleCreate)}
                     >
                         <div className='flex gap-2'>
                             <Add
@@ -38,6 +45,7 @@ const RolesList: FC = () => {
                         variant='search'
                         placeholder={t('user.role_search')}
                         className='bg-white border border-border'
+                        onChangeSearchFinal={(value) => setSearch(value)}
                     />
                 </div>
             </div>
@@ -48,28 +56,26 @@ const RolesList: FC = () => {
                         <tr>
                             <Td text={t('user.title')} />
                             <Td text={t('user.user')} />
-                            <Td text={t('detail')} />
+                            <Td text={t('user.is_admin')} />
                         </tr>
                     </thead>
                     <tbody>
-                        <tr className='tr'>
-                            <Td text='ادمین' />
-                            <Td text={'۳ کاربر'} />
-                            <Td text={''}>
-                                <Link to={Pages.ticket.detail + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
-                        </tr>
-                        <tr className='tr'>
-                            <Td text='ادمین' />
-                            <Td text={'۳ کاربر'} />
-                            <Td text={''}>
-                                <Link to={Pages.ticket.detail + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
-                        </tr>
+                        {
+                            getRoles.data?.data?.roles?.map((item: RoleItemType) => {
+                                return (
+                                    <tr key={item.id} className='tr'>
+                                        <Td text={item.name} />
+                                        <Td text={item.userCount + ''} />
+                                        <Td text={item.isAdmin ? t('yes') : t('no')} />
+                                        {/* <Td text={''}>
+                                            <Link to={Pages.ticket.detail + '1'}>
+                                                <Eye size={20} color='#8C90A3' />
+                                            </Link>
+                                        </Td> */}
+                                    </tr>
+                                )
+                            })
+                        }
                     </tbody>
                 </table>
             </div>
diff --git a/src/pages/users/hooks/useUserData.ts b/src/pages/users/hooks/useUserData.ts
index d244786..e47b058 100644
--- a/src/pages/users/hooks/useUserData.ts
+++ b/src/pages/users/hooks/useUserData.ts
@@ -1,6 +1,6 @@
 import * as api from "../service/UserService";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { CreateRoleType } from "../types/UserTypes";
+import { CreateRoleType, CreateUserType } from "../types/UserTypes";
 
 export const useGetPermissions = () => {
   return useQuery({
@@ -14,3 +14,23 @@ export const useCreateRole = () => {
     mutationFn: (variables: CreateRoleType) => api.createRole(variables),
   });
 };
+
+export const useGetRoles = (search: string) => {
+  return useQuery({
+    queryKey: ["roles", search],
+    queryFn: () => api.getRoles(search),
+  });
+};
+
+export const useCreateUser = () => {
+  return useMutation({
+    mutationFn: (variables: CreateUserType) => api.createUser(variables),
+  });
+};
+
+export const useGetUsers = (search: string) => {
+  return useQuery({
+    queryKey: ["users", search],
+    queryFn: () => api.getUsers(search),
+  });
+};
diff --git a/src/pages/users/service/UserService.ts b/src/pages/users/service/UserService.ts
index 9d75f62..a20030b 100644
--- a/src/pages/users/service/UserService.ts
+++ b/src/pages/users/service/UserService.ts
@@ -1,5 +1,5 @@
 import axios from "../../../config/axios";
-import { CreateRoleType } from "../types/UserTypes";
+import { CreateRoleType, CreateUserType } from "../types/UserTypes";
 
 export const getPermissions = async () => {
   const { data } = await axios.get(`/users/permissions`);
@@ -10,3 +10,18 @@ export const createRole = async (params: CreateRoleType) => {
   const { data } = await axios.post(`/users/roles`, params);
   return data;
 };
+
+export const getRoles = async (search: string) => {
+  const { data } = await axios.get(`/users/roles?q=${search}`);
+  return data;
+};
+
+export const createUser = async (params: CreateUserType) => {
+  const { data } = await axios.post(`/users/admins`, params);
+  return data;
+};
+
+export const getUsers = async (search: string) => {
+  const { data } = await axios.get(`/users/admins?q=${search}`);
+  return data;
+};
diff --git a/src/pages/users/types/UserTypes.ts b/src/pages/users/types/UserTypes.ts
index bfd4d72..f35ac78 100644
--- a/src/pages/users/types/UserTypes.ts
+++ b/src/pages/users/types/UserTypes.ts
@@ -2,3 +2,39 @@ export type CreateRoleType = {
   name: string;
   permissions: string[];
 };
+
+export type RoleItemType = {
+  id: string;
+  name: string;
+  isAdmin: boolean;
+  createdAt: string;
+  updatedAt: string;
+  userCount: number;
+};
+
+export type CreateUserType = {
+  phone: string;
+  firstName: string;
+  lastName: string;
+  password: string;
+  repeatPassword: string;
+  email: string;
+  roleId: string;
+  profilePic?: string;
+};
+
+export type UserItemType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  emailVerified: boolean;
+  phone: string;
+  profilePic?: string;
+  userName: string;
+  birthDate: string | null;
+  nationalCode: string | null;
+  createdAt: string;
+  updatedAt: string;
+  roles: RoleItemType[];
+};