diff --git a/.gitignore b/.gitignore
index 405df696727..c2f6e984622 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,5 @@ amplify/backend/api/colonycdapp/resolvers/*
 
 # Temp schema file generated by the codegen
 tmp-schema.graphql
+
+storybook-static
diff --git a/src/components/common/ColonyActionsTable/ColonyActionsTable.tsx b/src/components/common/ColonyActionsTable/ColonyActionsTable.tsx
index 4f5082277fb..b6fe65d7b01 100644
--- a/src/components/common/ColonyActionsTable/ColonyActionsTable.tsx
+++ b/src/components/common/ColonyActionsTable/ColonyActionsTable.tsx
@@ -2,7 +2,7 @@ import React, { type FC } from 'react';
 
 import { type ColonyAction } from '~types/graphql.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 
 import { useActionsTableProps } from './hooks/useActionsTableProps.tsx';
@@ -17,7 +17,7 @@ const ColonyActionsTable: FC<ColonyActionsTableProps> = ({
   actionProps,
   ...rest
 }) => {
-  const { tableProps, renderSubComponent } = useActionsTableProps(
+  const { tableProps } = useActionsTableProps(
     rest,
     actionProps.setSelectedAction,
   );
@@ -35,7 +35,10 @@ const ColonyActionsTable: FC<ColonyActionsTableProps> = ({
       )}
       <Table<ColonyAction>
         {...tableProps}
-        renderSubComponent={renderSubComponent}
+        borders={{
+          type: 'wide',
+          visible: true,
+        }}
       />
     </>
   );
diff --git a/src/components/common/ColonyActionsTable/RecentActivityTable.tsx b/src/components/common/ColonyActionsTable/RecentActivityTable.tsx
index 53a3b2b75df..1cdedb11d46 100644
--- a/src/components/common/ColonyActionsTable/RecentActivityTable.tsx
+++ b/src/components/common/ColonyActionsTable/RecentActivityTable.tsx
@@ -3,7 +3,7 @@ import React, { type FC } from 'react';
 import useActionsCount from '~hooks/useActionsCount.ts';
 import useGetSelectedDomainFilter from '~hooks/useGetSelectedDomainFilter.tsx';
 import { type ColonyAction } from '~types/graphql.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 
 import { useActionsTableProps } from './hooks/useActionsTableProps.tsx';
 import { useHandleRedoAction } from './hooks/useHandleRedoAction.ts';
@@ -13,6 +13,7 @@ const displayName = 'common.RecentActivityTable';
 
 const RecentActivityTable: FC<ColonyActionsTableProps> = ({
   actionProps,
+  pageSize = 10,
   ...props
 }) => {
   const selectedDomain = useGetSelectedDomainFilter();
@@ -23,13 +24,20 @@ const RecentActivityTable: FC<ColonyActionsTableProps> = ({
       domainId: nativeDomainId,
     });
 
-  const pageCount = Math.ceil(totalActions / (props.pageSize ?? 10));
+  const pageCount = Math.ceil(totalActions / pageSize);
 
-  const { tableProps, renderSubComponent } = useActionsTableProps(
+  const { tableProps } = useActionsTableProps(
     {
       ...props,
+      pageSize,
+      pagination: {
+        visible: totalActions > 0,
+        pageTotalVisible: !loadingActionsCount && pageCount > 1,
+      },
+      overrides: {
+        pageCount,
+      },
       showUserAvatar: false,
-      showTotalPagesNumber: !loadingActionsCount,
       isRecentActivityVariant: true,
     },
     actionProps.setSelectedAction,
@@ -41,13 +49,10 @@ const RecentActivityTable: FC<ColonyActionsTableProps> = ({
     <Table<ColonyAction>
       {...tableProps}
       showTableHead={false}
-      showTableBorder={false}
-      renderSubComponent={renderSubComponent}
-      pageCount={pageCount}
-      withBorder={false}
-      withNarrowBorder
-      alwaysShowPagination={totalActions > 0}
-      showTotalPagesNumber={pageCount > 1}
+      borders={{
+        type: 'narrow',
+        visible: false,
+      }}
     />
   );
 };
diff --git a/src/components/common/ColonyActionsTable/hooks/useActionsTableProps.tsx b/src/components/common/ColonyActionsTable/hooks/useActionsTableProps.tsx
index 37d90408913..6b54c3a64e9 100644
--- a/src/components/common/ColonyActionsTable/hooks/useActionsTableProps.tsx
+++ b/src/components/common/ColonyActionsTable/hooks/useActionsTableProps.tsx
@@ -26,11 +26,10 @@ export const useActionsTableProps = (
   const {
     className,
     pageSize = 10,
-    additionalPaginationButtonsContent,
-    showTotalPagesNumber,
+    pagination,
+    overrides,
     showUserAvatar,
     isRecentActivityVariant,
-    ...rest
   } = props;
 
   const { searchFilter, selectedFiltersCount } = useFiltersContext();
@@ -49,23 +48,24 @@ export const useActionsTableProps = (
     pageNumber,
   } = useActionsTableData(pageSize);
 
+  const getMenuProps = useGetMenuProps({
+    setAction,
+    colonyActions,
+    colonyActionsLoading,
+  });
+
   const columns = useColonyActionsTableColumns({
     loading: colonyActionsLoading,
     loadingMotionStates,
     refetchMotionStates,
     showUserAvatar,
     isRecentActivityVariant,
+    getMenuProps,
   });
   const {
     actionSidebarToggle: [, { toggleOn: toggleActionSidebarOn }],
   } = useActionSidebarContext();
 
-  const getMenuProps = useGetMenuProps({
-    setAction,
-    colonyActions,
-    colonyActionsLoading,
-  });
-
   const renderRowLink = useRenderRowLink(
     colonyActionsLoading,
     isRecentActivityVariant,
@@ -80,87 +80,101 @@ export const useActionsTableProps = (
 
   const isMobile = useMobile();
 
-  const tableProps = merge(
-    {
-      className: clsx(
-        className,
-        'sm:[&_td:first-child]:pl-[1.125rem] sm:[&_td]:pr-[1.125rem] sm:[&_th:first-child]:pl-[1.125rem] sm:[&_th:not(:first-child)]:pl-0 sm:[&_th]:pr-[1.125rem]',
-        {
-          'sm:[&_td]:h-[66px]': isRecentActivityVariant,
-          'sm:[&_td]:h-[70px]': !isRecentActivityVariant,
-          'sm:[&_tr:hover]:bg-gray-25':
-            colonyActions.length > 0 && !colonyActionsLoading,
+  const tableProps = merge({
+    className: clsx(
+      className,
+      'sm:[&_td:first-child]:pl-[1.125rem] sm:[&_td]:pr-[1.125rem] sm:[&_th:first-child]:pl-[1.125rem] sm:[&_th:not(:first-child)]:pl-0 sm:[&_th]:pr-[1.125rem]',
+      {
+        'sm:[&_td]:h-[66px]': isRecentActivityVariant,
+        'sm:[&_td]:h-[70px]': !isRecentActivityVariant,
+        'sm:[&_tr:hover]:bg-gray-25':
+          colonyActions.length > 0 && !colonyActionsLoading,
+      },
+    ),
+    overrides: merge(
+      {
+        enableSortingRemoval: false,
+        onSortingChange: setSorting,
+        state: {
+          columnVisibility: isMobile
+            ? {
+                description: true,
+                motionState: true,
+                team: false,
+                createdAt: false,
+                [MEATBALL_MENU_COLUMN_ID]: false,
+              }
+            : {
+                description: true,
+                motionState: true,
+                team: false,
+                createdAt: true,
+                expander: false,
+              },
+          sorting,
+          pagination: {
+            pageIndex: pageNumber - 1,
+            pageSize,
+          },
         },
-      ),
-      enableSortingRemoval: false,
-      renderCellWrapper: isMobile ? undefined : renderRowLink,
-      state: {
-        columnVisibility: isMobile
-          ? {
-              description: true,
-              motionState: true,
-              team: false,
-              createdAt: false,
-              [MEATBALL_MENU_COLUMN_ID]: false,
-            }
-          : {
-              expander: false,
-            },
-        sorting,
-        pagination: {
-          pageIndex: pageNumber - 1,
-          pageSize,
+        manualPagination: true,
+        getRowId: (row) => row.transactionHash,
+      },
+      overrides,
+    ),
+    pagination: merge(
+      {
+        children: colonyActionsLoading ? undefined : pagination?.children,
+        canNextPage: hasNextPage || colonyActionsLoading,
+        canPreviousPage: hasPrevPage,
+        onPageChange: (direction) => {
+          if (direction === 'previous') {
+            goToPreviousPage();
+          } else {
+            goToNextPage();
+          }
         },
+        disabled: colonyActionsLoading,
       },
-      additionalPaginationButtonsContent: colonyActionsLoading
-        ? undefined
-        : additionalPaginationButtonsContent,
-      onSortingChange: setSorting,
-      getRowId: (row) => row.transactionHash,
-      meatBallMenuStaticSize: isRecentActivityVariant ? '2rem' : '3rem',
-      getMenuProps,
-      columns,
-      data: colonyActions,
-      manualPagination: true,
-      canNextPage: hasNextPage || colonyActionsLoading,
-      canPreviousPage: hasPrevPage,
-      showTotalPagesNumber,
-      nextPage: goToNextPage,
-      previousPage: goToPreviousPage,
-      paginationDisabled: colonyActionsLoading,
-      getRowCanExpand: () => isMobile,
-      emptyContent: (
-        <EmptyContent
-          className="h-[19.125rem] sm:h-[32.8125rem]"
-          icon={Binoculars}
-          title={{
-            id:
-              searchFilter || selectedFiltersCount
-                ? 'activityFeedTable.table.search.emptyTitle'
-                : 'activityFeedTable.table.emptyTitle',
-          }}
-          description={{
-            id:
-              searchFilter || selectedFiltersCount
-                ? 'activityFeedTable.table.search.emptyDescription'
-                : 'activityFeedTable.table.emptyDescription',
-          }}
-          buttonText={
+      pagination,
+    ),
+    rows: {
+      canExpand: () => isMobile,
+      renderSubComponent,
+    },
+    columns,
+    renderCellWrapper: isMobile ? undefined : renderRowLink,
+    data: colonyActions,
+    emptyContent: (
+      <EmptyContent
+        className="h-[19.125rem] sm:h-[32.8125rem]"
+        icon={Binoculars}
+        title={{
+          id:
             searchFilter || selectedFiltersCount
-              ? undefined
-              : { id: 'activityFeedTable.table.emptyButtonLabel' }
-          }
-          onClick={
+              ? 'activityFeedTable.table.search.emptyTitle'
+              : 'activityFeedTable.table.emptyTitle',
+        }}
+        description={{
+          id:
             searchFilter || selectedFiltersCount
-              ? undefined
-              : () => toggleActionSidebarOn()
-          }
-          withoutButtonIcon
-        />
-      ),
-    } as TableProps<ColonyAction>,
-    rest,
-  );
+              ? 'activityFeedTable.table.search.emptyDescription'
+              : 'activityFeedTable.table.emptyDescription',
+        }}
+        buttonText={
+          searchFilter || selectedFiltersCount
+            ? undefined
+            : { id: 'activityFeedTable.table.emptyButtonLabel' }
+        }
+        onClick={
+          searchFilter || selectedFiltersCount
+            ? undefined
+            : () => toggleActionSidebarOn()
+        }
+        withoutButtonIcon
+      />
+    ),
+  } as TableProps<ColonyAction>);
 
-  return { tableProps, renderSubComponent };
+  return { tableProps };
 };
diff --git a/src/components/common/ColonyActionsTable/hooks/useColonyActionsTableColumns.tsx b/src/components/common/ColonyActionsTable/hooks/useColonyActionsTableColumns.tsx
index 3504b107b1e..e03ed80d3b9 100644
--- a/src/components/common/ColonyActionsTable/hooks/useColonyActionsTableColumns.tsx
+++ b/src/components/common/ColonyActionsTable/hooks/useColonyActionsTableColumns.tsx
@@ -9,6 +9,7 @@ import { type ActivityFeedColonyAction } from '~hooks/useActivityFeed/types.ts';
 import { getFormattedDateFrom } from '~utils/getFormattedDateFrom.ts';
 import { formatText } from '~utils/intl.ts';
 import TeamBadge from '~v5/common/Pills/TeamBadge/index.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
 
 import ActionBadge from '../partials/ActionBadge/ActionBadge.tsx';
 import ActionDescription from '../partials/ActionDescription/index.ts';
@@ -28,6 +29,7 @@ const useColonyActionsTableColumns = ({
   refetchMotionStates,
   showUserAvatar = true,
   isRecentActivityVariant = false,
+  getMenuProps,
 }) => {
   const isMobile = useMobile();
 
@@ -127,6 +129,13 @@ const useColonyActionsTableColumns = ({
           ? 'flex items-end'
           : '',
       }),
+      makeMenuColumn({
+        helper,
+        getMenuProps,
+        cellProps: {
+          staticSize: isRecentActivityVariant ? '2rem' : '3rem',
+        },
+      }),
       helper.display({
         id: 'expander',
         staticSize: '2.25rem',
@@ -154,6 +163,7 @@ const useColonyActionsTableColumns = ({
     loadingMotionStates,
     refetchMotionStates,
     showUserAvatar,
+    getMenuProps,
   ]);
 };
 
diff --git a/src/components/common/ColonyActionsTable/hooks/useGetMenuProps.tsx b/src/components/common/ColonyActionsTable/hooks/useGetMenuProps.tsx
index 4a2c44d05c7..2df5845d07b 100644
--- a/src/components/common/ColonyActionsTable/hooks/useGetMenuProps.tsx
+++ b/src/components/common/ColonyActionsTable/hooks/useGetMenuProps.tsx
@@ -4,6 +4,7 @@ import {
   ShareNetwork,
   Repeat,
 } from '@phosphor-icons/react';
+import { type Row } from '@tanstack/react-table';
 import React from 'react';
 import { generatePath, useNavigate } from 'react-router-dom';
 
@@ -17,7 +18,7 @@ import {
 } from '~routes';
 import TransactionLink from '~shared/TransactionLink/index.ts';
 import { formatText } from '~utils/intl.ts';
-import { type TableProps } from '~v5/common/Table/types.ts';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import MeatballMenuCopyItem from '../partials/MeatballMenuCopyItem/index.ts';
 import { type ColonyActionsTableProps } from '../types.ts';
@@ -44,9 +45,9 @@ export const useGetMenuProps = ({
     colonyActionsLoading,
   });
 
-  const getMenuProps: TableProps<ActivityFeedColonyAction>['getMenuProps'] = ({
-    original: colonyAction,
-  }) => {
+  const getMenuProps: (
+    row: Row<ActivityFeedColonyAction>,
+  ) => MeatBallMenuProps | undefined = ({ original: colonyAction }) => {
     const { transactionHash } = colonyAction;
 
     return {
diff --git a/src/components/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx b/src/components/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx
index 6ad3067104f..f1e9ce18611 100644
--- a/src/components/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx
+++ b/src/components/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx
@@ -144,7 +144,7 @@ const ActionMobileDescription: FC<ActionMobileDescriptionProps> = ({
       {meatBallMenuProps && (
         <MeatBallMenu
           {...meatBallMenuProps}
-          contentWrapperClassName="!left-6 right-6"
+          contentWrapperClassName="!left-0 right-6"
           buttonClassName={(isMenuOpen) =>
             clsx({ '!text-gray-600': !isMenuOpen })
           }
diff --git a/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx b/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
index 54c4a8cccc3..1ad560bcb7e 100644
--- a/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
+++ b/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
@@ -35,7 +35,9 @@ const ActivityPage: FC = () => {
                 defaultValues,
               }}
               className="pb-4 [&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
-              showTotalPagesNumber={false}
+              pagination={{
+                pageTotalVisible: false,
+              }}
             />
           </FiltersContextProvider>
         </div>
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/BalanceTable.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/BalanceTable.tsx
index 0169efda026..efef3e8967c 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/BalanceTable.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/BalanceTable.tsx
@@ -9,6 +9,7 @@ import {
 import {
   getPaginationRowModel,
   getSortedRowModel,
+  type Row,
   type SortingState,
 } from '@tanstack/react-table';
 import clsx from 'clsx';
@@ -30,10 +31,10 @@ import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
 import EmptyContent from '~v5/common/EmptyContent/index.ts';
 import { AddFundsModal } from '~v5/common/Modals/AddFundsModal/AddFundsModal.tsx';
 import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
-import Table from '~v5/common/Table/index.ts';
-import { type TableProps } from '~v5/common/Table/types.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 import Link from '~v5/shared/Link/index.ts';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import BalanceFilters from './Filters/BalanceFilters/BalanceFilters.tsx';
 import { useBalanceTableColumns, useBalancesData } from './hooks.tsx';
@@ -82,8 +83,9 @@ const BalanceTable: FC = () => {
     { toggleOn: toggleAddFundsModalOn, toggleOff: toggleAddFundsModalOff },
   ] = useToggle();
 
-  const columns = useBalanceTableColumns(nativeToken, nativeTokenStatus);
-  const getMenuProps: TableProps<BalanceTableFieldModel>['getMenuProps'] = ({
+  const getMenuProps: (
+    row: Row<BalanceTableFieldModel>,
+  ) => MeatBallMenuProps | undefined = ({
     original: { token: selectedTokenData, loading },
   }) => {
     if (loading) return undefined;
@@ -171,32 +173,49 @@ const BalanceTable: FC = () => {
     };
   };
 
+  const columns = useBalanceTableColumns(
+    nativeToken,
+    nativeTokenStatus,
+    getMenuProps,
+  );
+
+  const hasPagination = data.length >= 10;
+
   return (
     <>
       <TableHeader title={formatText({ id: 'balancePage.table.title' })}>
         <BalanceFilters toggleAddFundsModalOn={toggleAddFundsModalOn} />
       </TableHeader>
       <Table<BalanceTableFieldModel>
-        getRowId={({ token }) => (token ? token.tokenAddress : uniqueId())}
-        columns={columns}
-        data={data || []}
-        state={{
-          sorting,
-          rowSelection,
-          columnVisibility: {
-            type: !isMobile,
+        overrides={{
+          getRowId: ({ token }) => (token ? token.tokenAddress : uniqueId()),
+          state: {
+            sorting,
+            rowSelection,
+            columnVisibility: {
+              type: !isMobile,
+            },
           },
-        }}
-        initialState={{
-          pagination: {
-            pageSize: 10,
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 10,
+            },
           },
+          onSortingChange: setSorting,
+          onRowSelectionChange: setRowSelection,
+          getSortedRowModel: getSortedRowModel(),
+          getPaginationRowModel: getPaginationRowModel(),
+        }}
+        className={clsx({
+          'pb-4': hasPagination,
+        })}
+        columns={columns}
+        data={data || []}
+        pagination={{
+          visible: hasPagination,
+          pageNumberVisible: true,
         }}
-        showPageNumber={data.length >= 10}
-        onSortingChange={setSorting}
-        onRowSelectionChange={setRowSelection}
-        getSortedRowModel={getSortedRowModel()}
-        getPaginationRowModel={getPaginationRowModel()}
         emptyContent={
           !tokensDataLength && (
             <EmptyContent
@@ -208,7 +227,6 @@ const BalanceTable: FC = () => {
             />
           )
         }
-        getMenuProps={getMenuProps}
         renderCellWrapper={(className, content, { cell }) => (
           <div
             className={clsx(
@@ -228,7 +246,6 @@ const BalanceTable: FC = () => {
             {content}
           </div>
         )}
-        meatBallMenuStaticSize={isMobile ? '2.25rem' : undefined}
       />
 
       <AddFundsModal
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
index 0fb4ce8579a..25e63ed47c2 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
@@ -1,5 +1,9 @@
 import { Id } from '@colony/colony-js';
-import { type ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import {
+  type ColumnDef,
+  createColumnHelper,
+  type Row,
+} from '@tanstack/react-table';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 
@@ -19,6 +23,9 @@ import {
 } from '~utils/tokens.ts';
 import TokenTypeBadge from '~v5/common/Pills/TokenTypeBadge/index.ts';
 import { TOKEN_TYPE } from '~v5/common/Pills/TokenTypeBadge/types.ts';
+import { type NullableColumnDef } from '~v5/common/Table/types.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import TokenCell from '../TokenCell/index.ts';
 
@@ -109,12 +116,33 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
 export const useBalanceTableColumns = (
   nativeToken: Token,
   nativeTokenStatus?: NativeTokenStatus | null,
+  getMenuProps?: (
+    row: Row<BalanceTableFieldModel>,
+  ) => MeatBallMenuProps | undefined,
 ): ColumnDef<BalanceTableFieldModel, string>[] => {
   const isMobile = useMobile();
 
-  const columns: ColumnDef<BalanceTableFieldModel, string>[] = useMemo(() => {
-    const columnHelper = createColumnHelper<BalanceTableFieldModel>();
+  const columnHelper = useMemo(
+    () => createColumnHelper<BalanceTableFieldModel>(),
+    [],
+  );
 
+  const menuColumn: NullableColumnDef<BalanceTableFieldModel> = useMemo(
+    () =>
+      getMenuProps
+        ? makeMenuColumn({
+            helper: columnHelper,
+            getMenuProps,
+            cellProps: {
+              staticSize: isMobile ? '2.25rem' : undefined,
+              size: 60,
+            },
+          })
+        : null,
+    [columnHelper, getMenuProps, isMobile],
+  );
+
+  const columns: ColumnDef<BalanceTableFieldModel, string>[] = useMemo(() => {
     return [
       columnHelper.display({
         id: 'asset',
@@ -215,7 +243,7 @@ export const useBalanceTableColumns = (
         },
       }),
     ];
-  }, [isMobile, nativeToken.tokenAddress, nativeTokenStatus]);
+  }, [isMobile, nativeToken.tokenAddress, nativeTokenStatus, columnHelper]);
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx
index 40cb835f34d..21984997f85 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx
@@ -3,6 +3,7 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
 } from '@tanstack/react-table';
+import clsx from 'clsx';
 import React, { type FC } from 'react';
 
 import { IncomingFundsLoadingContextProvider } from '~frame/v5/pages/FundsPage/context/IncomingFundsLoadingContextProvider.tsx';
@@ -10,7 +11,7 @@ import { useMobile } from '~hooks';
 import useColonyFundsClaims from '~hooks/useColonyFundsClaims.ts';
 import { formatText } from '~utils/intl.ts';
 import EmptyContent from '~v5/common/EmptyContent/index.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 import CloseButton from '~v5/shared/Button/CloseButton.tsx';
 
@@ -83,14 +84,22 @@ const FundsTable: FC = () => {
       <Table<FundsTableModel>
         data={searchedTokens}
         columns={columns}
-        initialState={{
-          pagination: {
-            pageSize: 10,
+        overrides={{
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 10,
+            },
           },
+          getFilteredRowModel: getFilteredRowModel(),
+          getPaginationRowModel: getPaginationRowModel(),
         }}
-        getFilteredRowModel={getFilteredRowModel()}
-        getPaginationRowModel={getPaginationRowModel()}
-        className="w-full [&_td>div]:p-0 [&_td]:border-b [&_td]:border-gray-100 [&_th:empty]:border-none [&_th:last-child]:text-right [&_tr:last-child>td]:border-0"
+        className={clsx(
+          'w-full [&_td>div]:p-0 [&_td]:border-b [&_td]:border-gray-100 [&_th:empty]:border-none [&_th:last-child]:text-right [&_tr:last-child>td]:border-0',
+          {
+            'pb-4': searchedTokens.length > 10,
+          },
+        )}
         emptyContent={
           (!searchedTokens.length || claims.length <= 0) && (
             <div className="w-full rounded-lg">
diff --git a/src/components/frame/v5/pages/FundsPage/partials/TokenTable/TokenTable.tsx b/src/components/frame/v5/pages/FundsPage/partials/TokenTable/TokenTable.tsx
index c8a6be1090a..73928ad3b82 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/TokenTable/TokenTable.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/TokenTable/TokenTable.tsx
@@ -18,7 +18,7 @@ import Numeral from '~shared/Numeral/index.ts';
 import TokenInfo from '~shared/TokenInfo/index.ts';
 import { formatText } from '~utils/intl.ts';
 import PillsBase from '~v5/common/Pills/index.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import AccordionItem from '~v5/shared/Accordion/partials/AccordionItem/index.ts';
 import MenuContainer from '~v5/shared/MenuContainer/index.ts';
 import Modal from '~v5/shared/Modal/index.ts';
@@ -136,29 +136,37 @@ const TokenTable: FC<TokenTableProps> = ({ token }) => {
       >
         <Table
           data={currentClaims}
-          getSortedRowModel={getSortedRowModel()}
-          getPaginationRowModel={getPaginationRowModel()}
           columns={columns}
-          className="-mx-[1.125rem] !w-[calc(100%+2.25rem)] border-none px-[1.125rem] [&_td]:px-[1.125rem] [&_td]:py-4 [&_th]:!rounded-none [&_th]:border-y"
+          className={clsx(
+            '-mx-[1.125rem] !w-[calc(100%+2.25rem)] border-none px-[1.125rem] [&_td]:px-[1.125rem] [&_td]:py-4 [&_th]:!rounded-none [&_th]:border-y',
+            {
+              'pb-4': currentClaims.length > 10,
+            },
+          )}
           tableClassName="rounded-none border-none"
-          initialState={{
-            sorting: [
-              {
-                id: 'isClaimed',
-                desc: true,
-              },
-              {
-                id: 'amount',
-                desc: true,
+          overrides={{
+            initialState: {
+              sorting: [
+                {
+                  id: 'isClaimed',
+                  desc: true,
+                },
+                {
+                  id: 'amount',
+                  desc: true,
+                },
+              ],
+              pagination: {
+                pageIndex: 0,
+                pageSize: 10,
               },
-            ],
-            pagination: {
-              pageSize: 10,
             },
+            // This ensures that all sort actions made by the user are multisort.
+            // In other words, it's always sorting by all columns.
+            isMultiSortEvent: () => true,
+            getSortedRowModel: getSortedRowModel(),
+            getPaginationRowModel: getPaginationRowModel(),
           }}
-          // This ensures that all sort actions made by the user are multisort.
-          // In other words, it's always sorting by all columns.
-          isMultiSortEvent={() => true}
         />
         {isTokenNativeChainToken && (
           <div className="flex items-center border-t border-gray-100 px-[1.125rem] py-4">
diff --git a/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx b/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
index a896e2dac97..41901e3214d 100644
--- a/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
+++ b/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
@@ -10,7 +10,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useMobile } from '~hooks/index.ts';
 import { type BridgeDrain } from '~types/graphql.ts';
 import EmptyContent from '~v5/common/EmptyContent/index.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 
 import FiatTransferDescription from './FiatTransferDescription.tsx';
@@ -54,27 +54,35 @@ const FiatTransfersTable = () => {
       <Table<BridgeDrain>
         columns={columns}
         data={loading ? Array(3).fill({}) : sortedData}
-        state={{
-          columnVisibility: isMobile
-            ? {
-                createdAt: false,
-                receipt: false,
-              }
-            : {
-                expander: false,
-              },
-          sorting,
+        overrides={{
+          getRowId: (row) => row.id,
+          initialState: {
+            pagination: { pageIndex: 0, pageSize: 10 },
+          },
+          state: {
+            columnVisibility: isMobile
+              ? {
+                  createdAt: false,
+                  receipt: false,
+                }
+              : {
+                  expander: false,
+                },
+            sorting,
+          },
+          onSortingChange: setSorting,
+          getSortedRowModel: getSortedRowModel(),
+          getPaginationRowModel: getPaginationRowModel(),
+        }}
+        pagination={{
+          pageNumberVisible: sortedData.length >= 10,
+        }}
+        rows={{
+          canExpand: () => isMobile,
+          renderSubComponent: ({ row }) => (
+            <FiatTransferDescription actionRow={row} loading={loading} />
+          ),
         }}
-        getRowId={(row) => row.id}
-        initialState={{ pagination: { pageSize: 10 } }}
-        showPageNumber={sortedData.length >= 10}
-        onSortingChange={setSorting}
-        getSortedRowModel={getSortedRowModel()}
-        getPaginationRowModel={getPaginationRowModel()}
-        getRowCanExpand={() => isMobile}
-        renderSubComponent={({ row }) => (
-          <FiatTransferDescription actionRow={row} loading={loading} />
-        )}
         className="pb-5 [&_td:nth-child(1)>div]:font-medium [&_td:nth-child(1)>div]:text-gray-900 [&_td:nth-child(2)>div]:text-gray-600 [&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
         emptyContent={
           !sortedData.length &&
diff --git a/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/hooks.tsx b/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/hooks.tsx
index 50b1666bc0a..9e801bbb92f 100644
--- a/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/hooks.tsx
+++ b/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/hooks.tsx
@@ -55,7 +55,7 @@ export const useFiatTransfersTableColumns = (
   loading: boolean,
 ): ColumnDef<BridgeDrain, any>[] => {
   const isMobile = useMobile();
-  const columnHelper = createColumnHelper<BridgeDrain>();
+  const columnHelper = useMemo(() => createColumnHelper<BridgeDrain>(), []);
 
   return useMemo(() => {
     return [
diff --git a/src/components/frame/v5/pages/VerifiedPage/partials/VerifiedTable/VerifiedTable.tsx b/src/components/frame/v5/pages/VerifiedPage/partials/VerifiedTable/VerifiedTable.tsx
index bdb878ea9c9..b9f1a561288 100644
--- a/src/components/frame/v5/pages/VerifiedPage/partials/VerifiedTable/VerifiedTable.tsx
+++ b/src/components/frame/v5/pages/VerifiedPage/partials/VerifiedTable/VerifiedTable.tsx
@@ -13,7 +13,7 @@ import { useMobile } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
 import EmptyContent from '~v5/common/EmptyContent/index.ts';
 import Filter from '~v5/common/Filter/index.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 import Button from '~v5/shared/Button/index.ts';
 
@@ -73,48 +73,48 @@ const VerifiedTable: FC<TableProps> = ({ list }) => {
         </Button>
       </TableHeader>
       <Table<ColonyContributorFragment>
+        columns={columns}
+        data={list}
+        className={clsx('w-full', { 'pb-4': listLength > 10 })}
         emptyContent={
           !listLength && (
-            <div className="border-1 w-full rounded-b-lg border border-gray-200">
-              <EmptyContent
-                icon={Binoculars}
-                title={{ id: 'verifiedPage.table.emptyTitle' }}
-                description={{ id: 'verifiedPage.table.emptyDescription' }}
-                buttonText={{ id: 'button.addNewMember' }}
-                onClick={onAddClick}
-                withoutButtonIcon
-              />
-            </div>
+            <EmptyContent
+              icon={Binoculars}
+              title={{ id: 'verifiedPage.table.emptyTitle' }}
+              description={{ id: 'verifiedPage.table.emptyDescription' }}
+              buttonText={{ id: 'button.addNewMember' }}
+              onClick={onAddClick}
+              withoutButtonIcon
+            />
           )
         }
-        className="w-full"
-        getRowId={({ contributorAddress }) => contributorAddress}
-        columns={columns}
-        data={list}
-        state={{
-          sorting,
-          rowSelection,
-          columnVisibility: {
-            colonyReputationPercentage: !isMobile,
-            status: !isMobile,
-          },
-        }}
-        initialState={{
-          pagination: {
-            pageSize: 10,
-          },
-        }}
-        onSortingChange={setSorting}
-        onRowSelectionChange={setRowSelection}
-        getSortedRowModel={getSortedRowModel()}
-        getPaginationRowModel={getPaginationRowModel()}
-        enableSortingRemoval={false}
-        enableSorting
-        sortDescFirst={false}
-        sizeUnit="px"
         renderCellWrapper={(classNames, content) => (
           <div className={clsx(classNames, 'py-3.5')}>{content}</div>
         )}
+        overrides={{
+          getRowId: ({ contributorAddress }) => contributorAddress,
+          state: {
+            sorting,
+            rowSelection,
+            columnVisibility: {
+              reputation: !isMobile,
+              status: !isMobile,
+            },
+          },
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 10,
+            },
+          },
+          onSortingChange: setSorting,
+          onRowSelectionChange: setRowSelection,
+          getSortedRowModel: getSortedRowModel(),
+          getPaginationRowModel: getPaginationRowModel(),
+          enableSortingRemoval: false,
+          enableSorting: true,
+          sortDescFirst: false,
+        }}
       />
     </>
   );
diff --git a/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/BatchPaymentsTable.tsx b/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/BatchPaymentsTable.tsx
index b8ed5b402d5..27040faa188 100644
--- a/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/BatchPaymentsTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/BatchPaymentsTable.tsx
@@ -5,7 +5,9 @@ import { useFieldArray, useFormContext } from 'react-hook-form';
 
 import { useMobile } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { getMoreActionsMenu } from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/index.ts';
 
 import { useBatchPaymentsTableColumns } from './hooks.tsx';
@@ -28,7 +30,6 @@ const BatchPaymentsTable: FC<BatchPaymentsTableProps> = ({ name }) => {
   );
   const { getFieldState } = useFormContext();
   const fieldState = getFieldState(name);
-  const columns = useBatchPaymentsTableColumns();
   const getMenuProps = ({ index }) => ({
     cardClassName: 'min-w-[9.625rem] whitespace-nowrap',
     items: [
@@ -40,6 +41,7 @@ const BatchPaymentsTable: FC<BatchPaymentsTableProps> = ({ name }) => {
       },
     ],
   });
+  const columns = useBatchPaymentsTableColumns(getMenuProps);
 
   return (
     <div>
@@ -52,11 +54,21 @@ const BatchPaymentsTable: FC<BatchPaymentsTableProps> = ({ name }) => {
             className={clsx('mb-6', {
               '!border-negative-400': !!fieldState.error,
             })}
-            getRowId={({ key }) => key}
             columns={columns}
             data={data}
-            getMenuProps={getMenuProps}
-            verticalLayout={isMobile}
+            layout={isMobile ? 'vertical' : 'horizontal'}
+            overrides={{
+              getRowId: ({ key }) => key,
+              state: {
+                columnVisibility: {
+                  [MEATBALL_MENU_COLUMN_ID]: !isMobile,
+                },
+              },
+            }}
+            moreActions={getMoreActionsMenu({
+              getMenuProps,
+              visible: isMobile,
+            })}
           />
         </>
       )}
diff --git a/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/hooks.tsx
index 98d569821dd..d0b342c123e 100644
--- a/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/BatchPaymentsTable/hooks.tsx
@@ -1,14 +1,21 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import { useMemo } from 'react';
 
 import { formatText } from '~utils/intl.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import { type BatchPaymentsTableModel } from './types.ts';
 
-export const useBatchPaymentsTableColumns = (): ColumnDef<
-  BatchPaymentsTableModel,
-  string
->[] => {
+export const useBatchPaymentsTableColumns = (
+  getMenuProps: (
+    row: Row<BatchPaymentsTableModel>,
+  ) => MeatBallMenuProps | undefined,
+): ColumnDef<BatchPaymentsTableModel, string>[] => {
   const columnHelper = useMemo(
     () => createColumnHelper<BatchPaymentsTableModel>(),
     [],
@@ -37,8 +44,12 @@ export const useBatchPaymentsTableColumns = (): ColumnDef<
           // @TODO: display data
         },
       }),
+      makeMenuColumn({
+        helper: columnHelper,
+        getMenuProps,
+      }),
     ],
-    [columnHelper],
+    [columnHelper, getMenuProps],
   );
 
   return columns;
diff --git a/src/components/v5/common/ActionSidebar/partials/MembersTable/MembersTable.tsx b/src/components/v5/common/ActionSidebar/partials/MembersTable/MembersTable.tsx
index 90f3160a1b2..1599e9abf4e 100644
--- a/src/components/v5/common/ActionSidebar/partials/MembersTable/MembersTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/MembersTable/MembersTable.tsx
@@ -8,7 +8,7 @@ import { useAdditionalFormOptionsContext } from '~context/AdditionalFormOptionsC
 import { useMobile } from '~hooks/index.ts';
 import { type ManageVerifiedMembersOperation } from '~types';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/Table.tsx';
+import { Table } from '~v5/common/Table/Table.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import { useVerifiedMembersTableColumns } from './hooks.tsx';
@@ -33,11 +33,6 @@ const VerifiedMembersTable: FC<VerifiedMembersTableProps> = ({ name }) => {
   });
   const { getFieldState, getValues } = useFormContext();
   const { readonly } = useAdditionalFormOptionsContext();
-  const columns = useVerifiedMembersTableColumns(
-    name,
-    fieldArrayMethods,
-    manageMembers,
-  );
   const isMobile = useMobile();
   const isEmptyData = getValues(name)?.[0]?.value === undefined;
   const getMenuProps = ({ index }) => {
@@ -45,7 +40,7 @@ const VerifiedMembersTable: FC<VerifiedMembersTableProps> = ({ name }) => {
       ? {
           cardClassName: 'min-w-[9.625rem] whitespace-nowrap',
           contentWrapperClassName: clsx({
-            '!left-6 right-6': isMobile,
+            '!left-6 right-6': !isMobile,
           }),
           items: [
             {
@@ -58,6 +53,13 @@ const VerifiedMembersTable: FC<VerifiedMembersTableProps> = ({ name }) => {
         }
       : undefined;
   };
+  const columns = useVerifiedMembersTableColumns({
+    name,
+    fieldArrayMethods,
+    manageMembers,
+    getMenuProps,
+  });
+
   const fieldState = getFieldState(name);
 
   useEffect(() => {
@@ -75,11 +77,22 @@ const VerifiedMembersTable: FC<VerifiedMembersTableProps> = ({ name }) => {
         className={clsx({
           '!border-negative-400': !!fieldState.error,
         })}
-        withBorder={false}
-        getRowId={({ key }) => key}
         columns={columns}
         data={data}
-        getMenuProps={getMenuProps}
+        borders={{
+          visible: true,
+          type: 'unset',
+        }}
+        moreActions={{}}
+        overrides={{
+          getRowId: ({ key }) => key,
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 400,
+            },
+          },
+        }}
       />
       {!readonly && (
         <Button
diff --git a/src/components/v5/common/ActionSidebar/partials/MembersTable/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/MembersTable/hooks.tsx
index 99920b831e9..cfe8cbe7523 100644
--- a/src/components/v5/common/ActionSidebar/partials/MembersTable/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/MembersTable/hooks.tsx
@@ -1,32 +1,54 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import React, { useMemo } from 'react';
 import { type FieldValues, type UseFieldArrayReturn } from 'react-hook-form';
 
 import { useMobile } from '~hooks';
 import { ManageVerifiedMembersOperation } from '~types';
 import { formatText } from '~utils/intl.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import NonVerifiedMembersSelect from '../NonVerifiedMembersSelect/index.ts';
 import VerifiedMembersSelect from '../VerifiedMembersSelect/index.ts';
 
 import { type VerifiedMembersTableModel } from './types.ts';
 
-export const useVerifiedMembersTableColumns = (
-  name: string,
-  fieldArrayMethods: UseFieldArrayReturn<FieldValues, string, 'id'>,
-  manageMembers: ManageVerifiedMembersOperation | undefined,
-): ColumnDef<VerifiedMembersTableModel, string>[] => {
+export const useVerifiedMembersTableColumns = ({
+  name,
+  fieldArrayMethods,
+  manageMembers,
+  getMenuProps,
+}: {
+  name: string;
+  fieldArrayMethods: UseFieldArrayReturn<FieldValues, string, 'id'>;
+  manageMembers: ManageVerifiedMembersOperation | undefined;
+  getMenuProps: (
+    row: Row<VerifiedMembersTableModel>,
+  ) => MeatBallMenuProps | undefined;
+}): ColumnDef<VerifiedMembersTableModel, string>[] => {
   const columnHelper = useMemo(
     () => createColumnHelper<VerifiedMembersTableModel>(),
     [],
   );
   const isMobile = useMobile();
 
+  const menuColumn: ColumnDef<VerifiedMembersTableModel, string> = useMemo(
+    () =>
+      makeMenuColumn({
+        helper: columnHelper,
+        getMenuProps,
+      }),
+    [columnHelper, getMenuProps],
+  );
+
   const columns: ColumnDef<VerifiedMembersTableModel, string>[] = useMemo(
     () => [
       columnHelper.display({
         id: 'member',
-        staticSize: isMobile ? '6.125rem' : undefined,
         header: () => formatText({ id: 'table.row.member' }),
         cell: ({ row }) =>
           manageMembers === ManageVerifiedMembersOperation.Add ? (
@@ -47,5 +69,5 @@ export const useVerifiedMembersTableColumns = (
     [columnHelper, name, isMobile, manageMembers],
   );
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/TransactionTable/TransactionTable.tsx b/src/components/v5/common/ActionSidebar/partials/TransactionTable/TransactionTable.tsx
index 4e1b50e4d2f..96dbe2d0449 100644
--- a/src/components/v5/common/ActionSidebar/partials/TransactionTable/TransactionTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/TransactionTable/TransactionTable.tsx
@@ -7,7 +7,9 @@ import { FormattedMessage } from 'react-intl';
 import { useAdditionalFormOptionsContext } from '~context/AdditionalFormOptionsContext/AdditionalFormOptionsContext.ts';
 import { useMobile } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { getMoreActionsMenu } from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import { useTransactionTableColumns } from './hooks.tsx';
@@ -28,7 +30,6 @@ const TransactionTable: FC<TransactionTableProps> = ({ name }) => {
     }),
   );
   const { readonly } = useAdditionalFormOptionsContext();
-  const columns = useTransactionTableColumns(name);
   const isMobile = useMobile();
   const value = useWatch({ name });
   const getMenuProps = ({ index }) =>
@@ -54,6 +55,7 @@ const TransactionTable: FC<TransactionTableProps> = ({ name }) => {
           ],
         }
       : undefined;
+  const columns = useTransactionTableColumns(name, getMenuProps);
 
   const { getFieldState } = useFormContext();
   const fieldState = getFieldState(name);
@@ -69,11 +71,21 @@ const TransactionTable: FC<TransactionTableProps> = ({ name }) => {
             className={clsx({
               '!border-negative-400': !!fieldState.error,
             })}
-            getRowId={({ key }) => key}
             columns={columns}
             data={data}
-            getMenuProps={getMenuProps}
-            verticalLayout={isMobile}
+            layout={isMobile ? 'vertical' : 'horizontal'}
+            overrides={{
+              getRowId: ({ key }) => key,
+              state: {
+                columnVisibility: {
+                  [MEATBALL_MENU_COLUMN_ID]: !isMobile,
+                },
+              },
+            }}
+            moreActions={getMoreActionsMenu({
+              getMenuProps,
+              visible: isMobile,
+            })}
           />
         </>
       )}
diff --git a/src/components/v5/common/ActionSidebar/partials/TransactionTable/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/TransactionTable/hooks.tsx
index d6b74e569f7..f6b306bf9bc 100644
--- a/src/components/v5/common/ActionSidebar/partials/TransactionTable/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/TransactionTable/hooks.tsx
@@ -1,8 +1,14 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import React, { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { formatText } from '~utils/intl.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import AmountField from '../AmountField/index.ts';
 import UserSelect from '../UserSelect/index.ts';
@@ -11,6 +17,9 @@ import { type TransactionTableModel } from './types.ts';
 
 export const useTransactionTableColumns = (
   name: string,
+  getMenuProps: (
+    row: Row<TransactionTableModel>,
+  ) => MeatBallMenuProps | undefined,
 ): ColumnDef<TransactionTableModel, string>[] => {
   const { watch } = useFormContext();
   const selectedTeam = watch('from');
@@ -20,6 +29,15 @@ export const useTransactionTableColumns = (
     [],
   );
 
+  const menuColumn: ColumnDef<TransactionTableModel, string> = useMemo(
+    () =>
+      makeMenuColumn({
+        helper: columnHelper,
+        getMenuProps,
+      }),
+    [columnHelper, getMenuProps],
+  );
+
   const columns: ColumnDef<TransactionTableModel, string>[] = useMemo(
     () => [
       columnHelper.display({
@@ -44,5 +62,5 @@ export const useTransactionTableColumns = (
     [columnHelper, name, selectedTeam],
   );
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx
index 82a66e34e45..5e74692385b 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx
@@ -8,7 +8,9 @@ import { useMobile } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
 import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
 import { type AddTransactionTableModel } from '~v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/types.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { getMoreActionsMenu } from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import AddTransactionModal from '../AddTransactionModal/AddTransactionModal.tsx';
@@ -39,11 +41,6 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
   const { getFieldState } = useFormContext();
   const fieldState = getFieldState(name);
 
-  const columns = useArbitraryTxsTableColumns({
-    openTransactionModal,
-    isError: !!fieldState.error,
-    hasNoDecisionMethods,
-  });
   const closeTransactionModal = () => {
     setDefaultValues({} as AddTransactionTableModel);
     setIsModalOpen(false);
@@ -88,23 +85,40 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
         }
       : undefined;
 
+  const columns = useArbitraryTxsTableColumns({
+    openTransactionModal,
+    isError: !!fieldState.error,
+    hasNoDecisionMethods,
+    getMenuProps,
+  });
+
   return (
     <div className="pt-4">
       <h5 className="mb-4 text-2">
         {formatText({ id: 'actionSidebar.transactions' })}
       </h5>
       <Table<AddTransactionTableModel>
-        sizeUnit={isMobile ? undefined : '%'}
-        meatBallMenuSize={isMobile ? undefined : 10}
+        overrides={{
+          getRowId: ({ key }) => key,
+          state: {
+            columnVisibility: {
+              [MEATBALL_MENU_COLUMN_ID]: !isMobile,
+            },
+          },
+        }}
+        layout={isMobile ? 'vertical' : 'horizontal'}
+        // sizeUnit={isMobile ? undefined : '%'}
+        // meatBallMenuSize={isMobile ? undefined : 10}
         className={clsx('mb-6', {
           '!border-negative-400 md:[&_tfoot_td]:!border-negative-400 md:[&_th]:border-negative-400':
             !!fieldState.error,
         })}
-        getRowId={({ key }) => key}
         columns={columns}
-        getMenuProps={getMenuProps}
         data={data.length === 0 ? [{} as AddTransactionTableModel] : data}
-        verticalLayout={isMobile}
+        moreActions={getMoreActionsMenu({
+          getMenuProps,
+          visible: isMobile,
+        })}
       />
       {!readonly && (
         <>
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx
index 326671e2480..c607fddbf62 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx
@@ -7,6 +7,7 @@ import { useMobile } from '~hooks/index.ts';
 import getMaskedAddress from '~shared/MaskedAddress/getMaskedAddress.ts';
 import { formatText } from '~utils/intl.ts';
 import { type AddTransactionTableModel } from '~v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/types.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 import UserAvatar from '~v5/shared/UserAvatar/UserAvatar.tsx';
 
@@ -30,6 +31,7 @@ export const useArbitraryTxsTableColumns = ({
   openTransactionModal,
   isError,
   hasNoDecisionMethods,
+  getMenuProps,
 }): ColumnDef<AddTransactionTableModel, string>[] => {
   const columnHelper = useMemo(
     () => createColumnHelper<AddTransactionTableModel>(),
@@ -37,6 +39,20 @@ export const useArbitraryTxsTableColumns = ({
   );
   const isMobile = useMobile();
 
+  const menuColumn = useMemo(
+    () =>
+      getMenuProps
+        ? makeMenuColumn({
+            helper: columnHelper,
+            getMenuProps,
+            cellProps: {
+              staticSize: isMobile ? '60px' : '10%',
+            },
+          })
+        : null,
+    [getMenuProps, columnHelper, isMobile],
+  );
+
   const columns: ColumnDef<AddTransactionTableModel, string>[] = useMemo(
     () => [
       columnHelper.accessor('contractAddress', {
@@ -82,7 +98,7 @@ export const useArbitraryTxsTableColumns = ({
             </span>
           );
         },
-        size: isMobile ? 100 : 30,
+        staticSize: isMobile ? '100px' : '30%',
       }),
       columnHelper.display({
         id: 'description',
@@ -113,11 +129,11 @@ export const useArbitraryTxsTableColumns = ({
           }
           return <CellDescription data={data} />;
         },
-        size: isMobile ? 100 : 67,
+        staticSize: isMobile ? '100px' : '67%',
       }),
     ],
     [columnHelper, isMobile, openTransactionModal, isError],
   );
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/EditColonyDetailsForm/partials/SocialLinksTable/SocialLinksTable.tsx b/src/components/v5/common/ActionSidebar/partials/forms/EditColonyDetailsForm/partials/SocialLinksTable/SocialLinksTable.tsx
index d773fc11507..9b1e140ab41 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/EditColonyDetailsForm/partials/SocialLinksTable/SocialLinksTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/EditColonyDetailsForm/partials/SocialLinksTable/SocialLinksTable.tsx
@@ -12,7 +12,9 @@ import {
 } from '~types/colony.ts';
 import { formatText } from '~utils/intl.ts';
 import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { getMoreActionsMenu } from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import SocialLinkModal from './partials/SocialLinkModal/index.ts';
@@ -49,7 +51,7 @@ const SocialLinksTable: FC<SocialLinksTableProps> = ({ name }) => {
       ],
     };
   };
-  const columns = useSocialLinksTableColumns();
+  const columns = useSocialLinksTableColumns(getMenuProps);
   const data: SocialLinksTableModel[] = fieldArrayMethods.fields.map(
     ({ id }, index) => ({
       key: id,
@@ -67,17 +69,35 @@ const SocialLinksTable: FC<SocialLinksTableProps> = ({ name }) => {
             {formatText({ id: 'editColony.socialLinks.table.title' })}
           </h5>
           <Table<SocialLinksTableModel>
-            sizeUnit={isMobile ? undefined : '%'}
-            meatBallMenuSize={isMobile ? undefined : 10}
+            overrides={{
+              state: {
+                columnVisibility: isMobile
+                  ? {
+                      // We will use the more actions for the meatball menu on the vertical layout
+                      [MEATBALL_MENU_COLUMN_ID]: false,
+                      name: true,
+                      link: true,
+                    }
+                  : {
+                      [MEATBALL_MENU_COLUMN_ID]: true,
+                      name: true,
+                      link: true,
+                    },
+              },
+              getRowId: ({ key }) => key,
+            }}
+            borders={{
+              type: 'unset',
+              visible: true,
+            }}
             className={clsx({ '!border-negative-400': !!fieldState.error })}
-            getRowId={({ key }) => key}
+            layout={isMobile ? 'vertical' : 'horizontal'}
             columns={columns}
             data={data}
-            getMenuProps={
-              readonly || hasNoDecisionMethods ? undefined : getMenuProps
-            }
-            verticalLayout={isMobile}
-            withBorder={false}
+            moreActions={getMoreActionsMenu({
+              getMenuProps,
+              visible: isMobile,
+            })}
           />
         </>
       )}
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsRemovalModal/PermissionsRemovalModal.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsRemovalModal/PermissionsRemovalModal.tsx
index 0b9e11673ef..0498dac1790 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsRemovalModal/PermissionsRemovalModal.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsRemovalModal/PermissionsRemovalModal.tsx
@@ -14,7 +14,7 @@ import {
   getRemovedInheritedPermissions,
 } from '~v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/utils.ts';
 import Checkbox from '~v5/common/Checkbox/Checkbox.tsx';
-import Table from '~v5/common/Table/Table.tsx';
+import { Table } from '~v5/common/Table/Table.tsx';
 import IconButton from '~v5/shared/Button/IconButton.tsx';
 import Button from '~v5/shared/Button/index.ts';
 import Modal from '~v5/shared/Modal/index.ts';
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsTable/PermissionsTable.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsTable/PermissionsTable.tsx
index 2615f73b803..a54f1035e9c 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsTable/PermissionsTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/partials/PermissionsTable/PermissionsTable.tsx
@@ -16,7 +16,7 @@ import {
   UserRoleModifier,
   type ManagePermissionsFormValues,
 } from '~v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/consts.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 
 import { useCustomPermissionsTableColumns } from './hooks.tsx';
 
@@ -64,11 +64,16 @@ const PermissionsTable: FC<PermissionsTableProps> = ({
               '!border-negative-300': !!formState.errors.permissions,
             },
           )}
+          layout={isMobile ? 'vertical' : 'horizontal'}
           data={ALLOWED_CUSTOM_PERMISSION_TABLE_CONTENT}
           columns={customPermissionsTableColumns}
-          verticalLayout={isMobile}
-          withBorder={false}
-          tableBodyRowKeyProp="type"
+          borders={{
+            visible: true,
+            type: 'unset',
+          }}
+          rows={{
+            key: 'type',
+          }}
         />
       ) : (
         <Table<PermissionsTableModel>
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/TokensTable.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/TokensTable.tsx
index 34fd653bc8b..eda71a678d9 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/TokensTable.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/TokensTable.tsx
@@ -5,7 +5,12 @@ import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
 import { useTablet } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import {
+  getMoreActionsMenu,
+  renderCellContent,
+} from '~v5/common/Table/utils.tsx';
 import { TokenStatus } from '~v5/common/types.ts';
 import Button from '~v5/shared/Button/index.ts';
 
@@ -30,7 +35,6 @@ const TokensTable: FC<TokensTableProps> = ({
   const fieldState = getFieldState(name);
   const selectedTokenAddresses = useWatch({ name });
   const value = useWatch({ name }) || [];
-  const columns = useTokensTableColumns(name, value);
   const getMenuProps = ({ index }) => {
     const shouldShow = shouldShowMenu(value[index]?.status);
 
@@ -65,6 +69,7 @@ const TokensTable: FC<TokensTableProps> = ({
         }
       : undefined;
   };
+  const columns = useTokensTableColumns(name, value, getMenuProps);
 
   // Added to trigger validation on token change to check for duplicates in previous fields
   useEffect(() => {
@@ -93,16 +98,38 @@ const TokensTable: FC<TokensTableProps> = ({
             '[&_tbody_td]:h-[3.375rem] [&_td:first-child]:pl-4 [&_td:nth-child(2)]:pr-2 [&_td]:pr-4 [&_th:first-child]:pl-4 [&_th:not(:first-child)]:pl-0 [&_th]:pr-4':
               !isTablet,
             '[&_table]:table-auto': isTablet,
+            'pb-4': data.length > 10,
           })}
-          getRowId={({ key }) => key}
           columns={columns}
           data={data}
-          getMenuProps={getMenuProps}
           isDisabled={isDisabled}
-          verticalLayout={isTablet}
-          renderCellWrapper={(_, content) => content}
-          withBorder={false}
-          meatBallMenuSize={34}
+          layout={isTablet ? 'vertical' : 'horizontal'}
+          borders={{
+            type: 'unset',
+            visible: true,
+          }}
+          renderCellWrapper={renderCellContent}
+          pagination={{
+            pageNumberVisible: false,
+          }}
+          overrides={{
+            getRowId: ({ key }) => key,
+            initialState: {
+              pagination: {
+                pageIndex: 0,
+                pageSize: 400,
+              },
+            },
+            state: {
+              columnVisibility: {
+                [MEATBALL_MENU_COLUMN_ID]: !isTablet,
+              },
+            },
+          }}
+          moreActions={getMoreActionsMenu({
+            getMenuProps,
+            visible: isTablet,
+          })}
         />
       )}
       <Button
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/hooks.tsx
index 8e1c0a25b63..4d3894a5d90 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/hooks.tsx
@@ -1,4 +1,8 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -12,13 +16,16 @@ import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/
 import TokenSymbol from '~v5/common/ActionSidebar/partials/TokenSelect/partials/TokenSymbol/TokenSymbol.tsx';
 import TokenSelect from '~v5/common/ActionSidebar/partials/TokenSelect/TokenSelect.tsx';
 import PillsBase from '~v5/common/Pills/PillsBase.tsx';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
 import { TokenStatus } from '~v5/common/types.ts';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import { type TokensTableModel } from './types.ts';
 
 export const useTokensTableColumns = (
   name: string,
   data,
+  getMenuProps: (row: Row<TokensTableModel>) => MeatBallMenuProps | undefined,
 ): ColumnDef<TokensTableModel, string>[] => {
   const isTablet = useTablet();
   const columnHelper = useMemo(
@@ -36,6 +43,18 @@ export const useTokensTableColumns = (
 
   const { getFieldState } = useFormContext();
 
+  const menuColumn: ColumnDef<TokensTableModel, string> = useMemo(
+    () =>
+      makeMenuColumn({
+        helper: columnHelper,
+        getMenuProps,
+        cellProps: {
+          size: 34,
+        },
+      }),
+    [columnHelper, getMenuProps],
+  );
+
   const columns: ColumnDef<TokensTableModel, string>[] = useMemo(
     () => [
       columnHelper.display({
@@ -134,5 +153,5 @@ export const useTokensTableColumns = (
     ],
   );
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx
index 9669240e4ca..b107c0bb066 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx
@@ -18,7 +18,12 @@ import { formatText } from '~utils/intl.ts';
 import { convertEnotationToNumber } from '~utils/numbers.ts';
 import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
 import { useBuildTokenSumsMap } from '~v5/common/ActionSidebar/partials/forms/shared/hooks/useBuildTokenSumsMap.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import {
+  getMoreActionsMenu,
+  renderCellContent,
+} from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import FileUploadModal from '../FileUploadModal/FileUploadModal.tsx';
@@ -75,7 +80,6 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
       key: id,
     }));
   const value: PaymentBuilderRecipientsFieldModel[] = useWatch({ name }) || [];
-  const columns = useRecipientsFieldTableColumns(name, value);
   const isTablet = useTablet();
   const isMobile = useMobile();
   const getMenuProps = ({ index }) => ({
@@ -114,6 +118,7 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
         : []),
     ],
   });
+  const columns = useRecipientsFieldTableColumns(name, value, getMenuProps);
   const { getFieldState } = useFormContext();
   const fieldState = getFieldState(name);
 
@@ -142,13 +147,6 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
       </h5>
       {!!data.length && !hasNoDecisionMethods && (
         <Table<PaymentBuilderRecipientsTableModel>
-          virtualizedProps={
-            data.length > 10
-              ? {
-                  virtualizedRowHeight: isTablet ? 46 : 54,
-                }
-              : undefined
-          }
           className={clsx(
             '[&_tfoot>tr>td]:border-gray-200 [&_tfoot>tr>td]:py-2 md:[&_tfoot>tr>td]:border-t',
             {
@@ -159,18 +157,39 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
                 !!fieldState.error,
             },
           )}
-          verticalLayout={isTablet}
-          getRowId={({ key }) => key}
           columns={columns}
           data={data}
-          getMenuProps={getMenuProps}
-          withBorder={false}
-          renderCellWrapper={(_, content) => content}
-          initialState={{
-            pagination: {
-              pageSize: 400,
+          layout={isTablet ? 'vertical' : 'horizontal'}
+          rows={
+            data.length > 10
+              ? {
+                  virtualizedRowHeight: isTablet ? 46 : 54,
+                }
+              : undefined
+          }
+          borders={{
+            visible: true,
+            type: 'unset',
+          }}
+          renderCellWrapper={renderCellContent}
+          overrides={{
+            getRowId: ({ key }) => key,
+            initialState: {
+              pagination: {
+                pageIndex: 0,
+                pageSize: 400,
+              },
+            },
+            state: {
+              columnVisibility: {
+                [MEATBALL_MENU_COLUMN_ID]: !isMobile,
+              },
             },
           }}
+          moreActions={getMoreActionsMenu({
+            getMenuProps,
+            visible: isTablet,
+          })}
         />
       )}
       <div className="mt-6 flex flex-col items-center gap-3 sm:flex-row">
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/hooks.tsx
index d0dfe779bf4..c681c48abf4 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/hooks.tsx
@@ -1,4 +1,8 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import { BigNumber } from 'ethers';
 import React, { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -8,6 +12,8 @@ import useWrapWithRef from '~hooks/useWrapWithRef.ts';
 import { convertPeriodToHours } from '~utils/extensions.ts';
 import { formatText } from '~utils/intl.ts';
 import AmountField from '~v5/common/ActionSidebar/partials/AmountField/index.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import ClaimDelayField from '../ClaimDelayField/ClaimDelayField.tsx';
 import PaymentBuilderPayoutsTotal from '../PaymentBuilderPayoutsTotal/index.ts';
@@ -21,6 +27,9 @@ import { UserSelectRow } from './UserSelectRow.tsx';
 export const useRecipientsFieldTableColumns = (
   name: string,
   data: PaymentBuilderRecipientsFieldModel[],
+  getMenuProps: (
+    row: Row<PaymentBuilderRecipientsTableModel>,
+  ) => MeatBallMenuProps | undefined,
 ): ColumnDef<PaymentBuilderRecipientsTableModel, string>[] => {
   const { colony } = useColonyContext();
   const { expendituresGlobalClaimDelay } = colony;
@@ -37,6 +46,11 @@ export const useRecipientsFieldTableColumns = (
   const selectedTeam = watch('from');
   const hasMoreThanOneToken = data.length > 1;
 
+  const columnHelper = useMemo(
+    () => createColumnHelper<PaymentBuilderRecipientsTableModel>(),
+    [],
+  );
+
   const footerData = useMemo(
     () => ({
       amountFooter: hasMoreThanOneToken
@@ -66,11 +80,20 @@ export const useRecipientsFieldTableColumns = (
     [hasMoreThanOneToken],
   );
 
+  const menuColumn = useMemo(
+    () =>
+      makeMenuColumn({
+        helper: columnHelper,
+        getMenuProps,
+        cellProps: {
+          size: 34,
+        },
+      }),
+    [columnHelper, getMenuProps],
+  );
+
   const columns: ColumnDef<PaymentBuilderRecipientsTableModel, string>[] =
     useMemo(() => {
-      const columnHelper =
-        createColumnHelper<PaymentBuilderRecipientsTableModel>();
-
       return [
         columnHelper.display({
           id: 'recipient',
@@ -133,7 +156,13 @@ export const useRecipientsFieldTableColumns = (
           : []),
       ];
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [expendituresGlobalClaimDelayHours, footerData, name, selectedTeam]);
+    }, [
+      columnHelper,
+      expendituresGlobalClaimDelayHours,
+      footerData,
+      name,
+      selectedTeam,
+    ]);
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/SplitPaymentRecipientsField.tsx b/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/SplitPaymentRecipientsField.tsx
index e8886033f38..0af8740354c 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/SplitPaymentRecipientsField.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/SplitPaymentRecipientsField.tsx
@@ -7,7 +7,12 @@ import { FormattedMessage } from 'react-intl';
 import { SplitPaymentDistributionType } from '~gql';
 import { useTablet } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import {
+  getMoreActionsMenu,
+  renderCellContent,
+} from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import {
@@ -37,16 +42,6 @@ const SplitPaymentRecipientsField: FC<SplitPaymentRecipientsFieldProps> = ({
   );
   const value: SplitPaymentRecipientsFieldModel[] = useWatch({ name }) || [];
   const amount: string | undefined = useWatch({ name: 'amount' });
-
-  const columns = useRecipientsFieldTableColumns({
-    name,
-    token,
-    data: value,
-    amount,
-    fieldArrayMethods,
-    disabled,
-    distributionMethod,
-  });
   const isTablet = useTablet();
   const getMenuProps = ({ index }) => ({
     cardClassName: 'min-w-[9.625rem] whitespace-nowrap',
@@ -65,6 +60,16 @@ const SplitPaymentRecipientsField: FC<SplitPaymentRecipientsFieldProps> = ({
       },
     ],
   });
+  const columns = useRecipientsFieldTableColumns({
+    name,
+    token,
+    data: value,
+    amount,
+    fieldArrayMethods,
+    disabled,
+    distributionMethod,
+    getMenuProps,
+  });
   const { getFieldState, watch } = useFormContext();
   const fieldState = getFieldState(name);
 
@@ -136,20 +141,31 @@ const SplitPaymentRecipientsField: FC<SplitPaymentRecipientsFieldProps> = ({
                 !!fieldState.error,
             },
           )}
-          getRowId={({ key }) => key}
           columns={columns}
           data={data}
-          getMenuProps={disabled ? undefined : getMenuProps}
+          borders={{
+            type: 'unset',
+            visible: true,
+          }}
+          layout={isTablet ? 'vertical' : 'horizontal'}
           isDisabled={disabled}
-          verticalLayout={isTablet}
-          withBorder={false}
-          renderCellWrapper={(_, content) => content}
-          state={{
-            pagination: {
-              pageSize: data.length,
-              pageIndex: 0,
+          renderCellWrapper={renderCellContent}
+          overrides={{
+            getRowId: ({ key }) => key,
+            state: {
+              columnVisibility: {
+                [MEATBALL_MENU_COLUMN_ID]: !disabled && !isTablet,
+              },
+              pagination: {
+                pageSize: data.length,
+                pageIndex: 0,
+              },
             },
           }}
+          moreActions={getMoreActionsMenu({
+            getMenuProps,
+            visible: isTablet,
+          })}
         />
       )}
       <Button
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/hooks.tsx
index e8cd4e5f8c2..4605e1f6e9b 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/hooks.tsx
@@ -1,4 +1,8 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import Decimal from 'decimal.js';
 import moveDecimal from 'move-decimal-point';
 import React, { useMemo, useCallback, useEffect } from 'react';
@@ -14,6 +18,8 @@ import { type ColonyContributor, type Token } from '~types/graphql.ts';
 import { formatText } from '~utils/intl.ts';
 import { getSelectedToken } from '~utils/tokens.ts';
 import UserSelect from '~v5/common/ActionSidebar/partials/UserSelect/index.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import SplitPaymentAmountField from '../SplitPaymentAmountField/SplitPaymentAmountField.tsx';
 import SplitPaymentPayoutsTotal from '../SplitPaymentPayoutsTotal/SplitPaymentPayoutsTotal.tsx';
@@ -33,6 +39,7 @@ export const useRecipientsFieldTableColumns = ({
   fieldArrayMethods: { update },
   disabled,
   distributionMethod,
+  getMenuProps,
 }: {
   name: string;
   token: Token;
@@ -41,6 +48,9 @@ export const useRecipientsFieldTableColumns = ({
   fieldArrayMethods: UseFieldArrayReturn<FieldValues, string, 'id'>;
   disabled?: boolean;
   distributionMethod?: SplitPaymentDistributionType;
+  getMenuProps: (
+    row: Row<SplitPaymentRecipientsTableModel>,
+  ) => MeatBallMenuProps | undefined;
 }): ColumnDef<SplitPaymentRecipientsTableModel, string>[] => {
   const isTablet = useTablet();
   const columnHelper = useMemo(
@@ -56,6 +66,15 @@ export const useRecipientsFieldTableColumns = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const menuColumn = useMemo(
+    () =>
+      makeMenuColumn({
+        helper: columnHelper,
+        getMenuProps,
+      }),
+    [columnHelper, getMenuProps],
+  );
+
   const columns: ColumnDef<SplitPaymentRecipientsTableModel, string>[] =
     useMemo(
       () => [
@@ -196,7 +215,7 @@ export const useRecipientsFieldTableColumns = ({
       [amount, columnHelper, name, token, disabled],
     );
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
 
 export const useDistributionMethodUpdate = ({
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/StagedPaymentRecipientField.tsx b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/StagedPaymentRecipientField.tsx
index 61a26b96226..eacaa86fa38 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/StagedPaymentRecipientField.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/StagedPaymentRecipientField.tsx
@@ -9,7 +9,12 @@ import { formatText } from '~utils/intl.ts';
 import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
 import { useBuildTokenSumsMap } from '~v5/common/ActionSidebar/partials/forms/shared/hooks/useBuildTokenSumsMap.ts';
 import { useIsFieldDisabled } from '~v5/common/ActionSidebar/partials/hooks.ts';
-import Table from '~v5/common/Table/Table.tsx';
+import { MEATBALL_MENU_COLUMN_ID } from '~v5/common/Table/consts.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import {
+  getMoreActionsMenu,
+  renderCellContent,
+} from '~v5/common/Table/utils.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import { useStagedPaymentRecipientsTableColumns } from './hooks.tsx';
@@ -40,7 +45,6 @@ const StagedPaymentRecipientsField: FC<StagedPaymentRecipientsFieldProps> = ({
     key: id,
   }));
   const value: StagedPaymentRecipientsFieldModel[] = useWatch({ name }) || [];
-  const columns = useStagedPaymentRecipientsTableColumns(name, value);
   const { getFieldState } = useFormContext();
   const fieldState = getFieldState(name);
   const getMenuProps = ({ index }) => ({
@@ -67,6 +71,11 @@ const StagedPaymentRecipientsField: FC<StagedPaymentRecipientsFieldProps> = ({
         : []),
     ],
   });
+  const columns = useStagedPaymentRecipientsTableColumns(
+    name,
+    value,
+    getMenuProps,
+  );
 
   return (
     <div>
@@ -87,19 +96,33 @@ const StagedPaymentRecipientsField: FC<StagedPaymentRecipientsFieldProps> = ({
                 !isTablet,
             },
           )}
-          verticalLayout={isTablet}
-          getRowId={({ key }) => key}
           columns={columns}
           data={data}
-          getMenuProps={getMenuProps}
-          withBorder={false}
+          layout={isTablet ? 'vertical' : 'horizontal'}
           footerColSpan={isMobile ? 2 : 1}
-          renderCellWrapper={(_, content) => content}
-          initialState={{
-            pagination: {
-              pageSize: 400,
+          renderCellWrapper={renderCellContent}
+          borders={{
+            visible: true,
+            type: 'unset',
+          }}
+          overrides={{
+            getRowId: ({ key }) => key,
+            state: {
+              columnVisibility: {
+                [MEATBALL_MENU_COLUMN_ID]: !isTablet,
+              },
+            },
+            initialState: {
+              pagination: {
+                pageIndex: 0,
+                pageSize: 400,
+              },
             },
           }}
+          moreActions={getMoreActionsMenu({
+            getMenuProps,
+            visible: isTablet,
+          })}
         />
       )}
       <div className="mt-6 flex flex-col items-center gap-3 sm:flex-row">
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
index 94998a17bc3..ac4546f41ad 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
@@ -1,4 +1,8 @@
-import { type ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import {
+  type ColumnDef,
+  createColumnHelper,
+  type Row,
+} from '@tanstack/react-table';
 import React, { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
@@ -10,6 +14,8 @@ import AmountField from '~v5/common/ActionSidebar/partials/AmountField/AmountFie
 import PaymentBuilderPayoutsTotal from '~v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/index.ts';
 import { type StagedPaymentFormValues } from '~v5/common/ActionSidebar/partials/forms/StagedPaymentForm/hooks.ts';
 import FormTextareaBase from '~v5/common/Fields/TextareaBase/FormTextareaBase.tsx';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import {
   type StagedPaymentRecipientsTableModel,
@@ -19,17 +25,32 @@ import {
 export const useStagedPaymentRecipientsTableColumns = (
   name: string,
   data: StagedPaymentRecipientsFieldModel[],
+  getMenuProps: (
+    row: Row<StagedPaymentRecipientsTableModel>,
+  ) => MeatBallMenuProps | undefined,
 ) => {
   const { watch } = useFormContext<StagedPaymentFormValues>();
   const hasMoreThanOneToken = data.length > 1;
   const selectedTeam = watch(FROM_FIELD_NAME);
   const dataRef = useWrapWithRef(data);
 
+  const columnHelper = useMemo(
+    () => createColumnHelper<StagedPaymentRecipientsTableModel>(),
+    [],
+  );
+
+  const menuColumn: ColumnDef<StagedPaymentRecipientsTableModel, string> =
+    useMemo(
+      () =>
+        makeMenuColumn({
+          helper: columnHelper,
+          getMenuProps,
+        }),
+      [columnHelper, getMenuProps],
+    );
+
   const columns: ColumnDef<StagedPaymentRecipientsTableModel, string>[] =
     useMemo(() => {
-      const columnHelper =
-        createColumnHelper<StagedPaymentRecipientsTableModel>();
-
       return [
         columnHelper.display({
           id: 'milestone',
@@ -87,7 +108,7 @@ export const useStagedPaymentRecipientsTableColumns = (
             : undefined,
         }),
       ];
-    }, [dataRef, hasMoreThanOneToken, name, selectedTeam]);
+    }, [columnHelper, dataRef, hasMoreThanOneToken, name, selectedTeam]);
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/components/v5/common/CompletedAction/partials/ManageTokens/partials/TokensTable/TokensTable.tsx b/src/components/v5/common/CompletedAction/partials/ManageTokens/partials/TokensTable/TokensTable.tsx
index b8557990b44..5ae27bd9ba4 100644
--- a/src/components/v5/common/CompletedAction/partials/ManageTokens/partials/TokensTable/TokensTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/ManageTokens/partials/TokensTable/TokensTable.tsx
@@ -1,3 +1,4 @@
+import { getPaginationRowModel } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 
@@ -6,7 +7,8 @@ import { useTablet } from '~hooks';
 import { type ApprovedTokenChanges } from '~types/graphql.ts';
 import { notNull } from '~utils/arrays/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/Table.tsx';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { renderCellContent } from '~v5/common/Table/utils.tsx';
 import { TokenStatus } from '~v5/common/types.ts';
 
 import { useTokensTableColumns } from './hooks.tsx';
@@ -66,13 +68,25 @@ const TokensTable = ({ approvedTokenChanges }: TokensTableProps) => {
         className={clsx({
           '[&_tbody_td]:h-[3.375rem] [&_td:first-child]:pl-4 [&_td]:pr-4 [&_th:first-child]:pl-4 [&_th:not(:first-child)]:pl-0 [&_th]:pr-4':
             !isTablet,
+          'pb-4': combinedTokens.length > 10,
         })}
-        getRowId={({ tokenAddress }) => tokenAddress}
         columns={columns}
         data={combinedTokens}
-        verticalLayout={isTablet}
-        renderCellWrapper={(_, content) => content}
-        withBorder={false}
+        layout={isTablet ? 'vertical' : 'horizontal'}
+        renderCellWrapper={renderCellContent}
+        borders={{
+          visible: true,
+          type: 'unset',
+        }}
+        overrides={{
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 10,
+            },
+          },
+          getPaginationRowModel: getPaginationRowModel(),
+        }}
       />
     </div>
   );
diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderTable/PaymentBuilderTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderTable/PaymentBuilderTable.tsx
index cb1772736ad..1c74b7ae1a1 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderTable/PaymentBuilderTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderTable/PaymentBuilderTable.tsx
@@ -13,7 +13,8 @@ import { getClaimableExpenditurePayouts } from '~utils/expenditures.ts';
 import { convertPeriodToHours } from '~utils/extensions.ts';
 import { formatText } from '~utils/intl.ts';
 import PaymentBuilderPayoutsTotal from '~v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/index.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { renderCellContent } from '~v5/common/Table/utils.tsx';
 
 import AmountField from './partials/AmountField/AmountField.tsx';
 import ClaimStatusBadge from './partials/ClaimStatusBadge/ClaimStatusBadge.tsx';
@@ -259,13 +260,6 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
         {formatText({ id: 'actionSidebar.payments' })}
       </h5>
       <Table<PaymentBuilderTableModel>
-        virtualizedProps={
-          data.length > 10
-            ? {
-                virtualizedRowHeight: isTablet ? 46 : 54,
-              }
-            : undefined
-        }
         className={clsx(
           '[&_tfoot>tr>td]:border-gray-200 [&_tfoot>tr>td]:py-2 md:[&_tfoot>tr>td]:border-t',
           {
@@ -308,14 +302,27 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
             : data
         }
         columns={columns}
-        renderCellWrapper={(_, content) => content}
-        verticalLayout={isTablet}
-        withBorder={false}
-        initialState={{
-          pagination: {
-            pageSize: 400,
+        renderCellWrapper={renderCellContent}
+        rows={
+          data.length > 10
+            ? {
+                virtualizedRowHeight: isTablet ? 46 : 54,
+              }
+            : undefined
+        }
+        overrides={{
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 400,
+            },
           },
         }}
+        layout={isTablet ? 'vertical' : 'horizontal'}
+        borders={{
+          visible: true,
+          type: 'unset',
+        }}
       />
     </div>
   );
diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
index d91897933a5..41ac5c6cd3c 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -13,7 +13,8 @@ import { formatText } from '~utils/intl.ts';
 import PaymentBuilderPayoutsTotal from '~v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/index.ts';
 import { type StagedPaymentRecipientsFieldModel } from '~v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/types.ts';
 import PillsBase from '~v5/common/Pills/PillsBase.tsx';
-import Table from '~v5/common/Table/Table.tsx';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { renderCellContent } from '~v5/common/Table/utils.tsx';
 
 import AmountField from '../PaymentBuilderTable/partials/AmountField/AmountField.tsx';
 import { type MilestoneItem } from '../StagedPaymentStep/partials/MilestoneReleaseModal/types.ts';
@@ -254,14 +255,20 @@ const StagedPaymentTable: FC<StagedPaymentTableProps> = ({
                 !isTablet,
             },
           )}
-          verticalLayout={isTablet}
           columns={columns}
           data={data}
-          withBorder={false}
-          renderCellWrapper={(_, content) => content}
-          initialState={{
-            pagination: {
-              pageSize: 400,
+          layout={isTablet ? 'vertical' : 'horizontal'}
+          borders={{
+            visible: true,
+            type: 'unset',
+          }}
+          renderCellWrapper={renderCellContent}
+          overrides={{
+            initialState: {
+              pagination: {
+                pageIndex: 0,
+                pageSize: 400,
+              },
             },
           }}
         />
diff --git a/src/components/v5/common/CompletedAction/partials/SelectedMembers/SelectedMembers.tsx b/src/components/v5/common/CompletedAction/partials/SelectedMembers/SelectedMembers.tsx
index 5be232b10fd..81b7a59a9ad 100644
--- a/src/components/v5/common/CompletedAction/partials/SelectedMembers/SelectedMembers.tsx
+++ b/src/components/v5/common/CompletedAction/partials/SelectedMembers/SelectedMembers.tsx
@@ -1,9 +1,11 @@
+import { getPaginationRowModel } from '@tanstack/react-table';
+import clsx from 'clsx';
 import React from 'react';
 
 import { useMemberContext } from '~context/MemberContext/MemberContext.ts';
 import { useMobile } from '~hooks/index.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/Table.tsx';
+import { Table } from '~v5/common/Table/Table.tsx';
 
 import { type MembersTableModel, membersColumns } from './tableFixtures.tsx';
 import { SelectedMemberType, type SelectedMember } from './types.ts';
@@ -51,9 +53,21 @@ const SelectedMembers = ({ memberAddresses }: SelectedMembersProps) => {
         {formatText({ id: 'actionSidebar.manageVerifiedMembers.table.title' })}
       </h5>
       <Table<MembersTableModel>
+        className={clsx({
+          'pb-4': members.length > 10,
+        })}
         data={members}
         columns={membersColumns}
-        verticalLayout={isMobile}
+        layout={isMobile ? 'vertical' : 'horizontal'}
+        overrides={{
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 10,
+            },
+          },
+          getPaginationRowModel: getPaginationRowModel(),
+        }}
       />
     </div>
   );
diff --git a/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/SplitPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/SplitPaymentTable.tsx
index 9d522309bc3..5f47558f6ff 100644
--- a/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/SplitPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/SplitPaymentTable.tsx
@@ -3,7 +3,8 @@ import React, { type FC, useMemo } from 'react';
 
 import { useTablet } from '~hooks';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
+import { renderCellContent } from '~v5/common/Table/utils.tsx';
 
 import { useGetSplitPaymentColumns } from './hooks.tsx';
 import {
@@ -80,9 +81,12 @@ const SplitPaymentTable: FC<SplitPaymentTableProps> = ({
             : data
         }
         columns={columns}
-        renderCellWrapper={(_, content) => content}
-        verticalLayout={isTablet}
-        withBorder={false}
+        renderCellWrapper={renderCellContent}
+        layout={isTablet ? 'vertical' : 'horizontal'}
+        borders={{
+          visible: true,
+          type: 'unset',
+        }}
       />
     </div>
   );
diff --git a/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/hooks.tsx b/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/hooks.tsx
index bcfc677d2d2..2c6b98182d5 100644
--- a/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/hooks.tsx
+++ b/src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/hooks.tsx
@@ -22,7 +22,10 @@ export const useGetSplitPaymentColumns = (
   isLoading?: boolean,
 ) => {
   const isTablet = useTablet();
-  const splitPaymentColumnHelper = createColumnHelper<SplitPaymentTableModel>();
+  const splitPaymentColumnHelper = useMemo(
+    () => createColumnHelper<SplitPaymentTableModel>(),
+    [],
+  );
   const { colony } = useColonyContext();
   const { loading: isColonyContributorDataLoading } = useMemberContext();
   const isDataLoading = isLoading || isColonyContributorDataLoading;
diff --git a/src/components/v5/common/CompletedAction/partials/rows/PermissionsTable.tsx b/src/components/v5/common/CompletedAction/partials/rows/PermissionsTable.tsx
index d958d2e113d..3a5983da368 100644
--- a/src/components/v5/common/CompletedAction/partials/rows/PermissionsTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/rows/PermissionsTable.tsx
@@ -11,7 +11,7 @@ import {
 } from '~types/permissions.ts';
 import { CUSTOM_PERMISSION_TABLE_CONTENT } from '~utils/colonyActions.ts';
 import { UserRoleModifier } from '~v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/consts.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 
 import { getCustomPermissionsTableColumns } from './utils.tsx';
 
@@ -67,7 +67,7 @@ const PermissionsTable = ({
           )}
           data={ALLOWED_CUSTOM_PERMISSIONS_TABLE_CONTENT}
           columns={customPermissionsTableColumns}
-          verticalLayout={isMobile}
+          layout={isMobile ? 'vertical' : 'horizontal'}
         />
       )}
     </div>
diff --git a/src/components/v5/common/CompletedAction/partials/rows/SocialLinksTable.tsx b/src/components/v5/common/CompletedAction/partials/rows/SocialLinksTable.tsx
index aff5c37127f..72d1b5f636b 100644
--- a/src/components/v5/common/CompletedAction/partials/rows/SocialLinksTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/rows/SocialLinksTable.tsx
@@ -5,7 +5,7 @@ import { useMobile } from '~hooks/index.ts';
 import { useSocialLinksTableColumns } from '~hooks/useSocialLinksTableColumns.tsx';
 import { type SocialLinksTableModel } from '~types/colony.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 
 const displayName = 'v5.common.ActionsContent.partials.SocialLinksTable';
 
@@ -30,13 +30,16 @@ const SocialLinksTable = ({ socialLinks }: Props) => {
             {formatText({ id: 'editColony.socialLinks.table.title' })}
           </h5>
           <Table<SocialLinksTableModel>
-            sizeUnit={isMobile ? undefined : '%'}
-            meatBallMenuSize={isMobile ? undefined : 10}
-            getRowId={({ key }) => key}
+            overrides={{
+              getRowId: ({ key }) => key,
+            }}
+            borders={{
+              type: 'unset',
+              visible: true,
+            }}
+            layout={isMobile ? 'vertical' : 'horizontal'}
             columns={columns}
             data={data}
-            verticalLayout={isMobile}
-            withBorder={false}
           />
         </>
       )}
diff --git a/src/components/v5/common/Table/Table.tsx b/src/components/v5/common/Table/Table.tsx
index 9252f1e83a2..98ac538ef59 100644
--- a/src/components/v5/common/Table/Table.tsx
+++ b/src/components/v5/common/Table/Table.tsx
@@ -1,191 +1,58 @@
-import {
-  useReactTable,
-  getCoreRowModel as libGetCoreRowModel,
-  createColumnHelper,
-  getExpandedRowModel,
-} from '@tanstack/react-table';
-import clsx from 'clsx';
-import React, { useEffect, useMemo } from 'react';
+import React from 'react';
 
-import { useMobile } from '~hooks';
 import { formatText } from '~utils/intl.ts';
 
-import { TableFooter } from './partials/TableFooter.tsx';
-import { TableLayout } from './partials/TableLayout/TableLayout.tsx';
-import TablePagination from './partials/TablePagination/index.ts';
+import { useTable } from './hooks.ts';
+import { BaseTable } from './partials/BaseTable.tsx';
+import TablePagination from './partials/TablePagination/TablePagination.tsx';
 import { type TableProps } from './types.ts';
-import { getDefaultRenderCellWrapper, makeMenuColumn } from './utils.tsx';
+import { getPaginationConfig } from './utils.tsx';
 
-const displayName = 'v5.common.Table';
+export const Table = <T,>(props: TableProps<T>) => {
+  const { pagination = {}, ...rest } = props;
+  const { pageTotalVisible = true, children } = pagination;
+  const { data, rows, columns, overrides = {} } = rest;
 
-const Table = <T,>({
-  className,
-  getCoreRowModel,
-  getRowClassName = () => undefined,
-  sizeUnit = 'px',
-  canNextPage,
-  canPreviousPage,
-  previousPage,
-  nextPage,
-  showPageNumber = true,
-  showTotalPagesNumber = true,
-  paginationDisabled,
-  renderCellWrapper = getDefaultRenderCellWrapper<T>(),
-  additionalPaginationButtonsContent,
-  emptyContent,
-  data,
-  getMenuProps,
-  meatBallMenuSize = 60,
-  meatBallMenuStaticSize,
-  columns,
-  renderSubComponent,
-  getRowCanExpand,
-  withBorder = true,
-  withNarrowBorder = false,
-  isDisabled = false,
-  verticalLayout,
-  virtualizedProps,
-  tableClassName,
-  tableBodyRowKeyProp,
-  showTableHead = true,
-  showTableBorder = true,
-  alwaysShowPagination = false,
-  footerColSpan,
-  ...rest
-}: TableProps<T>) => {
-  const helper = useMemo(() => createColumnHelper<T>(), []);
-  const isMobile = useMobile();
-
-  const columnsWithMenu = useMemo(
-    () => [
-      ...columns,
-      ...(getMenuProps && !verticalLayout
-        ? [
-            makeMenuColumn<T>({
-              helper,
-              getMenuProps,
-              meatBallMenuSize,
-              meatBallMenuStaticSize,
-            }),
-          ]
-        : []),
-    ],
-    [
-      columns,
-      getMenuProps,
-      verticalLayout,
-      helper,
-      meatBallMenuSize,
-      meatBallMenuStaticSize,
-    ],
-  );
-
-  const table = useReactTable<T>({
-    getCoreRowModel: getCoreRowModel || libGetCoreRowModel<T>(),
+  const table = useTable<T>({
     data,
-    columns: columnsWithMenu,
-    enableSortingRemoval: false,
-    getRowCanExpand,
-    getExpandedRowModel: getExpandedRowModel<T>(),
-    ...rest,
+    rows,
+    overrides,
+    columns,
   });
-  const { rows } = table.getRowModel();
-  const headerGroups = table.getHeaderGroups();
-  const footerGroups = table.getFooterGroups();
-  const goToNextPage = nextPage || table.nextPage;
-  const goToPreviousPage = previousPage || table.previousPage;
-  const canGoToNextPage =
-    canNextPage === undefined ? table.getCanNextPage() : canNextPage;
-  const canGoToPreviousPage =
-    canPreviousPage === undefined
-      ? table.getCanPreviousPage()
-      : canPreviousPage;
-  const pageCount = table.getPageCount();
-  const hasPagination = pageCount > 1 || canGoToNextPage || canGoToPreviousPage;
-  const showPagination =
-    alwaysShowPagination || (hasPagination && showPageNumber);
-  const totalColumnsCount = table.getVisibleFlatColumns().length;
-  const hasExpandableRows = !!renderSubComponent;
 
-  useEffect(() => {
-    if (!isMobile && hasExpandableRows) {
-      rows.forEach((row) => {
-        if (row.getIsExpanded()) {
-          row.toggleExpanded(false);
-        }
-      });
-    }
-  }, [isMobile, hasExpandableRows, rows]);
+  const {
+    disabled,
+    showPagination,
+    actualPage,
+    pageNumber,
+    goToNextPage,
+    goToPreviousPage,
+    canGoToNextPage,
+    canGoToPreviousPage,
+  } = getPaginationConfig(table, pagination);
 
   return (
-    <div
-      className={clsx(className, {
-        'border-separate border-spacing-0 rounded-lg border border-gray-200':
-          showTableBorder,
-      })}
-    >
-      <table
-        className={clsx('w-full table-fixed', tableClassName)}
-        cellPadding="0"
-        cellSpacing="0"
-      >
-        <TableLayout
-          verticalLayout={verticalLayout}
-          rows={rows}
-          headerGroups={headerGroups}
-          getRowClassName={getRowClassName}
-          getMenuProps={getMenuProps}
-          renderSubComponent={renderSubComponent}
-          showTableHead={showTableHead}
-          emptyContent={emptyContent}
-          totalColumnsCount={totalColumnsCount}
-          withBorder={withBorder}
-          withNarrowBorder={withNarrowBorder}
-          virtualizedProps={virtualizedProps}
-          sizeUnit={sizeUnit}
-          meatBallMenuSize={meatBallMenuSize}
-          meatBallMenuStaticSize={meatBallMenuStaticSize}
-          renderCellWrapper={renderCellWrapper}
-          data={data}
-          isDisabled={isDisabled}
-          tableBodyRowKeyProp={tableBodyRowKeyProp}
-        />
-        <TableFooter
-          colSpan={footerColSpan}
-          verticalLayout={verticalLayout}
-          groups={footerGroups}
-        />
-      </table>
-      {showPagination && (
+    <BaseTable {...rest} table={table}>
+      {showPagination ? (
         <TablePagination
-          onNextClick={hasPagination ? goToNextPage : () => {}}
-          onPrevClick={hasPagination ? goToPreviousPage : () => {}}
-          canGoToNextPage={
-            hasPagination ? canGoToNextPage : alwaysShowPagination
-          }
-          canGoToPreviousPage={hasPagination ? canGoToPreviousPage : false}
+          onNextClick={goToNextPage}
+          onPrevClick={goToPreviousPage}
+          canGoToNextPage={canGoToNextPage}
+          canGoToPreviousPage={canGoToPreviousPage}
           pageNumberLabel={formatText(
             {
-              id: showTotalPagesNumber
-                ? 'table.pageNumberWithTotal'
-                : 'table.pageNumber',
+              id: `table.${pageTotalVisible ? 'pageNumberWithTotal' : 'pageNumber'}`,
             },
             {
-              actualPage: hasPagination
-                ? table.getState().pagination.pageIndex + 1
-                : 1,
-              pageNumber: hasPagination ? pageCount : 1,
+              actualPage,
+              pageNumber,
             },
           )}
-          disabled={!hasPagination || paginationDisabled}
+          disabled={disabled}
         >
-          {additionalPaginationButtonsContent}
+          {children}
         </TablePagination>
-      )}
-    </div>
+      ) : null}
+    </BaseTable>
   );
 };
-
-Table.displayName = displayName;
-
-export default Table;
diff --git a/src/components/v5/common/Table/hooks.ts b/src/components/v5/common/Table/hooks.ts
new file mode 100644
index 00000000000..dd0a7a026ea
--- /dev/null
+++ b/src/components/v5/common/Table/hooks.ts
@@ -0,0 +1,36 @@
+import {
+  useReactTable,
+  getExpandedRowModel,
+  getCoreRowModel as libGetCoreRowModel,
+  type Row,
+} from '@tanstack/react-table';
+import { useEffect } from 'react';
+
+export const useTable = <T>({ data, columns, rows, overrides }) => {
+  const table = useReactTable<T>({
+    getCoreRowModel: libGetCoreRowModel<T>(),
+    data,
+    columns,
+    enableSortingRemoval: false,
+    getRowCanExpand: rows?.canExpand,
+    getExpandedRowModel: getExpandedRowModel<T>(),
+    ...overrides,
+  });
+
+  return table;
+};
+
+export const useCollapseRows = <T>(
+  rows: Row<T>[],
+  isSomeRowsExpanded: boolean,
+) => {
+  useEffect(() => {
+    if (isSomeRowsExpanded) {
+      rows.forEach((row) => {
+        if (row.getIsExpanded() && !row.getCanExpand()) {
+          row.toggleExpanded(false);
+        }
+      });
+    }
+  }, [isSomeRowsExpanded, rows]);
+};
diff --git a/src/components/v5/common/Table/index.ts b/src/components/v5/common/Table/index.ts
index c2b29e4b1fb..6157ef92912 100644
--- a/src/components/v5/common/Table/index.ts
+++ b/src/components/v5/common/Table/index.ts
@@ -1 +1 @@
-export { default } from './Table.tsx';
+export { Table } from './Table.tsx';
diff --git a/src/components/v5/common/Table/partials/BaseTable.tsx b/src/components/v5/common/Table/partials/BaseTable.tsx
new file mode 100644
index 00000000000..bdcbddb2434
--- /dev/null
+++ b/src/components/v5/common/Table/partials/BaseTable.tsx
@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { TableFooter } from '~v5/common/Table/partials/TableFooter.tsx';
+import { getDefaultRenderCellWrapper } from '~v5/common/Table/utils.tsx';
+
+import {
+  type HorizontalTableLayoutProps,
+  type VerticalTableLayoutProps,
+  type BaseTableProps,
+} from '../types.ts';
+
+import { HorizontalTableLayout } from './TableLayout/HorizontalTableLayout.tsx';
+import { VerticalTableLayout } from './TableLayout/VerticalTableLayout.tsx';
+
+export const BaseTable = <T,>({
+  className,
+  tableClassName,
+  borders = {
+    visible: true,
+    type: 'wide',
+  },
+  layout = 'horizontal',
+  footerColSpan,
+  table,
+  renderCellWrapper = getDefaultRenderCellWrapper<T>(),
+  isDisabled = false,
+  showTableHead = true,
+  children,
+  ...rest
+}: BaseTableProps<T>) => {
+  return (
+    <div
+      className={clsx(className, {
+        'border-separate border-spacing-0 rounded-lg border border-gray-200':
+          borders.visible,
+      })}
+    >
+      <table
+        className={clsx('w-full table-fixed', tableClassName)}
+        cellPadding="0"
+        cellSpacing="0"
+      >
+        {layout === 'vertical' ? (
+          <VerticalTableLayout
+            {...({
+              ...rest,
+              table,
+              borders,
+              isDisabled,
+              showTableHead,
+            } as VerticalTableLayoutProps<T>)}
+          />
+        ) : (
+          <HorizontalTableLayout
+            {...({
+              ...rest,
+              table,
+              borders,
+              renderCellWrapper,
+              isDisabled,
+              showTableHead,
+            } as HorizontalTableLayoutProps<T>)}
+          />
+        )}
+        <TableFooter
+          colSpan={footerColSpan}
+          hasBorder={layout === 'horizontal'}
+          groups={table.getFooterGroups()}
+        />
+      </table>
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/v5/common/Table/partials/EmptyContentWrapper.tsx b/src/components/v5/common/Table/partials/EmptyContentWrapper.tsx
new file mode 100644
index 00000000000..c2539b01174
--- /dev/null
+++ b/src/components/v5/common/Table/partials/EmptyContentWrapper.tsx
@@ -0,0 +1,20 @@
+import React, { type FC, type PropsWithChildren } from 'react';
+
+interface EmptyContentWrapperProps extends PropsWithChildren {
+  colSpan: number;
+}
+
+export const EmptyContentWrapper: FC<EmptyContentWrapperProps> = ({
+  colSpan,
+  children,
+}) => {
+  return (
+    <tr className="[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100">
+      <td colSpan={colSpan} className="h-full">
+        <div className="flex flex-col items-start justify-center px-[1.1rem] py-4 text-md text-gray-500">
+          {children}
+        </div>
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/v5/common/Table/partials/ExpandableRowWrapper.tsx b/src/components/v5/common/Table/partials/ExpandableRowWrapper.tsx
new file mode 100644
index 00000000000..fd165bef68c
--- /dev/null
+++ b/src/components/v5/common/Table/partials/ExpandableRowWrapper.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import React, { type PropsWithChildren, type FC } from 'react';
+
+interface ExpandableRowWrapperProps extends PropsWithChildren {
+  row: any;
+  showExpandableContent?: boolean;
+  hasNarrowBorders?: boolean;
+}
+
+export const ExpandableRowWrapper: FC<ExpandableRowWrapperProps> = ({
+  row,
+  showExpandableContent,
+  hasNarrowBorders,
+  children,
+}) => {
+  return showExpandableContent ? (
+    <tr
+      className={clsx({
+        '[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100':
+          !hasNarrowBorders,
+      })}
+    >
+      <td colSpan={row.getVisibleCells().length}>{children}</td>
+    </tr>
+  ) : null;
+};
diff --git a/src/components/v5/common/Table/partials/TableFooter.tsx b/src/components/v5/common/Table/partials/TableFooter.tsx
index e5784c008a4..14313851036 100644
--- a/src/components/v5/common/Table/partials/TableFooter.tsx
+++ b/src/components/v5/common/Table/partials/TableFooter.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 
 interface TableFooterProps<T> {
   colSpan?: number;
-  verticalLayout?: boolean;
+  hasBorder?: boolean;
   groups: HeaderGroup<T>[];
 }
 
 export const TableFooter = <T,>({
   colSpan,
-  verticalLayout,
+  hasBorder,
   groups,
 }: TableFooterProps<T>) => {
   const hasFooter = groups.map((footerGroup) =>
@@ -35,7 +35,7 @@ export const TableFooter = <T,>({
                 colSpan={isLastColumn ? colSpan : 1}
                 key={column.id}
                 className={clsx('h-full px-[1.1rem] text-md text-gray-500', {
-                  'border-t border-gray-200': !verticalLayout,
+                  'border-t border-gray-200': hasBorder,
                 })}
               >
                 {flexRender(
diff --git a/src/components/v5/common/Table/partials/TableLayout/HorizontalLayout.tsx b/src/components/v5/common/Table/partials/TableLayout/HorizontalLayout.tsx
deleted file mode 100644
index d6eb2285c75..00000000000
--- a/src/components/v5/common/Table/partials/TableLayout/HorizontalLayout.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import { TableRowDivider } from '../TableRowDivider.tsx';
-import { TableRow } from '../VirtualizedRow/VirtualizedRow.tsx';
-
-import { HorizontalTableCell } from './HorizontalTableCell.tsx';
-import { HorizontalTableHeader } from './HorizontalTableHeader.tsx';
-import { type HorizontalLayoutProps } from './types.ts';
-
-export const HorizontalLayout = <T,>({
-  rows,
-  headerGroups,
-  showTableHead,
-  emptyContent,
-  totalColumnsCount,
-  getRowClassName,
-  withBorder,
-  sizeUnit,
-  virtualizedProps,
-  renderSubComponent,
-  getMenuProps,
-  tableBodyRowKeyProp,
-  withNarrowBorder,
-  renderCellWrapper,
-  isDisabled,
-  data,
-}: HorizontalLayoutProps<T>) => {
-  const shouldShowEmptyContent = !!emptyContent && data.length === 0;
-
-  const getTableCellStyle = (index: number) =>
-    !showTableHead
-      ? {
-          width:
-            headerGroups[0].headers[index].column.columnDef.staticSize ||
-            (headerGroups[0].headers[index].getSize() !== 150
-              ? `${headerGroups[0].headers[index].column.getSize()}${sizeUnit}`
-              : undefined),
-        }
-      : undefined;
-
-  return (
-    <>
-      {showTableHead && (
-        <HorizontalTableHeader
-          groups={headerGroups}
-          disabled={shouldShowEmptyContent}
-          sizeUnit={sizeUnit}
-        />
-      )}
-      <tbody className="w-full">
-        {shouldShowEmptyContent ? (
-          <tr className="[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100">
-            <td colSpan={totalColumnsCount} className="h-full">
-              <div className="flex flex-col items-start justify-center px-[1.1rem] py-4 text-md text-gray-500">
-                {emptyContent}
-              </div>
-            </td>
-          </tr>
-        ) : (
-          rows.map((row) => {
-            const showExpandableContent =
-              row.getIsExpanded() && renderSubComponent;
-
-            const rowKey = tableBodyRowKeyProp
-              ? data[row.index]?.[tableBodyRowKeyProp]
-              : null;
-
-            const key =
-              typeof rowKey === 'string' || typeof rowKey === 'number'
-                ? rowKey
-                : row.id;
-
-            return (
-              <React.Fragment key={key}>
-                <TableRow
-                  itemHeight={virtualizedProps?.virtualizedRowHeight || 0}
-                  isEnabled={!!virtualizedProps}
-                  className={clsx(getRowClassName(row), {
-                    'translate-z-0 relative [&>tr:first-child>td]:pr-9 [&>tr:last-child>td]:p-0 [&>tr:last-child>th]:p-0':
-                      getMenuProps,
-                    '[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100':
-                      (!showExpandableContent &&
-                        row.getCanExpand() &&
-                        !withNarrowBorder) ||
-                      withBorder,
-                    'expanded-below': showExpandableContent,
-                  })}
-                >
-                  {row.getVisibleCells().map((cell, index) => (
-                    <HorizontalTableCell
-                      key={`${key}-${cell?.id || index}`}
-                      style={getTableCellStyle(index)}
-                      row={row}
-                      cell={cell}
-                      renderCellWrapper={renderCellWrapper}
-                      isDisabled={isDisabled}
-                    />
-                  ))}
-                </TableRow>
-                {showExpandableContent && (
-                  <tr
-                    className={clsx({
-                      '[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100':
-                        !withNarrowBorder,
-                    })}
-                  >
-                    <td colSpan={row.getVisibleCells().length}>
-                      {renderSubComponent({ row })}
-                    </td>
-                  </tr>
-                )}
-                {
-                  /** Unfortunately Safari is not yet that friendly to allow the usage of absolutely positioned (pseudo)-element inside tables
-                   * So, for the moment, this is our best shot for showing borders with paddings from the tr margins
-                   */
-                  withNarrowBorder && <TableRowDivider />
-                }
-              </React.Fragment>
-            );
-          })
-        )}
-      </tbody>
-    </>
-  );
-};
diff --git a/src/components/v5/common/Table/partials/TableLayout/HorizontalTableCell.tsx b/src/components/v5/common/Table/partials/TableLayout/HorizontalTableCell.tsx
index 1340668c157..d538367e40a 100644
--- a/src/components/v5/common/Table/partials/TableLayout/HorizontalTableCell.tsx
+++ b/src/components/v5/common/Table/partials/TableLayout/HorizontalTableCell.tsx
@@ -2,16 +2,15 @@ import { flexRender, type Row, type Cell } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React, { type CSSProperties } from 'react';
 
