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 f4caa9c..0beeea3 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -120,7 +120,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 aec8ed5..43e885a 100644
--- a/src/components/dashboard/first/index.jsx
+++ b/src/components/dashboard/first/index.jsx
@@ -1,16 +1,21 @@
 import FullPageLayout from "@/layouts/FullPageLayout";
 import CenterLayout from "@/layouts/CenterLayout";
-import { Box, Divider, Stack, Typography } from "@mui/material";
+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 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_LOAN_STATISTICS}`,
       "get"
     )
       .then((res) => {
@@ -25,66 +30,223 @@ const DashboardFirstComponent = () => {
     <>
       <FullPageLayout>
         <CenterLayout>
-          <Box sx={{ width: 600 }}>
-            <Divider>وام های واجد شرایط</Divider>
-            <Stack
-              sx={{ py: 2, px: 1 }}
-              direction={"row"}
-              alignItems={"center"}
-              justifyContent={"space-between"}
-            >
-              <Typography>تعداد کل</Typography>
-              <Typography variant={"h5"}>
-                {Number(data.totalApprovedLoans).toLocaleString("en")}
-              </Typography>
+            <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',
+                            style: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                            },
+                            sx: {
+                                [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  variant={isXL ? 'h5' : 'h6'}  sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
+                                {Number(data.proposedCount).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',
+                            style: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                            },
+                            sx: {
+                                [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 variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
+                                {(Number(data.totalProposedAmount)/1000000).toLocaleString("en")}
+                                <Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px'}}>
+                                    میلیون ریال
+                                </Box>
+                            </Typography>
+                        </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',
+                            style: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                            },
+                            sx: {
+                                [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 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',
+                            style: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                            },
+                            sx: {
+                                [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' }}>
+                                    میلیون ریال
+                                </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',
+                            style: {
+                                textAlign: 'center',
+                                fontWeight: 'bold',
+                            },
+                            sx: {
+                                [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>
+                        </Box>
+                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
+                             src={'/images/pie-chart.png'}/>
+                    </CardContent>
+                </Card>
             </Stack>
-            <Divider sx={{ mt: 2 }}>وام های پیشنهادی</Divider>
-            <Stack
-              sx={{ py: 2, px: 1 }}
-              direction={"row"}
-              alignItems={"center"}
-              justifyContent={"space-between"}
-            >
-              <Typography>تعداد کل</Typography>
-              <Typography variant={"h5"}>
-                {Number(data.proposedCount).toLocaleString("en")}
-              </Typography>
-            </Stack>
-            <Stack
-              sx={{ py: 2, px: 1 }}
-              direction={"row"}
-              alignItems={"center"}
-              justifyContent={"space-between"}
-            >
-              <Typography>مبلغ کل (میلیون ریال)</Typography>
-              <Typography variant={"h5"}>
-                {Number(data.totalProposedAmount).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"}>
-                {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).toLocaleString("en")}
-              </Typography>
-            </Stack>
-          </Box>
         </CenterLayout>
       </FullPageLayout>
     </>
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"
+