diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx
index c545c61eb0..a5bc889205 100644
--- a/frontend/src/Editor/Components/Table/Pagination.jsx
+++ b/frontend/src/Editor/Components/Table/Pagination.jsx
@@ -47,11 +47,19 @@ export const Pagination = function Pagination({
   return (
     <div className="pagination">
       {!serverSide && (
-        <button className="btn btn-sm btn-light mx-2" onClick={() => gotoPage(1)}>
+        <button
+          className={`btn btn-sm btn-light mx-2 ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
+          onClick={() => gotoPage(1)}
+          disabled={pageIndex === 1}
+        >
           {'<<'}
         </button>
       )}
-      <button className="btn btn-light btn-sm" onClick={() => goToPreviousPage()} disabled={pageIndex === 1}>
+      <button
+        className={`btn btn-sm btn-light ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
+        onClick={() => goToPreviousPage()}
+        disabled={pageIndex === 1}
+      >
         {'<'}
       </button>{' '}
       <small className="p-1 mx-2">
@@ -63,14 +71,18 @@ export const Pagination = function Pagination({
         )}
       </small>
       <button
-        className="btn btn-light btn-sm"
+        className={`btn btn-light btn-sm ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
         onClick={() => goToNextPage()}
         disabled={!autoCanNextPage && !serverSide}
       >
         {'>'}
       </button>{' '}
       {!serverSide && (
-        <button className="btn btn-light btn-sm mx-2" onClick={() => gotoPage(pageCount)}>
+        <button
+          className={`btn btn-light btn-sm mx-2 ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
+          onClick={() => gotoPage(pageCount)}
+          disabled={!autoCanNextPage && !serverSide}
+        >
           {'>>'}
         </button>
       )}