diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/__tests__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/__tests__/index.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/index.jsx
new file mode 100644
index 0000000..bb0f818
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/index.jsx
@@ -0,0 +1,33 @@
+import {useTranslations} from "next-intl";
+import {Typography} from "@mui/material";
+
+const ErrorOrEmpty = ({isErrorOrEmpty}) => {
+    const t = useTranslations();
+    return (
+        <>
+            {isErrorOrEmpty === "error" ?
+                <Typography variant="subtitle1" sx={{
+                    color: "#837e7e",
+                    fontWeight: "500",
+                    letterSpacing: 1,
+                    textAlign: "center",
+                    mt: "50%"
+                }}>
+                    {t("CallHistory.call_history_error_fetching")}
+                </Typography>
+                : isErrorOrEmpty === "empty" ?
+                    <Typography variant="subtitle1" sx={{
+                        color: "#837e7e",
+                        fontWeight: "500",
+                        letterSpacing: 1,
+                        textAlign: "center",
+                        mt: "50%"
+                    }}>
+                        {t("CallHistory.call_history_not_found")}
+                    </Typography> : <></>
+            }
+        </>
+    )
+}
+
+export default ErrorOrEmpty
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/__tests__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/__tests__/index.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/index.jsx
new file mode 100644
index 0000000..21a3270
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/index.jsx
@@ -0,0 +1,25 @@
+import {useTranslations} from "next-intl";
+import {Stack, Typography} from "@mui/material";
+
+const HistoryHeader = ({tab}) => {
+    const t = useTranslations();
+    return (
+        <Stack sx={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            py: 2,
+            backgroundColor: "primary.main",
+            overflow: "hidden"
+        }}>
+            <Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
+                .... {t("CallHistory.call_history_of")}:
+            </Typography>
+            <Typography variant="subtitle1" sx={{color: "#fff"}}>
+                {tab.phone_number} ....
+            </Typography>
+        </Stack>
+    )
+}
+
+export default HistoryHeader
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviusOperatorData/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviusOperatorData/index.jsx
index 2ad8326..9610180 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviusOperatorData/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviusOperatorData/index.jsx
@@ -2,7 +2,8 @@ import {useTranslations} from "next-intl";
 import {Avatar, Box, ListItem, ListItemAvatar, ListItemText, Typography} from "@mui/material";
 import HeadsetMicIcon from '@mui/icons-material/HeadsetMic';
 
