diff --git a/src/components/dashboard/change-password/index.jsx b/src/components/dashboard/change-password/index.jsx
index a30cca6..c62d127 100644
--- a/src/components/dashboard/change-password/index.jsx
+++ b/src/components/dashboard/change-password/index.jsx
@@ -1,17 +1,14 @@
 import CenterLayout from "@/layouts/CenterLayout";
 import {Container} from "@mui/material";
 import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 const DashboardChangePasswordComponent = () => {
     return (
-        <DashboardLayouts>
-            <CenterLayout>
-                <Container maxWidth="sm">
-                    <ChangePasswordForm />
-                </Container>
-            </CenterLayout>
-        </DashboardLayouts>
+        <CenterLayout>
+            <Container maxWidth="sm">
+                <ChangePasswordForm/>
+            </Container>
+        </CenterLayout>
     );
 };
 export default DashboardChangePasswordComponent;
diff --git a/src/components/dashboard/commercial-chief/index.jsx b/src/components/dashboard/commercial-chief/index.jsx
index e05868e..9caaa36 100644
--- a/src/components/dashboard/commercial-chief/index.jsx
+++ b/src/components/dashboard/commercial-chief/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardCommercialChiefComponent() {
     const t = useTranslations();
@@ -126,30 +125,28 @@ function DashboardCommercialChiefComponent() {
     );
 
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_COMMERCIAL_CHIEF}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_COMMERCIAL_CHIEF}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/development-assistant/index.jsx b/src/components/dashboard/development-assistant/index.jsx
index 388fbc7..53c25bd 100644
--- a/src/components/dashboard/development-assistant/index.jsx
+++ b/src/components/dashboard/development-assistant/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardDevelopmentAssistantComponent() {
     const t = useTranslations();
@@ -125,32 +124,30 @@ function DashboardDevelopmentAssistantComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_DEVELOPMENT_ASSISTANT}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_DEVELOPMENT_ASSISTANT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/edit-profile/index.jsx b/src/components/dashboard/edit-profile/index.jsx
index f458154..1187057 100644
--- a/src/components/dashboard/edit-profile/index.jsx
+++ b/src/components/dashboard/edit-profile/index.jsx
@@ -11,7 +11,6 @@ import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
 import useDirection from "@/lib/app/hooks/useDirection";
 import Notifications from "@/core/components/notifications";
 import ImageResizer from "@/core/components/ImageConvertor";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 const DashboardEditProfile = () => {
     const t = useTranslations();
@@ -54,169 +53,167 @@ const DashboardEditProfile = () => {
     const validationSchema = Yup.object().shape({});
 
     return (
-        <DashboardLayouts>
-            <CenterLayout>
-                <Container maxWidth="sm">
-                    <Formik
-                        initialValues={initialValues}
-                        onSubmit={handleSubmit}
-                        validationSchema={validationSchema}
-                    >
-                        {(props) => (
-                            <StyledForm
-                                onSubmit={(e) => {
-                                    e.preventDefault();
-                                    props.handleSubmit();
-                                }}
-                            >
-                                <Paper elevation={0}>
-                                    <Stack spacing={3} sx={{p: 5}} component="div">
-                                        <Typography margin={2} variant="h4" textAlign="center">
-                                            {t("UpdateProfile.typography_edit_profile")}
-                                        </Typography>
-                                        <Box
-                                            sx={{
-                                                display: "flex",
-                                                flexDirection: "column",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                            }}
-                                        >
-                                            <AvatarUpload
-                                                user={user}
-                                                setFieldValue={props.setFieldValue}
-                                                valueAvatar="expert_avatar"
-                                                changeFlag="change_avatar"
+        <CenterLayout>
+            <Container maxWidth="sm">
+                <Formik
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                    validationSchema={validationSchema}
+                >
+                    {(props) => (
+                        <StyledForm
+                            onSubmit={(e) => {
+                                e.preventDefault();
+                                props.handleSubmit();
+                            }}
+                        >
+                            <Paper elevation={0}>
+                                <Stack spacing={3} sx={{p: 5}} component="div">
+                                    <Typography margin={2} variant="h4" textAlign="center">
+                                        {t("UpdateProfile.typography_edit_profile")}
+                                    </Typography>
+                                    <Box
+                                        sx={{
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                        }}
+                                    >
+                                        <AvatarUpload
+                                            user={user}
+                                            setFieldValue={props.setFieldValue}
+                                            valueAvatar="expert_avatar"
+                                            changeFlag="change_avatar"
+                                        />
+                                    </Box>
+                                    <Grid container spacing={2} sx={{pb: 2}}>
+                                        <Grid item xs={12} sm={6}>
+                                            <Field
+                                                as={TextField}
+                                                name="username"
+                                                label={t("UpdateProfile.text_field_username")}
+                                                variant="outlined"
+                                                margin="normal"
+                                                size="small"
+                                                disabled={true}
+                                                error={
+                                                    props.touched.username && props.errors.username
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.username
+                                                        ? props.errors.username
+                                                        : null
+                                                }
+                                                sx={{
+                                                    width: "100%",
+                                                }}
                                             />
-                                        </Box>
-                                        <Grid container spacing={2} sx={{pb: 2}}>
-                                            <Grid item xs={12} sm={6}>
-                                                <Field
-                                                    as={TextField}
-                                                    name="username"
-                                                    label={t("UpdateProfile.text_field_username")}
-                                                    variant="outlined"
-                                                    margin="normal"
-                                                    size="small"
-                                                    disabled={true}
-                                                    error={
-                                                        props.touched.username && props.errors.username
-                                                            ? true
-                                                            : false
-                                                    }
-                                                    helperText={
-                                                        props.touched.username
-                                                            ? props.errors.username
-                                                            : null
-                                                    }
-                                                    sx={{
-                                                        width: "100%",
-                                                    }}
-                                                />
-                                            </Grid>
-                                            <Grid item xs={12} sm={6}>
-                                                <Field
-                                                    as={TextField}
-                                                    name="name"
-                                                    label={t("UpdateProfile.text_field_name")}
-                                                    variant="outlined"
-                                                    margin="normal"
-                                                    size="small"
-                                                    disabled={true}
-                                                    error={
-                                                        props.touched.name && props.errors.name
-                                                            ? true
-                                                            : false
-                                                    }
-                                                    helperText={
-                                                        props.touched.name ? props.errors.name : null
-                                                    }
-                                                    sx={{
-                                                        width: "100%",
-                                                    }}
-                                                />
-                                            </Grid>
-                                            <Grid item xs={12} sm={6}>
-                                                <Field
-                                                    as={TextField}
-                                                    name="email"
-                                                    label={t("UpdateProfile.text_field_email")}
-                                                    variant="outlined"
-                                                    margin="normal"
-                                                    size="small"
-                                                    disabled={true}
-                                                    error={
-                                                        props.touched.email && props.errors.email
-                                                            ? true
-                                                            : false
-                                                    }
-                                                    helperText={
-                                                        props.touched.email ? props.errors.email : null
-                                                    }
-                                                    sx={{
-                                                        width: "100%",
-                                                    }}
-                                                />
-                                            </Grid>
-
-                                            <Grid item xs={12} sm={6}>
-                                                <Field
-                                                    as={TextField}
-                                                    name="province_name"
-                                                    label={t("UpdateProfile.text_field_province_name")}
-                                                    variant="outlined"
-                                                    margin="normal"
-                                                    size="small"
-                                                    disabled={true}
-                                                    error={
-                                                        props.touched.province_name &&
-                                                        props.errors.province_name
-                                                            ? true
-                                                            : false
-                                                    }
-                                                    helperText={
-                                                        props.touched.province_name
-                                                            ? props.errors.province_name
-                                                            : null
-                                                    }
-                                                    sx={{
-                                                        width: "100%",
-                                                    }}
-                                                />
-                                            </Grid>
-                                            <Grid item xs={12} sm={6}>
-                                                <Field
-                                                    as={TextField}
-                                                    name="position"
-                                                    label={t("UpdateProfile.text_field_position")}
-                                                    variant="outlined"
-                                                    margin="normal"
-                                                    size="small"
-                                                    disabled={true}
-                                                    error={
-                                                        props.touched.position && props.errors.position
-                                                            ? true
-                                                            : false
-                                                    }
-                                                    helperText={
-                                                        props.touched.position
-                                                            ? props.errors.position
-                                                            : null
-                                                    }
-                                                    sx={{
-                                                        width: "100%",
-                                                    }}
-                                                />
-                                            </Grid>
                                         </Grid>
-                                    </Stack>
-                                </Paper>
-                            </StyledForm>
-                        )}
-                    </Formik>
-                </Container>
-            </CenterLayout>
-        </DashboardLayouts>
+                                        <Grid item xs={12} sm={6}>
+                                            <Field
+                                                as={TextField}
+                                                name="name"
+                                                label={t("UpdateProfile.text_field_name")}
+                                                variant="outlined"
+                                                margin="normal"
+                                                size="small"
+                                                disabled={true}
+                                                error={
+                                                    props.touched.name && props.errors.name
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.name ? props.errors.name : null
+                                                }
+                                                sx={{
+                                                    width: "100%",
+                                                }}
+                                            />
+                                        </Grid>
+                                        <Grid item xs={12} sm={6}>
+                                            <Field
+                                                as={TextField}
+                                                name="email"
+                                                label={t("UpdateProfile.text_field_email")}
+                                                variant="outlined"
+                                                margin="normal"
+                                                size="small"
+                                                disabled={true}
+                                                error={
+                                                    props.touched.email && props.errors.email
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.email ? props.errors.email : null
+                                                }
+                                                sx={{
+                                                    width: "100%",
+                                                }}
+                                            />
+                                        </Grid>
+
+                                        <Grid item xs={12} sm={6}>
+                                            <Field
+                                                as={TextField}
+                                                name="province_name"
+                                                label={t("UpdateProfile.text_field_province_name")}
+                                                variant="outlined"
+                                                margin="normal"
+                                                size="small"
+                                                disabled={true}
+                                                error={
+                                                    props.touched.province_name &&
+                                                    props.errors.province_name
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.province_name
+                                                        ? props.errors.province_name
+                                                        : null
+                                                }
+                                                sx={{
+                                                    width: "100%",
+                                                }}
+                                            />
+                                        </Grid>
+                                        <Grid item xs={12} sm={6}>
+                                            <Field
+                                                as={TextField}
+                                                name="position"
+                                                label={t("UpdateProfile.text_field_position")}
+                                                variant="outlined"
+                                                margin="normal"
+                                                size="small"
+                                                disabled={true}
+                                                error={
+                                                    props.touched.position && props.errors.position
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.position
+                                                        ? props.errors.position
+                                                        : null
+                                                }
+                                                sx={{
+                                                    width: "100%",
+                                                }}
+                                            />
+                                        </Grid>
+                                    </Grid>
+                                </Stack>
+                            </Paper>
+                        </StyledForm>
+                    )}
+                </Formik>
+            </Container>
+        </CenterLayout>
     );
 };
 
diff --git a/src/components/dashboard/expert-management/index.jsx b/src/components/dashboard/expert-management/index.jsx
index 736fe33..f8caab7 100644
--- a/src/components/dashboard/expert-management/index.jsx
+++ b/src/components/dashboard/expert-management/index.jsx
@@ -7,7 +7,6 @@ import DataTable from "@/core/components/DataTable";
 import TableToolbar from "@/components/dashboard/expert-management/TableToolbar";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardExpertManagementComponent() {
     const t = useTranslations();
@@ -138,33 +137,31 @@ function DashboardExpertManagementComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_EXPERT_MANAGEMENT}
-                    columns={columns}
-                    selectableRow={false}
-                    CustomToolbar={TableToolbar}
-                    sorting={[{
-                        id: 'id', desc: true
-                    }]}
-                    enableCustomToolbar={true}
-                    enableLastUpdate={true}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_EXPERT_MANAGEMENT}
+                columns={columns}
+                selectableRow={false}
+                CustomToolbar={TableToolbar}
+                sorting={[{
+                    id: 'id', desc: true
+                }]}
+                enableCustomToolbar={true}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/first/index.jsx b/src/components/dashboard/first/index.jsx
index de8835c..919bb14 100644
--- a/src/components/dashboard/first/index.jsx
+++ b/src/components/dashboard/first/index.jsx
@@ -1,8 +1,5 @@
-import DashboardLayouts from "@/components/layouts/Dashboard";
-
-
 const DashboardFirstComponent = () => {
-    return <DashboardLayouts></DashboardLayouts>
+    return <></>
 };
 
 export default DashboardFirstComponent;
