diff --git a/package.json b/package.json
index b5f6a40..cb59da2 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,11 @@
     "format": "prettier --write src/**/*.{tsx,ts}",
     "generate": "graphql-codegen --config codegen.yml"
   },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/src/generated/"
+    ]
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/src/apollo/auth.ts b/src/apollo/auth.ts
index 4acf22a..9a35c8a 100644
--- a/src/apollo/auth.ts
+++ b/src/apollo/auth.ts
@@ -34,11 +34,14 @@ export const useAuth = () => {
     username: string;
     password: string;
   }) => {
-    const { data } = await loginMutation({
-      variables: { input: { username, password } },
-    });
-
-    setLogin(data?.login!);
+    try {
+      const { data } = await loginMutation({
+        variables: { input: { username, password } },
+      });
+      setLogin(data?.login!);
+    } catch {
+      logout();
+    }
   };
 
   return {
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index f9a593b..1db0264 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -7,16 +7,12 @@ import {
   ArchiveFilled,
   Box,
   Button,
-  Dropdown,
   CloseOutlined,
-  DropdownButton,
   Flex,
-  Menu,
-  MenuItem,
-  PreferencesOutlined,
   Spacer,
   Typography,
 } from "@aircall/tractor";
+import HistoryFilter from "../components/HistoryFilter";
 
 const LIMIT = 10;
 
@@ -157,45 +153,7 @@ const HistoryPage = () => {
         backgroundColor="#fff"
       >
         <Box marginLeft="auto">
-          <Dropdown
-            trigger={
-              <DropdownButton
-                mode="link"
-                variant="primary"
-                iconClose={<PreferencesOutlined />}
-              >
-                Filters
-              </DropdownButton>
-            }
-            position="bottom"
-            anchor="end"
-          >
-            <Menu>
-              <MenuItem onClick={() => toggleFilter({ type: "voicemail" })}>
-                {filters.type.includes("voicemail") ? "✔ " : null}Voicemail
-              </MenuItem>
-              <MenuItem onClick={() => toggleFilter({ type: "answered" })}>
-                {filters.type.includes("answered") ? "✔ " : null}Answered
-              </MenuItem>
-              <MenuItem onClick={() => toggleFilter({ type: "missed" })}>
-                {filters.type.includes("missed") ? "✔ " : null}Missed
-              </MenuItem>
-
-              <Box
-                width="100%"
-                borderWidth={2}
-                borderStyle="solid"
-                borderColor="grey.lighter"
-              />
-
-              <MenuItem onClick={() => toggleFilter({ direction: "inbound" })}>
-                {filters.direction.includes("inbound") ? "✔ " : null}Inbound
-              </MenuItem>
-              <MenuItem onClick={() => toggleFilter({ direction: "outbound" })}>
-                {filters.direction.includes("outbound") ? "✔ " : null}Outbound
-              </MenuItem>
-            </Menu>
-          </Dropdown>
+          <HistoryFilter toggleFilter={toggleFilter} filters={filters} />
         </Box>
       </Flex>
 
diff --git a/src/pages/__tests__/History.test.tsx b/src/pages/__tests__/History.test.tsx
index 3c41e44..ffd246c 100644
--- a/src/pages/__tests__/History.test.tsx
+++ b/src/pages/__tests__/History.test.tsx
@@ -40,7 +40,7 @@ const callListMutationMock1: MockedResponse<CallListQuery> = {
             from: "+33140249686",
             to: "+33141645422",
             is_archived: true,
-            call_type: "voicemail",
+            call_type: "answered",
             created_at: "2021-04-30T05:05:34.691Z",
             __typename: "Call",
           },
@@ -144,4 +144,156 @@ describe("<HistoryPage/>", () => {
       expect(screen.queryByText(/load more/i)).not.toBeInTheDocument();
     });
   });
