diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index fe2db27..c78574c 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -257,6 +257,7 @@
     "operator": "اپراتور",
     "date": "تاریخ",
     "call_history_of": "تاریخچه تماس های",
-    "call_history_not_found": "تاریخچه ای برای این تماس یافت نشد"
+    "call_history_not_found": "تاریخچه ای برای تماس دریافتی یافت نشد",
+    "call_history_error_fetching": "خطا در دریافت تاریخچه تماس دریافتی"
   }
 }
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
index 84f5288..6dc06e0 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
@@ -3,7 +3,7 @@ import {Divider, List} from "@mui/material";
 import PreviusOperatorData from "./PreviusOperatorData";
 import Topics from "./Topics";
 
-const ListItemOfCalls = ({tab}) => {
+const ListItemOfCalls = ({lastItem, tab}) => {
     const t = useTranslations();
     return (
         <>
@@ -11,7 +11,7 @@ const ListItemOfCalls = ({tab}) => {
                 <PreviusOperatorData/>
                 <Topics/>
             </List>
-            <Divider/>
+            {!lastItem && <Divider/>}
         </>
     )
 }
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
index 37a6dfc..27c161f 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
@@ -1,15 +1,24 @@
 import {useTranslations} from "next-intl";
-import {Box, Typography} from "@mui/material";
-import ListItemOfCalls
-    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls";
+import {Box, Chip, Divider, List, ListItemAvatar, ListItemText, Skeleton, Stack, Typography} from "@mui/material";
+import ListItemOfCalls from "./ListItemOfCalls";
+import HeadphonesIcon from '@mui/icons-material/Headphones';
 
 const CallHistory = ({tab}) => {
     const t = useTranslations();
+    // const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
+    const errorHistoryList = false;
+    const isLoadingHistoryList = true;
+    const handleClick = () => {
+        console.info('You clicked the Chip.');
+    };
     return (
-        <>
-            <Box sx={{
-                display: "flex",
-                alignItems: "end",
+        <Stack sx={{
+            height: "100%",
+            overflow: "hidden"
+        }}>
+            <Stack sx={{
+                flexDirection: "row",
+                alignItems: "center",
                 justifyContent: "center",
                 py: 2,
                 backgroundColor: "primary.main",
@@ -21,25 +30,72 @@ const CallHistory = ({tab}) => {
                 <Typography variant="subtitle1" sx={{color: "#fff"}}>
                     {tab.phone_number} ....
                 </Typography>
-            </Box>
-            <Box sx={{height: "100%", overflow: "scroll"}}>
-                <ListItemOfCalls tab={tab}/>
-                <ListItemOfCalls tab={tab}/>
-                <ListItemOfCalls tab={tab}/>
-                <ListItemOfCalls tab={tab}/>
-                <ListItemOfCalls tab={tab}/>
-                <ListItemOfCalls tab={tab}/>
-                <ListItemOfCalls tab={tab}/>
-                {/*<Typography variant="subtitle1"*/}
-                {/*            sx={{*/}
-                {/*                color: "#837e7e",*/}
-                {/*                textAlign: "center",*/}
-                {/*                mt: "50%"*/}
-                {/*            }}>*/}
-                {/*    {t("CallHistory.call_history_not_found")}*/}
-                {/*</Typography>*/}
-            </Box>
-        </>
+            </Stack>
+            <Stack sx={{overflow: "scroll"}}>
+                {errorHistoryList ? (
+                    <Typography variant="subtitle1" sx={{
+                        color: "#837e7e",
+                        fontWeight: "500",
+                        letterSpacing: 1,
+                        textAlign: "center",
+                        mt: "50%"
+                    }}>
+                        {t("CallHistory.call_history_error_fetching")}
+                    </Typography>
+                ) : isLoadingHistoryList ? (
+                    <>
+                        <List sx={{
+                            width: '100%',
+                            bgcolor: 'rgba(222,234,215,0.11)',
+                            display: "flex",
+                            alignItems: "center"
+                        }}>
+                            <ListItemAvatar>
+                                <Skeleton animation="wave" variant="circular" width={60} height={60}/>
+                            </ListItemAvatar>
+                            <ListItemText primary={
+                                <Box sx={{display: "flex", alignItems: "end"}}>
+                                    <Skeleton
+                                        animation="wave"
+                                        height={15}
+                                        width="50%"
+                                        style={{marginBottom: 6}}
+                                    />
+                                </Box>
+                            } secondary={
+                                <Skeleton
+                                    animation="wave"
+                                    height={10}
+                                    width="30%"
+                                    style={{marginBottom: 6}}
+                                />
+                            }/>
+                        </List>
+                    </>
+                ) : historyList.length === 0 ? (
+                    <Typography variant="subtitle1" sx={{
+                        color: "#837e7e",
+                        fontWeight: "500",
+                        letterSpacing: 1,
+                        textAlign: "center",
+                        mt: "50%"
+                    }}>
+                        {t("CallHistory.call_history_not_found")}
+                    </Typography>
+                ) : (
+                    <Box>
+                        <ListItemOfCalls lastItem={true} historyList={historyList}/>
+                        <Divider>
+                            <Chip
+                                icon={<HeadphonesIcon/>}
+                                onClick={handleClick}
+                                label="نمایش موارد بیشتر">
+                            </Chip>
+                        </Divider>
+                    </Box>
+                )}
+            </Stack>
+        </Stack>
     )
 }
 
diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js
index 19534ca..32bedb0 100644
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
@@ -16,6 +16,10 @@ export const GET_ROLE_LIST = BASE_URL + "/api/roles/list";
 export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
 // province list
 
+// province list
+export const GET_CALLER_HISTORY = BASE_URL + "...";
+// province list
+
 //change password
 export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password";
 //end change password
diff --git a/src/lib/callWidget/hooks/useCallerHistory.jsx b/src/lib/callWidget/hooks/useCallerHistory.jsx
new file mode 100644
index 0000000..62a8ed2
--- /dev/null
+++ b/src/lib/callWidget/hooks/useCallerHistory.jsx
@@ -0,0 +1,30 @@
+import {GET_CALLER_HISTORY} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+
+const useCallerHistory = (id) => {
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then(({data}) => {
+            return data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading} = useSWR(`${GET_CALLER_HISTORY}/${id}`, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        keepPreviousData: true
+    });
+
+    return {
+        historyList: data,
+        isLoadingHistoryList: isLoading,
+        errorHistoryList: !data
+    }
+};
+
+export default useCallerHistory;
\ No newline at end of file