diff --git a/src/components/dashboard/inspector-expert/index.jsx b/src/components/dashboard/inspector-expert/index.jsx
index 4c10b12..9ee841d 100644
--- a/src/components/dashboard/inspector-expert/index.jsx
+++ b/src/components/dashboard/inspector-expert/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardInspectorExpertComponent() {
     const t = useTranslations();
@@ -124,32 +123,30 @@ function DashboardInspectorExpertComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_INSPECTOR_EXPERT}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    enablePinning={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_INSPECTOR_EXPERT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                enablePinning={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/machinary-office/index.jsx b/src/components/dashboard/machinary-office/index.jsx
index 8062aec..820519e 100644
--- a/src/components/dashboard/machinary-office/index.jsx
+++ b/src/components/dashboard/machinary-office/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardMachinaryOfficeComponent() {
     const t = useTranslations();
@@ -156,30 +155,28 @@ function DashboardMachinaryOfficeComponent() {
         []
     );
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_MACHINARY_OFFICE}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_MACHINARY_OFFICE}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/navgan-loan-management/index.jsx b/src/components/dashboard/navgan-loan-management/index.jsx
index 95df361..83aeffb 100644
--- a/src/components/dashboard/navgan-loan-management/index.jsx
+++ b/src/components/dashboard/navgan-loan-management/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import DataTable from "@/core/components/DataTable";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardNavganLoanManagementComponent() {
     const t = useTranslations();
@@ -134,32 +133,30 @@ function DashboardNavganLoanManagementComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_LOAN_MANAGEMENT_NAVGAN}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_LOAN_MANAGEMENT_NAVGAN}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/navgan-province-manager/index.jsx b/src/components/dashboard/navgan-province-manager/index.jsx
index 222c691..e0e6a39 100644
--- a/src/components/dashboard/navgan-province-manager/index.jsx
+++ b/src/components/dashboard/navgan-province-manager/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardNavganProvinceManagerComponent() {
     const t = useTranslations();
@@ -156,32 +155,30 @@ function DashboardNavganProvinceManagerComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_NAVGAN_PROVINCE_MANAGER}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_NAVGAN_PROVINCE_MANAGER}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/passenger-boss/index.jsx b/src/components/dashboard/passenger-boss/index.jsx
index 7715c2e..c338f6e 100644
--- a/src/components/dashboard/passenger-boss/index.jsx
+++ b/src/components/dashboard/passenger-boss/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardPassengerOfficeComponent() {
     const t = useTranslations();
@@ -157,30 +156,28 @@ function DashboardPassengerOfficeComponent() {
         []
     );
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_PASSENGER_BOSS}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_PASSENGER_BOSS}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/passenger-office/index.jsx b/src/components/dashboard/passenger-office/index.jsx
index 5a27d79..b8292a0 100644
--- a/src/components/dashboard/passenger-office/index.jsx
+++ b/src/components/dashboard/passenger-office/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardPassengerOfficeComponent() {
     const t = useTranslations();
@@ -157,30 +156,28 @@ function DashboardPassengerOfficeComponent() {
         []
     );
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_PASSENGER_OFFICE}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_PASSENGER_OFFICE}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/province-head-expert/index.jsx b/src/components/dashboard/province-head-expert/index.jsx
index c820963..56bf5f8 100644
--- a/src/components/dashboard/province-head-expert/index.jsx
+++ b/src/components/dashboard/province-head-expert/index.jsx
@@ -6,7 +6,6 @@ import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import TableRowActions from "./TableRowActions"
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardProvinceHeadExpertComponent() {
     const t = useTranslations();
@@ -126,30 +125,28 @@ function DashboardProvinceHeadExpertComponent() {
         []
     );
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_PROVINCE_HEAD_EXPERT}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_PROVINCE_HEAD_EXPERT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/refahi-loan-management/index.jsx b/src/components/dashboard/refahi-loan-management/index.jsx
index c218197..11cd469 100644
--- a/src/components/dashboard/refahi-loan-management/index.jsx
+++ b/src/components/dashboard/refahi-loan-management/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import DataTable from "@/core/components/DataTable";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardRefahiLoanManagementComponent() {
     const t = useTranslations();
@@ -134,32 +133,30 @@ function DashboardRefahiLoanManagementComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_LOAN_MANAGEMENT_REFAHI}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enableLastUpdate={true}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_LOAN_MANAGEMENT_REFAHI}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/refahi-province-manager/index.jsx b/src/components/dashboard/refahi-province-manager/index.jsx
index 3570ce6..88be38d 100644
--- a/src/components/dashboard/refahi-province-manager/index.jsx
+++ b/src/components/dashboard/refahi-province-manager/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardRefahiProvinceManagerComponent() {
     const t = useTranslations();
@@ -125,32 +124,30 @@ function DashboardRefahiProvinceManagerComponent() {
         ],
         []
     );
