diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 43b26d90..1f2ba533 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -226,7 +226,7 @@ const Pagination = ({
 
   const PageInfo = () => (
     <span className='text-nowrap text-sm font-medium text-base-content/50'>
-      Page {currentPage} of {totalPages}
+      Total Item: {totalItems} | Page {currentPage} of {totalPages}
     </span>
   );
 
diff --git a/src/components/pages/inventory/product/detail/StockLogTable.tsx b/src/components/pages/inventory/product/detail/StockLogTable.tsx
index 0a305659..a8240952 100644
--- a/src/components/pages/inventory/product/detail/StockLogTable.tsx
+++ b/src/components/pages/inventory/product/detail/StockLogTable.tsx
@@ -1,13 +1,76 @@
 import Card from '@/components/Card';
 import Table from '@/components/Table';
 import { formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { StockLog } from '@/types/api/inventory/product';
+import { ColumnDef } from '@tanstack/react-table';
+
+const stockLogTableColumns: ColumnDef<StockLog>[] = [
+  {
+    header: 'ID',
+    accessorKey: 'id',
+  },
+  {
+    header: 'Tanggal',
+    accessorKey: 'created_at',
+    cell: (props) => {
+      return formatDate(props.row.original.created_at, 'DD-MMM-yyyy');
+    },
+  },
+  {
+    header: 'Gudang',
+    accessorKey: 'warehouse_name',
+  },
+  {
+    header: 'Stock Akhir',
+    accessorKey: 'stock',
+    cell: (props) => {
+      return formatNumber(props.row.original.stock);
+    },
+  },
+  {
+    header: 'Peningkatan',
+    accessorKey: 'increase',
+    cell: (props) => {
+      return formatNumber(props.row.original.increase);
+    },
+  },
+  {
+    header: 'Penurunan',
+    accessorKey: 'decrease',
+    cell: (props) => {
+      return formatNumber(props.row.original.decrease);
+    },
+  },
+  {
+    header: 'Jenis Transaksi',
+    accessorKey: 'loggable_type',
+    cell: (props) => {
+      return props.row.original.loggable_type
+        ? formatTitleCase(props.row.original.loggable_type)
+        : '-';
+    },
+  },
+  {
+    header: 'Catatan',
+    accessorKey: 'notes',
+    cell: (props) => {
+      return props.row.original.notes ? props.row.original.notes : '-';
+    },
+  },
+  {
+    header: 'Oleh',
+    accessorKey: 'created_user.name',
+  },
+];
 
 const StockLogTable = ({
   stockLogs,
 }: {
   stockLogs: (StockLog & { warehouse_name: string; warehouse_id: number })[];
 }) => {
+  const { state: tableFilterState, setPage, setPageSize } = useTableFilter();
+
   return (
     <Card
       title='Informasi Stock Produk'
@@ -19,64 +82,12 @@ const StockLogTable = ({
     >
       <Table<StockLog>
         data={stockLogs}
-        columns={[
-          {
-            header: 'ID',
-            accessorKey: 'id',
-          },
-          {
-            header: 'Tanggal',
-            accessorKey: 'created_at',
-            cell: (props) => {
-              return formatDate(props.row.original.created_at, 'DD-MMM-yyyy');
-            },
-          },
-          {
-            header: 'Gudang',
-            accessorKey: 'warehouse_name',
-          },
-          {
-            header: 'Stock Akhir',
-            accessorKey: 'stock',
-            cell: (props) => {
-              return formatNumber(props.row.original.stock);
-            },
-          },
-          {
-            header: 'Peningkatan',
-            accessorKey: 'increase',
-            cell: (props) => {
-              return formatNumber(props.row.original.increase);
-            },
-          },
-          {
-            header: 'Penurunan',
-            accessorKey: 'decrease',
-            cell: (props) => {
-              return formatNumber(props.row.original.decrease);
-            },
-          },
-          {
-            header: 'Jenis Transaksi',
-            accessorKey: 'loggable_type',
-            cell: (props) => {
-              return props.row.original.loggable_type
-                ? formatTitleCase(props.row.original.loggable_type)
-                : '-';
-            },
-          },
-          {
-            header: 'Catatan',
-            accessorKey: 'notes',
-            cell: (props) => {
-              return props.row.original.notes ? props.row.original.notes : '-';
-            },
-          },
-          {
-            header: 'Oleh',
-            accessorKey: 'created_user.name',
-          },
-        ]}
+        columns={stockLogTableColumns}
+        page={tableFilterState.page ?? 0}
+        pageSize={tableFilterState.pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        totalItems={stockLogs?.length ?? 0}
         className={{
           containerClassName: 'mt-6',
           tableWrapperClassName: 'overflow-x-auto min-h-full!',
diff --git a/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx b/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx
index aa375bdc..4d361c5c 100644
--- a/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx
+++ b/src/components/pages/inventory/product/detail/StockProductWarehouseTable.tsx
@@ -1,13 +1,42 @@
 import Card from '@/components/Card';
 import Table from '@/components/Table';
 import { formatNumber } from '@/lib/helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ProductWarehouseStock } from '@/types/api/inventory/product';
+import { ColumnDef } from '@tanstack/react-table';
+
+const stockProductWarehouseTableColumns: ColumnDef<ProductWarehouseStock>[] = [
+  {
+    header: 'Nama Gudang',
+    accessorKey: 'warehouse_name',
+  },
+  {
+    header: 'Lokasi',
+    accessorKey: 'location',
+    cell: (props) => {
+      return props.row.original.location != null
+        ? props.row.original.location.name
+        : '-';
+    },
+  },
+  {
+    header: 'Stok',
+    accessorFn(row) {
+      return row.current_stock;
+    },
+    cell: (props) => {
+      return formatNumber(props.row.original.current_stock);
+    },
+  },
+];
 
 const StockProductWarehouseTable = ({
   productWarehouseStock,
 }: {
   productWarehouseStock?: ProductWarehouseStock[];
 }) => {
+  const { state: tableFilterState, setPage, setPageSize } = useTableFilter();
+
   return (
     <Card
       title='Informasi Gudang'
@@ -19,30 +48,12 @@ const StockProductWarehouseTable = ({
     >
       <Table<ProductWarehouseStock>
         data={productWarehouseStock ?? []}
-        columns={[
-          {
-            header: 'Nama Gudang',
-            accessorKey: 'warehouse_name',
-          },
-          {
-            header: 'Lokasi',
-            accessorKey: 'location',
-            cell: (props) => {
-              return props.row.original.location != null
-                ? props.row.original.location.name
-                : '-';
-            },
-          },
-          {
-            header: 'Stok',
-            accessorFn(row) {
-              return row.current_stock;
-            },
-            cell: (props) => {
-              return formatNumber(props.row.original.current_stock);
-            },
-          },
-        ]}
+        columns={stockProductWarehouseTableColumns}
+        pageSize={tableFilterState.pageSize}
+        page={tableFilterState.page ?? 0}
+        totalItems={productWarehouseStock?.length ?? 0}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
         className={{
           containerClassName: 'mt-6',
           tableWrapperClassName: 'overflow-x-auto min-h-full!',