diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/__test__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/__test__/index.test.js
new file mode 100644
index 0000000..69f9b52
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/__test__/index.test.js
@@ -0,0 +1,43 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
+import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
+import ActionHeader from "..";
+
+const tab = {
+    active: true,
+    active_category_id: 1,
+    phone_number : "09134849737"
+}
+
+describe('Action Header Button from Call Actions Categories', () => {
+    describe('Rendering', () => {
+        it('should see header text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <ActionHeader tab={tab} />
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const headingElement = screen.getByRole('heading', {
+                name: /\.\.\.\. عملیات های مربوط به تماس:/i
+              })
+            await waitFor(() => {
+                expect(headingElement).toBeInTheDocument()
+            })
+        });
+        it('should see phone number', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <ActionHeader tab={tab} />
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const phone_numberElement = screen.queryByText(/09134849737/i)
+            await waitFor(() => {
+                expect(phone_numberElement).toBeInTheDocument()
+            })
+        });
+    });
+});
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/index.jsx
index 9ae87c0..97b4297 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/index.jsx
@@ -15,11 +15,11 @@ const ActionHeader = ({tab}) => {
             <Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
                 .... {t("CallAction.call_history_of")}:
             </Typography>
-            <Typography variant="subtitle1" sx={{color: "#fff"}}>
+            <Typography data-testid="phone_number" variant="subtitle1" sx={{color: "#fff"}}>
                 {tab.phone_number} ....
             </Typography>
         </Stack>
     )
 }
 
-export default ActionHeader
+export default ActionHeader
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/CallActionCategoriesButton.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/CallActionCategoriesButton.jsx
index f568732..40c2b18 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/CallActionCategoriesButton.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/CallActionCategoriesButton.jsx
@@ -8,6 +8,7 @@ const CallActionCategoriesButton = ({ category, tab }) => {
         
             <Grid item xs={4}>
                 <Button
+                sx={{py : 1.5}}
                     fullWidth
                     variant={"contained"}
                     color={tab.active_category_id === category.category_id ? "primary" : "inherit"}
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js
index 817bcde..195df02 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js
@@ -1,4 +1,4 @@
-import {render, screen, waitFor} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
 import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
 import CallActionCategoriesButton from "../CallActionCategoriesButton";
@@ -28,4 +28,24 @@ describe('Call Action Categories Button from Call Actions Categories', () => {
             })
         });
     });