-    
+
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_REFAHI_PROVINCE_MANAGER}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enableLastUpdate={true}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_REFAHI_PROVINCE_MANAGER}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/role-management/index.jsx b/src/components/dashboard/role-management/index.jsx
index ca963aa..335d741 100644
--- a/src/components/dashboard/role-management/index.jsx
+++ b/src/components/dashboard/role-management/index.jsx
@@ -7,7 +7,6 @@ import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
 import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
 import TableRowActions from "./TableRowActions"
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardRoleManagementComponent() {
     const t = useTranslations();
@@ -66,7 +65,7 @@ function DashboardRoleManagementComponent() {
             datatype: "numeric",
             Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
         }], []);
-    return (<DashboardLayouts>
+    return (
         <Box sx={{px: 3}}>
             <DataTable
                 tableUrl={GET_ROLE_MANAGEMENT}
@@ -90,7 +89,7 @@ function DashboardRoleManagementComponent() {
                 TableRowAction={TableRowActions}
             />
         </Box>
-    </DashboardLayouts>);
+    );
 }
 
 export default DashboardRoleManagementComponent;
diff --git a/src/components/dashboard/transportation-assistance/index.jsx b/src/components/dashboard/transportation-assistance/index.jsx
index f5df64d..473837c 100644
--- a/src/components/dashboard/transportation-assistance/index.jsx
+++ b/src/components/dashboard/transportation-assistance/index.jsx
@@ -6,7 +6,6 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardTransportationAssistanceComponent() {
     const t = useTranslations();
@@ -157,30 +156,28 @@ function DashboardTransportationAssistanceComponent() {
         []
     );
     return (
-        <DashboardLayouts>
-            <Box sx={{px: 3}}>
-                <DataTable
-                    tableUrl={GET_TRANSPORTATION_ASSISTANCE}
-                    columns={columns}
-                    selectableRow={false}
-                    enableCustomToolbar={false}
-                    enableLastUpdate={true}
-                    sorting={[{
-                        id: 'id', desc: false
-                    }]}
-                    enablePinning={true}
-                    enableDensityToggle={false}
-                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
-                    enableColumnFilters={true}
-                    enableHiding={true}
-                    enableFullScreenToggle={false}
-                    enableGlobalFilter={false}
-                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
-                    enableRowActions={true}
-                    TableRowAction={TableRowActions}
-                />
-            </Box>
-        </DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_TRANSPORTATION_ASSISTANCE}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
     );
 }
 
