diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 9b1e9f4..5088829 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -58,7 +58,7 @@
     "user-management": "مدیریت کاربر",
     "role-management": "مدیریت نقش ها",
     "edit-profile": "ویرایش پروفایل",
-    "loan-history": "تاریخچه وام ها"
+    "loan-history": "کارتابل نظارت"
   },
   "secondary": {
     "passenger-office": "توزیع درخواست",
@@ -117,7 +117,7 @@
     "edit_profile": "ویرایش پروفایل",
     "expert_management": "مدیریت کارشناسان",
     "user_management_page": "مدیریت کاربر",
-    "loan_history": "تاریخچهِ وام ها"
+    "loan_history": "کارتابل نظارت"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
@@ -537,6 +537,14 @@
     "update_again": "بروزرسانی مجدد"
   },
   "LoanHistory": {
-    "history": "تاریخچه"
+    "history": "تاریخچه",
+    "Table_history_error": "خطا در دریافت اطلاعات",
+    "history_report": "فایل ضمیمه",
+    "Table_head_name": "نام",
+    "Table_head_date": "تاریخ",
+    "Table_head_position": "سمت",
+    "Table_head_action": "عملیات",
+    "Table_head_file": "فایل پیوست",
+    "empty_history_detail": "سابقه ای برای این وام وجود ندارد"
   }
 }
