diff --git a/src/components/dashboard/Roles/Toolbar/Create/Form/index.jsx b/src/components/dashboard/Roles/Toolbar/Create/Form/index.jsx
index 01fc9f0..dbc11e9 100644
--- a/src/components/dashboard/Roles/Toolbar/Create/Form/index.jsx
+++ b/src/components/dashboard/Roles/Toolbar/Create/Form/index.jsx
@@ -1,52 +1,55 @@
 import LtrTextField from "@/core/components/LtrTextField";
 import StyledForm from "@/core/components/StyledForm";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Button, Checkbox, Chip, DialogActions, DialogContent, Divider, Grid, Stack } from "@mui/material";
+import {
+    Box,
+    Button,
+    Checkbox,
+    Chip,
+    DialogActions,
+    DialogContent,
+    Divider,
+    FormControlLabel, FormHelperText,
+    Grid, Skeleton,
+    Stack,
+} from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
-import { object, string } from "yup";
+import { array, object, string } from "yup";
 import useRequest from "@/lib/hooks/useRequest";
 import { CREATE_ROLE } from "@/core/utils/routes";
-import { useState } from "react";
-import { usePermissionsList } from "@/lib/hooks/usePermissionsList";
+import usePermissionsList from "@/lib/hooks/usePermissionsList";
 
 const defaultValues = {
     name: "",
     name_fa: "",
+    permissions: []
 };
 
 const validationSchema = object().shape({
     name: string().required("نام فارسی نقش را وارد کنید"),
     name_fa: string().required("نام انگلیسی نقش را وارد کنید"),
+    permissions: array().min(1, "حداقل یک دسترسی را انتخاب نمایید")
 });
 
 const CreateRoleForm = ({ setOpen, mutate }) => {
-    const [permissionChecked, setPermissionChecked] = useState({});
     const requestServer = useRequest({ notificationSuccess: true });
-    const { data } = usePermissionsList();
-
-    console.log("data", data);
-
-    const handleCheckboxChange = (index) => {
-        setPermissionChecked((prev) => ({
-            ...prev,
-            [index]: !prev[index],
-        }));
-    };
+    const { permissions, loadingPermissions } = usePermissionsList();
 
     const {
         control,
         handleSubmit,
         formState: { isSubmitting, errors },
+        watch,
     } = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
 
     const onSubmit = async (data) => {
-        const formData = new FormData();
-        Object.keys(data).forEach((key) => {
-            formData.append(key, data[key]);
-        });
         try {
             await requestServer(CREATE_ROLE, "post", {
-                data: formData,
+                data: {
+                    permissions: data.permissions,
+                    name: data.name,
+                    name_fa: data.name_fa,
+                },
             });
             setOpen(false);
             mutate();
@@ -60,7 +63,7 @@ const CreateRoleForm = ({ setOpen, mutate }) => {
                     <Chip color="primary" variant="outlined" label="نقش جدید" />
                 </Divider>
                 <StyledForm
-                    id="createRleForm"
+                    id="createRoleForm"
                     onSubmit={handleSubmit(onSubmit)}
                     style={{ width: "100%", height: "100%" }}
                 >
@@ -102,21 +105,53 @@ const CreateRoleForm = ({ setOpen, mutate }) => {
                                     name={"name_fa"}
                                 />
                             </Grid>
-                            <Grid item xs={12} md={12}>
+                            <Box sx={{width: "100%"}}>
                                 <Divider>
-                                    <Chip label="سطوح دسترسی" size="small" />
+                                    <Chip label="سطوح دسترسی" size="medium" />
                                 </Divider>
-                                <Grid container spacing={1}>
-                                    {permissions.map((permission, index) => (
-                                        <Grid item key={index}>
-                                            <Checkbox
-                                                checked={!!permissionChecked[index]}
-                                                onChange={() => handleCheckboxChange(index)}
-                                            />
-                                            {permission.label}
-                                        </Grid>
-                                    ))}
-                                </Grid>
+                            </Box>
+                            <Grid container spacing={1} sx={{width: "100%"}}>
+                                {!loadingPermissions ? (
+                                    <Controller
+                                        control={control}
+                                        name="permissions"
+                                        render={({ field, fieldState: {error} }) => (
+                                            <>
+                                                {permissions.map((permission) => (
+                                                    <Grid key={permission.id} size={{ xs: 12, md: 4 }}>
+                                                        <FormControlLabel
+                                                            control={
+                                                                <Checkbox
+                                                                    value={permission.id}
+                                                                    checked={field.value.includes(permission.id)}
+                                                                    onChange={(e) => {
+                                                                        const value = parseInt(e.target.value, 10);
+                                                                        if (e.target.checked) {
+                                                                            field.onChange([...field.value, value]);
+                                                                        } else {
+                                                                            field.onChange(field.value.filter((id) => id !== value));
+                                                                        }
+                                                                    }}
+                                                                />
+                                                            }
+                                                            label={permission.name_fa}
+                                                        />
+                                                    </Grid>
+                                                ))}
+                                                <FormHelperText sx={{color: "error.main"}}>{!!error && error.message}</FormHelperText>
+                                            </>
+                                        )}
+                                    />
+                                ) : (
+                                    <Grid container spacing={2} width="100%">
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                    </Grid>
+                                )}
                             </Grid>
                         </Grid>
                     </Stack>
diff --git a/src/lib/hooks/usePermissionsList.js b/src/lib/hooks/usePermissionsList.js
index 1ceff74..84cd1cc 100644
--- a/src/lib/hooks/usePermissionsList.js
+++ b/src/lib/hooks/usePermissionsList.js
@@ -1,21 +1,29 @@
+import { useEffect, useState } from "react";
 import { GET_PERMISSIONS_LIST } from "@/core/utils/routes";
-import useSWR from "swr";
-import useRequest from "./useRequest";
+import useRequest from "@/lib/hooks/useRequest";
 
-export const usePermissionsList = () => {
-    const request = useRequest();
+const usePermissionsList = () => {
+    const requestServer = useRequest();
+    const [permissions, setPermissions] = useState([]);
+    const [loadingPermissions, setLoadingPermissions] = useState(true);
+    const [errorPermissions, setErrorPermissions] = useState(null);
 
-    const fetcher = async (url) => {
-        try {
-            const response = await request(url);
-            return response.data.data;
-        } catch (error) {
-            throw new Error();
-        }
-    };
+    useEffect(() => {
+        const fetchPermissions = async () => {
+            try {
+                const response = await requestServer(`${GET_PERMISSIONS_LIST}`);
+                setPermissions(response.data.data);
+                setLoadingPermissions(false);
+            } catch (e) {
+                setErrorPermissions(e);
+                setLoadingPermissions(false);
+            }
+        };
 
-    return useSWR(GET_PERMISSIONS_LIST, fetcher, {
-        keepPreviousData: true,
-        dedupingInterval: 30000,
-    });
+        fetchPermissions();
+    }, []);
+
+    return { permissions, loadingPermissions, errorPermissions };
 };
+
+export default usePermissionsList;