diff --git a/src/components/dashboard/user-management/index.jsx b/src/components/dashboard/user-management/index.jsx
index fb5f7e8..6f06eed 100644
--- a/src/components/dashboard/user-management/index.jsx
+++ b/src/components/dashboard/user-management/index.jsx
@@ -8,7 +8,6 @@ import MuiDatePicker from "@/core/components/MuiDatePicker";
 import TableToolbar from "@/components/dashboard/user-management/TableToolbar";
 import TableRowActions from "./TableRowActions"
 import ClearIcon from "@mui/icons-material/Clear";
-import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardUserManagementComponent() {
     const t = useTranslations();
@@ -113,7 +112,7 @@ function DashboardUserManagementComponent() {
             </Stack>)
         }
     },], []);
-    return (<DashboardLayouts>
+    return (
         <Box sx={{px: 3}}>
             <DataTable
                 tableUrl={GET_USER_MANAGEMENT}
@@ -137,7 +136,7 @@ function DashboardUserManagementComponent() {
                 TableRowAction={TableRowActions}
             />
         </Box>
-    </DashboardLayouts>);
+    );
 }
 
 export default DashboardUserManagementComponent;
diff --git a/src/components/layouts/Dashboard/index.jsx b/src/components/layouts/Dashboard/index.jsx
index 8001aff..f54a894 100644
--- a/src/components/layouts/Dashboard/index.jsx
+++ b/src/components/layouts/Dashboard/index.jsx
@@ -4,6 +4,7 @@ import Sidebar from "./sidebar";
 import {Toolbar} from "@mui/material";
 import BreadCrumbs from "./breadcrumbs";
 import FullPageLayout from "@/layouts/FullPageLayout";