-const PreviusOperatorData = ({tab}) => {
+const PreviusOperatorData = ({historyItem}) => {
+    console.log(historyItem)
     const t = useTranslations();
     return (
         <ListItem>
@@ -14,13 +15,13 @@ const PreviusOperatorData = ({tab}) => {
             <ListItemText primary={
                 <Box sx={{display: "flex", alignItems: "end"}}>
                     <Typography sx={{marginRight: 1, color: "#545151"}}>
-                        اشکان خطیبی
+                        {historyItem.operator_name}
                     </Typography>
                     <Typography variant="caption" sx={{color: "secondary.main"}}>
                         ({t("CallHistory.operator")})
                     </Typography>
                 </Box>
-            } secondary="1379/02/03 13:50"/>
+            } secondary={historyItem.answer_date}/>
         </ListItem>
     )
 }
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx
index b7bc4ed..0f2e832 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx
@@ -1,7 +1,7 @@
 import {useTranslations} from "next-intl";
 import {Box, List, ListItem, Typography} from "@mui/material";
 
-const Topics = ({tab}) => {
+const Topics = ({historyItem}) => {
     const t = useTranslations();
     return (
         <Box timeout="auto" unmountOnExit>
@@ -12,7 +12,7 @@ const Topics = ({tab}) => {
                             {t("CallHistory.topic")}:
                         </Typography>
                         <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
-                            موضوع تست
+                            {historyItem.topic}
                         </Typography>
                     </Box>
                 </ListItem>
@@ -31,7 +31,7 @@ const Topics = ({tab}) => {
                             textAlign: "end",
                             color: "#837e7e"
                         }}>
-                            زیر موضوع تست با متن طولانی تر از موضوع
+                            {historyItem.sub_topic}
                         </Typography>
                     </Box>
                 </ListItem>
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 6dc06e0..7537d12 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,13 +3,14 @@ import {Divider, List} from "@mui/material";
 import PreviusOperatorData from "./PreviusOperatorData";
 import Topics from "./Topics";
 
-const ListItemOfCalls = ({lastItem, tab}) => {
+const ListItemOfCalls = ({lastItem, historyItem}) => {
     const t = useTranslations();
+    console.log("historyItem", historyItem)
     return (
         <>
             <List sx={{width: '100%', bgcolor: 'rgba(222,234,215,0.11)'}}>
-                <PreviusOperatorData/>
-                <Topics/>
+                <PreviusOperatorData historyItem={historyItem}/>
+                <Topics historyItem={historyItem}/>
             </List>
             {!lastItem && <Divider/>}
         </>
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/__tests__/intex.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/__tests__/intex.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/index.jsx
new file mode 100644
index 0000000..c6cd59e
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/index.jsx
@@ -0,0 +1,78 @@
+import {useTranslations} from "next-intl";
+import {Box, List, ListItem, ListItemAvatar, ListItemText, Skeleton} from "@mui/material";
+
+const LoadingHistory = () => {
+    const t = useTranslations();
+    return (
+        <>
+            <List sx={{
+                width: '100%',
+                bgcolor: 'rgba(222,234,215,0.11)',
+            }}>
+                <Box sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    px: 2
+                }}>
+                    <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={{marginRight: 10, marginBottom: 5}}
+                            />
+                        </Box>
+                    } secondary={
+                        <Skeleton
+                            animation="wave"
+                            height={10}
+                            width="30%"
+                            style={{marginRight: 10}}
+                        />
+                    }/>
+                </Box>
+                <Box timeout="auto" unmountOnExit sx={{py: 2}}>
+                    <List component="div" disablePadding>
+                        <ListItem sx={{px: 4}}>
+                            <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
+                                <Skeleton
+                                    animation="wave"
+                                    height={15}
+                                    width="15%"
+                                />
+                                <Skeleton
+                                    animation="wave"
+                                    height={15}
+                                    width="30%"
+                                />
+                            </Box>
+                        </ListItem>
+                    </List>
+                    <List component="div" disablePadding>
+                        <ListItem sx={{px: 4}}>
+                            <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
+                                <Skeleton
+                                    animation="wave"
+                                    height={15}
+                                    width="25%"
+                                />
+                                <Skeleton
+                                    animation="wave"
+                                    height={15}
+                                    width="50%"
+                                />
+                            </Box>
+                        </ListItem>
+                    </List>
+                </Box>
+            </List>
+        </>
+
+    )
+}
+
+export default LoadingHistory
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 27c161f..f8ccb28 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,13 +1,17 @@
 import {useTranslations} from "next-intl";
-import {Box, Chip, Divider, List, ListItemAvatar, ListItemText, Skeleton, Stack, Typography} from "@mui/material";
-import ListItemOfCalls from "./ListItemOfCalls";
+import {Box, Chip, Divider, Stack} from "@mui/material";
 import HeadphonesIcon from '@mui/icons-material/Headphones';
+import LoadingHistory from "./LoadingHistory";
+import HistoryHeader from "./HistoryHeader";
+import ErrorOrEmpty from "./ErrorOrEmpty";
+import useCallerHistory from "@/lib/callWidget/hooks/useCallerHistory";
+import ListItemOfCalls from "./ListItemOfCalls";
+import {useState} from "react";
 
 const CallHistory = ({tab}) => {
     const t = useTranslations();
-    // const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
-    const errorHistoryList = false;
-    const isLoadingHistoryList = true;
+    const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
+    const [showRestOfHistory, setShowRestOfHistory] = useState(false);
     const handleClick = () => {
         console.info('You clicked the Chip.');
     };
@@ -16,82 +20,36 @@ const CallHistory = ({tab}) => {
             height: "100%",
             overflow: "hidden"
         }}>
-            <Stack sx={{
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                py: 2,
-                backgroundColor: "primary.main",
-                overflow: "hidden"
-            }}>
-                <Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
-                    .... {t("CallHistory.call_history_of")}:
-                </Typography>
-                <Typography variant="subtitle1" sx={{color: "#fff"}}>
-                    {tab.phone_number} ....
-                </Typography>
-            </Stack>
+            <HistoryHeader tab={tab}/>
             <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>
+                    <ErrorOrEmpty isErrorOrEmpty="error"/>
                 ) : 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>
-                    </>
+                    <LoadingHistory/>
                 ) : historyList.length === 0 ? (
-                    <Typography variant="subtitle1" sx={{
-                        color: "#837e7e",
-                        fontWeight: "500",
-                        letterSpacing: 1,
-                        textAlign: "center",
-                        mt: "50%"
-                    }}>
-                        {t("CallHistory.call_history_not_found")}
-                    </Typography>
+                    <ErrorOrEmpty isErrorOrEmpty="empty"/>
                 ) : (
                     <Box>
-                        <ListItemOfCalls lastItem={true} historyList={historyList}/>
+                        <ListItemOfCalls key={historyList[1].id} lastItem={true} historyItem={historyList[1]}/>
                         <Divider>
                             <Chip
                                 icon={<HeadphonesIcon/>}
-                                onClick={handleClick}
-                                label="نمایش موارد بیشتر">
+                                onClick={() => setShowRestOfHistory(true)}
+                                label="نمایش موارد بیشتر"
+                                disabled={showRestOfHistory}>
                             </Chip>
                         </Divider>
+                        {showRestOfHistory && (
+                            <>
+                                {historyList.slice(2).map((historyItem, index) => (
+                                    <>
+                                        <ListItemOfCalls key={historyItem.id} lastItem={true}
+                                                         historyItem={historyItem}/>
+                                        <Divider/>
+                                    </>
+                                ))}
+                            </>)
+                        }
                     </Box>
                 )}
             </Stack>
diff --git a/src/lib/callWidget/hooks/useCallerHistory.jsx b/src/lib/callWidget/hooks/useCallerHistory.jsx
index 62a8ed2..1a334df 100644
--- a/src/lib/callWidget/hooks/useCallerHistory.jsx
+++ b/src/lib/callWidget/hooks/useCallerHistory.jsx
@@ -21,9 +21,38 @@ const useCallerHistory = (id) => {
     });
 
     return {
-        historyList: data,
-        isLoadingHistoryList: isLoading,
-        errorHistoryList: !data
+        historyList: [
+            {
+                id: 1,
+                operator_name: "اشکان خطیبی",
+                answer_date: "1379/02/03 13:50",
+                topic: "موضوع تست",
+                sub_topic: "زیر موضوع تست با متن طولانی تر از موضوع"
+            },
+            {
+                id: 2,
+                operator_name: "مصیب خطیبی",
+                answer_date: "1385/01/23 23:10",
+                topic: "موضوع تست2",
+                sub_topic: "زیر موضوع تست با متن طولانی تر از موضوع2"
+            },
+            {
+                id: 2,
+                operator_name: "علی جلالی",
+                answer_date: "1385/01/01 12:12",
+                topic: "موضوع تست23",
+                sub_topic: "زیر 22موضوع تست با متن طولانی تر از موضوع32"
+            },
+            {
+                id: 2,
+                operator_name: "حسن محمودی",
+                answer_date: "1385/01/01 11:22",
+                topic: "موضوع اول",
+                sub_topic: "زیر دوم تست با متن طولانی تر از موضوع32"
+            }
+        ],
+        isLoadingHistoryList: false,
+        errorHistoryList: false
     }
 };