diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 38083ec..d52b977 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -34,7 +34,7 @@
     "dashboard": "داشبورد",
     "change-password": "تغییر رمز عبور",
     "edit-profile": "ویرایش پروفایل",
-    "role-management": "مدیریت دسترسی",
+    "role-management": "مدیریت نقش ها",
     "admin": "مدیریت"
   },
   "secondary": {
@@ -74,7 +74,7 @@
     "dashboard_page": "داشبورد",
     "change_password": "تغییر رمز عبور",
     "edit_profile": "ویرایش پروفایل",
-    "role_management_page": "مدیریت دسترسی"
+    "role_management_page": "مدیریت نقش ها"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
@@ -157,6 +157,7 @@
     "type_id": "نوع کاربر",
     "navgan_id": "کد ناوگان",
     "button-cancel": "انصراف",
+    "loading_permissions_list": "درحال دریافت لیست دسترسی ها",
     "button-add": "ثبت"
   },
   "UpdateDialog": {
@@ -179,6 +180,7 @@
     "permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
     "type_id": "نوع کاربر",
     "navgan_id": "کد ناوگان",
+    "loading_permissions_list": "درحال دریافت لیست دسترسی ها",
     "button-update": "ثبت"
   },
   "DeleteDialog": {
diff --git a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
index 12523c2..db28f49 100644
--- a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
+++ b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
@@ -1,6 +1,6 @@
 import {
     Button,
-    Checkbox,
+    Checkbox, CircularProgress,
     DialogActions,
     DialogContent, DialogTitle,
     FormControl,
@@ -9,7 +9,7 @@ import {
     FormLabel,
     Grid,
     Stack,
-    TextField
+    TextField, Typography
 } from "@mui/material";
 import {useTranslations} from "next-intl";
 import useRequest from "@/lib/app/hooks/useRequest";
@@ -21,7 +21,7 @@ import usePermissions from "@/lib/app/hooks/usePermissions";
 const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
     const t = useTranslations();
     const requestServer = useRequest({auth: true})
-    const {permissions_list} = usePermissions()
+    const {permissions_list, isLoading} = usePermissions()
     const validationSchema = Yup.object().shape({
         name_en: Yup.string().required(t("AddDialog.name_en_error")),
         name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
@@ -95,30 +95,38 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
                                 fullWidth
                             >
                                 <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
-                                <Grid container spacing={2}>
-                                    {permissions_list ? (
-                                        permissions_list.map((permission) => (
-                                            <Grid key={permission.id} item xs={6}>
-                                                <FormControlLabel
-                                                    control={
-                                                        <Checkbox
-                                                            data-testid="PermissionList-checkbox"
-                                                            checked={formik.values.permissions.includes(permission.id)}
-                                                            onChange={(e) => {
-                                                                if (e.target.checked) {
-                                                                    formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
-                                                                } else {
-                                                                    formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                    {isLoading ?
+                                        <Stack direction={'row'} alignItems={'center'} spacing={2} justifyContent={'center'}>
+                                            <CircularProgress size={20}/>
+                                            <Typography variant={'caption'}>{t("AddDialog.loading_permissions_list")}</Typography>
+                                        </Stack>
+                                        :(
+                                            <Grid container spacing={2}>
+                                                <>
+                                                    {permissions_list.map((permission) => (
+                                                        <Grid key={permission.id} item xs={6}>
+                                                            <FormControlLabel
+                                                                control={
+                                                                    <Checkbox
+                                                                        data-testid="PermissionList-checkbox"
+                                                                        checked={formik.values.permissions.includes(permission.id)}
+                                                                        onChange={(e) => {
+                                                                            if (e.target.checked) {
+                                                                                formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
+                                                                            } else {
+                                                                                formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                                                            }
+                                                                        }}
+                                                                    />
                                                                 }
-                                                            }}
-                                                        />
-                                                    }
-                                                    label={permission.name_fa}
-                                                />
+                                                                label={permission.name_fa}
+                                                            />
+                                                        </Grid>
+                                                    ))}
+                                                </>
                                             </Grid>
-                                        ))
-                                    ) : null}
-                                </Grid>
+                                        )
+                                    }
                             </FormControl>
                         </FormLabel>
                     </Stack>
diff --git a/src/components/dashboard/role-management/Form/CreateForm/index.jsx b/src/components/dashboard/role-management/Form/CreateForm/index.jsx
index 8cbe859..2265035 100644
--- a/src/components/dashboard/role-management/Form/CreateForm/index.jsx
+++ b/src/components/dashboard/role-management/Form/CreateForm/index.jsx
@@ -24,7 +24,7 @@ const CreateForm = ({mutate, fetchUrl}) => {
                     {t("AddDialog.add")}
                 </Button>
             </Tooltip>
-            <Dialog maxWidth={"md"} open={openConfirmDialog}
+            <Dialog maxWidth={"lg"} open={openConfirmDialog}
                     PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
                 <CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
             </Dialog>
diff --git a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
index a17c48d..0815356 100644
--- a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
+++ b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
@@ -1,6 +1,7 @@
 import {
+    Box,
     Button,
-    Checkbox, DialogActions,
+    Checkbox, CircularProgress, DialogActions,
     DialogContent, DialogTitle,
     FormControl,
     FormControlLabel,
@@ -8,7 +9,7 @@ import {
     FormLabel,
     Grid,
     Stack,
-    TextField
+    TextField, Typography
 } from "@mui/material";
 import {useFormik} from "formik";
 import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
@@ -22,7 +23,7 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
     const t = useTranslations();
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
-    const {permissions_list} = usePermissions()
+    const {permissions_list, isLoading} = usePermissions()
 
     const validationSchema = Yup.object().shape({
         name_en: Yup.string().required(t("UpdateDialog.name_en_error")),
@@ -94,30 +95,37 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
                                 fullWidth
                             >
                                 <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
-                                <Grid container spacing={2}>
-                                    {permissions_list ? (
-                                        permissions_list.map((permission) => (
-                                            <Grid key={permission.id} item xs={6}>
-                                                <FormControlLabel
-                                                    control={
-                                                        <Checkbox
-                                                            data-testid="PermissionList-checkbox"
-                                                            checked={formik.values.permissions.includes(permission.id)}
-                                                            onChange={(e) => {
-                                                                if (e.target.checked) {
-                                                                    formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
-                                                                } else {
-                                                                    formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
-                                                                }
-                                                            }}
+                                {isLoading ?
+                                    <Stack direction={'row'} alignItems={'center'} spacing={2} justifyContent={'center'}>
+                                        <CircularProgress size={20}/>
+                                        <Typography variant={'caption'}>{t("UpdateDialog.loading_permissions_list")}</Typography>
+                                    </Stack>
+                                    :(
+                                        <Grid container spacing={2}>
+                                            <>
+                                                {permissions_list.map((permission) => (
+                                                    <Grid key={permission.id} item xs={6}>
+                                                        <FormControlLabel
+                                                            control={
+                                                                <Checkbox
+                                                                    data-testid="PermissionList-checkbox"
+                                                                    checked={formik.values.permissions.includes(permission.id)}
+                                                                    onChange={(e) => {
+                                                                        if (e.target.checked) {
+                                                                            formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
+                                                                        } else {
+                                                                            formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                                                        }
+                                                                    }}
+                                                                />
+                                                            }
+                                                            label={permission.name_fa}
                                                         />
-                                                    }
-                                                    label={permission.name_fa}
-                                                />
-                                            </Grid>
-                                        ))
-                                    ) : null}
-                                </Grid>
+                                                    </Grid>
+                                                ))}
+                                            </>
+                                        </Grid>
+                                    )}
                             </FormControl>
                         </FormLabel>
                     </Stack>
diff --git a/src/lib/app/hooks/usePermissions.jsx b/src/lib/app/hooks/usePermissions.jsx
index 0e6aa07..8d45fd2 100644
--- a/src/lib/app/hooks/usePermissions.jsx
+++ b/src/lib/app/hooks/usePermissions.jsx
@@ -11,7 +11,7 @@ const usePermissions = () => {
         })
     };
 
-    const {data} = useSWR(GET_PERMISSIONS_LIST, fetcher, {
+    const {data, isLoading} = useSWR(GET_PERMISSIONS_LIST, fetcher, {
         revalidateIfStale: false,
         revalidateOnFocus: false,
         revalidateOnReconnect: false
@@ -20,6 +20,6 @@ const usePermissions = () => {
     //swr config
 
     // render data
-    return {permissions_list}
+    return {permissions_list, isLoading}
 }
 export default usePermissions;
\ No newline at end of file