+import RolePermissionMiddleware from "@/middlewares/RolePermission";
 
 const drawerWidth = 240;
 
@@ -34,8 +35,10 @@ const DashboardLayouts = (props) => {
             >
                 <Toolbar/>
                 <FullPageLayout sx={{mt: 3}}>
-                    <BreadCrumbs isVisible={true}/>
-                    {props.children}
+                    <RolePermissionMiddleware requiredPermissions={props.permissions}>
+                        <BreadCrumbs isVisible={true}/>
+                        {props.children}
+                    </RolePermissionMiddleware>
                 </FullPageLayout>
             </FullPageLayout>
         </FullPageLayout>
diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx
new file mode 100644
index 0000000..1506661
--- /dev/null
+++ b/src/layouts/index.jsx
@@ -0,0 +1,20 @@
+import DashboardLayout from "@/layouts/DashboardLayout";
+import {Fragment} from "react";
+
+const layoutList = {
+    DashboardLayout
+}
+
+const Layout = ({layout = {}, children}) => {
+
+    const Component = layoutList[layout?.name] || Fragment
+    const props = layout.props || {}
+
+    return (
+        <Component {...props}>
+            {children}
+        </Component>
+    )
+}
+
+export default Layout
\ No newline at end of file
diff --git a/src/middlewares/RolePermission.jsx b/src/middlewares/RolePermission.jsx
index 4b1cc8a..c546220 100644
--- a/src/middlewares/RolePermission.jsx
+++ b/src/middlewares/RolePermission.jsx
@@ -1,14 +1,14 @@
 import useUser from "@/lib/app/hooks/useUser";
 import RolePermissionComponent from "@/core/components/Middleware/RolePermissionComponent";
 
-const RolePermissionMiddleware = ({children, requiredPermissions}) => {
+const RolePermissionMiddleware = ({children, requiredPermissions = []}) => {
     const {user} = useUser();
 
-    const hasPermission = requiredPermissions.some((permission) =>
+    const hasPermission = requiredPermissions.length === 0 ? true : requiredPermissions.some((permission) =>
         user?.permissions?.includes(permission)
     );
 
-    return !hasPermission ? <RolePermissionComponent /> : <>{children}</>;
+    return !hasPermission ? <RolePermissionComponent/> : <>{children}</>;
 };
 
 export default RolePermissionMiddleware;
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 29ec464..342f2a4 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -7,6 +7,7 @@ import {UserProvider} from "@/lib/app/contexts/user";
 import "moment/locale/fa";
 import {NextIntlProvider} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
+import Layout from "@/layouts";
 
 const App = ({Component, pageProps}) => {
 
@@ -19,7 +20,9 @@ const App = ({Component, pageProps}) => {
                             {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
                             <LoadingProvider>
                                 <AppLayout isBot={pageProps.isBot}>
-                                    <Component {...pageProps} />
+                                    <Layout layout={pageProps.layout}>
+                                        <Component {...pageProps} />
+                                    </Layout>
                                 </AppLayout>
                             </LoadingProvider>
                         </MuiLayout>
diff --git a/src/pages/dashboard/change-password/index.jsx b/src/pages/dashboard/change-password/index.jsx
index 670e184..d23721d 100644
--- a/src/pages/dashboard/change-password/index.jsx
+++ b/src/pages/dashboard/change-password/index.jsx
@@ -1,12 +1,9 @@
 import DashboardChangePasswordComponent from "@/components/dashboard/change-password";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
 export default function LoanFollowUp() {
     return (
-        <WithAuthMiddleware>
-            <DashboardChangePasswordComponent/>
-        </WithAuthMiddleware>
+        <DashboardChangePasswordComponent/>
     );
 }
 
@@ -17,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.change_password",
             isBot,
+            layout: {name: 'DashboardLayout'}
         },
     };
 }
diff --git a/src/pages/dashboard/commercial-chief/index.jsx b/src/pages/dashboard/commercial-chief/index.jsx
index 841d668..e5dc96c 100644
--- a/src/pages/dashboard/commercial-chief/index.jsx
+++ b/src/pages/dashboard/commercial-chief/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardCommercialChiefComponent from "@/components/dashboard/commercial-chief";
 
-const requiredPermissions = ["manage_commercial_refahi"];
 export default function CommercialChief() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardCommercialChiefComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardCommercialChiefComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.commercial_chief_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_commercial_refahi"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/development-assistant/index.jsx b/src/pages/dashboard/development-assistant/index.jsx
index aaaea39..6f1a0ff 100644
--- a/src/pages/dashboard/development-assistant/index.jsx
+++ b/src/pages/dashboard/development-assistant/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardDevelopmentAssistantComponent from "@/components/dashboard/development-assistant";
 
-const requiredPermissions = ["manage_development_refahi"];
 export default function DevelopmentAssistant() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardDevelopmentAssistantComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardDevelopmentAssistantComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.development_assistant_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_development_refahi"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/edit-profile/index.jsx b/src/pages/dashboard/edit-profile/index.jsx
index 9460506..dede28e 100644
--- a/src/pages/dashboard/edit-profile/index.jsx
+++ b/src/pages/dashboard/edit-profile/index.jsx
@@ -1,12 +1,9 @@
 import DashboardEditProfile from "@/components/dashboard/edit-profile";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
 export default function LoanFollowUp() {
     return (
-        <WithAuthMiddleware>
-            <DashboardEditProfile/>
-        </WithAuthMiddleware>
+        <DashboardEditProfile/>
     );
 }
 
@@ -17,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.edit_profile",
             isBot,
+            layout: {name: 'DashboardLayout'}
         },
     };
 }