diff --git a/src/components/dashboard/loan-history/Form/HistoryForm/HistoryContent.jsx b/src/components/dashboard/loan-history/Form/HistoryForm/HistoryContent.jsx
index 040aef8..d4d214c 100644
--- a/src/components/dashboard/loan-history/Form/HistoryForm/HistoryContent.jsx
+++ b/src/components/dashboard/loan-history/Form/HistoryForm/HistoryContent.jsx
@@ -11,7 +11,7 @@ const HistoryContent = ({mutate, setOpenConfirmDialog, rowId}) => {
     return (
         <>
             <DialogContent>
-                <TableContent/>
+                <TableContent rowId={rowId}/>
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
diff --git a/src/components/dashboard/loan-history/Form/HistoryForm/PrintHistory.jsx b/src/components/dashboard/loan-history/Form/HistoryForm/PrintHistory.jsx
new file mode 100644
index 0000000..79af47c
--- /dev/null
+++ b/src/components/dashboard/loan-history/Form/HistoryForm/PrintHistory.jsx
@@ -0,0 +1,39 @@
+import {Button, CircularProgress} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import DescriptionIcon from '@mui/icons-material/Description';
+
+const PrintHistory = ({attachment}) => {
+    const t = useTranslations();
+    const [loading, setLoading] = useState(false)
+    const requestServer = useRequest({auth: true, pending: false, success: {notification: {show: false}}})
+
+    const clickHandler = (attachment) => {
+        const anchor = document.createElement('a');
+        anchor.href = attachment;
+        anchor.setAttribute('download', '');
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+    }
+
+
+    return (
+        <Button
+            color="primary"
+            variant="contained"
+            size="small"
+            disabled={loading}
+            sx={{textTransform: "unset", alignSelf: "center"}}
+            startIcon={loading ?
+                <CircularProgress size={18} color="inherit"/> :
+                <DescriptionIcon/>}
+            onClick={() => clickHandler(attachment)}
+        >
+            {t("LoanHistory.history_report")}
+        </Button>
+    )
+}
+
+export default PrintHistory
\ No newline at end of file
diff --git a/src/components/dashboard/loan-history/Form/HistoryForm/TableContent.jsx b/src/components/dashboard/loan-history/Form/HistoryForm/TableContent.jsx
index 3a6603d..cd0569b 100644
--- a/src/components/dashboard/loan-history/Form/HistoryForm/TableContent.jsx
+++ b/src/components/dashboard/loan-history/Form/HistoryForm/TableContent.jsx
@@ -1,210 +1,88 @@
 import {
-    Button,
-    CircularProgress,
+    Box,
+    LinearProgress,
     Paper,
     Table,
     TableBody,
     TableCell,
     TableContainer,
     TableHead,
-    TableRow
+    TableRow,
+    Typography
 } from "@mui/material";
-import DescriptionIcon from "@mui/icons-material/Description";
-import {useState} from "react";
 import {useTranslations} from "next-intl";
+import useHistory from "@/lib/app/hooks/useHistory";
+import {GET_HISTORY_DETAIL} from "@/core/data/apiRoutes";
+import moment from "jalali-moment";
+import PrintHistory from "@/components/dashboard/loan-history/Form/HistoryForm/PrintHistory";
 
-const fakeData = [
-    {
-        date: "1401/08/28",
-        name: "امین قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "امیر قاسم پور",
-        place: "اداره راه و شهرسازی مشهد",
-        toDo: "ارجاع به معاونت حمل و نقل"
-    },
-    {
-        date: "1401/08/28",
-        name: "محمد جلالی",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "احمد قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "اکبر قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "اصغر قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "نیما قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-    {
-        date: "1401/08/28",
-        name: "مهدی قاسم پور",
-        place: "اداره راه و شهرسازی تهران",
-        toDo: "ارجاع به کارشناس"
-    },
-]
-const TableContent = () => {
+const TableContent = ({rowId}) => {
     const t = useTranslations();
-    const [loading, setLoading] = useState(false)
-
-    const clickHandler = () => {
-    }
+    const {history_details, isLoading, error} = useHistory(`${GET_HISTORY_DETAIL}/${rowId}`)
 
     return (
-        <Paper sx={{
-            width: '100%', overflow: 'hidden',
-            '*::-webkit-scrollbar': {
-                width: '0.5em'
-            },
-            '*::-webkit-scrollbar-thumb': {
-                backgroundColor: 'primary.main',
+        <Box>
+            {error ? (<Typography>{t("LoanHistory.Table_history_error")}</Typography>) :
+                (isLoading ? (<LinearProgress sx={{width: "100%"}}/>) : (
+                    history_details.latest_histories.length === 0 ? (
+                        <Typography
+                            sx={{padding: 2}}
+                            variant={'h6'}>{t("LoanHistory.empty_history_detail")}</Typography>
+                    ) : (
+                        <Paper elevation={0} sx={{
+                            width: '100%', overflow: 'hidden',
+                            '*::-webkit-scrollbar': {
+                                width: '0.5em'
+                            },
+                            '*::-webkit-scrollbar-thumb': {
+                                backgroundColor: 'primary.main',
+                            }
+                        }}>
+                            <TableContainer sx={{maxHeight: 600}}>
+                                <Table stickyHeader sx={{minWidth: 650}}>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>{t("LoanHistory.Table_head_name")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_date")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_position")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_action")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_file")}</TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {
+                                            history_details.latest_histories.map((latest_history, index) => {
+                                                return (
+                                                    <TableRow
+                                                        key={index}
+                                                        sx={{
+                                                            '&:last-child td, &:last-child th': {border: 0}
+                                                        }}
+                                                    >
+                                                        <TableCell component="th" scope="row">
+                                                            {latest_history.expert.name}
+                                                        </TableCell>
+                                                        <TableCell>{moment(latest_history.created_at).locale("fa").format("HH:mm | yyyy/MM/DD")}</TableCell>
+                                                        <TableCell>{latest_history.expert.position}</TableCell>
+                                                        <TableCell>{latest_history.previous_state_name}</TableCell>
+                                                        <TableCell>
+                                                            {latest_history.attachment ? (
+                                                                <PrintHistory attachment={latest_history.attachment}/>
+                                                            ) : null}
+                                                        </TableCell>
+                                                    </TableRow>
+                                                )
+                                            })
+                                        }
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Paper>
+                    )
+                ))
             }
-        }}>
-            <TableContainer sx={{maxHeight: 600}}>
-                <Table stickyHeader sx={{minWidth: 650}}>
-                    <TableHead>
-                        <TableRow>
-                            <TableCell>نام</TableCell>
-                            <TableCell>تاریخ</TableCell>
-                            <TableCell>سمت</TableCell>
-                            <TableCell>عملیات</TableCell>
-                            <TableCell>فایل پیوست</TableCell>
-                        </TableRow>
-                    </TableHead>
-                    <TableBody>
-                        {fakeData.map((singleData, index) => {
-                            return (
-                                <TableRow
-                                    key={index}
-                                    sx={{
-                                        '&:last-child td, &:last-child th': {border: 0}
-                                    }}
-                                >
-                                    <TableCell component="th" scope="row">
-                                        {singleData.name}
-                                    </TableCell>
-                                    <TableCell>{singleData.date}</TableCell>
-                                    <TableCell>{singleData.place}</TableCell>
-                                    <TableCell>{singleData.toDo}</TableCell>
-                                    <TableCell>
-                                        <Button
-                                            color="primary"
-                                            variant="contained"
-                                            size="small"
-                                            disabled={loading}
-                                            sx={{textTransform: "unset", alignSelf: "center"}}
-                                            startIcon={loading ? <CircularProgress size={18} color="inherit"/> :
-                                                <DescriptionIcon/>}
-                                            onClick={clickHandler}
-                                        >
-                                            {t("MachinaryOffice.excel_report")}
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-                            )
-                        })}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-        </Paper>
+        </Box>
+
     )
 }
 export default TableContent
\ No newline at end of file
diff --git a/src/components/dashboard/loan-history/index.jsx b/src/components/dashboard/loan-history/index.jsx
index 0f0a261..c2bb293 100644
--- a/src/components/dashboard/loan-history/index.jsx
+++ b/src/components/dashboard/loan-history/index.jsx
@@ -1,6 +1,6 @@
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
-import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
+import {GET_LOAN_HISTORY} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
 import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
@@ -154,14 +154,10 @@ function DashboardLoanHistoryComponent() {
         ],
         []
     );
-    const data = [{
-        id: 1
-    }]
     return (
         <Box sx={{px: 3}}>
             <DataTable
-                data={data}
-                tableUrl={GET_MACHINARY_OFFICE}
+                tableUrl={GET_LOAN_HISTORY}
                 columns={columns}
                 selectableRow={false}
                 enableCustomToolbar={false}
diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js
index 27fbefd..c740f2a 100644
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
@@ -214,3 +214,7 @@ export const GET_EXPORT = BASE_URL + "/dashboard/exports/navgan"
 export const GET_PROVINCE_PROGRESS = BASE_URL + "/dashboard/reports/navgan/province_progress"
 export const GET_LOAN_DISTRIBUTION = BASE_URL + "/dashboard/reports/navgan/loan_distribution"
 // reports
+
+//loan history
+export const GET_LOAN_HISTORY = BASE_URL + "/dashboard/navgan_loans"
+export const GET_HISTORY_DETAIL = BASE_URL + "/dashboard/navgan_loans"
diff --git a/src/lib/app/hooks/useHistory.jsx b/src/lib/app/hooks/useHistory.jsx
new file mode 100644
index 0000000..86d4d09
--- /dev/null
+++ b/src/lib/app/hooks/useHistory.jsx
@@ -0,0 +1,23 @@
+import useSWR from 'swr'
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const useHistory = (url) => {
+
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading, error} = useSWR(url, fetcher)
+    const history_details = data
+    //swr config
+
+    // render data
+    return {history_details, isLoading, error}
+}
+export default useHistory
\ No newline at end of file