diff --git a/mocks/handler.js b/mocks/handler.js
index 8d22664..1f4a712 100644
--- a/mocks/handler.js
+++ b/mocks/handler.js
@@ -1,4 +1,10 @@
-import {GET_PERMISSIONS_LIST, GET_ROLE_MANAGEMENT, GET_USER_ROUTE, SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+import {
+    GET_PERMISSIONS_LIST,
+    GET_ROLE_MANAGEMENT,
+    GET_TAB_DETAILS,
+    GET_USER_ROUTE,
+    SET_USER_PASSWORD
+} from "@/core/data/apiRoutes";
 import {rest} from "msw";
 
 export const handler = [
@@ -84,5 +90,20 @@ export const handler = [
             ),
         );
     }),
+    rest.get(`${GET_TAB_DETAILS}/:id`, (req,res, ctx) =>{
+        const {id} = req.params
+        if(id == 1){
+            return res(
+                ctx.json(
+                    {
+                        data : {
+                            phone_number : "09134849737",
+                            date : "2023-10-10T13:03:18.000000Z"
+                        }
+                    }
+                )
+            )
+        }
 
+    })
 ]
\ No newline at end of file
diff --git a/src/components/dashboard/role-management/index.jsx b/src/components/dashboard/role-management/index.jsx
index 5251c8b..6376b30 100644
--- a/src/components/dashboard/role-management/index.jsx
+++ b/src/components/dashboard/role-management/index.jsx
@@ -1,8 +1,8 @@
 import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
 import DashboardLayout from "@/layouts/DashboardLayout";
+import moment from "jalali-moment";
 
 function DashboardRoleManagementComponent() {
-
     return (
         <DashboardLayout>
             <RoleManagementComponent />
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
new file mode 100644
index 0000000..6856eec
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
@@ -0,0 +1,34 @@
+import {Skeleton, Stack, Typography} from "@mui/material";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import useAnswer from "@/lib/callWidget/hooks/useAnswer";
+import moment from "jalali-moment";
+
+const CallTabDetails = ({tab}) => {
+    const {data, isLoading, error} = useAnswer(tab.id)
+    const dateChange = (date) => {
+        moment.relativeTimeThreshold('s', 60);
+        return moment(date).locale("fa").fromNow()
+    }
+    return (
+        <Stack direction="row" justifyContent="center" alignItems="center" spacing={3}>
+            <VisibilityIcon color="red"/>
+            <Stack>
+                <Typography variant="h6">{tab.phone_number}</Typography>
+                {
+                    error ? (
+                        <Typography>errror</Typography>
+                        ):
+                        (
+                            isLoading ? (
+                                    <Skeleton variant="text" animation="wave"/>
+                                )
+                                :(
+                                    <Typography color="gray">5 روز پیش</Typography>
+                                )
+                        )
+                }
+            </Stack>
+        </Stack>
+    )
+}
+export default CallTabDetails
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabLabel.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabLabel.jsx
index 0137265..dc1811a 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabLabel.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabLabel.jsx
@@ -1,6 +1,8 @@
-import {IconButton, Stack, Typography, Zoom} from "@mui/material";
+import {IconButton, Stack, Zoom} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import CallTabDetails
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails";
 
 const CallTabLabel = ({tab}) => {
     const {closeAnswerTab} = useAnswers()
@@ -10,7 +12,7 @@ const CallTabLabel = ({tab}) => {
 
     return (
         <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
-            <Typography>{tab.phone_number} - {tab.id}</Typography>
+            <CallTabDetails tab={tab} />
             <Zoom in={tab.active}>
                 <IconButton onClick={() => handleCloseClick(tab.id)}>
                     <CloseIcon/>
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
new file mode 100644
index 0000000..9714201
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
@@ -0,0 +1,35 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import CallTabDetails
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails";
+const tab = {
+    phone_number : "09134849737",
+    id : 1
+}
+
+describe("Call Tab Details from Call Tan List", ()=>{
+    describe("Rendering", ()=>{
+        it('Should see the phone number on tab detail', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab={tab}/>
+                </MockAppWithProviders>
+            )
+            const phoneNumberElement = screen.getByRole("heading", {level : 6})
+            await  waitFor(()=>{
+                expect(phoneNumberElement).toHaveTextContent("09134849737")
+            })
+        });
+        it('Should see the date on tab detail', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab={tab}/>
+                </MockAppWithProviders>
+            )
+            const dateElement = screen.queryByText("5 روز پیش")
+            await  waitFor(()=>{
+                expect(dateElement).toHaveTextContent("5 روز پیش")
+            })
+        });
+    })
+})
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTableLabel.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTableLabel.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx
index 249d005..6a9c5ef 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx
@@ -17,7 +17,7 @@ const CallTabsList = () => {
                 variant={'fullWidth'}
             >
                 {answersList.map((answer) => (
-                    <Tab component={'div'} sx={{py: 0.5, pr: 0}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
+                    <Tab component={'div'} sx={{py: 0.5, pr: 0, border : 1}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
                 ))}
             </Tabs>
         </Box>
diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js
index 4d0231f..3fc0300 100644
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
@@ -24,4 +24,9 @@ export const DELETE_ROLE_MANAGEMENT =
 
 export const GET_PERMISSIONS_LIST =
     BASE_URL + "/api/permissions/list"
-//role management
\ No newline at end of file
+//role management
+
+//tabs details
+export const GET_TAB_DETAILS =
+    BASE_URL + "/details"
+//tabs details
\ No newline at end of file
diff --git a/src/lib/callWidget/contexts/answers.jsx b/src/lib/callWidget/contexts/answers.jsx
index a9f7ae2..3e49bce 100644
--- a/src/lib/callWidget/contexts/answers.jsx
+++ b/src/lib/callWidget/contexts/answers.jsx
@@ -17,7 +17,19 @@ 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:45,
+        phone_number:'09120630676',
+        active:true
+    }, {
+        id:50,
+        phone_number:'09120630675',
+        active:true
+    }, {
+        id:55,
+        phone_number:'09120630672',
+        active:true
+    }]);
 
     return <AnswersContext.Provider
         value={{
diff --git a/src/lib/callWidget/hooks/useAnswer.jsx b/src/lib/callWidget/hooks/useAnswer.jsx
new file mode 100644
index 0000000..d0cf0b2
--- /dev/null
+++ b/src/lib/callWidget/hooks/useAnswer.jsx
@@ -0,0 +1,25 @@
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+import {GET_TAB_DETAILS} from "@/core/data/apiRoutes";
+
+const useAnswer = (id) => {
+    const requestServer = useRequest({auth: true, notification: false})
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, error, isLoading} = useSWR(`${GET_TAB_DETAILS}/${id}`, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        keepPreviousData : true
+    })
+    //swr config
+
+    // render data
+    return {data, isLoading, error}
+}
+export default useAnswer;
\ No newline at end of file