diff --git a/src/pages/dashboard/expert-management/index.jsx b/src/pages/dashboard/expert-management/index.jsx
index ce91ee6..eab73fc 100644
--- a/src/pages/dashboard/expert-management/index.jsx
+++ b/src/pages/dashboard/expert-management/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardExpertManagementComponent from "@/components/dashboard/expert-management";
 
-const requiredPermissions = ["manage_transportation_navgan"];
 export default function ExpertManagement() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardExpertManagementComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardExpertManagementComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.expert_management",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_transportation_navgan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/index.jsx b/src/pages/dashboard/index.jsx
index af824d5..f3cf481 100644
--- a/src/pages/dashboard/index.jsx
+++ b/src/pages/dashboard/index.jsx
@@ -1,12 +1,9 @@
 import DashboardFirstComponent from "@/components/dashboard/first";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
 export default function Dashboard() {
     return (
-        <WithAuthMiddleware>
-            <DashboardFirstComponent/>
-        </WithAuthMiddleware>
+        <DashboardFirstComponent/>
     );
 }
 
@@ -17,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.dashboard_page",
             isBot,
+            layout: {name: 'DashboardLayout'}
         },
     };
 }
diff --git a/src/pages/dashboard/inspector-expert/index.jsx b/src/pages/dashboard/inspector-expert/index.jsx
index 902a7ec..f953f30 100644
--- a/src/pages/dashboard/inspector-expert/index.jsx
+++ b/src/pages/dashboard/inspector-expert/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardInspectorExpertComponent from "@/components/dashboard/inspector-expert";
 
