diff --git a/src/components/dashboard/reports/BarChart.jsx b/src/components/dashboard/reports/BarChart.jsx
new file mode 100644
index 0000000..461b01f
--- /dev/null
+++ b/src/components/dashboard/reports/BarChart.jsx
@@ -0,0 +1,40 @@
+import {Grid} from "@mui/material";
+import Chart from "@/core/components/Chart";
+
+const DashboardReportsComponent = (props) => {
+    const specialOption = {
+        title: {
+            text: "مامامیا ماماسیتا",
+            align: "center"
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 1,
+                horizontal: false,
+            }
+        },
+        dataLabels: {
+            enabled: true
+        },
+    };
+    const series = [{
+        name: 'اطلاعی ندارم',
+        data: [
+            {x: 'قم', y: 300},
+            {x: 'شیراز', y: 240},
+            {x: 'اصفهان', y: 190},
+            {x: 'تهران', y: 150},
+            {x: 'کرج', y: 120},
+            {x: 'زنجان', y: 250},
+            {x: 'سیستان بلوچستان', y: 180},
+            {x: 'هرمزگان', y: 260}
+        ]
+    }]
+    return (
+        <Grid item xs={8}>
+            <Chart type="bar" specialOption={specialOption} series={series}/>
+        </Grid>
+    )
+};
+
+export default DashboardReportsComponent;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/PolarChart.jsx b/src/components/dashboard/reports/PolarChart.jsx
new file mode 100644
index 0000000..4af549a
--- /dev/null
+++ b/src/components/dashboard/reports/PolarChart.jsx
@@ -0,0 +1,39 @@
+import {Grid} from "@mui/material";
+import Chart from "@/core/components/Chart";
+
+const DashboardReportsComponent = (props) => {
+    const specialOption = {
+        title: {
+            text: "مامامیا ماماسیتا",
+            align: "center"
+        },
+        stroke: {
+            colors: ['#fff']
+        },
+        responsive: [{
+            breakpoint: 480,
+            options: {
+                chart: {
+                    width: 200
+                },
+                legend: {
+                    position: 'bottom'
+                }
+            }
+        }],
+        dataLabels: {
+            enabled: true
+        },
+    };
+    const series = [{
+        name: 'اطلاعی ندارم',
+        data: [14, 23, 21, 17, 15, 10, 12, 17, 21]
+    }]
+    return (
+        <Grid item xs={4}>
+            <Chart type="polarArea" specialOption={specialOption} series={series}/>
+        </Grid>
+    )
+};
+
+export default DashboardReportsComponent;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/index.jsx b/src/components/dashboard/reports/index.jsx
index 3b9665d..681b1ca 100644
--- a/src/components/dashboard/reports/index.jsx
+++ b/src/components/dashboard/reports/index.jsx
@@ -1,5 +1,42 @@
-const DashboardReportsComponent = (props) => (
-    <>hiiiiii</>
-);
+import {Grid} from "@mui/material";
+import BarChart from "@/components/dashboard/reports/BarChart";
+import PolarChart from "@/components/dashboard/reports/PolarChart";
+
+const DashboardReportsComponent = (props) => {
+    const specialOption = {
+        title: {
+            text: "مامامیا ماماسیتا",
+            align: "center"
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 1,
+                horizontal: false,
+            }
+        },
+        dataLabels: {
+            enabled: true
+        },
+    };
+    const series = [{
+        name: 'اطلاعی ندارم',
+        data: [
+            {x: 'قم', y: 300},
+            {x: 'شیراز', y: 240},
+            {x: 'اصفهان', y: 190},
+            {x: 'تهران', y: 150},
+            {x: 'کرج', y: 120},
+            {x: 'زنجان', y: 250},
+            {x: 'سیستان بلوچستان', y: 180},
+            {x: 'هرمزگان', y: 260}
+        ]
+    }]
+    return (
+        <Grid container spacing={2} sx={{height: "500px"}}>
+            <BarChart/>
+            <PolarChart/>
+        </Grid>
+    )
+};
 
 export default DashboardReportsComponent;
\ No newline at end of file
diff --git a/src/pages/dashboard/expert-management/index.jsx b/src/pages/dashboard/expert-management/index.jsx
index eab73fc..2db2389 100644
--- a/src/pages/dashboard/expert-management/index.jsx
+++ b/src/pages/dashboard/expert-management/index.jsx
@@ -14,7 +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"]}}
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_experts"]}}
         },
     };
 }
diff --git a/src/pages/dashboard/reports/index.jsx b/src/pages/dashboard/reports/index.jsx
index 4590184..9dba421 100644
--- a/src/pages/dashboard/reports/index.jsx
+++ b/src/pages/dashboard/reports/index.jsx
@@ -1,15 +1,9 @@
-import WithAuthMiddleware from "@/middlewares/WithAuth";
-import {parse} from "next-useragent";
 import DashboardReportsComponent from "@/components/dashboard/reports";
+import {parse} from "next-useragent";
 
-// const requiredPermissions = ["reports"];
 export default function Reports() {
     return (
-        <WithAuthMiddleware>
-            {/*<RolePermissionMiddleware requiredPermissions={requiredPermissions}>*/}
-            <DashboardReportsComponent/>
-            {/*</RolePermissionMiddleware>*/}
-        </WithAuthMiddleware>
+        <DashboardReportsComponent/>
     );
 }
 
@@ -20,6 +14,7 @@ export async function getServerSideProps({req, locale}) {
             messages: (await import(`&/locales/${locale}/app.json`)).default,
             title: "Dashboard.reports",
             isBot,
+            layout: {name: 'DashboardLayout'}
         },
     };
 }