diff --git a/client/src/app/pages/archetypes/components/archetype-form/archetype-form.tsx b/client/src/app/pages/archetypes/components/archetype-form/archetype-form.tsx
index 2c85a294d..ea6b02694 100644
--- a/client/src/app/pages/archetypes/components/archetype-form/archetype-form.tsx
+++ b/client/src/app/pages/archetypes/components/archetype-form/archetype-form.tsx
@@ -26,7 +26,7 @@ import {
 import { duplicateNameCheck, getAxiosErrorMessage } from "@app/utils/utils";
 import { type TagItemType, useFetchTagsWithTagItems } from "@app/queries/tags";
 
-import { useFetchStakeholderGroups } from "@app/queries/stakeholdergoups";
+import { useFetchStakeholderGroups } from "@app/queries/stakeholdergroups";
 import { useFetchStakeholders } from "@app/queries/stakeholders";
 import { HookFormAutocomplete } from "@app/components/HookFormPFFields";
 import { matchItemsToRefs } from "@app/utils/model-utils";
diff --git a/client/src/app/pages/assessment/components/assessment-stakeholders-form/assessment-stakeholders-form.tsx b/client/src/app/pages/assessment/components/assessment-stakeholders-form/assessment-stakeholders-form.tsx
index 6a3b388ad..6231f92be 100644
--- a/client/src/app/pages/assessment/components/assessment-stakeholders-form/assessment-stakeholders-form.tsx
+++ b/client/src/app/pages/assessment/components/assessment-stakeholders-form/assessment-stakeholders-form.tsx
@@ -11,7 +11,7 @@ import {
 import { useFormContext } from "react-hook-form";
 
 import { useFetchStakeholders } from "@app/queries/stakeholders";
-import { useFetchStakeholderGroups } from "@app/queries/stakeholdergoups";
+import { useFetchStakeholderGroups } from "@app/queries/stakeholdergroups";
 import { HookFormAutocomplete } from "@app/components/HookFormPFFields";
 import { AssessmentWizardValues } from "../assessment-wizard/assessment-wizard";
 
diff --git a/client/src/app/pages/controls/stakeholder-groups/components/stakeholder-group-form.tsx b/client/src/app/pages/controls/stakeholder-groups/components/stakeholder-group-form.tsx
index bba35c11c..a24b086a1 100644
--- a/client/src/app/pages/controls/stakeholder-groups/components/stakeholder-group-form.tsx
+++ b/client/src/app/pages/controls/stakeholder-groups/components/stakeholder-group-form.tsx
@@ -21,7 +21,7 @@ import {
   useCreateStakeholderGroupMutation,
   useFetchStakeholderGroups,
   useUpdateStakeholderGroupMutation,
-} from "@app/queries/stakeholdergoups";
+} from "@app/queries/stakeholdergroups";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import {
diff --git a/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
index 0597cd1c1..f50721898 100644
--- a/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
+++ b/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
-import { useSelectionState } from "@migtools/lib-ui";
-
 import {
   Button,
   ButtonVariant,
@@ -10,51 +8,50 @@ import {
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
   Modal,
   ModalVariant,
+  Title,
+  Toolbar,
+  ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
 import {
-  cellWidth,
-  expandable,
-  ICell,
-  IExtraData,
-  IRow,
-  IRowData,
-  sortable,
-  TableText,
+  ExpandableRowContent,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
 } from "@patternfly/react-table";
 
 import { getAxiosErrorMessage, numStr } from "@app/utils/utils";
 import { StakeholderGroup } from "@app/api/models";
-import { useLegacyPaginationState } from "@app/hooks/useLegacyPaginationState";
-import {
-  FilterCategory,
-  FilterToolbar,
-  FilterType,
-} from "@app/components/FilterToolbar";
-import { useLegacyFilterState } from "@app/hooks/useLegacyFilterState";
-import { useLegacySortState } from "@app/hooks/useLegacySortState";
+import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
 import { controlsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
 import {
   useDeleteStakeholderGroupMutation,
   useFetchStakeholderGroups,
-} from "@app/queries/stakeholdergoups";
+} from "@app/queries/stakeholdergroups";
 import { NotificationsContext } from "@app/components/NotificationsContext";
 import { StakeholderGroupForm } from "./components/stakeholder-group-form";
 import { AppTableActionButtons } from "@app/components/AppTableActionButtons";
 import { ConditionalRender } from "@app/components/ConditionalRender";
-import { AppTableWithControls } from "@app/components/AppTableWithControls";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
-import { NoDataEmptyState } from "@app/components/NoDataEmptyState";
 import { ConfirmDialog } from "@app/components/ConfirmDialog";
-
-const ENTITY_FIELD = "entity";
-
-const getRow = (rowData: IRowData): StakeholderGroup => {
-  return rowData[ENTITY_FIELD];
-};
+import { SimplePagination } from "@app/components/SimplePagination";
+import {
+  TableHeaderContentWithControls,
+  ConditionalTableBody,
+  TableRowContentWithControls,
+} from "@app/components/TableControls";
+import { useLocalTableControls } from "@app/hooks/table-controls";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+import CubesIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
 
 export const StakeholderGroups: React.FC = () => {
   const { t } = useTranslation();
@@ -70,7 +67,7 @@ export const StakeholderGroups: React.FC = () => {
   const stakeholderGroupToUpdate =
     createUpdateModalState !== "create" ? createUpdateModalState : null;
 
-  const onDeleteStakeholderGroupSuccess = (response: any) => {
+  const onDeleteStakeholderGroupSuccess = () => {
     pushNotification({
       title: t("terms.stakeholderGroupDeleted"),
       variant: "success",
@@ -92,237 +89,246 @@ export const StakeholderGroups: React.FC = () => {
   const { stakeholderGroups, isFetching, fetchError, refetch } =
     useFetchStakeholderGroups();
 
-  const {
-    isItemSelected: isItemExpanded,
-    toggleItemSelected: toggleItemExpanded,
-  } = useSelectionState<StakeholderGroup>({
-    items: stakeholderGroups || [],
-    isEqual: (a, b) => a.id === b.id,
-  });
-
-  const columns: ICell[] = [
-    {
-      title: t("terms.name"),
-      transforms: [sortable, cellWidth(30)],
-      cellFormatters: [expandable],
-    },
-    { title: t("terms.description"), transforms: [sortable, cellWidth(35)] },
-    {
-      title: t("terms.memberCount"),
-      transforms: [sortable],
-    },
-    {
-      title: "",
-      props: {
-        className: "pf-v5-u-text-align-right",
-      },
-    },
-  ];
-
-  const filterCategories: FilterCategory<
-    StakeholderGroup,
-    "name" | "description" | "stakeholders"
-  >[] = [
-    {
-      key: "name",
-      title: t("terms.name"),
-      type: FilterType.search,
-      placeholderText:
-        t("actions.filterBy", {
-          what: t("terms.name").toLowerCase(),
-        }) + "...",
-      getItemValue: (item) => {
-        return item?.name || "";
-      },
-    },
-    {
-      key: "description",
-      title: t("terms.description"),
-      type: FilterType.search,
-      placeholderText:
-        t("actions.filterBy", {
-          what: t("terms.description").toLowerCase(),
-        }) + "...",
-      getItemValue: (item) => {
-        return item?.description || "";
-      },
-    },
-    {
-      key: "stakeholders",
-      title: t("terms.stakeholders"),
-      type: FilterType.search,
-      placeholderText:
-        t("actions.filterBy", {
-          what: t("terms.stakeholders").toLowerCase(),
-        }) + "...",
-      getItemValue: (item) => {
-        const stakeholders = item.stakeholders?.map(
-          (stakeholder) => stakeholder.name
-        );
-        return stakeholders?.join(" ; ") || "";
-      },
-    },
-  ];
-  const { filterValues, setFilterValues, filteredItems } = useLegacyFilterState(
-    stakeholderGroups || [],
-    filterCategories
-  );
-  const getSortValues = (item: StakeholderGroup) => [
-    "",
-    item?.name || "",
-    item?.description || "",
-    numStr(item?.stakeholders?.length),
-    "", // Action column
-  ];
-
-  const { sortBy, onSort, sortedItems } = useLegacySortState(
-    filteredItems,
-    getSortValues
-  );
-  const { currentPageItems, setPageNumber, paginationProps } =
-    useLegacyPaginationState(sortedItems, 10);
-
-  const rows: IRow[] = [];
-  currentPageItems?.forEach((item) => {
-    const isExpanded = isItemExpanded(item);
-    rows.push({
-      [ENTITY_FIELD]: item,
-      isOpen: isExpanded,
-      cells: [
-        {
-          title: <TableText wrapModifier="truncate">{item.name}</TableText>,
-        },
-        {
-          title: (
-            <TableText wrapModifier="truncate">{item.description}</TableText>
-          ),
-        },
-        {
-          title: item.stakeholders ? item.stakeholders.length : 0,
-        },
-        {
-          title: (
-            <AppTableActionButtons
-              onEdit={() => setCreateUpdateModalState(item)}
-              onDelete={() => deleteRow(item)}
-            />
-          ),
-        },
-      ],
-    });
-
-    if (isExpanded) {
-      rows.push({
-        parent: rows.length - 1,
-        fullWidth: false,
-        cells: [
-          <div className="pf-v5-c-table__expandable-row-content">
-            <DescriptionList>
-              <DescriptionListGroup>
-                <DescriptionListTerm>
-                  {t("terms.member(s)")}
-                </DescriptionListTerm>
-                <DescriptionListDescription>
-                  {item.stakeholders?.map((f) => f.name).join(", ")}
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-            </DescriptionList>
-          </div>,
-        ],
-      });
-    }
-  });
-
-  // Rows
-
-  const collapseRow = (
-    event: React.MouseEvent,
-    rowIndex: number,
-    isOpen: boolean,
-    rowData: IRowData,
-    extraData: IExtraData
-  ) => {
-    const row = getRow(rowData);
-    toggleItemExpanded(row);
-  };
-
   const deleteRow = (row: StakeholderGroup) => {
     setStakeholderGroupToDelete(row);
   };
 
-  // Advanced filters
-
-  const handleOnClearAllFilters = () => {
-    setFilterValues({});
-  };
-
   const closeCreateUpdateModal = () => {
     setCreateUpdateModalState(null);
     refetch;
   };
 
-  // t("terms.stakeholderGroup")
+  const tableControls = useLocalTableControls({
+    idProperty: "name",
+    items: stakeholderGroups,
+    columnNames: {
+      displayName: "Display name",
+      description: "Description",
+      count: "Member count",
+    },
+    isFilterEnabled: true,
+    isSortEnabled: true,
+    isPaginationEnabled: true,
+    isExpansionEnabled: true,
+    expandableVariant: "single",
+    hasActionsColumn: true,
+    filterCategories: [
+      {
+        key: "name",
+        title: t("terms.name"),
+        type: FilterType.search,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.name").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => {
+          return item?.name || "";
+        },
+      },
+      {
+        key: "description",
+        title: t("terms.description"),
+        type: FilterType.search,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.description").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => {
+          return item?.description || "";
+        },
+      },
+      {
+        key: "stakeholders",
+        title: t("terms.stakeholders"),
+        type: FilterType.search,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.stakeholders").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => {
+          const stakeholders = item.stakeholders?.map(
+            (stakeholder) => stakeholder.name
+          );
+          return stakeholders?.join(" ; ") || "";
+        },
+      },
+    ],
+    sortableColumns: ["displayName", "description", "count"],
+    getSortValues: (item) => ({
+      displayName: item?.name || "",
+      description: item?.description || "",
+      count: numStr(item?.stakeholders?.length),
+    }),
+    initialSort: { columnKey: "displayName", direction: "asc" },
+    isLoading: isFetching,
+  });
+
+  const {
+    currentPageItems,
+    numRenderedColumns,
+    propHelpers: {
+      toolbarProps,
+      filterToolbarProps,
+      paginationToolbarItemProps,
+      paginationProps,
+      tableProps,
+      getThProps,
+      getTrProps,
+      getTdProps,
+      getExpandedContentTdProps,
+    },
+    expansionDerivedState: { isCellExpanded },
+  } = tableControls;
+
   return (
     <>
       <ConditionalRender
         when={isFetching && !(stakeholderGroups || fetchError)}
         then={<AppPlaceholder />}
       >
-        <AppTableWithControls
-          count={stakeholderGroups ? stakeholderGroups.length : 0}
-          paginationProps={paginationProps}
-          paginationIdPrefix="stakeholder-groups"
-          sortBy={sortBy}
-          onSort={onSort}
-          onCollapse={collapseRow}
-          cells={columns}
-          rows={rows}
-          isLoading={isFetching}
-          loadingVariant="skeleton"
-          fetchError={fetchError}
-          toolbarClearAllFilters={handleOnClearAllFilters}
-          toolbarToggle={
-            <FilterToolbar
-              filterCategories={filterCategories}
-              filterValues={filterValues}
-              setFilterValues={setFilterValues}
-            />
-          }
-          toolbarActions={
-            <ToolbarGroup variant="button-group">
-              <ToolbarItem>
-                <RBAC
-                  allowedPermissions={controlsWriteScopes}
-                  rbacType={RBAC_TYPE.Scope}
-                >
-                  <Button
-                    type="button"
-                    id="create-stakeholder-group"
-                    aria-label="Create stakeholder group"
-                    variant={ButtonVariant.primary}
-                    onClick={() => setCreateUpdateModalState("create")}
+        <div
+          style={{
+            backgroundColor: "var(--pf-v5-global--BackgroundColor--100)",
+          }}
+        >
+          <Toolbar {...toolbarProps}>
+            <ToolbarContent>
+              <FilterToolbar {...filterToolbarProps} />
+              <ToolbarGroup variant="button-group">
+                <ToolbarItem>
+                  <RBAC
+                    allowedPermissions={controlsWriteScopes}
+                    rbacType={RBAC_TYPE.Scope}
                   >
-                    {t("actions.createNew")}
-                  </Button>
-                </RBAC>
+                    <Button
+                      type="button"
+                      id="create-stakeholder-group"
+                      aria-label="Create stakeholder group"
+                      variant={ButtonVariant.primary}
+                      onClick={() => setCreateUpdateModalState("create")}
+                    >
+                      {t("actions.createNew")}
+                    </Button>
+                  </RBAC>
+                </ToolbarItem>
+              </ToolbarGroup>
+              <ToolbarItem {...paginationToolbarItemProps}>
+                <SimplePagination
+                  idPrefix="stakeholders-table"
+                  isTop
+                  paginationProps={paginationProps}
+                />
               </ToolbarItem>
-            </ToolbarGroup>
-          }
-          noDataState={
-            <NoDataEmptyState
-              // t('terms.stakeholderGroups')
-              title={t("composed.noDataStateTitle", {
-                what: t("terms.stakeholderGroups").toLowerCase(),
-              })}
-              // t('terms.stakeholderGroup')
-              description={t("composed.noDataStateBody", {
-                what: t("terms.stakeholderGroup").toLowerCase(),
+            </ToolbarContent>
+          </Toolbar>
+          <Table {...tableProps} aria-label="Stakeholders table">
+            <Thead>
+              <Tr>
+                <TableHeaderContentWithControls {...tableControls}>
+                  <Th {...getThProps({ columnKey: "displayName" })} />
+                  <Th {...getThProps({ columnKey: "description" })} />
+                  <Th {...getThProps({ columnKey: "count" })} />
+                </TableHeaderContentWithControls>
+              </Tr>
+            </Thead>
+            <ConditionalTableBody
+              isLoading={isFetching}
+              isError={!!fetchError}
+              isNoData={currentPageItems.length === 0}
+              noDataEmptyState={
+                <EmptyState variant="sm">
+                  <EmptyStateIcon icon={CubesIcon} />
+                  <Title headingLevel="h2" size="lg">
+                    {t("composed.noDataStateTitle", {
+                      what: t("terms.stakeholder").toLowerCase(),
+                    })}
+                  </Title>
+                  <EmptyStateBody>
+                    {t("composed.noDataStateBody", {
+                      what: t("terms.stakeholder").toLowerCase(),
+                    })}
+                  </EmptyStateBody>
+                </EmptyState>
+              }
+              numRenderedColumns={numRenderedColumns}
+            >
+              {currentPageItems?.map((stakeholderGroup, rowIndex) => {
+                return (
+                  <Tbody
+                    key={stakeholderGroup.id}
+                    isExpanded={isCellExpanded(stakeholderGroup)}
+                  >
+                    <Tr {...getTrProps({ item: stakeholderGroup })}>
+                      <TableRowContentWithControls
+                        {...tableControls}
+                        item={stakeholderGroup}
+                        rowIndex={rowIndex}
+                      >
+                        <Td
+                          width={25}
+                          {...getTdProps({ columnKey: "displayName" })}
+                        >
+                          {stakeholderGroup.name}
+                        </Td>
+                        <Td
+                          width={10}
+                          {...getTdProps({ columnKey: "description" })}
+                        >
+                          {stakeholderGroup.description}
+                        </Td>
+                        <Td width={10} {...getTdProps({ columnKey: "count" })}>
+                          {stakeholderGroup.stakeholders?.length}
+                        </Td>
+                        <Td width={20}>
+                          <AppTableActionButtons
+                            onEdit={() =>
+                              setCreateUpdateModalState(stakeholderGroup)
+                            }
+                            onDelete={() => deleteRow(stakeholderGroup)}
+                          />
+                        </Td>
+                      </TableRowContentWithControls>
+                    </Tr>
+                    {isCellExpanded(stakeholderGroup) ? (
+                      <Tr isExpanded>
+                        <Td />
+                        <Td
+                          {...getExpandedContentTdProps({
+                            item: stakeholderGroup,
+                          })}
+                          className={spacing.pyLg}
+                        >
+                          <ExpandableRowContent>
+                            <DescriptionList>
+                              <DescriptionListGroup>
+                                <DescriptionListTerm>
+                                  {t("terms.member(s)")}
+                                </DescriptionListTerm>
+                                {!!stakeholderGroup.stakeholders?.length && (
+                                  <DescriptionListDescription>
+                                    {stakeholderGroup.stakeholders
+                                      ?.map((f) => f.name)
+                                      .join(", ")}
+                                  </DescriptionListDescription>
+                                )}
+                              </DescriptionListGroup>
+                            </DescriptionList>
+                          </ExpandableRowContent>
+                        </Td>
+                      </Tr>
+                    ) : null}
+                  </Tbody>
+                );
               })}
-            />
-          }
-        />
+            </ConditionalTableBody>
+          </Table>
+          <SimplePagination
+            idPrefix="stakeholder-groups-table"
+            isTop={false}
+            paginationProps={paginationProps}
+          />
+        </div>
       </ConditionalRender>
-
       <Modal
         id="create-edit-stakeholder-group-modal"
         title={
diff --git a/client/src/app/pages/controls/stakeholders/components/stakeholder-form.tsx b/client/src/app/pages/controls/stakeholders/components/stakeholder-form.tsx
index 70e63b93a..c57983224 100644
--- a/client/src/app/pages/controls/stakeholders/components/stakeholder-form.tsx
+++ b/client/src/app/pages/controls/stakeholders/components/stakeholder-form.tsx
@@ -18,7 +18,7 @@ import {
   useFetchStakeholders,
   useUpdateStakeholderMutation,
 } from "@app/queries/stakeholders";
-import { useFetchStakeholderGroups } from "@app/queries/stakeholdergoups";
+import { useFetchStakeholderGroups } from "@app/queries/stakeholdergroups";
 import { useFetchJobFunctions } from "@app/queries/jobfunctions";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
diff --git a/client/src/app/pages/controls/stakeholders/stakeholders.tsx b/client/src/app/pages/controls/stakeholders/stakeholders.tsx
index 762655fc3..67c814a92 100644
--- a/client/src/app/pages/controls/stakeholders/stakeholders.tsx
+++ b/client/src/app/pages/controls/stakeholders/stakeholders.tsx
@@ -211,8 +211,8 @@ export const Stakeholders: React.FC = () => {
                 <ToolbarItem>
                   <Button
                     type="button"
-                    id="create-migration-wave"
-                    aria-label="Create new migration wave"
+                    id="create-stakeholder"
+                    aria-label="Create new stakeholder"
                     variant={ButtonVariant.primary}
                     onClick={() => setCreateUpdateModalState("create")}
                   >
@@ -336,7 +336,7 @@ export const Stakeholders: React.FC = () => {
             </ConditionalTableBody>
           </Table>
           <SimplePagination
-            idPrefix="migration-waves-table"
+            idPrefix="stakeholders-table"
             isTop={false}
             paginationProps={paginationProps}
           />
diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
index 1097c1218..337d071c8 100644
--- a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
+++ b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -16,7 +16,7 @@ import {
 } from "@patternfly/react-core";
 
 import { useFetchStakeholders } from "@app/queries/stakeholders";
-import { useFetchStakeholderGroups } from "@app/queries/stakeholdergoups";
+import { useFetchStakeholderGroups } from "@app/queries/stakeholdergroups";
 import {
   useCreateMigrationWaveMutation,
   useUpdateMigrationWaveMutation,
diff --git a/client/src/app/queries/stakeholdergoups.ts b/client/src/app/queries/stakeholdergroups.ts
similarity index 100%
rename from client/src/app/queries/stakeholdergoups.ts
rename to client/src/app/queries/stakeholdergroups.ts