diff --git a/web/packages/design/src/DataTable/Table.test.tsx b/web/packages/design/src/DataTable/Table.test.tsx
index f53522f924c57..77ee038dbfb9d 100644
--- a/web/packages/design/src/DataTable/Table.test.tsx
+++ b/web/packages/design/src/DataTable/Table.test.tsx
@@ -18,6 +18,7 @@
 
 import React from 'react';
 import { within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { render, fireEvent, screen } from 'design/utils/testing';
 
@@ -366,3 +367,36 @@ describe('sorting by iso date string', () => {
     expect(rows[2]).toHaveTextContent('a3');
   });
 });
+
+test('navigate to next and previous pages', async () => {
+  render(
+    <Table
+      data={data}
+      columns={[
+        {
+          key: 'hostname',
+          headerText: 'created',
+        },
+      ]}
+      emptyText=""
+      pagination={{ pageSize: 2 }}
+    />
+  );
+
+  let { rows } = getTableRows();
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent(data[0].hostname);
+  expect(rows[1]).toHaveTextContent(data[1].hostname);
+
+  await userEvent.click(screen.getByTitle('Next page'));
+  rows = getTableRows().rows;
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent(data[2].hostname);
+  expect(rows[1]).toHaveTextContent(data[3].hostname);
+
+  await userEvent.click(screen.getByTitle('Previous page'));
+  rows = getTableRows().rows;
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent(data[0].hostname);
+  expect(rows[1]).toHaveTextContent(data[1].hostname);
+});
diff --git a/web/packages/design/src/DataTable/useTable.ts b/web/packages/design/src/DataTable/useTable.ts
index 7b7deda0af0e3..e8c70f3bd2dd0 100644
--- a/web/packages/design/src/DataTable/useTable.ts
+++ b/web/packages/design/src/DataTable/useTable.ts
@@ -185,30 +185,30 @@ export default function useTable<T>({
     if (serversideProps) {
       fetching?.onFetchNext?.();
     }
-    setState({
-      ...state,
-      pagination: state.pagination
+    setState(prevState => ({
+      ...prevState,
+      pagination: prevState.pagination
         ? {
-            ...state.pagination,
-            currentPage: state.pagination.currentPage + 1,
+            ...prevState.pagination,
+            currentPage: prevState.pagination.currentPage + 1,
           }
         : undefined,
-    });
+    }));
   }
 
   function prevPage() {
     if (serversideProps) {
       fetching?.onFetchPrev?.();
     }
-    setState({
-      ...state,
-      pagination: state.pagination
+    setState(prevState => ({
+      ...prevState,
+      pagination: prevState.pagination
         ? {
-            ...state.pagination,
-            currentPage: state.pagination.currentPage + 1,
+            ...prevState.pagination,
+            currentPage: prevState.pagination.currentPage - 1,
           }
         : undefined,
-    });
+    }));
   }
 
   useEffect(() => {