diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index b36f081..12a1600 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -523,8 +523,10 @@
     "years": "سال های",
     "text_field_loading_provinces_list": "درحال دریافت استان ها",
     "text_field_error_fetching_provinces": "خطا در دریافت استان ها",
+    "filter_btn": "فیلتر",
     "filter": "اعمال فیلتر",
     "excel_export": "خروجی به اکسل",
-    "export": "دریافت"
+    "export": "دریافت",
+    "update_again": "بروزرسانی مجدد"
   }
 }
diff --git a/src/components/dashboard/reports/ExcelExport/index.jsx b/src/components/dashboard/reports/ExcelExport/index.jsx
index f095cc7..472d8b8 100644
--- a/src/components/dashboard/reports/ExcelExport/index.jsx
+++ b/src/components/dashboard/reports/ExcelExport/index.jsx
@@ -1,4 +1,13 @@
-import {Accordion, AccordionDetails, AccordionSummary, Box, Button, Stack, Typography} from "@mui/material";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Button,
+    CircularProgress,
+    Stack,
+    Typography
+} from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import BackupIcon from '@mui/icons-material/Backup';
@@ -53,7 +62,11 @@ const ExcelExport = () => {
                 ? `?${fields.map((option) => `${option.key}=${option.value}`).join('&')}`
                 : '';
             setSubmitting(true)
-            requestServer(`${GET_EXPORT}${queryString}`, 'GET', {auth: true, requestOptions: {responseType: 'blob'}})
+            requestServer(`${GET_EXPORT}${queryString}`, 'GET', {
+                auth: true,
+                notification: false,
+                requestOptions: {responseType: 'blob'}
+            })
                 .then((response) => {
                     const filename = `گزارش درخواست های وام ناوگان تاریخ_${moment().format('jYYYY_jMM_jDD')}.xlsx`;
                     FileSaver.saveAs(response.data, filename);
@@ -85,7 +98,13 @@ const ExcelExport = () => {
                     </Box>
                 </AccordionSummary>
                 <AccordionDetails
-                    sx={{display: "flex", justifyContent: "space-between", alignItems: "center", mx: "auto",}}>
+                    sx={{
+                        display: "flex",
+                        flexDirection: {xs: "column", sm: "row"},
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        mx: "auto",
+                    }}>
                     <Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center", flexWrap: 'wrap'}}>
                         {filter_by_province ?
                             <ProvinceFilter formik={formik} multiple={filter_by_province.multiple}
@@ -100,7 +119,9 @@ const ExcelExport = () => {
                         <Button onClick={formik.handleSubmit} variant="contained"
                                 disabled={formik.isSubmitting}
                                 sx={{backgroundColor: "success.main"}}
-                                startIcon={<BackupIcon/>}
+                                startIcon={formik.isSubmitting ?
+                                    <CircularProgress size={20} color="inherit"/> :
+                                    <BackupIcon/>}
                         >
                             {t("filters.export")}
                         </Button>
diff --git a/src/components/dashboard/reports/Filter/ProvinceFilter.jsx b/src/components/dashboard/reports/Filter/ProvinceFilter.jsx
index 16a1133..7dacacc 100644
--- a/src/components/dashboard/reports/Filter/ProvinceFilter.jsx
+++ b/src/components/dashboard/reports/Filter/ProvinceFilter.jsx
@@ -47,7 +47,7 @@ const ProvinceFilter = ({formik, multiple, setFilteredText}) => {
         ? formik.values.province_id.length === 0 :
         formik.values.province_id === "";
     return (
-        <FormControl sx={{width: 300, mx: 1}}>
+        <FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
             <InputLabel size="small">{t("filters.choose_province")}</InputLabel>
             <Select
                 name="province_id"
diff --git a/src/components/dashboard/reports/Filter/YearFilter.jsx b/src/components/dashboard/reports/Filter/YearFilter.jsx
index 66a3db6..a18e9db 100644
--- a/src/components/dashboard/reports/Filter/YearFilter.jsx
+++ b/src/components/dashboard/reports/Filter/YearFilter.jsx
@@ -28,7 +28,7 @@ const YearFilter = ({formik, multiple, setFilteredText}) => {
         }
     };
     return (
-        <FormControl sx={{width: 300, mx: 1}}>
+        <FormControl sx={{width: 300, mx: 1, my: {xs: 1, lg: 0}}}>
             <InputLabel size="small">{t("filters.choose_year")}</InputLabel>
             <Select
                 name="date"
diff --git a/src/components/dashboard/reports/Filter/index.jsx b/src/components/dashboard/reports/Filter/index.jsx
index f8757c1..f42d2aa 100644
--- a/src/components/dashboard/reports/Filter/index.jsx
+++ b/src/components/dashboard/reports/Filter/index.jsx
@@ -7,6 +7,7 @@ import {
     CircularProgress,
     IconButton,
     Stack,
+    Tooltip,
     Typography
 } from "@mui/material";
 import {useFormik} from "formik";
@@ -21,7 +22,6 @@ import {useEffect, useState} from "react";
 import moment from "jalali-moment";
 import {periodOfYear} from "@/core/utils/yearPeriodFinder";
 
-CachedIcon
 const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate}) => {
     const t = useTranslations();
     const filter_by_province = filterItem.find((item) => item.type === "province");
@@ -97,18 +97,27 @@ const Filter = ({title, filterItem, setFilterOption, isLoadingReportList, mutate
                         </Typography>
                     </Box>
                     <Box>
-                        <IconButton onClick={() => mutate()}
-                                    size="small">
-                            <CachedIcon sx={{color: "success.main"}}/>
-                        </IconButton>
-                        <IconButton onClick={() => setExpanded((prevExpanded) => !prevExpanded)}
-                                    size="small">
-                            <FilterAltIcon sx={{color: "success.main"}}/>
-                        </IconButton>
+                        <Tooltip title={t("filters.update_again")} arrow>
+                            <IconButton onClick={() => mutate()}
+                                        size="small">
+                                <CachedIcon color="primary"/>
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title={t("filters.filter_btn")} arrow>
+                            <IconButton onClick={() => setExpanded((prevExpanded) => !prevExpanded)}
+                                        size="small">
+                                <FilterAltIcon color="primary"/>
+                            </IconButton>
+                        </Tooltip>
                     </Box>
                 </Box>
             </AccordionSummary>
-            <AccordionDetails sx={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+            <AccordionDetails sx={{
+                display: "flex",
+                flexDirection: {xs: "column", sm: "row"},
+                justifyContent: "space-between",
+                alignItems: "center"
+            }}>
                 <Stack sx={{flexDirection: {xs: "column", sm: "row"}, alignItems: "center", flexWrap: 'wrap'}}>
                     {filter_by_province ?
                         <ProvinceFilter formik={formik} multiple={filter_by_province.multiple}
diff --git a/src/components/dashboard/reports/LoanDistribution/index.jsx b/src/components/dashboard/reports/LoanDistribution/index.jsx
index 1bf2abb..ff65cda 100644
--- a/src/components/dashboard/reports/LoanDistribution/index.jsx
+++ b/src/components/dashboard/reports/LoanDistribution/index.jsx
@@ -1,10 +1,12 @@
-import {Box, CircularProgress, Grid, Paper, Typography} from "@mui/material";
+import {Grid, Paper, Typography} from "@mui/material";
 import PolarChart from "./PolarChart";
 import Pie from "./PieChart";
 import {useTranslations} from "next-intl";
 import Filter from "@/components/dashboard/reports/Filter";
 import useChart from "@/lib/app/hooks/useChart";
 import {GET_LOAN_DISTRIBUTION} from "@/core/data/apiRoutes";
+import LoadingHardPage from "@/core/components/LoadingHardPage";
+import AnalyticsIcon from "@mui/icons-material/Analytics";
 
 const LoanDistribution = () => {
     const t = useTranslations();
@@ -20,34 +22,32 @@ const LoanDistribution = () => {
                     isLoadingReportList={isLoadingReportList}
                     mutate={mutate}
             />
-            <Grid container sx={{justifyContent: {xs: "center", md: "space-between"}}}>
+            <Grid container sx={{justifyContent: {xs: "center", md: "space-between", position: "relative"}}}>
                 {isLoadingReportList ? (
-                    <Box sx={{
-                        height: "100%",
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        justifyContent: "center"
-                    }}>
-                        <Grid item xs={12} sx={{aspectRatio: "1/0.75"}}>
-                            <CircularProgress sx={{mb: 1, color: "#c2c2c2"}}/>
-                            <Typography variant="h6"
-                                        sx={{color: "#c2c2c2", letterSpacing: "0.2rem"}}
-                            >
-                                {t("reports.loading_fetching_reports")}
-                            </Typography>
-                        </Grid>
-                    </Box>
+                    <Grid item xs={12} sx={{aspectRatio: "3/0.95"}}>
+                        <LoadingHardPage
+                            icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
+                            loading={isLoadingReportList}
+                            label={t("reports.loading_fetching_reports")}
+                            width={100}
+                            height={100}
+                            sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
+                        />
+                    </Grid>
                 ) : errorReportList ? (
-                    <Grid item xs={12} sx={{aspectRatio: "1/0.75"}}>
-                        <Typography variant="caption">{t("reports.error_fetching_reports")}</Typography>
+                    <Grid item xs={12}
+                          sx={{aspectRatio: "3/0.95", display: "flex", justifyContent: "center", alignItems: "center"}}>
+                        <Typography variant="h6" sx={{
+                            color: "#858585",
+                            letterSpacing: "0.1rem"
+                        }}>{t("reports.error_fetching_reports")}</Typography>
                     </Grid>
                 ) : (
                     <>
-                        <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
+                        <Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
                             <PolarChart data={reportList}/>
                         </Grid>
-                        <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
+                        <Grid item xs={12} sm={10} md={6} xl={5} sx={{aspectRatio: "1/0.75"}}>
                             <Pie data={reportList}/>
                         </Grid>
                     </>
diff --git a/src/components/dashboard/reports/LoanProgress/index.jsx b/src/components/dashboard/reports/LoanProgress/index.jsx
index a516d04..dadac1e 100644
--- a/src/components/dashboard/reports/LoanProgress/index.jsx
+++ b/src/components/dashboard/reports/LoanProgress/index.jsx
@@ -5,6 +5,7 @@ import {useTranslations} from "next-intl";
 import useChart from "@/lib/app/hooks/useChart";
 import {GET_PROVINCE_PROGRESS} from "@/core/data/apiRoutes";
 import LoadingHardPage from "@/core/components/LoadingHardPage";
+import AnalyticsIcon from '@mui/icons-material/Analytics';
 
 const LoanProgress = () => {
     const t = useTranslations();
@@ -20,19 +21,44 @@ const LoanProgress = () => {
                     mutate={mutate}
             />
             <Grid container>
-                <Grid item xs={12} sx={{aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3"}}}>
-                    {isLoadingReportList ? (
-                        // <LoadingHardPage icon={routingItem?.icon}
-                        //                  label={routingItem?.key ? `${t('routing_to')} ${t(routingItem?.key)}` : ''}
-                        //                  loading={routing} width={100} height={100}
-                        //                  sx={{position: "absolute", bgcolor: "#fffc"}}>
-
-                        ) : errorReportList ? (
-                        <Typography variant="caption">{t("reports.error_fetching_reports")}</Typography>
-                    ) : (
+                {isLoadingReportList ? (
+                    <Grid item xs={12}
+                          sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
+                          }}>
+                        <LoadingHardPage
+                            icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
+                            loading={isLoadingReportList}
+                            label={t("reports.loading_fetching_reports")}
+                            width={100}
+                            height={100}
+                            sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
+                        />
+                    </Grid>
+                ) : errorReportList ? (
+                    <Grid item xs={12}
+                          sx={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
+                          }}>
+                        <Typography variant="h6" sx={{
+                            color: "#858585",
+                            letterSpacing: "0.1rem"
+                        }}>{t("reports.error_fetching_reports")}</Typography>
+                    </Grid>
+                ) : (
+                    <Grid item xs={12}
+                          sx={{
+                              aspectRatio: {xs: "1/1", sm: "1/1", md: "1/0.4", xl: "1/0.3", position: "relative"}
+                          }}>
                         <BarChart data={reportList}/>
-                    )}
-                </Grid>
+                    </Grid>
+                )}
             </Grid>
         </Paper>
     )
diff --git a/src/lib/app/hooks/useChart.jsx b/src/lib/app/hooks/useChart.jsx
index 707f21d..d1dd454 100644
--- a/src/lib/app/hooks/useChart.jsx
+++ b/src/lib/app/hooks/useChart.jsx
@@ -21,7 +21,7 @@ const useChart = (chart_url) => {
         isValidating,
         mutate
     } = useSWR(filterOption.length !== 0 ? `${chart_url}${queryString}` : "", fetcher, {
-        revalidateIfStale: false,
+        revalidateIfStale: true,
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
         keepPreviousData: true