diff --git a/src/pages/roles/Create.tsx b/src/pages/roles/Create.tsx
new file mode 100644
index 0000000..38addac
--- /dev/null
+++ b/src/pages/roles/Create.tsx
@@ -0,0 +1,78 @@
+import { type FC } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import { useCreateRole } from './hooks/useRolesData'
+import type { CreateRoleType } from './types/Types'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+const CreateRole: FC = () => {
+    const { mutate: createRole, isPending } = useCreateRole()
+    const navigate = useNavigate()
+
+    const formik = useFormik<CreateRoleType>({
+        initialValues: {
+            name: '',
+            permissionIds: [],
+        },
+        validationSchema: Yup.object().shape({
+            name: Yup.string().required('نام نقش الزامی است'),
+            permissionIds: Yup.array().of(Yup.string()),
+        }),
+        onSubmit: (values) => {
+            createRole(values, {
+                onSuccess: () => {
+                    toast.success('نقش با موفقیت ایجاد شد')
+                    navigate(Pages.roles.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            })
+        },
+    })
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    نقش جدید
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت نقش</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <div className='bg-white rounded-3xl p-6'>
+                    <div className='mb-4'>
+                        <Input
+                            label='نام نقش'
+                            name='name'
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateRole
\ No newline at end of file
diff --git a/src/pages/roles/hooks/useRolesData.ts b/src/pages/roles/hooks/useRolesData.ts
index 014cbf8..f10b189 100644
--- a/src/pages/roles/hooks/useRolesData.ts
+++ b/src/pages/roles/hooks/useRolesData.ts
@@ -17,3 +17,13 @@ export const useDeleteRole = () => {
     },
   });
 };
+
+export const useCreateRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createRole,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["roles"] });
+    },
+  });
+};
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index ec367ea..d2db34b 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -20,6 +20,7 @@ import CommentsDetails from '@/pages/comments/Details'
 import ScheduleList from '@/pages/schedule/List'
 import CreateSchedule from '@/pages/schedule/Create'
 import RolesList from '@/pages/roles/List'
+import CreateRole from '@/pages/roles/Create'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -51,6 +52,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.schedule.list} element={<ScheduleList />} />
                             <Route path={Pages.schedule.create} element={<CreateSchedule />} />
                             <Route path={Pages.roles.list} element={<RolesList />} />
+                            <Route path={Pages.roles.add} element={<CreateRole />} />
                         </Routes>
                     </div>
                 </div>