diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 0ade5ed574a4be8a94f0b2e0d65dbb0d483cc90e..6298a6fde833a462691df798cd9747ce370def22 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -23,6 +23,7 @@ interface TableProps {
   searchPlaceholder?: string;
   maximumData?: number;
   rowOnClick?: (row: Array<ValueType>) => void;
+  itemPerPage?: number;
 }
 
 const Click = styled.div`
@@ -93,6 +94,7 @@ export default function Table({
   onChange = async () => new Promise<Array<Array<ValueType>>>(() => []),
   maximumData = -1,
   rowOnClick,
+  itemPerPage,
 }: TableProps) {
   const { colors } = useContext(ThemeContext) || DEFAULT_THEME;
   const [previousDataTotal, setPreviousDataTotal] = useState(0);
@@ -118,18 +120,24 @@ export default function Table({
       return;
 
     setIsLoading(true);
-    const newData: Array<Array<ValueType>> = await onChange(
-      searchValue,
-      newPageNumber
-    );
-    setIsLoading(false);
+    await onChange(searchValue, newPageNumber).then((newData) => {
+      setIsLoading(false);
 
-    if (newData.length === 0 || newData[0].length === 0) return;
-    setPageNumber(newPageNumber);
-    setPreviousDataTotal(
-      previousDataTotal + (sign === 1 ? data.length : -newData.length)
-    );
-    setData([...newData]);
+      if (newData.length === 0 || newData[0].length === 0) return;
+      setPageNumber(newPageNumber);
+      setPreviousDataTotal(
+        previousDataTotal + (sign === 1 ? data.length : -newData.length)
+      );
+      if (
+        action === PageAction.Prev &&
+        previousDataTotal + data.length === maximumData
+      ) {
+        setPreviousDataTotal(
+          previousDataTotal - (itemPerPage ? itemPerPage : 10)
+        );
+      }
+      setData([...newData]);
+    });
   };
 
   const [couldGoBack, couldGoNext] = [
@@ -175,14 +183,14 @@ export default function Table({
           <Button
             data-test-id="search-button"
             onClick={async () => {
-              const newPageNumber = 1;
+              const newPageNumber = pageNumber;
               setIsLoading(true);
               const newData = await onChange(searchValue, newPageNumber);
               setIsLoading(false);
               if (newData.length === 0 || newData[0].length === 0) return;
 
               setPageNumber(newPageNumber);
-              setPreviousDataTotal(0);
+
               setData([...newData]);
             }}
           >
@@ -315,11 +323,15 @@ export default function Table({
             data-test-id="prev-button"
             id="prev-button"
             cursor="pointer"
-            onClick={couldGoBack ? () => changePage(PageAction.Prev) : () => {}}
+            onClick={
+              couldGoBack && searchValue === ''
+                ? () => changePage(PageAction.Prev)
+                : () => {}
+            }
             src="/assets/icons/right-paging.svg"
             origin="50% 50%"
             height="16px"
-            opacity={couldGoBack ? 1 : 0.5}
+            opacity={couldGoBack && searchValue === '' ? 1 : 0.5}
             transform="rotateZ(180deg)"
           />
           <Gap gap={12} axis={Gap.Axis.Horizontal} />
@@ -332,10 +344,14 @@ export default function Table({
             data-test-id="next-button"
             id="next-button"
             cursor="pointer"
-            onClick={couldGoNext ? () => changePage(PageAction.Next) : () => {}}
+            onClick={
+              couldGoNext && searchValue === ''
+                ? () => changePage(PageAction.Next)
+                : () => {}
+            }
             src="/assets/icons/right-paging.svg"
             height="16px"
-            opacity={couldGoNext ? 1 : 0.5}
+            opacity={couldGoNext && searchValue === '' ? 1 : 0.5}
           />
         </Box>
       </Box>
diff --git a/src/scenes/ActivityLog/components/ActivityList/index.tsx b/src/scenes/ActivityLog/components/ActivityList/index.tsx
index c15cd89de5ac5fee68ae18d12f6d48eb6af132a2..7916f98256dc63ffe40aac5fb2aae1737e411e0a 100644
--- a/src/scenes/ActivityLog/components/ActivityList/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityList/index.tsx
@@ -201,7 +201,7 @@ export default function ActivityList() {
 
       <Box width="100%" mainAxis="flex-end">
         <Text color={colors.mediumGray}>
-          {((page - 1) * 10 + logList.length).toString() + ' dari ' + totalLog}
+          {((page - 1) * 20 + logList.length).toString() + ' dari ' + totalLog}
         </Text>
         <Gap gap={12} axis={Gap.Axis.Horizontal} />
         <Icon
diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
index 22660dc5daa6924ba8e5a81d23271494b3818900..a9ab7171742a8a1417da16ff6b71786202037917 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
@@ -7,314 +7,318 @@ import { AppContext } from 'contexts';
 import { mount } from 'enzyme';
 
 const dummyLog = {
-    status: 200,
-    data: {
-        username: "Test",
-        is_admin: false,
-        previous: true,
-        next: true,
-        count: 1,
-        results: [
-            {
-                action_type: "Delete",
-                model_name: "Account",
-                object_id: "12345",
-                recorded_at: "2020-05-31T23:03:35.854615+07:00",
-            },
-        ]
-    }
-}
+  status: 200,
+  data: {
+    username: 'Test',
+    is_admin: false,
+    previous: true,
+    next: true,
+    count: 1,
+    results: [
+      {
+        action_type: 'Delete',
+        model_name: 'Account',
+        object_id: '12345',
+        recorded_at: '2020-05-31T23:03:35.854615+07:00',
+      },
+    ],
+  },
+};
 
 jest.mock('axios');
 const mockedAxios = axios as jest.Mocked<typeof axios>;
 const testProps = {
-    services: {
-        main: useMainService('dummyToken'),
-    },
+  services: {
+    main: useMainService('dummyToken'),
+  },
 };
 
 it('ActivityTabel renders correctly', () => {
-    const instance = renderer.create(
-        <ActivityTabel />
-    );
+  const instance = renderer.create(<ActivityTabel />);
 
-    expect(instance).toBeTruthy();
+  expect(instance).toBeTruthy();
 });
 
 describe('load logs and generate log messages correctly', () => {
-    it('Monitoring case', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Monitoring Case",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ],
-                investigation_case: {
-                    case_subject: {
-                        name: "Test"
-                    }
-                }
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+  it('Monitoring case', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Monitoring Case',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+        investigation_case: {
+          case_subject: {
+            name: 'Test',
+          },
+        },
+      },
     });
 
-    it('Investigation case', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Investigation Case",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ],
-                case_subject: {
-                    name: "Test"
-                }
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    it('Case subject', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Case Subject",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ],
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+    expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Investigation case', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Investigation Case',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+        case_subject: {
+          name: 'Test',
+        },
+      },
     });
 
-    it('Create account', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                username: "Test",
-                is_admin: false,
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    it('Create account, but account deleted', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+    expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Case subject', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Case Subject',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
     });
 
-    it('Edit account', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                username: "Test",
-                is_admin: false,
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Edit",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    it('Edit account, but account deleted', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 404,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Edit",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    expect(mockedAxios.request).toBeCalled();
+  });
 
-    it('Delete account', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                username: "Test",
-                is_admin: false,
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Delete",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+  it('Create account', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        username: 'Test',
+        is_admin: false,
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
     });
-});
 
-it('fetch new logs and change page number when press next or previous button', () => {
-    mockedAxios.request.mockResolvedValue(dummyLog);
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
+
+    expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Create account, but account deleted', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
 
     const instance = mount(
-        <AppContext.Provider value={testProps}>
-            <ActivityTabel />
-        </AppContext.Provider>
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
     );
+
     expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Edit account', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        username: 'Test',
+        is_admin: false,
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Edit',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
 
-    let nextButton = instance.find('[data-test-id="next-button"]');
-    let prevButton = instance.find('[data-test-id="prev-button"]');
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    let pageNumber = instance.find('Text').findWhere(elem => elem.prop('id') === 'page-number');
-    expect(pageNumber.text()).toBe('1');
-    nextButton.at(0).simulate('click');
     expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Edit account, but account deleted', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 404,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Edit',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
+
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    prevButton.at(0).simulate('click');
-    pageNumber = instance.find('Text').findWhere(elem => elem.prop('id') === 'page-number');
-    expect(pageNumber.text()).toBe('1');
     expect(mockedAxios.request).toBeCalled();
-})
+  });
 
-it('Sort and filter are displayed and clickable', () => {
-    mockedAxios.request.mockResolvedValue(dummyLog);
+  it('Delete account', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        username: 'Test',
+        is_admin: false,
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Delete',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
 
     const instance = mount(
-        <AppContext.Provider value={testProps}>
-            <ActivityTabel />
-        </AppContext.Provider>
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
     );
-    expect(mockedAxios.request).toBeCalled();
 
-    let sortByDate = instance.find("#sortbydate");
-    let sortByObj = instance.find("#sortbyobj");
-    let filter = instance.find("#filter");
+    expect(mockedAxios.request).toBeCalled();
+  });
+});
 
-    sortByDate.simulate("click");
-    sortByObj.simulate("click");
-    filter.simulate("click");
+it('fetch new logs and change page number when press next or previous button', () => {
+  mockedAxios.request.mockResolvedValue(dummyLog);
+
+  const instance = mount(
+    <AppContext.Provider value={testProps}>
+      <ActivityTabel />
+    </AppContext.Provider>
+  );
+  expect(mockedAxios.request).toBeCalled();
+
+  let nextButton = instance.find('[data-test-id="next-button"]');
+  let prevButton = instance.find('[data-test-id="prev-button"]');
+
+  let pageNumber = instance
+    .find('Text')
+    .findWhere((elem) => elem.prop('id') === 'page-number');
+  expect(pageNumber.text()).toBe('1');
+  nextButton.at(0).simulate('click');
+  expect(mockedAxios.request).toBeCalled();
+
+  prevButton.at(0).simulate('click');
+  pageNumber = instance
+    .find('Text')
+    .findWhere((elem) => elem.prop('id') === 'page-number');
+  expect(pageNumber.text()).toBe('1');
+  expect(mockedAxios.request).toBeCalled();
+});
 
-    let table = instance.find("Table");
-    expect(table).toBeTruthy();
-});
\ No newline at end of file
+it('Sort and filter are displayed and clickable', () => {
+  mockedAxios.request.mockResolvedValue(dummyLog);
+
+  const instance = mount(
+    <AppContext.Provider value={testProps}>
+      <ActivityTabel />
+    </AppContext.Provider>
+  );
+  expect(mockedAxios.request).toBeCalled();
+
+  let sortByIndex = instance.find('#sortbyindex');
+  let sortByDate = instance.find('#sortbydate');
+  let sortByObj = instance.find('#sortbyobj');
+  let filter = instance.find('#filter');
+
+  sortByIndex.at(0).simulate('click');
+  sortByDate.at(0).simulate('click');
+  sortByObj.at(0).simulate('click');
+  filter.at(0).simulate('click');
+
+  let table = instance.find('Table');
+  expect(table).toBeTruthy();
+});
diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
index d766dd9f44e8f666cc63305bc6989b0821dcd69e..b1977117b08a24d1d11910fe077f3c79f5ef4f2f 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { ThemeContext } from 'styled-components';
 import { Box, Gap, Icon, Table, Field, Button, Checkbox } from 'components';
 import { AppContext } from 'contexts';
 import { DateProps } from 'contexts/AppContext/types';
@@ -10,11 +9,13 @@ import {
 } from 'scenes/ActivityLog/utilities/utils';
 
 export default function ActivityTabel() {
+  const itemPerPage = 20;
   const { services } = useContext(AppContext);
   const [logList, setLogList] = useState<Log[]>([]);
   const [logTable, setLogTable] = useState<Log[]>([]);
   const [page, setPage] = useState(1);
   const [totalLog, setTotalLog] = useState(0);
+  const [indexAscending, setIndexAscending] = useState(false);
   const [dateAscending, setDateAscending] = useState(true);
   const [objAscending, setObjAscending] = useState(true);
   const [filterToggle, setFilterToggle] = useState<boolean>(true);
@@ -27,6 +28,13 @@ export default function ActivityTabel() {
     end_date: new Date(),
   });
 
+  const addNumber = (page: number, logs: any) => {
+    for (let i = 0; i < logs.length; i++) {
+      logs[i]['detail']['index'] = itemPerPage * (page - 1) + i + 1;
+    }
+    return logs;
+  };
+
   const fetchLog = async (
     page: number,
     roleFilterQuery: String,
@@ -69,11 +77,31 @@ export default function ActivityTabel() {
       setFilterToggle(!filterToggle);
       setPage(1);
     }
+    logs = addNumber(page, logs);
     setLogList(logs);
     setLogTable(logs);
     setTotalLog(logResponse.data.count);
   };
 
+  const sortLogByIndex = () => {
+    if (indexAscending) {
+      setLogTable(
+        logList.sort((a, b) => {
+          if (a.detail.index === b.detail.index) return 0;
+          return a.detail.index > b.detail.index ? 1 : -1;
+        })
+      );
+    } else {
+      setLogTable(
+        logList.sort((a, b) => {
+          if (a.detail.index === b.detail.index) return 0;
+          return a.detail.index < b.detail.index ? 1 : -1;
+        })
+      );
+    }
+    setIndexAscending(!indexAscending);
+  };
+
   const sortLogByDate = () => {
     if (dateAscending) {
       setLogTable(
@@ -112,8 +140,9 @@ export default function ActivityTabel() {
     setObjAscending(!objAscending);
   };
 
-  const getTableData = () =>
-    logTable.map(({ timestamp, detail }) => [
+  const getTableData = () => {
+    let tempData = logTable.map(({ timestamp, detail }) => [
+      detail.index,
       timestamp.toLocaleString('id-ID', {
         weekday: 'long',
         year: 'numeric',
@@ -131,10 +160,8 @@ export default function ActivityTabel() {
         ? detail.object.slice(0, 77) + '...'
         : detail.object,
     ]);
-
-  useEffect(() => {
-    fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery);
-  }, [page]);
+    return tempData;
+  };
 
   return (
     <>
@@ -201,6 +228,17 @@ export default function ActivityTabel() {
       <Box width="100%" axis={Box.Axis.Horizontal} margin="2em 2em">
         Urutkan dengan
         <Gap gap={40} axis={Gap.Axis.Horizontal} />
+        <Icon
+          src="/assets/icons/right-paging.svg"
+          width="20px"
+          height="17px"
+          id="sortbyindex"
+          onClick={sortLogByIndex}
+          transform={indexAscending ? 'rotateZ(-90deg)' : 'rotateZ(90deg)'}
+        />
+        <Gap gap={12} axis={Gap.Axis.Horizontal} />
+        No
+        <Gap gap={40} axis={Gap.Axis.Horizontal} />
         <Icon
           src="/assets/icons/right-paging.svg"
           width="20px"
@@ -226,6 +264,7 @@ export default function ActivityTabel() {
       <Table
         key={String(filterToggle)}
         header={[
+          'No.',
           'Hari, Tanggal',
           'Waktu',
           'Aktivitas',
@@ -237,12 +276,26 @@ export default function ActivityTabel() {
         data={getTableData()}
         maximumData={totalLog}
         onChange={async (val, pageInput) => {
-          setLogTable(
-            logList.filter((e) => (val ? e.detail.object === val : true))
-          );
-          setPage(pageInput);
-          return getTableData();
+          if (val) {
+            setLogTable(
+              logList.filter((e) =>
+                val ? e.detail.object.includes(val) : true
+              )
+            );
+            return getTableData();
+          } else {
+            setPage(pageInput);
+            return fetchLog(
+              pageInput,
+              roleFilterQuery,
+              dateFilterQuery,
+              ignoreDateFilterQuery
+            ).then(() => {
+              return getTableData();
+            });
+          }
         }}
+        itemPerPage={20}
       />
     </>
   );
diff --git a/src/scenes/ActivityLog/types/types.tsx b/src/scenes/ActivityLog/types/types.tsx
index b1f202853c96234fc377effbe7d1213d0a427be2..b98486f47bd78ce779561441788ec98a481f6192 100644
--- a/src/scenes/ActivityLog/types/types.tsx
+++ b/src/scenes/ActivityLog/types/types.tsx
@@ -1,12 +1,13 @@
 export interface Log {
-    timestamp: Date;
-    message: string;
-    detail: LogDetail;
+  timestamp: Date;
+  message: string;
+  detail: LogDetail;
 }
 
 export interface LogDetail {
-    activity: string;
-    authorRole: 'admin' | 'kader';
-    authorName: string;
-    object: string;
-}
\ No newline at end of file
+  index: number;
+  activity: string;
+  authorRole: 'admin' | 'kader';
+  authorName: string;
+  object: string;
+}
diff --git a/src/scenes/ActivityLog/utilities/utils.tsx b/src/scenes/ActivityLog/utilities/utils.tsx
index 380c24b4a06e646411b9f1279f8e41401f62b25c..e84766b380e4d8d868c9bed7949421877f537bdb 100644
--- a/src/scenes/ActivityLog/utilities/utils.tsx
+++ b/src/scenes/ActivityLog/utilities/utils.tsx
@@ -85,6 +85,7 @@ const generateLogDetail = async (
   services: any
 ): Promise<LogDetail> => {
   let logDetail: LogDetail = {
+    index: log.index,
     activity: log.model_name,
     authorRole: log.author.is_admin ? 'admin' : 'kader',
     authorName: log.author.username,