diff --git a/src/components/dashboard/reports/Filter/index.jsx b/src/components/dashboard/reports/Filter/index.jsx
new file mode 100644
index 0000000..3c8ec43
--- /dev/null
+++ b/src/components/dashboard/reports/Filter/index.jsx
@@ -0,0 +1,137 @@
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Button,
+    Chip,
+    FormControl,
+    InputLabel,
+    MenuItem,
+    OutlinedInput,
+    Select,
+    Stack,
+    Typography
+} from "@mui/material";
+import {useFormik} from "formik";
+import {useState} from "react";
+import QueryStatsIcon from '@mui/icons-material/QueryStats';
+
+const provinceList = [
+    'قزوین',
+    'تبریز',
+    'مشهد',
+];
+const yearList = [
+    '1401',
+    '1402',
+    '1403',
+]
+
+const Filter = ({title}) => {
+    const [province, setProvince] = useState([]);
+    const [year, setYear] = useState([]);
+    const provinceChange = (event) => {
+        const {
+            target: {value},
+        } = event;
+        setProvince(typeof value === 'string' ? value.split(',') : value);
+    };
+    const yearChange = (event) => {
+        const {
+            target: {value},
+        } = event;
+        setYear(typeof value === 'string' ? value.split(',') : value);
+    };
+    const formik = useFormik({
+        initialValues: {
+            date: "",
+            province_id: "",
+        }, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("date", values.date);
+            formData.append("province_id", values.province_id);
+
+        },
+    });
+
+    return (
+        <Accordion elevation='0' sx={{
+            mb: 2,
+            borderBottom: 2,
+            borderBottomColor: "divider",
+            backgroundColor: "#f8f8f8"
+        }}>
+            <AccordionSummary sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
+                <Box>
+                    <Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
+                </Box>
+                <Box>
+                    <Button variant="contained" size="small" endIcon={<QueryStatsIcon/>}>فیلتر</Button>
+                </Box>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center",}}>
+                    <FormControl sx={{width: 300, mx: 1}}>
+                        <InputLabel size="small">انتخاب استان</InputLabel>
+                        <Select
+                            multiple
+                            size="small"
+                            variant="outlined"
+                            value={province}
+                            onChange={provinceChange}
+                            input={<OutlinedInput label="انتخاب استان"/>}
+                            renderValue={(selected) => (
+                                <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
+                                    {selected.map((value) => (
+                                        <Chip key={value} label={value}
+                                              sx={{color: "#fff", backgroundColor: "primary.dark"}}/>
+                                    ))}
+                                </Box>
+                            )}
+                        >
+                            {provinceList.map((province) => (
+                                <MenuItem
+                                    key={province}
+                                    value={province}
+                                >
+                                    {province}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                    <FormControl sx={{width: 300, mx: 1}}>
+                        <InputLabel size="small">انتخاب سال</InputLabel>
+                        <Select
+                            multiple
+                            size="small"
+                            variant="outlined"
+                            value={year}
+                            onChange={yearChange}
+                            input={<OutlinedInput label="انتخاب سال"/>}
+                            renderValue={(selected) => (
+                                <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
+                                    {selected.map((value) => (
+                                        <Chip key={value} label={value}
+                                              sx={{color: "#fff", backgroundColor: "primary.dark"}}/>
+                                    ))}
+                                </Box>
+                            )}
+                        >
+                            {yearList.map((year) => (
+                                <MenuItem
+                                    key={year}
+                                    value={year}
+                                >
+                                    {year}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    )
+};
+
+export default Filter;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/LoanDistribution/PieChart.jsx b/src/components/dashboard/reports/LoanDistribution/PieChart.jsx
new file mode 100644
index 0000000..4dcc225
--- /dev/null
+++ b/src/components/dashboard/reports/LoanDistribution/PieChart.jsx
@@ -0,0 +1,37 @@
+import Chart from "@/core/components/Chart";
+
+const Pie = ({data}) => {
+    const specialOption = {
+        title: {
+            text: undefined,
+        },
+        plotOptions: {
+            pie: {
+                rings: {
+                    strokeWidth: 3,
+                    strokeColor: '#fff',
+                },
+                fill: {
+                    colors: ['red', 'blue', 'green', 'yellow', 'pink']
+                }
+            },
+        },
+        fill: {
+            opacity: 0.9,
+        },
+        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+        dataLabels: {
+            enabled: true,
+            style: {
+                fontSize: '14px',
+                fontWeight: 300,
+            },
+        },
+    };
+    const series = [14, 23, 21, 17, 15]
+    return (
+        <Chart chartId="LoanDistributionPie" type="pie" specialOption={specialOption} series={series}/>
+    )
+};
+
+export default Pie;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx b/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx
new file mode 100644
index 0000000..97599c3
--- /dev/null
+++ b/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx
@@ -0,0 +1,37 @@
+import Chart from "@/core/components/Chart";
+
+const PolarChart = ({data}) => {
+    const specialOption = {
+        title: {
+            text: undefined,
+        },
+        plotOptions: {
+            polarArea: {
+                rings: {
+                    strokeWidth: 2,
+                    strokeColor: '#e3e3e3',
+                },
+                fill: {
+                    colors: ['red', 'blue', 'green', 'yellow', 'pink']
+                }
+            },
+        },
+        fill: {
+            opacity: 0.9,
+        },
+        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+        dataLabels: {
+            enabled: true,
+            style: {
+                fontSize: '14px',
+                fontWeight: 400,
+            },
+        },
+    };
+    const series = [14, 23, 21, 17, 15]
+    return (
+        <Chart chartId="LoanDistributionPolar" type="polarArea" specialOption={specialOption} series={series}/>
+    )
+};
+
+export default PolarChart;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/LoanDistribution/index.jsx b/src/components/dashboard/reports/LoanDistribution/index.jsx
new file mode 100644
index 0000000..f90529a
--- /dev/null
+++ b/src/components/dashboard/reports/LoanDistribution/index.jsx
@@ -0,0 +1,57 @@
+import {Chip, Divider, Grid, Paper} from "@mui/material";
+import PolarChart from "./PolarChart";
+import Pie from "./PieChart";
+
+const fakeData = [
+    {name: "آذربایجان شرقی", data: 0},
+    {name: "آذربایجان غربی", data: 33},
+    {name: "اردبیل", data: 90},
+    {name: "اصفهان", data: 30},
+    {name: "البرز", data: 70},
+    {name: "ایلام", data: 32},
+    {name: "بوشهر", data: 12},
+    {name: "تهران", data: 44},
+    {name: "چهارمحال و بختیاری", data: 95},
+    {name: "خراسان جنوبی", data: 30},
+    {name: "خراسان رضوی", data: 70},
+    {name: "خراسان شمالی", data: 10},
+    {name: "خوزستان", data: 28},
+    {name: "زنجان", data: 85},
+    {name: "سمنان", data: 30},
+    {name: "سیستان و بلوچستان", data: 70},
+    {name: "فارس", data: 10},
+    {name: "قزوین", data: 12},
+    {name: "قم", data: 40},
+    {name: "کردستان", data: 85},
+    {name: "کرمان", data: 30},
+    {name: "کرمانشاه", data: 67},
+    {name: "کهگیلویه و بویراحمد", data: 100},
+    {name: "گلستان", data: 97},
+    {name: "گیلان", data: 5},
+    {name: "لرستان", data: 27},
+    {name: "مازندران", data: 31},
+    {name: "مرکزی", data: 37},
+    {name: "هرمزگان", data: 46},
+    {name: "همدان", data: 52},
+    {name: "یزد", data: 60}
+];
+
+const LoanDistribution = (props) => {
+    return (
+        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, py: 2, background: "#f7f7f7e6"}}>
+            <Divider variant="middle" textAlign="center">
+                <Chip variant="outlined" label="درصد توضیع وام ها در هر مرحله" sx={{color: "#7e7e7e"}}/>
+            </Divider>
+            <Grid container spacing={2} sx={{justifyContent: "space-between"}}>
+                <Grid item xs={5} sx={{height: "300px"}}>
+                    <PolarChart data={fakeData}/>
+                </Grid>
+                <Grid item xs={5} sx={{height: "300px"}}>
+                    <Pie data={fakeData}/>
+                </Grid>
+            </Grid>
+        </Paper>
+    )
+};
+
+export default LoanDistribution;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/BarChart.jsx b/src/components/dashboard/reports/LoanProgress/BarChart.jsx
similarity index 85%
rename from src/components/dashboard/reports/BarChart.jsx
rename to src/components/dashboard/reports/LoanProgress/BarChart.jsx
index c6dde22..37e85a8 100644
--- a/src/components/dashboard/reports/BarChart.jsx
+++ b/src/components/dashboard/reports/LoanProgress/BarChart.jsx
@@ -41,12 +41,7 @@ const BarChart = ({data}) => {
     let colorArray = data.map(obj => calculateGradientColor(obj.data));
     const specialOption = {
         title: {
-            text: "درصد پیشرفت تسویه وام",
-            align: "center",
-            style: {
-                color: "#7e7e7e",
-                fontWeight: 500
-            }
+            text: undefined,
         },
         plotOptions: {
             bar: {
@@ -72,10 +67,19 @@ const BarChart = ({data}) => {
         },
         yaxis: {
             min: 0,
-            max: 100
+            max: 100,
+            labels: {
+                formatter: function (val) {
+                    return val + '%'
+                }
+            }
         },
         dataLabels: {
-            enabled: true
+            enabled: true,
+            style: {
+                fontSize: '14px',
+                fontWeight: 400,
+            },
         },
     };
     const series = [{
@@ -83,7 +87,7 @@ const BarChart = ({data}) => {
         data: usableArray
     }]
     return (
-        <Chart chartId="درصد پیشرفت تسویه وام" type="bar" specialOption={specialOption} series={series}/>
+        <Chart chartId="LoanProgressBar" type="bar" specialOption={specialOption} series={series}/>
     )
 };
 
diff --git a/src/components/dashboard/reports/LoanProgress/index.jsx b/src/components/dashboard/reports/LoanProgress/index.jsx
new file mode 100644
index 0000000..54db36d
--- /dev/null
+++ b/src/components/dashboard/reports/LoanProgress/index.jsx
@@ -0,0 +1,52 @@
+import {Grid, Paper} from "@mui/material";
+import BarChart from "./BarChart";
+import Filter from "../Filter";
+
+const fakeData = [
+    {name: "آذربایجان شرقی", data: 0},
+    {name: "آذربایجان غربی", data: 33},
+    {name: "اردبیل", data: 90},
+    {name: "اصفهان", data: 30},
+    {name: "البرز", data: 70},
+    {name: "ایلام", data: 32},
+    {name: "بوشهر", data: 12},
+    {name: "تهران", data: 44},
+    {name: "چهارمحال و بختیاری", data: 95},
+    {name: "خراسان جنوبی", data: 30},
+    {name: "خراسان رضوی", data: 70},
+    {name: "خراسان شمالی", data: 10},
+    {name: "خوزستان", data: 28},
+    {name: "زنجان", data: 85},
+    {name: "سمنان", data: 30},
+    {name: "سیستان و بلوچستان", data: 70},
+    {name: "فارس", data: 10},
+    {name: "قزوین", data: 12},
+    {name: "قم", data: 40},
+    {name: "کردستان", data: 85},
+    {name: "کرمان", data: 30},
+    {name: "کرمانشاه", data: 67},
+    {name: "کهگیلویه و بویراحمد", data: 100},
+    {name: "گلستان", data: 97},
+    {name: "گیلان", data: 5},
+    {name: "لرستان", data: 27},
+    {name: "مازندران", data: 31},
+    {name: "مرکزی", data: 37},
+    {name: "هرمزگان", data: 46},
+    {name: "همدان", data: 52},
+    {name: "یزد", data: 60}
+];
+
+const LoanProgress = (props) => {
+    return (
+        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
+            <Filter title="درصد پیشرفت تسویه وام"/>
+            <Grid container spacing={2}>
+                <Grid item xs={12} sx={{height: "400px"}}>
+                    <BarChart data={fakeData}/>
+                </Grid>
+            </Grid>
+        </Paper>
+    )
+};
+
+export default LoanProgress;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/PieChart.jsx b/src/components/dashboard/reports/PieChart.jsx
deleted file mode 100644
index 123c2f6..0000000
--- a/src/components/dashboard/reports/PieChart.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Chart from "@/core/components/Chart";
-
-const Pie = ({data}) => {
-    const specialOption = {
-        title: {
-            text: "کشوری",
-            align: "center",
-            style: {
-                color: "#7e7e7e",
-                fontWeight: 500
-            }
-        },
-        // plotOptions: {
-        //     pie: {
-        //         rings: {
-        //             strokeWidth: 3,
-        //             strokeColor: '#fff',
-        //         },
-        //         spokes: {
-        //             strokeWidth: 3,
-        //             connectorColors: '#fff',
-        //         }
-        //     },
-        // },
-        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
-        colors: ['red', 'blue', 'green', 'yellow', 'pink'],
-        dataLabels: {
-            enabled: true
-        },
-    };
-    const series = [14, 23, 21, 17, 15]
-    return (
-        <Chart type="pie" specialOption={specialOption} series={series}/>
-    )
-};
-
-export default Pie;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/PolarChart.jsx b/src/components/dashboard/reports/PolarChart.jsx
deleted file mode 100644
index db1e533..0000000
--- a/src/components/dashboard/reports/PolarChart.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Chart from "@/core/components/Chart";
-
-const PolarChart = ({data}) => {
-    const specialOption = {
-        title: {
-            text: "کشوری",
-            align: "center",
-            style: {
-                color: "#7e7e7e",
-                fontWeight: 500
-            }
-        },
-        plotOptions: {
-            polarArea: {
-                rings: {
-                    strokeWidth: 3,
-                    strokeColor: '#fff',
-                },
-                spokes: {
-                    strokeWidth: 3,
-                    connectorColors: '#fff',
-                }
-            },
-        },
-        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
-        colors: ['red', 'blue', 'green', 'yellow', 'pink'],
-        dataLabels: {
-            enabled: true
-        },
-    };
-    const series = [14, 23, 21, 17, 15]
-    return (
-        <Chart type="polarArea" specialOption={specialOption} series={series}/>
-    )
-};
-
-export default PolarChart;
\ No newline at end of file
diff --git a/src/components/dashboard/reports/index.jsx b/src/components/dashboard/reports/index.jsx
index 9611b78..1626104 100644
--- a/src/components/dashboard/reports/index.jsx
+++ b/src/components/dashboard/reports/index.jsx
@@ -1,61 +1,11 @@
-import {Chip, Divider, Grid, Paper} from "@mui/material";
-import BarChart from "@/components/dashboard/reports/BarChart";
-import PolarChart from "@/components/dashboard/reports/PolarChart";
-import Pie from "@/components/dashboard/reports/PieChart";
-
-const fakeData = [
-    {name: "آذربایجان شرقی", data: 0},
-    {name: "آذربایجان غربی", data: 33},
-    {name: "اردبیل", data: 90},
-    {name: "اصفهان", data: 30},
-    {name: "البرز", data: 70},
-    {name: "ایلام", data: 32},
-    {name: "بوشهر", data: 12},
-    {name: "تهران", data: 44},
-    {name: "چهارمحال و بختیاری", data: 95},
-    {name: "خراسان جنوبی", data: 30},
-    {name: "خراسان رضوی", data: 70},
-    {name: "خراسان شمالی", data: 10},
-    {name: "خوزستان", data: 28},
-    {name: "زنجان", data: 85},
-    {name: "سمنان", data: 30},
-    {name: "سیستان و بلوچستان", data: 70},
-    {name: "فارس", data: 10},
-    {name: "قزوین", data: 12},
-    {name: "قم", data: 40},
-    {name: "کردستان", data: 85},
-    {name: "کرمان", data: 30},
-    {name: "کرمانشاه", data: 67},
-    {name: "کهگیلویه و بویراحمد", data: 100},
-    {name: "گلستان", data: 97},
-    {name: "گیلان", data: 5},
-    {name: "لرستان", data: 27},
-    {name: "مازندران", data: 31},
-    {name: "مرکزی", data: 37},
-    {name: "هرمزگان", data: 46},
-    {name: "همدان", data: 52},
-    {name: "یزد", data: 60}
-];
+import LoanProgress from "@/components/dashboard/reports/LoanProgress";
+import LoanDistribution from "@/components/dashboard/reports/LoanDistribution";
 
 const DashboardReportsComponent = (props) => {
     return (
         <>
-            <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, py: 2, background: "#f6f6f6"}}>
-                <Grid container spacing={2}>
-                    <Grid item xs={12} sx={{height: "400px"}}>
-                        <BarChart data={fakeData}/>
-                    </Grid>
-                </Grid>
-                <Divider variant="middle" textAlign="center"><Chip label="درصد توضیع وام ها در هر مرحله"/></Divider>
-                <Grid container spacing={2} sx={{justifyContent: "space-between"}}>
-                    <Grid item xs={5} sx={{height: "300px"}}>
-                        <PolarChart data={fakeData}/>
-                    </Grid>
-                    <Grid item xs={5} sx={{height: "300px"}}>
-                        <Pie data={fakeData}/>
-                    </Grid>
-                </Grid>
-            </Paper>
+            <LoanProgress/>
+            <LoanDistribution/>
         </>
     )
 };