diff --git a/src/components/dashboard/reports/LoanDistribution/PieChart.jsx b/src/components/dashboard/reports/LoanDistribution/PieChart.jsx
index b2908c0..9da086e 100644
--- a/src/components/dashboard/reports/LoanDistribution/PieChart.jsx
+++ b/src/components/dashboard/reports/LoanDistribution/PieChart.jsx
@@ -1,10 +1,11 @@
 import Chart from "@/core/components/Chart";
 import {useTheme} from "@mui/material/styles";
+import {useMediaQuery} from "@mui/material";
 
 
 const Pie = ({data}) => {
     const theme = useTheme();
-    const windowsWidth = window.innerWidth;
+    const upperSm = useMediaQuery((theme.breakpoints.up("sm")))
     const specialOption = {
         title: {
             text: undefined,
@@ -21,7 +22,7 @@ const Pie = ({data}) => {
             },
         },
         legend: {
-            show: windowsWidth > theme.breakpoints.values.sm
+            show: upperSm
         }
     };
     const series = data.map((item) => +item.percentage)
diff --git a/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx b/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx
index 01e4286..2b62915 100644
--- a/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx
+++ b/src/components/dashboard/reports/LoanDistribution/PolarChart.jsx
@@ -1,9 +1,10 @@
 import Chart from "@/core/components/Chart";
 import {useTheme} from "@mui/material/styles";
+import {useMediaQuery} from "@mui/material";
 
 const PolarChart = ({data}) => {
     const theme = useTheme();
-    const windowsWidth = window.innerWidth;
+    const upperSm = useMediaQuery((theme.breakpoints.up("sm")))
     const specialOption = {
         title: {
             text: undefined,
@@ -28,7 +29,7 @@ const PolarChart = ({data}) => {
             },
         },
         legend: {
-            show: windowsWidth > theme.breakpoints.values.sm
+            show: upperSm
         }
     };
     const series = data.map((item) => +item.percentage)