diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index c17c938..fe2db27 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -250,5 +250,13 @@
     "delete_tooltip": "حذف",
     "update_tooltip": "ویرایش",
     "update_expert": "ویرایش کارشناس"
+  },
+  "CallHistory": {
+    "topic": "موضوع",
+    "sub_topic": "زیر موضوع",
+    "operator": "اپراتور",
+    "date": "تاریخ",
+    "call_history_of": "تاریخچه تماس های",
+    "call_history_not_found": "تاریخچه ای برای این تماس یافت نشد"
   }
 }
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
new file mode 100644
index 0000000..2ad8326
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviusOperatorData/index.jsx
@@ -0,0 +1,28 @@
+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 t = useTranslations();
+    return (
+        <ListItem>
+            <ListItemAvatar>
+                <Avatar sx={{backgroundColor: "primary.light"}}>
+                    <HeadsetMicIcon/>
+                </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={
+                <Box sx={{display: "flex", alignItems: "end"}}>
+                    <Typography sx={{marginRight: 1, color: "#545151"}}>
+                        اشکان خطیبی
+                    </Typography>
+                    <Typography variant="caption" sx={{color: "secondary.main"}}>
+                        ({t("CallHistory.operator")})
+                    </Typography>
+                </Box>
+            } secondary="1379/02/03 13:50"/>
+        </ListItem>
+    )
+}
+
+export default PreviusOperatorData
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
new file mode 100644
index 0000000..b7bc4ed
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx
@@ -0,0 +1,43 @@
+import {useTranslations} from "next-intl";
+import {Box, List, ListItem, Typography} from "@mui/material";
+
+const Topics = ({tab}) => {
+    const t = useTranslations();
+    return (
+        <Box timeout="auto" unmountOnExit>
+            <List component="div" disablePadding>
+                <ListItem sx={{px: 4}}>
+                    <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
+                        <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
+                            {t("CallHistory.topic")}:
+                        </Typography>
+                        <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
+                            موضوع تست
+                        </Typography>
+                    </Box>
+                </ListItem>
+            </List>
+            <List component="div" disablePadding>
+                <ListItem sx={{px: 4}}>
+                    <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
+                        <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
+                            {t("CallHistory.sub_topic")}:
+                        </Typography>
+                        <Typography variant="subtitle2" sx={{
+                            width: "200px",
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            whiteSpace: "nowrap",
+                            textAlign: "end",
+                            color: "#837e7e"
+                        }}>
+                            زیر موضوع تست با متن طولانی تر از موضوع
+                        </Typography>
+                    </Box>
+                </ListItem>
+            </List>
+        </Box>
+    )
+}
+
+export default Topics
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/__tests__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/__tests__/index.test.js
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..84f5288
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
@@ -0,0 +1,19 @@
+import {useTranslations} from "next-intl";
+import {Divider, List} from "@mui/material";
+import PreviusOperatorData from "./PreviusOperatorData";
+import Topics from "./Topics";
+
+const ListItemOfCalls = ({tab}) => {
+    const t = useTranslations();
+    return (
+        <>
+            <List sx={{width: '100%', bgcolor: 'rgba(222,234,215,0.11)'}}>
+                <PreviusOperatorData/>
+                <Topics/>
+            </List>
+            <Divider/>
+        </>
+    )
+}
+
+export default ListItemOfCalls
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/__tests__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/__tests__/index.test.js
new file mode 100644
index 0000000..e69de29
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 048c091..37a6dfc 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,6 +1,45 @@
+import {useTranslations} from "next-intl";
+import {Box, Typography} from "@mui/material";
+import ListItemOfCalls
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls";
+
 const CallHistory = ({tab}) => {
+    const t = useTranslations();
     return (
-        <>CallHistory - {tab.id}</>
+        <>
+            <Box sx={{
+                display: "flex",
+                alignItems: "end",
+                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>
+            </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>
+        </>
     )
 }
 
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
index 79dc736..8fc1d87 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
@@ -1,15 +1,19 @@
-import {Grid} from "@mui/material";
+import {Divider, Grid} from "@mui/material";
 import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions";
 import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory";
 
 const CallTabPanel = ({tab}) => {
     return (
-        <Grid container columns={{xs: 3}} sx={{display: !tab.active && 'none'}} role="tabpanel"
+        <Grid container columns={{xs: 3}} sx={{display: !tab.active && 'none', height: '100%', overflow: "hidden"}}
+              role="tabpanel"
               id={`answer-tabpanel-${tab.id}`} aria-labelledby={`answer-tab-${tab.id}`}>
             <Grid item xs={2}>
                 <CallActions tab={tab}/>
             </Grid>
-            <Grid item xs={1}>
+            <Grid item>
+                <Divider orientation="vertical"/>
+            </Grid>
+            <Grid item xs sx={{height: "100%", overflow: "scroll"}}>
                 <CallHistory tab={tab}/>
             </Grid>
         </Grid>
diff --git a/src/lib/callWidget/contexts/answers.jsx b/src/lib/callWidget/contexts/answers.jsx
index a9f7ae2..adb622a 100644
--- a/src/lib/callWidget/contexts/answers.jsx
+++ b/src/lib/callWidget/contexts/answers.jsx
@@ -17,7 +17,11 @@ export const AnswersContext = createContext()
 export const AnswersProvider = ({children}) => {
     const [openCallDialog, setOpenCallDialog] = useState(false)
     const [activeTab, setActiveTab] = useState(0)
-    const [state, dispatch] = useReducer(reducer, []);
+    const [state, dispatch] = useReducer(reducer, [{
+        id: 2,
+        phone_number: "09036949387",
+        active: true
+    }]);
 
     return <AnswersContext.Provider
         value={{