diff --git a/public/images/pie-chart.png b/public/images/pie-chart.png
new file mode 100644
index 0000000..1a581de
Binary files /dev/null and b/public/images/pie-chart.png differ
diff --git a/public/images/rial.png b/public/images/rial.png
new file mode 100644
index 0000000..fd9d24e
Binary files /dev/null and b/public/images/rial.png differ
diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index c4fcf77..1cfa2f8 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -121,7 +121,12 @@
     "edit_profile": "ویرایش پروفایل",
     "expert_management": "مدیریت کارشناسان",
     "user_management_page": "مدیریت کاربر",
-    "loan_history": "کارتابل نظارت"
+    "loan_history": "کارتابل نظارت",
+    "total_number_loan_offers": "تعداد کل وام های پیشنهادی",
+    "total_amount_proposed_loan": "مبلغ کل وام های پیشنهادی",
+    "total_number_requests": "تعداد کل درخواست ها",
+    "total_amount_approved_loans": "مبلغ کل وام های تصویب شده",
+    "number_approved_loans": "تعداد وام های تصویب شده"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
diff --git a/src/components/dashboard/first/index.jsx b/src/components/dashboard/first/index.jsx
index 43b6c87..310569f 100644
--- a/src/components/dashboard/first/index.jsx
+++ b/src/components/dashboard/first/index.jsx
@@ -1,90 +1,246 @@
 import FullPageLayout from "@/layouts/FullPageLayout";
 import CenterLayout from "@/layouts/CenterLayout";
-import {Box, Divider, Stack, Typography} from "@mui/material";
-import {useEffect, useState} from "react";
+import {Box, Stack, Typography, Card, CardContent, CardHeader, useTheme, useMediaQuery} from "@mui/material";
+import { useEffect, useState } from "react";
 import useRequest from "@/lib/app/hooks/useRequest";
