diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx
deleted file mode 100644
index c7058fe..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import useAnswers from "@/lib/callWidget/hooks/useAnswers";
-
-const CallActions = () => {
-    const {answer} = useAnswers()
-    return (
-        <>CallActions - {answer.id}</>
-    )
-}
-
-export default CallActions
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx
deleted file mode 100644
index ed053d2..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import useAnswers from "@/lib/callWidget/hooks/useAnswers";
-
-const CallHistory = () => {
-    const {answer} = useAnswers()
-    return (
-        <>CallHistory - {answer.id}</>
-    )
-}
-
-export default CallHistory
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx
deleted file mode 100644
index 9fa1b72..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Grid} from "@mui/material";
-import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions";
-import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory";
-
-const CallPanel = () => {
-    return (
-        <Grid container columns={{xs: 3}}>
-            <Grid item xs={2}>
-                <CallActions/>
-            </Grid>
-            <Grid item xs={1}>
-                <CallHistory/>
-            </Grid>
-        </Grid>
-    )
-}
-
-export default CallPanel
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx
new file mode 100644
index 0000000..d1a68f7
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx
@@ -0,0 +1,7 @@
+const CallActions = ({tab}) => {
+    return (
+        <>CallActions - {tab.id}</>
+    )
+}
+
+export default CallActions
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
new file mode 100644
index 0000000..048c091
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
@@ -0,0 +1,7 @@
+const CallHistory = ({tab}) => {
+    return (
+        <>CallHistory - {tab.id}</>
+    )
+}
+
+export default CallHistory
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
new file mode 100644
index 0000000..79dc736
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
@@ -0,0 +1,19 @@
+import {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"
+              id={`answer-tabpanel-${tab.id}`} aria-labelledby={`answer-tab-${tab.id}`}>
+            <Grid item xs={2}>
+                <CallActions tab={tab}/>
+            </Grid>
+            <Grid item xs={1}>
+                <CallHistory tab={tab}/>
+            </Grid>
+        </Grid>
+    )
+}
+
+export default CallTabPanel
\ 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
new file mode 100644
index 0000000..0137265
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabLabel.jsx
@@ -0,0 +1,23 @@
+import {IconButton, Stack, Typography, Zoom} from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallTabLabel = ({tab}) => {
+    const {closeAnswerTab} = useAnswers()
+    const handleCloseClick = (id) => {
+        closeAnswerTab(id)
+    };
+
+    return (
+        <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
+            <Typography>{tab.phone_number} - {tab.id}</Typography>
+            <Zoom in={tab.active}>
+                <IconButton onClick={() => handleCloseClick(tab.id)}>
+                    <CloseIcon/>
+                </IconButton>
+            </Zoom>
+        </Stack>
+    )
+}
+
+export default CallTabLabel
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx
new file mode 100644
index 0000000..249d005
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx
@@ -0,0 +1,27 @@
+import {Box, Tab, Tabs} from "@mui/material";
+import CallTabLabel
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallTabsList = () => {
+    const {answersList, changeActiveTabAnswers, activeTab} = useAnswers()
+    const handleChange = (event, newValue) => {
+        changeActiveTabAnswers(newValue)
+    };
+
+    return (
+        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+            <Tabs
+                value={activeTab}
+                onChange={handleChange}
+                variant={'fullWidth'}
+            >
+                {answersList.map((answer) => (
+                    <Tab component={'div'} sx={{py: 0.5, pr: 0}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
+                ))}
+            </Tabs>
+        </Box>
+    )
+}
+
+export default CallTabsList
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx
new file mode 100644
index 0000000..4e1d2f1
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx
@@ -0,0 +1,17 @@
+import CallTabsList from "src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList";
+import CallTabPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallTabs = () => {
+    const {answersList} = useAnswers()
+
+    return (
+        <>
+            <CallTabsList/>
+            {answersList.map((answer) => (
+                <CallTabPanel key={answer.id} tab={answer}/>
+            ))}
+        </>
+    )
+}
+export default CallTabs
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
index 84e443c..728f68d 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
@@ -4,18 +4,18 @@ import {useEffect} from "react";
 import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
 import useAnswers from "@/lib/callWidget/hooks/useAnswers";
 import useSocket from "@/lib/app/hooks/useSocket";
-import CallPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel";
+import CallTabs from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs";
 
 const CallWidgetDialog = () => {
     const {openCallDialog, setOpenCallDialog} = useCallDialog()
-    const {answer, newAnswer} = useAnswers()
+    const {answersList, newAnswerTab} = useAnswers()
     const socket = useSocket()
 
     useEffect(() => {
         const answerCall = (_data, act) => {
             const data = JSON.parse(_data)
-            newAnswer({
-                id: data.id,
+            newAnswerTab({
+                id: data.call_id,
                 phone_number: data.phone_number
             })
             act()
@@ -28,12 +28,12 @@ const CallWidgetDialog = () => {
     });
 
     useEffect(() => {
-        if (answer) {
-            setOpenCallDialog(true)
+        if (answersList.length === 0) {
+            setOpenCallDialog(false)
             return
         }
-        setOpenCallDialog(false)
-    }, [answer]);
+        setOpenCallDialog(true)
+    }, [answersList.length]);
 
     return (
         <Dialog
@@ -41,9 +41,7 @@ const CallWidgetDialog = () => {
             open={openCallDialog}
             TransitionComponent={DialogTransition}
         >
-            {answer && (
-                <CallPanel/>
-            )}
+            <CallTabs/>
         </Dialog>
     )
 }
diff --git a/src/lib/callWidget/contexts/answers.jsx b/src/lib/callWidget/contexts/answers.jsx
index adbca5c..a9f7ae2 100644
--- a/src/lib/callWidget/contexts/answers.jsx
+++ b/src/lib/callWidget/contexts/answers.jsx
@@ -2,10 +2,13 @@ import {createContext, useReducer, useState} from "react";
 
 const reducer = (state, action) => {
     switch (action.type) {
-        case "CREATE_ANSWER":
-            return {...action.data}
-        case "DELETE_ANSWER":
-            return null
+        case "CHANGE_ACTIVE_TAB":
+            return state.map((answer, index) => action.newValue === index ? {...answer, active: true} : {
+                ...answer,
+                active: false
+            });
+        case "CHANGE_LIST":
+            return [...action.newList]
         default:
             return state;
     }
@@ -13,7 +16,8 @@ const reducer = (state, action) => {
 export const AnswersContext = createContext()
 export const AnswersProvider = ({children}) => {
     const [openCallDialog, setOpenCallDialog] = useState(false)
-    const [state, dispatch] = useReducer(reducer, null);
+    const [activeTab, setActiveTab] = useState(0)
+    const [state, dispatch] = useReducer(reducer, []);
 
     return <AnswersContext.Provider
         value={{
@@ -21,5 +25,7 @@ export const AnswersProvider = ({children}) => {
             setOpenCallDialog,
             state,
             dispatch,
+            activeTab,
+            setActiveTab
         }}>{children}</AnswersContext.Provider>
 }
diff --git a/src/lib/callWidget/hooks/useAnswers.jsx b/src/lib/callWidget/hooks/useAnswers.jsx
index ec606db..f530e36 100644
--- a/src/lib/callWidget/hooks/useAnswers.jsx
+++ b/src/lib/callWidget/hooks/useAnswers.jsx
@@ -2,16 +2,36 @@ import {useContext} from "react";
 import {AnswersContext} from "@/lib/callWidget/contexts/answers";
 
 const useAnswers = () => {
-    const {state, dispatch} = useContext(AnswersContext)
+    const {state, dispatch, activeTab, setActiveTab} = useContext(AnswersContext)
 
-    const newAnswer = (data) => {
-        dispatch({type: 'CREATE_ANSWER', data})
+    const changeActiveTabAnswers = (newValue) => {
+        dispatch({type: 'CHANGE_ACTIVE_TAB', newValue})
+        setActiveTab(newValue)
     }
-    const deleteAnswer = () => {
-        dispatch({type: 'DELETE_ANSWER'})
+    const newAnswerTab = (data) => {
+        const newAnswer = {
+            id: data.id,
+            phone_number: data.phone_number,
+            active: true
+        }
+        const newList = [...state, newAnswer]
+        dispatch({type: 'CHANGE_LIST', newList})
+        changeActiveTabAnswers(newList.length - 1)
     }
 
-    return {answer: state, newAnswer, deleteAnswer}
+    const closeAnswerTab = (id) => {
+        const index = state.findIndex(answer => answer.id === id)
+        const newIndex = index === 0 ? 0 : index - 1
+        const newList = [...state]
+        newList.splice(index, 1);
+        if (newList.length !== 0) {
+            newList[newIndex].active = true
+            setActiveTab(newIndex)
+        }
+        dispatch({type: 'CHANGE_LIST', newList})
+    }
+
+    return {answersList: state, activeTab, setActiveTab, changeActiveTabAnswers, closeAnswerTab, newAnswerTab}
 }
 
 export default useAnswers
\ No newline at end of file