+import { type HorizontalTableLayoutProps } from '~v5/common/Table/types.ts';
 import { getDefaultRenderCellWrapper } from '~v5/common/Table/utils.tsx';
 
-import { type HorizontalLayoutProps } from './types.ts';
-
 type HorizontalTableCellProps<T> = {
   isDisabled?: boolean;
   style?: CSSProperties;
   row: Row<T>;
   cell: Cell<T, unknown>;
-} & Pick<HorizontalLayoutProps<T>, 'renderCellWrapper'>;
+} & Pick<HorizontalTableLayoutProps<T>, 'renderCellWrapper'>;
 
 export const HorizontalTableCell = <T,>({
   isDisabled,
diff --git a/src/components/v5/common/Table/partials/TableLayout/HorizontalTableHeader.tsx b/src/components/v5/common/Table/partials/TableLayout/HorizontalTableHeader.tsx
index 735f4bab0b5..9dac0c88345 100644
--- a/src/components/v5/common/Table/partials/TableLayout/HorizontalTableHeader.tsx
+++ b/src/components/v5/common/Table/partials/TableLayout/HorizontalTableHeader.tsx
@@ -3,12 +3,7 @@ import { flexRender, type HeaderGroup } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React from 'react';
 
-import { type HorizontalLayoutProps } from './types.ts';
-
-type HorizontalTableHeaderProps<T> = Pick<
-  HorizontalLayoutProps<T>,
-  'sizeUnit'
-> & {
+type HorizontalTableHeaderProps<T> = {
   groups: HeaderGroup<T>[];
   disabled?: boolean;
 };
@@ -16,7 +11,6 @@ type HorizontalTableHeaderProps<T> = Pick<
 export const HorizontalTableHeader = <T,>({
   groups,
   disabled,
-  sizeUnit,
 }: HorizontalTableHeaderProps<T>) => {
   return (
     <thead>
@@ -38,8 +32,8 @@ export const HorizontalTableHeader = <T,>({
               style={{
                 width:
                   header.column.columnDef.staticSize ||
-                  (header.getSize() !== 150
-                    ? `${header.column.getSize()}${sizeUnit}`
+                  (header.column.getSize() !== 150
+                    ? `${header.column.getSize()}px`
                     : undefined),
               }}
             >
diff --git a/src/components/v5/common/Table/partials/TableLayout/HorizontalTableLayout.tsx b/src/components/v5/common/Table/partials/TableLayout/HorizontalTableLayout.tsx
new file mode 100644
index 00000000000..4c168b39227
--- /dev/null
+++ b/src/components/v5/common/Table/partials/TableLayout/HorizontalTableLayout.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { useCollapseRows } from '~v5/common/Table/hooks.ts';
+import { ExpandableRowWrapper } from '~v5/common/Table/partials/ExpandableRowWrapper.tsx';
+import { HorizontalTableCell } from '~v5/common/Table/partials/TableLayout/HorizontalTableCell.tsx';
+import { HorizontalTableHeader } from '~v5/common/Table/partials/TableLayout/HorizontalTableHeader.tsx';
+import { TableRowDivider } from '~v5/common/Table/partials/TableRowDivider.tsx';
+import { TableRow } from '~v5/common/Table/partials/VirtualizedRow/VirtualizedRow.tsx';
+import { type HorizontalTableLayoutProps } from '~v5/common/Table/types.ts';
+import {
+  getHorizontalRowClasses,
+  getHorizontalRowKey,
+  renderEmptyContent,
+} from '~v5/common/Table/utils.tsx';
+
+export const HorizontalTableLayout = <T,>({
+  showTableHead,
+  emptyContent,
+  moreActions,
+  rows: rowsConfig,
+  borders,
+  renderCellWrapper,
+  isDisabled,
+  data,
+  table,
+}: HorizontalTableLayoutProps<T>) => {
+  const { rows } = table.getRowModel();
+  const headerGroups = table.getHeaderGroups();
+  const totalColumnsCount = table.getVisibleFlatColumns().length;
+  const shouldShowEmptyContent = !!emptyContent && data.length === 0;
+  const hasNarrowBorders = borders?.type === 'narrow';
+  const hasWideBorders = borders?.type === 'wide';
+  const hasMoreActions = !!moreActions;
+  useCollapseRows(rows, table.getIsSomeRowsExpanded());
+
+  const getTableCellStyle = (index: number) =>
+    !showTableHead
+      ? {
+          width:
+            headerGroups[0].headers[index].column.columnDef.staticSize ||
+            (headerGroups[0].headers[index].column.getSize() !== 150
+              ? `${headerGroups[0].headers[index].column.getSize()}px`
+              : undefined),
+        }
+      : undefined;
+
+  return (
+    <>
+      {showTableHead && (
+        <HorizontalTableHeader
+          groups={headerGroups}
+          disabled={shouldShowEmptyContent}
+        />
+      )}
+      <tbody className="w-full">
+        {renderEmptyContent({
+          shouldShowEmptyContent,
+          emptyContent,
+          colSpan: totalColumnsCount,
+        }) ||
+          rows.map((row) => {
+            const renderSubComponent = rowsConfig?.renderSubComponent;
+            const showExpandableContent =
+              row.getIsExpanded() && !!renderSubComponent;
+
+            const key = getHorizontalRowKey({
+              row,
+              rowKeyProp: rowsConfig?.key,
+              data,
+            });
+
+            return (
+              <React.Fragment key={key}>
+                <TableRow
+                  itemHeight={rowsConfig?.virtualizedRowHeight ?? 0}
+                  isEnabled={rowsConfig?.virtualizedRowHeight !== undefined}
+                  className={getHorizontalRowClasses({
+                    className: rowsConfig?.getRowClassName?.(row),
+                    isExpandable: row.getCanExpand(),
+                    showExpandableContent,
+                    hasWideBorders,
+                    hasNarrowBorders,
+                    hasMoreActions,
+                  })}
+                >
+                  {row.getVisibleCells().map((cell, index) => (
+                    <HorizontalTableCell
+                      key={`${key}-${cell?.id || index}`}
+                      style={getTableCellStyle(index)}
+                      row={row}
+                      cell={cell}
+                      renderCellWrapper={renderCellWrapper}
+                      isDisabled={isDisabled}
+                    />
+                  ))}
+                </TableRow>
+                <ExpandableRowWrapper
+                  row={row}
+                  showExpandableContent={showExpandableContent}
+                  hasNarrowBorders={hasNarrowBorders}
+                >
+                  {renderSubComponent?.({ row })}
+                </ExpandableRowWrapper>
+                {
+                  /**
+                   * Unfortunately Safari is not yet that friendly to allow the usage of absolutely positioned (pseudo)-element inside tables
+                   * So, for the moment, this is our best shot for showing borders with paddings from the tr margins
+                   */
+                  hasNarrowBorders && <TableRowDivider />
+                }
+              </React.Fragment>
+            );
+          })}
+      </tbody>
+    </>
+  );
+};
diff --git a/src/components/v5/common/Table/partials/TableLayout/TableLayout.tsx b/src/components/v5/common/Table/partials/TableLayout/TableLayout.tsx
deleted file mode 100644
index ce4d5931252..00000000000
--- a/src/components/v5/common/Table/partials/TableLayout/TableLayout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { HorizontalLayout } from './HorizontalLayout.tsx';
-import {
-  type HorizontalLayoutProps,
-  type TableLayoutProps,
-  type VerticalLayoutProps,
-} from './types.ts';
-import { VerticalLayout } from './VerticalLayout.tsx';
-
-export const TableLayout = <T,>({
-  verticalLayout,
-  ...props
-}: TableLayoutProps<T>) => {
-  return verticalLayout ? (
-    <VerticalLayout {...(props as VerticalLayoutProps<T>)} />
-  ) : (
-    <HorizontalLayout {...(props as HorizontalLayoutProps<T>)} />
-  );
-};
diff --git a/src/components/v5/common/Table/partials/TableLayout/VerticalLayout.tsx b/src/components/v5/common/Table/partials/TableLayout/VerticalTableLayout.tsx
similarity index 53%
rename from src/components/v5/common/Table/partials/TableLayout/VerticalLayout.tsx
rename to src/components/v5/common/Table/partials/TableLayout/VerticalTableLayout.tsx
index 0cc902b9b69..72e13eb158a 100644
--- a/src/components/v5/common/Table/partials/TableLayout/VerticalLayout.tsx
+++ b/src/components/v5/common/Table/partials/TableLayout/VerticalTableLayout.tsx
@@ -2,23 +2,17 @@ import { flexRender } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React from 'react';
 
-import MeatBallMenu from '~v5/shared/MeatBallMenu/MeatBallMenu.tsx';
+import { TableRow } from '~v5/common/Table/partials/VirtualizedRow/VirtualizedRow.tsx';
+import { type VerticalTableLayoutProps } from '~v5/common/Table/types.ts';
 
-import { TableRow } from '../VirtualizedRow/VirtualizedRow.tsx';
-
-import { type VerticalLayoutProps } from './types.ts';
-
-export const VerticalLayout = <T,>({
-  rows,
-  headerGroups,
-  getRowClassName,
-  getMenuProps,
-  virtualizedProps,
-  sizeUnit,
-  meatBallMenuSize,
-  meatBallMenuStaticSize,
-  withBorder,
-}: VerticalLayoutProps<T>) => {
+export const VerticalTableLayout = <T,>({
+  rows: rowsConfig,
+  borders,
+  moreActions,
+  table,
+}: VerticalTableLayoutProps<T>) => {
+  const { rows } = table.getRowModel();
+  const headerGroups = table.getHeaderGroups();
   return (
     <>
       {rows.map((row) => {
@@ -28,31 +22,28 @@ export const VerticalLayout = <T,>({
           <tbody
             key={row.id}
             className={clsx(
-              getRowClassName(row),
-              '[&:not(:last-child)>tr:last-child>td]:border-b [&:not(:last-child)>tr:last-child>th]:border-b [&_tr:first-child_td]:pt-2 [&_tr:first-child_th]:h-[2.875rem] [&_tr:first-child_th]:pt-2 [&_tr:last-child_td]:pb-2 [&_tr:last-child_th]:h-[2.875rem] [&_tr:last-child_th]:pb-2',
+              rowsConfig?.getRowClassName?.(row),
+              '[&:not(:last-child)>tr:last-child>td]:border-b [&:not(:last-child)>tr:last-child>th]:border-b [&:nth-child(1)>tr:first-child>th]:rounded-tl-lg [&_tr:first-child_td]:pt-2 [&_tr:first-child_th]:h-[2.875rem] [&_tr:first-child_th]:pt-2 [&_tr:last-child_td]:pb-2 [&_tr:last-child_th]:h-[2.875rem] [&_tr:last-child_th]:pb-2',
             )}
           >
             {headerGroups.map((headerGroup) =>
               headerGroup.headers.map((header, index) => {
-                const rowWithMeatBallMenu = index === 0 && !!getMenuProps;
-                const meatBallMenuProps = getMenuProps?.(row);
-                const hasMeatballMenu =
-                  !!meatBallMenuProps && rowWithMeatBallMenu;
-                const width = meatBallMenuSize || meatBallMenuStaticSize;
-                const colSpan = hasMeatballMenu ? undefined : 2;
+                const hasMoreActions = index === 0 && !!moreActions;
+                const colSpan = hasMoreActions ? undefined : 2;
 
                 return (
                   <TableRow
                     key={row.id + headerGroup.id + header.id}
-                    itemHeight={virtualizedProps?.virtualizedRowHeight || 0}
-                    isEnabled={!!virtualizedProps}
+                    itemHeight={rowsConfig?.virtualizedRowHeight ?? 0}
+                    isEnabled={rowsConfig?.virtualizedRowHeight !== undefined}
                     className={clsx({
                       '[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100':
-                        withBorder,
+                        borders?.type === 'wide',
                     })}
                   >
                     <th
                       className={`
+                        first-child:border-lg
                         h-[2.625rem]
                         border-r
                         border-r-gray-200
@@ -62,14 +53,12 @@ export const VerticalLayout = <T,>({
                         text-left
                         text-sm
                         font-normal
-                        first:rounded-tl-lg
-                        last:rounded-tr-lg
                       `}
                       style={{
                         width:
                           header.column.columnDef.staticSize ||
-                          (header.getSize() !== 150
-                            ? `${header.column.getSize()}${sizeUnit}`
+                          (header.column.getSize() !== 150
+                            ? `${header.column.getSize()}px`
                             : undefined),
                       }}
                     >
@@ -92,21 +81,11 @@ export const VerticalLayout = <T,>({
                         cells[index].getContext(),
                       )}
                     </td>
-                    {hasMeatballMenu && (
+                    {hasMoreActions && (
                       <td
-                        className="px-4"
-                        style={{
-                          ...(width && { width: `${width}${sizeUnit}` }),
-                        }}
+                        className={clsx('px-4', moreActions?.wrapperClassName)}
                       >
-                        <MeatBallMenu
-                          {...meatBallMenuProps}
-                          buttonClassName="ml-auto"
-                          contentWrapperClassName={clsx(
-                            meatBallMenuProps?.contentWrapperClassName,
-                            '!left-6 right-6 !z-[65] sm:!left-auto',
-                          )}
-                        />
+                        {moreActions.renderMoreActions?.(row)}
                       </td>
                     )}
                   </TableRow>
diff --git a/src/components/v5/common/Table/partials/TableLayout/types.ts b/src/components/v5/common/Table/partials/TableLayout/types.ts
deleted file mode 100644
index 7b08aabd998..00000000000
--- a/src/components/v5/common/Table/partials/TableLayout/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { type HeaderGroup, type Row } from '@tanstack/react-table';
-import { type PropsWithChildren } from 'react';
-
-import { type TableProps } from '~v5/common/Table/types.ts';
-
-export type BaseTableLayoutProps<T> = Pick<
-  TableProps<T>,
-  | 'verticalLayout'
-  | 'getMenuProps'
-  | 'virtualizedProps'
-  | 'sizeUnit'
-  | 'withBorder'
-> &
-  Required<Pick<TableProps<T>, 'getRowClassName'>> & {
-    rows: Row<T>[];
-    headerGroups: HeaderGroup<T>[];
-  } & PropsWithChildren;
-
-export type HorizontalLayoutProps<T> = BaseTableLayoutProps<T> &
-  Pick<
-    TableProps<T>,
-    | 'showTableHead'
-    | 'emptyContent'
-    | 'renderSubComponent'
-    | 'tableBodyRowKeyProp'
-    | 'withNarrowBorder'
-    | 'isDisabled'
-    | 'data'
-  > &
-  Required<Pick<TableProps<T>, 'renderCellWrapper'>> & {
-    totalColumnsCount: number;
-  };
-
-export type VerticalLayoutProps<T> = BaseTableLayoutProps<T> &
-  Pick<TableProps<T>, 'meatBallMenuSize' | 'meatBallMenuStaticSize'>;
-
-export type TableLayoutProps<T> =
-  | HorizontalLayoutProps<T>
-  | VerticalLayoutProps<T>;
diff --git a/src/components/v5/common/Table/partials/VirtualizedRow/VirtualizedRow.tsx b/src/components/v5/common/Table/partials/VirtualizedRow/VirtualizedRow.tsx
index c7110a680b5..4f56b70b0da 100644
--- a/src/components/v5/common/Table/partials/VirtualizedRow/VirtualizedRow.tsx
+++ b/src/components/v5/common/Table/partials/VirtualizedRow/VirtualizedRow.tsx
@@ -3,6 +3,7 @@ import { useVisible } from 'react-hooks-visible';
 
 import { type TableRowProps, type VirtualizedRowProps } from './types.ts';
 
+/** @TODO refactor this to use @tanstack/react-virtual */
 const VirtualizedRow: FC<VirtualizedRowProps> = ({
   children,
   className,
diff --git a/src/components/v5/common/Table/types.ts b/src/components/v5/common/Table/types.ts
index cc76561762e..b345d30283f 100644
--- a/src/components/v5/common/Table/types.ts
+++ b/src/components/v5/common/Table/types.ts
@@ -1,8 +1,16 @@
-import { type TableOptions, type Row, type Cell } from '@tanstack/react-table';
+import {
+  type TableOptions,
+  type Row,
+  type Cell,
+  type Table,
+  type ColumnDef,
+  type RowModel,
+  type OnChangeFn,
+  type RowSelectionState,
+} from '@tanstack/react-table';
+import { type PropsWithChildren } from 'react';
 
-import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
-
-import type React from 'react';
+export type NullableColumnDef<T> = ColumnDef<T, string> | null;
 
 export type RenderCellWrapper<T> = (
   className: string,
@@ -14,38 +22,113 @@ export type RenderCellWrapper<T> = (
   },
 ) => React.ReactNode;
 
-export interface TableProps<T>
-  extends Omit<TableOptions<T>, 'getCoreRowModel'> {
+export interface MoreActionsOptions<T> {
+  renderMoreActions?: (row: Row<T>) => React.ReactElement | null;
+  wrapperClassName?: string;
+}
+
+export interface TableRowOptions<T> {
+  getRowClassName?: (row: Row<T>) => string | undefined; // Class name generator for rows
+  key?: Extract<keyof T, React.Key>; // Unique key for rows
+  virtualizedRowHeight?: number; // Enable row virtualization
+  renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement; // Sub-component rendering
+  canExpand?: (row: Row<T>) => boolean; // Row expansion logic
+}
+
+type PaginationDirection = 'previous' | 'next';
+
+export interface PaginationOptions {
+  pageSize?: number; // Number of rows per page
+  canNextPage?: boolean; // Enable "next page"
+  canPreviousPage?: boolean; // Enable "previous page"
+  onPageChange?: (direction: PaginationDirection) => void;
+  disabled?: boolean; // Disable pagination
+  visible?: boolean; // Control visibility
+  pageNumberVisible?: boolean; // Show current page number
+  pageTotalVisible?: boolean; // Show total pages
+  children?: React.ReactNode; // Custom buttons
+}
+
+export interface TableOptionsOverrides<T> {
   getCoreRowModel?: TableOptions<T>['getCoreRowModel'];
-  className?: string;
-  getRowClassName?: (row: Row<T>) => string | undefined;
-  verticalLayout?: boolean;
-  sizeUnit?: 'px' | 'rem' | 'em' | '%';
-  canNextPage?: boolean;
-  canPreviousPage?: boolean;
-  previousPage?: VoidFunction;
-  nextPage?: VoidFunction;
-  showPageNumber?: boolean;
-  showTotalPagesNumber?: boolean;
-  paginationDisabled?: boolean;
-  renderCellWrapper?: RenderCellWrapper<T>;
-  additionalPaginationButtonsContent?: React.ReactNode;
-  emptyContent?: React.ReactNode;
-  getMenuProps?: (row: Row<T>) => MeatBallMenuProps | undefined;
-  meatBallMenuSize?: number;
-  meatBallMenuStaticSize?: string;
-  renderSubComponent?: (props: { row: Row<T> }) => React.ReactElement;
-  getRowCanExpand?: (row: Row<T>) => boolean;
-  withBorder?: boolean;
-  withNarrowBorder?: boolean;
-  isDisabled?: boolean;
-  footerColSpan?: number;
-  virtualizedProps?: {
-    virtualizedRowHeight?: number;
+  initialState?: Partial<{
+    sorting: Array<{ id: string; desc: boolean }>;
+    pagination: { pageIndex: number; pageSize: number };
+  }>;
+  state?: {
+    columnVisibility?: Record<string, boolean>;
+    sorting?: Array<{
+      id: string;
+      desc: boolean;
+    }>;
+    pagination?: {
+      pageIndex: number;
+      pageSize: number;
+    };
+    rowSelection?: Record<string, boolean>;
   };
-  tableClassName?: string;
-  tableBodyRowKeyProp?: Extract<keyof T, React.Key>;
-  showTableHead?: boolean;
-  showTableBorder?: boolean;
-  alwaysShowPagination?: boolean;
+  manualPagination?: boolean;
+  pageCount?: number;
+  onSortingChange?: (sorting: Array<{ id: string; desc: boolean }>) => void;
+  getRowId?: (row: T, index: number) => string;
+  isMultiSortEvent?: () => boolean;
+  enableSorting?: boolean;
+  enableSortingRemoval?: boolean;
+  sortDescFirst?: boolean;
+  getSortedRowModel?: (table: Table<T>) => () => RowModel<T>;
+  getPaginationRowModel?: (table: Table<T>) => () => RowModel<T>;
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+  getFilteredRowModel?: (table: Table<T>) => () => RowModel<T>;
 }
+
+export interface BaseTableOptions<T>
+  extends Pick<TableOptions<T>, 'data' | 'columns'> {
+  className?: string; // General class name
+  tableClassName?: string; // Table-specific class name
+  emptyContent?: React.ReactNode; // Custom empty state
+  isDisabled?: boolean; // Disable interactions
+  layout?: 'horizontal' | 'vertical'; // Table layout
+  borders?: {
+    type?: 'narrow' | 'wide' | 'unset'; // Border width
+    visible?: boolean; // Show/hide borders
+  };
+  showTableHead?: boolean; // Show/hide table header
+  footerColSpan?: number; // Span of footer columns
+  renderCellWrapper?: RenderCellWrapper<T>; // Wrapper for cell rendering
+}
+
+export interface BaseTableProps<T> extends BaseTableOptions<T> {
+  table: Table<T>; // React Table instance
+  rows?: TableRowOptions<T>; // Row-specific options
+  moreActions?: MoreActionsOptions<T>;
+  overrides?: TableOptionsOverrides<T>; // Overrides for advanced customization based on the TableOptions provided by @tanstack/react-table
+  children?: React.ReactNode; // Custom children
+}
+
+export interface TableProps<T> extends Omit<BaseTableProps<T>, 'table'> {
+  pagination?: PaginationOptions;
+}
+
+export type BaseTableLayoutProps<T> = Pick<
+  BaseTableProps<T>,
+  'table' | 'layout' | 'moreActions' | 'borders' | 'rows'
+> &
+  PropsWithChildren;
+
+export type HorizontalTableLayoutProps<T> = BaseTableLayoutProps<T> &
+  Pick<
+    BaseTableProps<T>,
+    | 'showTableHead'
+    | 'moreActions'
+    | 'emptyContent'
+    | 'borders'
+    | 'isDisabled'
+    | 'data'
+  > &
+  Required<Pick<BaseTableProps<T>, 'renderCellWrapper'>>;
+
+export type VerticalTableLayoutProps<T> = BaseTableLayoutProps<T>;
+
+export type TableLayoutProps<T> =
+  | HorizontalTableLayoutProps<T>
+  | VerticalTableLayoutProps<T>;
diff --git a/src/components/v5/common/Table/utils.tsx b/src/components/v5/common/Table/utils.tsx
index 1f8682c071f..d77d649c6bd 100644
--- a/src/components/v5/common/Table/utils.tsx
+++ b/src/components/v5/common/Table/utils.tsx
@@ -1,35 +1,87 @@
-import { type ColumnHelper } from '@tanstack/react-table';
+import { type Table, type ColumnHelper, type Row } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React from 'react';
 
-import MeatBallMenu from '~v5/shared/MeatBallMenu/index.ts';
+import MeatBallMenu from '~v5/shared/MeatBallMenu/MeatBallMenu.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import { MEATBALL_MENU_COLUMN_ID } from './consts.ts';
-import { type RenderCellWrapper, type TableProps } from './types.ts';
+import { EmptyContentWrapper } from './partials/EmptyContentWrapper.tsx';
+import { type RenderCellWrapper, type PaginationOptions } from './types.ts';
 
 export const getDefaultRenderCellWrapper =
   <T,>(): RenderCellWrapper<T> =>
   (cellClassName, content) => <div className={cellClassName}>{content}</div>;
 
+export const getHorizontalRowClasses = ({
+  className = '',
+  isExpandable,
+  showExpandableContent,
+  hasNarrowBorders,
+  hasWideBorders,
+  hasMoreActions,
+}) =>
+  clsx(className, {
+    'translate-z-0 relative [&>tr:first-child>td]:pr-9 [&>tr:last-child>td]:p-0 [&>tr:last-child>th]:p-0':
+      hasMoreActions,
+    '[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-gray-100':
+      (!showExpandableContent && isExpandable && !hasNarrowBorders) ||
+      hasWideBorders,
+    'expanded-below': showExpandableContent,
+  });
+
+export const getHorizontalRowKey = ({ row, rowKeyProp, data }) => {
+  const rowKey = rowKeyProp ? data[row.index]?.[rowKeyProp] : null;
+  return typeof rowKey === 'string' || typeof rowKey === 'number'
+    ? rowKey
+    : row.id;
+};
+
+export const renderCellContent = (
+  _,
+  content: React.ReactNode,
+): React.ReactNode => content;
+
+export const getMoreActionsMenu = <T,>({
+  getMenuProps,
+  wrapperClassName = 'w-[3.75rem]',
+  visible = true,
+}) => ({
+  wrapperClassName,
+  renderMoreActions: (row: Row<T>) => {
+    const menuProps = getMenuProps(row);
+    return visible && menuProps ? (
+      <MeatBallMenu
+        {...menuProps}
+        buttonClassName="ml-auto"
+        contentWrapperClassName={clsx(
+          menuProps.contentWrapperClassName,
+          '!left-1 !right-6 !z-sidebar sm:!left-auto',
+        )}
+      />
+    ) : null;
+  },
+});
+
 export const makeMenuColumn = <T,>({
   helper,
   getMenuProps,
-  meatBallMenuSize = 60,
-  meatBallMenuStaticSize,
+  cellProps = {
+    size: 60,
+  },
 }: {
   helper: ColumnHelper<T>;
-  getMenuProps: TableProps<T>['getMenuProps'];
-  meatBallMenuSize?: number;
-  meatBallMenuStaticSize: string | undefined;
-}) =>
-  helper.display({
+  getMenuProps: (row: Row<T>) => MeatBallMenuProps | undefined;
+  cellProps?: {
+    size?: number;
+    staticSize?: string;
+  };
+}) => {
+  return helper.display({
     id: MEATBALL_MENU_COLUMN_ID,
-    ...(meatBallMenuStaticSize
-      ? { staticSize: meatBallMenuStaticSize }
-      : {
-          size: meatBallMenuSize,
-          minSize: meatBallMenuSize,
-        }),
+    size: cellProps.size,
+    minSize: cellProps.size,
+    staticSize: cellProps.staticSize,
     cell: ({ row }) => {
       const props = getMenuProps?.(row);
 
@@ -45,3 +97,72 @@ export const makeMenuColumn = <T,>({
       ) : undefined;
     },
   });
+};
+
+export const renderEmptyContent = ({
+  shouldShowEmptyContent,
+  emptyContent,
+  colSpan,
+}) => {
+  if (!shouldShowEmptyContent) return null;
+
+  return (
+    <EmptyContentWrapper colSpan={colSpan}>{emptyContent}</EmptyContentWrapper>
+  );
+};
+
+export const getPaginationConfig = <T,>(
+  table: Table<T>,
+  pagination: PaginationOptions,
+) => {
+  const {
+    onPageChange,
+    canNextPage,
+    canPreviousPage,
+    pageNumberVisible = true,
+    visible,
+    disabled,
+  } = pagination;
+
+  const canGoToNextPage = canNextPage ?? table.getCanNextPage();
+  const canGoToPreviousPage = canPreviousPage ?? table.getCanPreviousPage();
+  const pageCount = table.getPageCount();
+  const hasPagination = pageCount > 1 || canGoToNextPage || canGoToPreviousPage;
+
+  const showPagination = visible ?? (hasPagination && pageNumberVisible);
+
+  const goToNextPage = () => {
+    onPageChange?.('next');
+    table.nextPage();
+  };
+
+  const goToPreviousPage = () => {
+    onPageChange?.('previous');
+    table.previousPage();
+  };
+
+  const paginationConfigCommon = {
+    disabled: !hasPagination || disabled,
+    showPagination,
+    goToNextPage,
+    goToPreviousPage,
+  };
+
+  if (hasPagination) {
+    return {
+      ...paginationConfigCommon,
+      canGoToNextPage,
+      canGoToPreviousPage,
+      actualPage: table.getState().pagination.pageIndex + 1,
+      pageNumber: pageCount,
+    };
+  }
+
+  return {
+    ...paginationConfigCommon,
+    canGoToNextPage: visible,
+    canGoToPreviousPage: false,
+    actualPage: 1,
+    pageNumber: 1,
+  };
+};
diff --git a/src/components/v5/frame/ColonyHome/ColonyHome.tsx b/src/components/v5/frame/ColonyHome/ColonyHome.tsx
index f27d399c9c1..178ddab293d 100644
--- a/src/components/v5/frame/ColonyHome/ColonyHome.tsx
+++ b/src/components/v5/frame/ColonyHome/ColonyHome.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import FiltersContextProvider from '~common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx';
 import RecentActivityTable from '~common/ColonyActionsTable/RecentActivityTable.tsx';
 import { TourTargets } from '~common/Tours/enums.ts';
-import { useMobile } from '~hooks/index.ts';
 import {
   // @BETA: Disabled for now
   // COLONY_TEAMS_ROUTE,
@@ -23,7 +22,6 @@ import TotalInOutBalance from './partials/TotalInOutBalance/TotalInOutBalance.ts
 const displayName = 'v5.frame.ColonyHome';
 
 const ColonyHome = () => {
-  const isMobile = useMobile();
   const [selectedAction, setSelectedAction] = useState<string | undefined>(
     undefined,
   );
@@ -66,21 +64,6 @@ const ColonyHome = () => {
             }}
             className="flex w-full flex-grow flex-col justify-between [&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none [&_tr:last-child_td>*:not(.expandable)]:!py-[13px] [&_tr:not(last-child)_td>*:not(.expandable)]:!pb-[13px] [&_tr:not(last-child)_td>*:not(.expandable)]:!pt-[13px]"
             pageSize={7}
-            state={{
-              columnVisibility: isMobile
-                ? {
-                    description: true,
-                    motionState: true,
-                    team: false,
-                    createdAt: false,
-                  }
-                : {
-                    description: true,
-                    motionState: true,
-                    team: false,
-                    createdAt: true,
-                  },
-            }}
           />
         </FiltersContextProvider>
       </div>
diff --git a/src/hooks/useSocialLinksTableColumns.tsx b/src/hooks/useSocialLinksTableColumns.tsx
index a0aa0683042..1b6190c2fda 100644
--- a/src/hooks/useSocialLinksTableColumns.tsx
+++ b/src/hooks/useSocialLinksTableColumns.tsx
@@ -1,4 +1,8 @@
-import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
+import {
+  createColumnHelper,
+  type Row,
+  type ColumnDef,
+} from '@tanstack/react-table';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 
@@ -6,11 +10,14 @@ import { useMobile } from '~hooks';
 import { type SocialLinksTableModel } from '~types/colony.ts';
 import { formatText } from '~utils/intl.ts';
 import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
-export const useSocialLinksTableColumns = (): ColumnDef<
-  SocialLinksTableModel,
-  string
->[] => {
+export const useSocialLinksTableColumns = (
+  getMenuProps?: (
+    row: Row<SocialLinksTableModel>,
+  ) => MeatBallMenuProps | undefined,
+): ColumnDef<SocialLinksTableModel, string>[] => {
   const columnHelper = useMemo(
     () => createColumnHelper<SocialLinksTableModel>(),
     [],
@@ -20,6 +27,20 @@ export const useSocialLinksTableColumns = (): ColumnDef<
 
   const isMobile = useMobile();
 
+  const menuColumn = useMemo(
+    () =>
+      getMenuProps
+        ? makeMenuColumn({
+            helper: columnHelper,
+            getMenuProps,
+            cellProps: {
+              staticSize: isMobile ? '60px' : '10%',
+            },
+          })
+        : null,
+    [getMenuProps, columnHelper, isMobile],
+  );
+
   const columns: ColumnDef<SocialLinksTableModel, string>[] = useMemo(
     () => [
       columnHelper.accessor('name', {
@@ -29,6 +50,7 @@ export const useSocialLinksTableColumns = (): ColumnDef<
             {formatText({ id: 'table.row.type' })}
           </span>
         ),
+        cellContentWrapperClassName: 'flex justify-between',
         cell: ({ getValue }) => (
           <span
             className={clsx('text-1', {
@@ -39,7 +61,7 @@ export const useSocialLinksTableColumns = (): ColumnDef<
             {getValue()}
           </span>
         ),
-        size: isMobile ? 118 : 23,
+        staticSize: isMobile ? '118px' : '23%',
       }),
       columnHelper.accessor('link', {
         enableSorting: false,
@@ -61,11 +83,11 @@ export const useSocialLinksTableColumns = (): ColumnDef<
             {getValue()}
           </span>
         ),
-        size: 67,
+        staticSize: isMobile ? '67px' : '67%',
       }),
     ],
     [columnHelper, hasNoDecisionMethods, isMobile],
   );
 
-  return columns;
+  return menuColumn ? [...columns, menuColumn] : columns;
 };
diff --git a/src/stories/common/Table.stories.tsx b/src/stories/common/Table.stories.tsx
index 15dabef7f27..cc198539a7d 100644
--- a/src/stories/common/Table.stories.tsx
+++ b/src/stories/common/Table.stories.tsx
@@ -2,13 +2,15 @@ import { Binoculars } from '@phosphor-icons/react';
 import {
   createColumnHelper,
   getPaginationRowModel,
+  type Row,
 } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
-import EmptyContent from '~v5/common/EmptyContent/index.ts';
-import Table from '~v5/common/Table/index.ts';
-import Link from '~v5/shared/Link/index.ts';
+import EmptyContent from '~v5/common/EmptyContent/EmptyContent.tsx';
+import { Table } from '~v5/common/Table/Table.ts';
+import MeatBallMenu from '~v5/shared/MeatBallMenu/MeatBallMenu.tsx';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -19,7 +21,7 @@ interface TestTableFieldModel {
 
 const columnHelper = createColumnHelper<TestTableFieldModel>();
 
-const tableMeta: Meta<typeof Table<TestTableFieldModel>> = {
+const meta: Meta<typeof Table<TestTableFieldModel>> = {
   title: 'Common/Table',
   component: Table,
   parameters: {
@@ -55,34 +57,95 @@ const tableMeta: Meta<typeof Table<TestTableFieldModel>> = {
   },
 };
 
-export default tableMeta;
+export default meta;
+// type Story = StoryObj<typeof BaseTable>;
 
-export const Base: StoryObj<typeof Table<TestTableFieldModel>> = {};
+export const Base: StoryObj<typeof Table<TestTableFieldModel>> = {
+  args: {
+    pagination: {
+      visible: true,
+    },
+  },
+};
+
+export const WithPaginatedContent: StoryObj<typeof Table<TestTableFieldModel>> =
+  {
+    args: {
+      pagination: {
+        visible: true,
+      },
+      overrides: {
+        initialState: {
+          pagination: {
+            pageIndex: 0,
+            pageSize: 1,
+          },
+        },
+        getPaginationRowModel: getPaginationRowModel<TestTableFieldModel>(),
+      },
+    },
+  };
 
 export const VerticalLayout: StoryObj<typeof Table<TestTableFieldModel>> = {
   args: {
-    verticalLayout: true,
+    ...Base.args,
+    layout: 'vertical',
   },
 };
 
+const getMenuProps = () => ({
+  items: [
+    {
+      key: 'edit',
+      label: 'Edit',
+      // eslint-disable-next-line no-alert
+      onClick: () => alert('Edit'),
+    },
+    {
+      key: 'delete',
+      label: 'Delete',
+      // eslint-disable-next-line no-alert
+      onClick: () => alert('Delete'),
+    },
+  ],
+});
+
 export const WithMenu: StoryObj<typeof Table<TestTableFieldModel>> = {
   args: {
-    getMenuProps: () => ({
-      items: [
-        {
-          key: 'edit',
-          label: 'Edit',
-          // eslint-disable-next-line no-alert
-          onClick: () => alert('Edit'),
-        },
-        {
-          key: 'delete',
-          label: 'Delete',
-          // eslint-disable-next-line no-alert
-          onClick: () => alert('Delete'),
+    ...Base.args,
+    columns: [
+      ...(meta.args?.columns ?? []),
+      columnHelper.display({
+        id: 'menu',
+        size: 60,
+        minSize: 60,
+        cell: () => {
+          const props = getMenuProps();
+
+          return props ? (
+            <MeatBallMenu
+              {...props}
+              buttonClassName="ml-auto"
+              contentWrapperClassName="!z-sidebar"
+            />
+          ) : undefined;
         },
-      ],
-    }),
+      }),
+    ],
+    moreActions: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      renderMoreActions: (_: Row<TestTableFieldModel>) => {
+        return (
+          <MeatBallMenu
+            {...getMenuProps()}
+            buttonClassName="ml-auto"
+            contentWrapperClassName={clsx(
+              '!left-1 !right-6 !z-sidebar sm:!left-auto',
+            )}
+          />
+        );
+      },
+    },
   },
 };
 
@@ -90,37 +153,32 @@ export const VerticalLayoutWithMenu: StoryObj<
   typeof Table<TestTableFieldModel>
 > = {
   args: {
+    ...Base.args,
     ...VerticalLayout.args,
     ...WithMenu.args,
   },
 };
 
-export const WithPagination: StoryObj<typeof Table<TestTableFieldModel>> = {
-  args: {
-    initialState: {
-      pagination: {
-        pageSize: 1,
-      },
-    },
-    getPaginationRowModel: getPaginationRowModel<TestTableFieldModel>(),
-  },
-};
-
 export const WithAdditionalContent: StoryObj<
   typeof Table<TestTableFieldModel>
 > = {
   args: {
-    ...WithPagination.args,
-    additionalPaginationButtonsContent: (
-      <Link className="text-sm text-gray-700 underline" to="/">
-        View all
-      </Link>
-    ),
+    pagination: {
+      visible: true,
+      children: (
+        <Link className="text-sm text-gray-700 underline" to="/">
+          View all
+        </Link>
+      ),
+    },
   },
 };
 
 export const WithEmptyContent: StoryObj<typeof Table<TestTableFieldModel>> = {
   args: {
+    pagination: {
+      visible: false,
+    },
     data: [],
     emptyContent: (
       <EmptyContent
@@ -138,6 +196,7 @@ export const WithCustomCellWrapper: StoryObj<
   typeof Table<TestTableFieldModel>
 > = {
   args: {
+    ...Base.args,
     renderCellWrapper: (classNames, content) => (
       <div className={clsx(classNames, 'bg-gray-200 py-3.5')}>{content}</div>
     ),