+import {useTranslations} from "next-intl";
+import {GET_LOAN_STATISTICS} from "@/core/data/apiRoutes";
 
 const DashboardFirstComponent = () => {
-    const requestServer = useRequest({auth: true, notification: false});
-    const [data, setData] = useState(null);
+  const theme = useTheme();
+  const t = useTranslations();
+  const requestServer = useRequest({ auth: true, notification: false });
+  const [data, setData] = useState(null);
+  const isXL = useMediaQuery(theme.breakpoints.up('xl'));
 
-    useEffect(() => {
-        requestServer(`${process.env.NEXT_PUBLIC_BASE_URL}/dashboard/reports/navgan/statistics`, "get")
-            .then((res) => {
-                setData(res.data.data);
-            })
-            .catch(() => {
-            });
-    }, []);
+  useEffect(() => {
+    requestServer(
+      `${GET_LOAN_STATISTICS}`,
+      "get"
+    )
+      .then((res) => {
+        setData(res.data.data);
+      })
+      .catch(() => {});
+  }, []);
 
-    if (!data) return "";
+  if (!data) return "";
 
-    return (<>
-            <FullPageLayout>
-                <CenterLayout>
-                    <Box sx={{width: 600}}>
-                        <Divider>وام های واجد شرایط</Divider>
-                        <Stack
-                            sx={{py: 2, px: 1}}
-                            direction={"row"}
-                            alignItems={"center"}
-                            justifyContent={"space-between"}
+  return (
+    <>
+      <FullPageLayout>
+        <CenterLayout>
+            <Stack sx={{ display: 'flex', justifyContent: 'center', gap: '20px' ,width: '100%' ,  flexDirection: "row",padding: 3, alignItems: 'flex-end',}}>
+                <Card sx={{height:"200px" ,  width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
+                    <CardHeader
+                        sx={{
+                            height: '50px',
+                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
+                            color: 'primary.main',
+                            textAlign:'center',
+                        }}
+                        titleTypographyProps={{
+                            variant: 'body1',
+                            sx: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                [theme.breakpoints.down('xl')]: {
+                                    fontSize: '12px',
+                                },
+                            }
+                        }}
+                        title={t("Dashboard.total_number_loan_offers")}
+                    />
+                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
+                        <Box
+                            sx={{
+                                borderBottom: '6px solid',
+                                borderColor: 'primary.main',
+                                borderRadius: '6px 6px 6px 6px',
+                                width: '90%',
+                                textAlign:'center',
+                            }}
                         >
-                            <Typography>تعداد کل</Typography>
-                            <Typography variant={"h5"}>
-                                {Number(data.totalApprovedLoans).toLocaleString("en")}
-                            </Typography>
-                        </Stack>
-                        <Divider sx={{mt: 2}}>وام های پیشنهادی</Divider>
-                        <Stack
-                            sx={{py: 2, px: 1}}
-                            direction={"row"}
-                            alignItems={"center"}
-                            justifyContent={"space-between"}
-                        >
-                            <Typography>تعداد کل</Typography>
-                            <Typography variant={"h5"}>
+                            <Typography  variant={isXL ? 'h5' : 'h6'}  sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
                                 {Number(data.proposedCount).toLocaleString("en")}
                             </Typography>
-                        </Stack>
-                        <Stack
-                            sx={{py: 2, px: 1}}
-                            direction={"row"}
-                            alignItems={"center"}
-                            justifyContent={"space-between"}
+                        </Box>
+                        <Box component={'img'} sx={{width: '40px', height: '40px', mt:2}}
+                             src={'/images/pie-chart.png'}/>
+                    </CardContent>
+                </Card>
+                <Card sx={{height:"250px" ,  width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
+                    <CardHeader
+                        sx={{
+                            height: '50px',
+                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
+                            color: 'primary.main',
+                            textAlign:'center',
+                            fontSize: '14px',
+                            fontWeight: 'bold',
+                        }}
+                        titleTypographyProps={{
+                            variant: 'body1',
+                            sx: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                [theme.breakpoints.down('xl')]: {
+                                    fontSize: '12px',
+                                },
+                            }
+                        }}
+                        title={t("Dashboard.total_amount_proposed_loan")}
+                    />
+                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
+                        <Box
+                            sx={{
+                                borderBottom: '6px solid',
+                                borderColor: 'primary.main',
+                                borderRadius: '6px 6px 6px 6px',
+                                width: '90%',
+                                textAlign:'center',
+                            }}
                         >
-                            <Typography>مبلغ کل (میلیون ریال)</Typography>
-                            <Typography variant={"h5"}>
-                                {Number(data.totalProposedAmount / 1000000).toLocaleString("en")}
+                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
+                                {(Number(data.totalProposedAmount)/1000000).toLocaleString("en")}
+                                <Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px'}}>
+                                    {t("million_rial")}
+                                </Box>
                             </Typography>
-                        </Stack>
-                        <Divider sx={{mt: 2}}>وام های تصویب شده</Divider>
-                        <Stack
-                            sx={{py: 2, px: 1}}
-                            direction={"row"}
-                            alignItems={"center"}
-                            justifyContent={"space-between"}
+                        </Box>
+                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
+                             src={'/images/rial.png'}/>
+                    </CardContent>
+                </Card>
+                <Card sx={{height:"300px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
+                    <CardHeader
+                        sx={{
+                            height: '50px',
+                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
+                            color: 'primary.main',
+                            textAlign:'center',
+                            fontSize: '14px',
+                            fontWeight: 'bold',
+                        }}
+                        titleTypographyProps={{
+                            variant: 'body1',
+                            sx: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                [theme.breakpoints.down('xl')]: {
+                                    fontSize: '12px',
+                                },
+                            }
+                        }}
+                        title={t("Dashboard.total_number_requests")}
+                    />
+                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
+                        <Box
+                            sx={{
+                                borderBottom: '6px solid',
+                                borderColor: 'primary.main',
+                                borderRadius: '6px 6px 6px 6px',
+                                width: '90%',
+                                textAlign:'center',
+                            }}
                         >
-                            <Typography>تعداد کل</Typography>
-                            <Typography variant={"h5"}>
+                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
+                                {Number(data.totalApprovedLoans).toLocaleString("en")}
+                            </Typography>
+                        </Box>
+                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
+                             src={'/images/pie-chart.png'}/>
+                    </CardContent>
+                </Card>
+                <Card sx={{height:"250px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
+                    <CardHeader
+                        sx={{
+                            height: '50px',
+                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
+                            color: 'primary.main',
+                            textAlign:'center',
+                            fontSize: '14px',
+                            fontWeight: 'bold',
+                        }}
+                        titleTypographyProps={{
+                            variant: 'body1',
+                            sx: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                [theme.breakpoints.down('xl')]: {
+                                    fontSize: '12px',
+                                },
+                            }
+                        }}
+                        title={t("Dashboard.total_amount_approved_loans")}
+                    />
+                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
+                        <Box
+                            sx={{
+                                borderBottom: '6px solid',
+                                borderColor: 'primary.main',
+                                borderRadius: '6px 6px 6px 6px',
+                                width: '90%',
+                                textAlign:'center',
+                            }}
+                        >
+                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
+                                {(Number(data.totalApprovedAmount) / 1000000).toLocaleString("en")}
+                                <Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px' }}>
+                                    {t("million_rial")}
+                                </Box>
+                            </Typography>
+                        </Box>
+                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
+                             src={'/images/rial.png'}/>
+                    </CardContent>
+                </Card>
+                <Card sx={{height:"200px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
+                    <CardHeader
+                        sx={{
+                            height: '50px',
+                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
+                            color: 'primary.main',
+                            textAlign:'center',
+                            fontSize: '14px',
+                            fontWeight: 'bold',
+                        }}
+                        titleTypographyProps={{
+                            variant: 'body1',
+                            sx: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                                [theme.breakpoints.down('xl')]: {
+                                    fontSize: '12px',
+                                },
+                            }
+                        }}
+                        title={t("Dashboard.number_approved_loans")}
+                    />
+                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center' , justifyContent:'center', height: 'calc(100% - 50px)' , padding: "0 !important"}}>
+                        <Box
+                            sx={{
+                                borderBottom: '6px solid',
+                                borderColor: 'primary.main',
+                                borderRadius: '6px 6px 6px 6px',
+                                width: '90%',
+                                textAlign:'center',
+                                alignSelf: 'center',
+                            }}
+                        >
+                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
                                 {Number(data.approvedCount).toLocaleString("en")}
                             </Typography>
-                        </Stack>
-                        <Stack
-                            sx={{py: 2, px: 1}}
-                            direction={"row"}
-                            alignItems={"center"}
-                            justifyContent={"space-between"}
-                        >
-                            <Typography>مبلغ کل (میلیون ریال)</Typography>
-                            <Typography variant={"h5"}>
-                                {Number(data.totalApprovedAmount / 1000000).toLocaleString("en")}
-                            </Typography>
-                        </Stack>
-                    </Box>
-                </CenterLayout>
-            </FullPageLayout>
-        </>);
+                        </Box>
+                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
+                             src={'/images/pie-chart.png'}/>
+                    </CardContent>
+                </Card>
+            </Stack>
+        </CenterLayout>
+      </FullPageLayout>
+    </>
+  );
 };
 
 export default DashboardFirstComponent;
\ No newline at end of file
diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js
index e96af16..615dda4 100644
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
@@ -231,3 +231,7 @@ export const GET_LOAN_DISTRIBUTION = BASE_URL + "/dashboard/reports/navgan/loan_
 export const GET_LOAN_HISTORY = BASE_URL + "/dashboard/navgan_loans"
 export const GET_HISTORY_DETAIL = BASE_URL + "/dashboard/navgan_loans"
 export const EXPORT_LOAN_HISTORY = BASE_URL + "/dashboard/navgan_loans/export"
+
+// loan statistics
+export const GET_LOAN_STATISTICS = BASE_URL + "/dashboard/reports/navgan/statistics"
+