-const requiredPermissions = ["manage_inspector_refahi"];
 export default function InspectorExpert() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardInspectorExpertComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardInspectorExpertComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.inspector_expert_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_inspector_refahi"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/machinery-expert/index.jsx b/src/pages/dashboard/machinery-expert/index.jsx
index fc0c248..5b2f945 100644
--- a/src/pages/dashboard/machinery-expert/index.jsx
+++ b/src/pages/dashboard/machinery-expert/index.jsx
@@ -1,16 +1,9 @@
 import DashboardMachineryOfficeComponent from "@/components/dashboard/machinary-office";
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
-const requiredPermissions = ["manage_machinery_navgan"];
 export default function PassengerOffice() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardMachineryOfficeComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardMachineryOfficeComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.machinary_office_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_machinery_navgan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/navgan-loan-management/index.jsx b/src/pages/dashboard/navgan-loan-management/index.jsx
index 86fb592..61922ad 100644
--- a/src/pages/dashboard/navgan-loan-management/index.jsx
+++ b/src/pages/dashboard/navgan-loan-management/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardNavganLoanManagementComponent from "@/components/dashboard/navgan-loan-management";
 
-const requiredPermissions = ["manage_navgan_loan"];
 export default function NavganLoanManagement() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardNavganLoanManagementComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardNavganLoanManagementComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.loan_management_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_navgan_loan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/navgan-province-manager/index.jsx b/src/pages/dashboard/navgan-province-manager/index.jsx
index fde7e8c..b0c0be6 100644
--- a/src/pages/dashboard/navgan-province-manager/index.jsx
+++ b/src/pages/dashboard/navgan-province-manager/index.jsx
@@ -1,16 +1,9 @@
 import DashboardNavganProvinceManagerComponent from "src/components/dashboard/navgan-province-manager";
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
-const requiredPermissions = ["manage_province_affairs_navgan"];
 export default function PassengerOffice() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardNavganProvinceManagerComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardNavganProvinceManagerComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.province_manager_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_province_affairs_navgan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/passenger-boss/index.jsx b/src/pages/dashboard/passenger-boss/index.jsx
index 839488e..a549f74 100644
--- a/src/pages/dashboard/passenger-boss/index.jsx
+++ b/src/pages/dashboard/passenger-boss/index.jsx
@@ -1,16 +1,9 @@
 import DashboardPassengerBossComponent from "@/components/dashboard/passenger-boss";
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
-const requiredPermissions = ["manage_province_working_group_navgan"];
 export default function PassengerBoss() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardPassengerBossComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardPassengerBossComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.passenger_boss_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_province_working_group_navgan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/passenger-office-chief/index.jsx b/src/pages/dashboard/passenger-office-chief/index.jsx