+
+  it("should be able to switch between archived calls", async function () {
+    const callListMutationMock: MockedResponse<CallListQuery> = {
+      request: {
+        query: CallListDocument,
+        variables: { offset: 0, limit: 10 },
+      },
+      result: {
+        data: {
+          paginatedCalls: {
+            nodes: [
+              {
+                id: "a252ba4b-c681-4876-a288-a887c01f71c9",
+                direction: "inbound",
+                from: "+33140249686",
+                to: "+33141645422",
+                is_archived: true,
+                call_type: "voicemail",
+                created_at: "2021-04-30T05:05:34.691Z",
+                __typename: "Call",
+              },
+              {
+                id: "3ae00776-621f-4a45-88ac-f5b642c0be6b",
+                direction: "outbound",
+                from: "+33174672416",
+                to: "+33102836165",
+                is_archived: false,
+                call_type: "missed",
+                created_at: "2021-04-30T05:54:04.614Z",
+                __typename: "Call",
+              },
+            ],
+            totalCount: 2,
+            hasNextPage: false,
+            __typename: "PaginatedCalls",
+          },
+        },
+      },
+    };
+
+    render(
+      <MockedProvider mocks={[callListMutationMock]}>
+        <HistoryPage />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText("missed call")).toBeInTheDocument();
+    expect(screen.queryByText("voicemail")).not.toBeInTheDocument();
+
+    userEvents.click(screen.getByText(/archive/i));
+
+    expect(screen.queryByText("missed call")).not.toBeInTheDocument();
+    expect(screen.getByText("voicemail")).toBeInTheDocument();
+  });
+
+  it("should be able to filter", async function () {
+    const callListMutationMock: MockedResponse<CallListQuery> = {
+      request: {
+        query: CallListDocument,
+        variables: { offset: 0, limit: 10 },
+      },
+      result: {
+        data: {
+          paginatedCalls: {
+            nodes: [
+              {
+                id: "a252ba4b-c681-4876-a288-a887c01f71c9",
+                direction: "inbound",
+                from: "+33140249686",
+                to: "+33141645422",
+                is_archived: false,
+                call_type: "voicemail",
+                created_at: "2021-04-30T05:05:34.691Z",
+                __typename: "Call",
+              },
+              {
+                id: "3ae00776-621f-4a45-88ac-f5b642c0be6b",
+                direction: "outbound",
+                from: "+33174672416",
+                to: "+33102836165",
+                is_archived: false,
+                call_type: "missed",
+                created_at: "2021-04-30T05:54:04.614Z",
+                __typename: "Call",
+              },
+              {
+                id: "a252badb-c680-4876-a288-a887c01f71c9",
+                direction: "inbound",
+                from: "+33140249686",
+                to: "+33141645422",
+                is_archived: false,
+                call_type: "voicemail",
+                created_at: "2021-04-30T05:05:34.691Z",
+                __typename: "Call",
+              },
+              {
+                id: "3ae0z776-628f-4a45-88ac-f5b642c0be6b",
+                direction: "outbound",
+                from: "+33174672416",
+                to: "+33102836165",
+                is_archived: false,
+                call_type: "missed",
+                created_at: "2021-04-30T05:54:04.614Z",
+                __typename: "Call",
+              },
+            ],
+            totalCount: 4,
+            hasNextPage: false,
+            __typename: "PaginatedCalls",
+          },
+        },
+      },
+    };
+
+    render(
+      <MockedProvider mocks={[callListMutationMock]}>
+        <HistoryPage />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.queryAllByText(/voicemail/i)).toHaveLength(2);
+
+    const filterButton = screen.getByRole("button", { name: /filters/i });
+    userEvents.click(filterButton);
+    userEvents.click(screen.getByText("Answered"));
+
+    await waitFor(() => {
+      expect(screen.queryAllByText(/voicemail/i)).toHaveLength(0);
+    });
+  });
+
+  it("should render an error message if failed to query the history", async function () {
+    render(
+      <MockedProvider mocks={[]}>
+        <HistoryPage />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.queryByText(/error/i)).toBeInTheDocument();
+  });
 });
diff --git a/src/pages/__tests__/Login.test.tsx b/src/pages/__tests__/Login.test.tsx
index 17f4417..b0857db 100644
--- a/src/pages/__tests__/Login.test.tsx
+++ b/src/pages/__tests__/Login.test.tsx
@@ -82,4 +82,27 @@ describe("<LoginPage/>", function () {
     userEvents.clear(passwordInput);
     expect(loginButton).toBeDisabled();
   });
+
+  it("should display a error message when fail to login", async function () {
+    render(
+      <MockedProvider mocks={[]}>
+        <LoginPage />
+      </MockedProvider>
+    );
+
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const loginButton = screen.getByRole("button", {
+      name: /login/i,
+    });
+
+    userEvents.type(usernameInput, usernameMock);
+    userEvents.type(passwordInput, passwordMock);
+    userEvents.click(loginButton);
+
+    expect(screen.queryByText(/error/i)).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeInTheDocument();
+    });
+  });
 });