-});
\ No newline at end of file
+    describe("Behavior", ()=>{
+        it("Should change the color when button clecked",async()=>{
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionCategoriesButton tab={tab} category={category}/>
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.getByRole('button', {
+                name: /اطلاعات راه ها/i
+            })
+
+            fireEvent.click(buttonElement);
+
+            await waitFor(() => {
+                expect(buttonElement).toHaveStyle('background-color: rgb(12, 31, 23)');
+            })
+        })
+    })
+})
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/index.test.js
new file mode 100644
index 0000000..ee223ff
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/index.test.js
@@ -0,0 +1,29 @@
+import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
+import CallActionsCategories from "..";
+import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
+import { render, screen, waitFor } from "@testing-library/react";
+
+const tab = {
+    active: true,
+    active_category_id: 1,
+    id : 1,
+    phone_number : "09134849737"
+}
+
+describe('Call Action Categories Button from Call Actions Categories', () => {
+    describe('Rendering', () => {
+        it('should see divider text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionsCategories tab={tab}/>
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const divider_textElement = screen.queryByText("موضوع ها")
+            await waitFor(() => {
+                expect(divider_textElement).toBeInTheDocument()
+            })
+        });
+    });
+})
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/index.jsx
index d4dec8a..dc814ec 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/index.jsx
@@ -9,8 +9,8 @@ const CallActionsCategories = ({ tab }) => {
     return (
         <>
             <Divider sx={{margin : 2}}><Chip label={t("CallAction.categories")} variant="outlined"/></Divider>
-            <Stack sx={{margin : 1}} direction={"row"}>
-                <Grid container spacing={1} sx={{padding : 1}}>
+            <Stack sx={{m : 1, p : 1}} direction={"row"}>
+                <Grid container spacing={2}>
                     {categoryLists.map((category) => {
                         return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
                     })}
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx
index d3c893d..d2f581a 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx
@@ -23,7 +23,7 @@ const CallActionSubcategoriesButton = ({ sub_category, tab }) => {
     };
     return sub_category.category_id === tab.active_category_id ? (
         <Grid item xs={3}>
-            <Button fullWidth color="inherit" onClick={handleSubcategoryButton} variant={"contained"}>
+            <Button sx={{py : 1.5}} fullWidth color="inherit" onClick={handleSubcategoryButton} variant={"contained"}>
                 {sub_category.subcategory_name}
             </Button>
         </Grid>
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js
index 55e69e0..718f7cd 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js
@@ -3,39 +3,35 @@ import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWith
 import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
 import CallActionSubcategoriesButton from "../CallActionSubcategoriesButton";
 
-const sub_category = [
-    {
-        category_id: 1,
-        category_name: "اطلاعات راه",
-        subcategory_id: 1,
-        subcategory_name:"اطلاعات باز و بسته"
-    }
-]
+const sub_category = {
+    category_id: 1,
+    category_name: "اطلاعات راه",
+    subcategory_id: 1,
+    subcategory_name: "اطلاعات باز و بسته"
+};
 
-const tab = [
-    {
-        active: true,
-        active_category_id: 1,
-        date: new Date(),
-        id: 1,
-        phone_number: "09134849737"
-    }
-]
+const tab = {
+    active: true,
+    active_category_id: 1,
+    date: new Date(),
+    id: 1,
+    phone_number: "09134849737"
+};
 
 describe('Call Action Subcategories Button from Call Actions Categories', () => {
     describe('Rendering', () => {
-        it('should categories names', async () => {
+        it('should render subcategory name', async () => {
             render(
                 <MockAppWithProviders>
                     <AnswersProvider>
                         <CallActionSubcategoriesButton sub_category={sub_category} tab={tab} />
                     </AnswersProvider>
                 </MockAppWithProviders>
-            )
-            const subCategoryElement = screen.queryByText("اطلاعات باز و بسته")
-            await waitFor(()=>{
-                expect(subCategoryElement).toBeInTheDocument()
-            })
+            );
+            const subCategoryElement = screen.queryByText(/اطلاعات باز و بسته/i);
+            await waitFor(() => {
+                expect(subCategoryElement).toBeInTheDocument();
+            });
         });
     });
 });
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/index.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/index.test.js
new file mode 100644
index 0000000..2195bde
--- /dev/null
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/index.test.js
@@ -0,0 +1,29 @@
+import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
+import CallActionsSubcategories from "..";
+import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
+import { render, screen, waitFor } from "@testing-library/react";
+
+const tab = {
+    active: true,
+    active_category_id: 1,
+    id : 1,
+    phone_number : "09134849737"
+}
+
+describe('Call Action Categories Button from Call Actions Categories', () => {
+    describe('Rendering', () => {
+        it('should see divider text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionsSubcategories tab={tab}/>
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const divider_textElement = screen.queryByText("زیر موضوع ها")
+            await waitFor(() => {
+                expect(divider_textElement).toBeInTheDocument()
+            })
+        });
+    });
+})
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx
index dba6fc1..0978e4d 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx
@@ -9,8 +9,8 @@ const CallActionsSubcategories = ({ tab }) => {
     return (
         <>
             <Divider sx={{margin : 2}}><Chip label={t("CallAction.subcategories")} variant="outlined"/></Divider>
-            <Stack sx={{margin : 1}} direction={"row"}>
-                <Grid container spacing={1} sx={{padding : 1}}>
+            <Stack sx={{m : 1, p : 1 }} direction={"row"}>
+                <Grid container spacing={2}>
                     {subCategoryLists.map((sub_category, index) => {
                         return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} />;
                     })}
diff --git a/src/lib/callWidget/hooks/useCallerHistory.jsx b/src/lib/callWidget/hooks/useCallerHistory.jsx
index 68ee6d0..810209d 100644
--- a/src/lib/callWidget/hooks/useCallerHistory.jsx
+++ b/src/lib/callWidget/hooks/useCallerHistory.jsx
@@ -29,8 +29,8 @@ const useCallerHistory = (call_id, phone_number, max_size) => {
     return {
         firstItemOfHistory: validData.length === 0 ? false : validData[0],
         historyList: validData.length < 2 ? false : validData.slice(1),
-        isLoadingHistoryList: true,
-        errorHistoryList: false
+        isLoadingHistoryList: isLoading,
+        errorHistoryList: !data
     }
 };