index f92ae2f..03aa612 100644
--- a/src/pages/dashboard/passenger-office-chief/index.jsx
+++ b/src/pages/dashboard/passenger-office-chief/index.jsx
@@ -1,16 +1,9 @@
 import DashboardPassengerOfficeComponent from "@/components/dashboard/passenger-office";
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
-const requiredPermissions = ["manage_passenger_office_navgan"];
 export default function PassengerOffice() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardPassengerOfficeComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardPassengerOfficeComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.passenger_office_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_passenger_office_navgan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/province-head-expert/index.jsx b/src/pages/dashboard/province-head-expert/index.jsx
index e288c37..64bffb1 100644
--- a/src/pages/dashboard/province-head-expert/index.jsx
+++ b/src/pages/dashboard/province-head-expert/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardProvinceHeadExpertComponent from "@/components/dashboard/province-head-expert";
 
-const requiredPermissions = ["manage_province_headquarter_refahi"];
 export default function ProvinceHeadExpertOffice() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardProvinceHeadExpertComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardProvinceHeadExpertComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.province_head_expert",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_province_headquarter_refahi"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/refahi-loan-management/index.jsx b/src/pages/dashboard/refahi-loan-management/index.jsx
index e513af3..1ae6954 100644
--- a/src/pages/dashboard/refahi-loan-management/index.jsx
+++ b/src/pages/dashboard/refahi-loan-management/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardRefahiLoanManagementComponent from "@/components/dashboard/refahi-loan-management";
 
-const requiredPermissions = ["manage_refahi_loan"];
 export default function RefahiLoanManagement() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardRefahiLoanManagementComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardRefahiLoanManagementComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.loan_management_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_refahi_loan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/refahi-province-manager/index.jsx b/src/pages/dashboard/refahi-province-manager/index.jsx
index baac91b..9922b50 100644
--- a/src/pages/dashboard/refahi-province-manager/index.jsx
+++ b/src/pages/dashboard/refahi-province-manager/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardRefahiProvinceManagerComponent from "@/components/dashboard/refahi-province-manager";
 
-const requiredPermissions = ["manage_province_affairs_refahi"];
 export default function RefahiProvinceManager() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardRefahiProvinceManagerComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardRefahiProvinceManagerComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.province_manager_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_province_affairs_refahi"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/role-management/index.jsx b/src/pages/dashboard/role-management/index.jsx
index c309729..97238db 100644
--- a/src/pages/dashboard/role-management/index.jsx
+++ b/src/pages/dashboard/role-management/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardRoleManagementComponent from "@/components/dashboard/role-management";
 
-const requiredPermissions = ["manage_roles"];
 export default function RoleManagement() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardRoleManagementComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardRoleManagementComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.role_management_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_roles"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/transportation-assistant/index.jsx b/src/pages/dashboard/transportation-assistant/index.jsx
index ea58847..eccb330 100644
--- a/src/pages/dashboard/transportation-assistant/index.jsx
+++ b/src/pages/dashboard/transportation-assistant/index.jsx
@@ -1,16 +1,9 @@
 import DashboardTransportationAssistanceComponent from "@/components/dashboard/transportation-assistance";
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 
-const requiredPermissions = ["manage_transportation_navgan"];
 export default function TransportationAssistance() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardTransportationAssistanceComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardTransportationAssistanceComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.transportation_assistance",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_transportation_navgan"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/user-management/index.jsx b/src/pages/dashboard/user-management/index.jsx
index 5a43454..f0f9b24 100644
--- a/src/pages/dashboard/user-management/index.jsx
+++ b/src/pages/dashboard/user-management/index.jsx
@@ -1,16 +1,9 @@
-import RolePermissionMiddleware from "@/middlewares/RolePermission";
-import WithAuthMiddleware from "@/middlewares/WithAuth";
 import {parse} from "next-useragent";
 import DashboardUserManagementComponent from "@/components/dashboard/user-management";
 
-const requiredPermissions = ["manage_users"];
 export default function UserManagement() {
     return (
-        <WithAuthMiddleware>
-            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
-                <DashboardUserManagementComponent/>
-            </RolePermissionMiddleware>
-        </WithAuthMiddleware>
+        <DashboardUserManagementComponent/>
     );
 }
 
@@ -21,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.user_management_page",
             isBot,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_users"]}}
         },
     };
 }