diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 9193ab0..fc8be81 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -7,6 +7,7 @@ import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 import Stack from "@mui/material/Stack";
 import Breadcrumb from "@/components/Breadcrumb";
 import {AxiosProvider} from "@/app/(main)/axios/AxiosProvider";
+import {SetupAxiosInterceptors} from "@/app/(main)/axios/axiosInstance";
 
 export default async function MainLayout({
   children,
@@ -19,6 +20,10 @@ export default async function MainLayout({
     redirect("/login");
   }
 
+  if(session){
+      SetupAxiosInterceptors(session?.accessToken);
+  }
+
   return (
       <AxiosProvider>
           <>
diff --git a/src/components/ItemsSearch/ItemsSearch.tsx b/src/components/ItemsSearch/ItemsSearch.tsx
index 4c3a535..127a75e 100644
--- a/src/components/ItemsSearch/ItemsSearch.tsx
+++ b/src/components/ItemsSearch/ItemsSearch.tsx
@@ -11,7 +11,7 @@ import { GridDeleteIcon } from "@mui/x-data-grid";
 import { TypeEnum } from "@/app/utils/typeEnum";
 import axios from "axios";
 import {BASE_API_URL, NEXT_PUBLIC_API_URL} from "@/config/api";
-import axiosInstance from "@/app/(main)/axios/axiosInstance";
+import axiosInstance, {SetupAxiosInterceptors} from "@/app/(main)/axios/axiosInstance";
 
 type Props = {
   items: ItemsResult[];
@@ -27,6 +27,7 @@ const ItemsSearch: React.FC<Props> = ({ items }) => {
   const [pagingController, setPagingController] = useState({
       pageNum: 1,
       pageSize: 10,
+      totalCount: 0,
   })
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
@@ -79,10 +80,9 @@ const ItemsSearch: React.FC<Props> = ({ items }) => {
   );
 
     useEffect(() => {
-        if (filterObj) {
-            refetchData(filterObj);
-        }
-    }, [filterObj, pagingController]);
+        refetchData(filterObj);
+
+    }, [filterObj, pagingController.pageNum, pagingController.pageSize]);
 
     const refetchData = async (filterObj: SearchQuery) => {
         // Make sure the API endpoint is correct
@@ -96,6 +96,10 @@ const ItemsSearch: React.FC<Props> = ({ items }) => {
             const response = await axiosInstance.get<ItemsResult[]>(`${NEXT_PUBLIC_API_URL}/items/getRecordByPage`, { params });
             console.log("[debug] resposne", response)
             setFilteredItems(response.data.records);
+            setPagingController({
+                ...pagingController,
+                totalCount: response.data.total
+            })
             return response; // Return the data from the response
         } catch (error) {
             console.error('Error fetching items:', error);
@@ -132,6 +136,7 @@ const ItemsSearch: React.FC<Props> = ({ items }) => {
           columns={columns}
           setPagingController={setPagingController}
           pagingController={pagingController}
+          isAutoPaging={false}
       />
     </>
   );
diff --git a/src/components/SearchResults/SearchResults.tsx b/src/components/SearchResults/SearchResults.tsx
index 39ad9f6..3c6ae61 100644
--- a/src/components/SearchResults/SearchResults.tsx
+++ b/src/components/SearchResults/SearchResults.tsx
@@ -49,7 +49,8 @@ function SearchResults<T extends ResultWithId>({
   columns,
   noWrapper,
   pagingController,
-  setPagingController
+  setPagingController,
+  isAutoPaging = true,
 }: Props<T>) {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
@@ -61,7 +62,7 @@ function SearchResults<T extends ResultWithId>({
     setPage(newPage);
     setPagingController({
       ...pagingController,
-      pageNum: newPage,
+      pageNum: newPage+1,
     })
   };
 
@@ -90,39 +91,68 @@ function SearchResults<T extends ResultWithId>({
             </TableRow>
           </TableHead>
           <TableBody>
-            {items
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((item) => {
-                return (
-                  <TableRow hover tabIndex={-1} key={item.id}>
-                    {columns.map((column, idx) => {
-                      const columnName = column.name;
+            {
+              isAutoPaging?
+                  items
+                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                  .map((item) => {
+                    return (
+                      <TableRow hover tabIndex={-1} key={item.id}>
+                        {columns.map((column, idx) => {
+                          const columnName = column.name;
 
-                      return (
-                        <TableCell key={`${columnName.toString()}-${idx}`}>
-                          {isActionColumn(column) ? (
-                            <IconButton
-                              color={column.buttonColor ?? "primary"}
-                              onClick={() => column.onClick(item)}
-                            >
-                              {column.buttonIcon}
-                            </IconButton>
-                          ) : (
-                            <>{item[columnName] as string}</>
-                          )}
-                        </TableCell>
-                      );
-                    })}
-                  </TableRow>
-                );
-              })}
+                          return (
+                            <TableCell key={`${columnName.toString()}-${idx}`}>
+                              {isActionColumn(column) ? (
+                                <IconButton
+                                  color={column.buttonColor ?? "primary"}
+                                  onClick={() => column.onClick(item)}
+                                >
+                                  {column.buttonIcon}
+                                </IconButton>
+                              ) : (
+                                <>{item[columnName] as string}</>
+                              )}
+                            </TableCell>
+                          );
+                        })}
+                      </TableRow>
+                    );
+                  })
+              :
+                  items
+                      .map((item) => {
+                        return (
+                            <TableRow hover tabIndex={-1} key={item.id}>
+                              {columns.map((column, idx) => {
+                                const columnName = column.name;
+
+                                return (
+                                    <TableCell key={`${columnName.toString()}-${idx}`}>
+                                      {isActionColumn(column) ? (
+                                          <IconButton
+                                              color={column.buttonColor ?? "primary"}
+                                              onClick={() => column.onClick(item)}
+                                          >
+                                            {column.buttonIcon}
+                                          </IconButton>
+                                      ) : (
+                                          <>{item[columnName] as string}</>
+                                      )}
+                                    </TableCell>
+                                );
+                              })}
+                            </TableRow>
+                        );
+                      })
+            }
           </TableBody>
         </Table>
       </TableContainer>
       <TablePagination
         rowsPerPageOptions={[10, 25, 100]}
         component="div"
-        count={items.length}
+        count={pagingController.totalCount == 0 ? items.length : pagingController.totalCount}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}