diff --git a/src/app/base/components/GenericTable/GenericTable.test.tsx b/src/app/base/components/GenericTable/GenericTable.test.tsx
index 45c1cc3867..ded178d575 100644
--- a/src/app/base/components/GenericTable/GenericTable.test.tsx
+++ b/src/app/base/components/GenericTable/GenericTable.test.tsx
@@ -67,7 +67,6 @@ describe("GenericTable", () => {
 
   const mockFilterCells = vi.fn(() => true);
   const mockFilterHeaders = vi.fn(() => true);
-  const mockGetRowId = vi.fn((row) => row.id.toString());
 
   it("renders table with headers and rows", () => {
     render(
@@ -76,7 +75,6 @@ describe("GenericTable", () => {
         data={data}
         filterCells={mockFilterCells}
         filterHeaders={mockFilterHeaders}
-        getRowId={mockGetRowId}
         rowSelection={{}}
         setRowSelection={vi.fn}
       />
@@ -96,7 +94,6 @@ describe("GenericTable", () => {
         data={[]}
         filterCells={mockFilterCells}
         filterHeaders={mockFilterHeaders}
-        getRowId={mockGetRowId}
         noData={<span>No data</span>}
         rowSelection={{}}
         setRowSelection={vi.fn}
@@ -113,7 +110,6 @@ describe("GenericTable", () => {
         data={data}
         filterCells={mockFilterCells}
         filterHeaders={mockFilterHeaders}
-        getRowId={mockGetRowId}
         rowSelection={{}}
         setRowSelection={vi.fn}
       />
diff --git a/src/app/base/components/GenericTable/GenericTable.tsx b/src/app/base/components/GenericTable/GenericTable.tsx
index 31182b802f..2bbfe4a662 100644
--- a/src/app/base/components/GenericTable/GenericTable.tsx
+++ b/src/app/base/components/GenericTable/GenericTable.tsx
@@ -1,59 +1,61 @@
-import type { Dispatch, ReactNode, SetStateAction } from "react";
-import { useMemo, useState } from "react";
+import {
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useMemo,
+  useState,
+} from "react";
 
 import { DynamicTable } from "@canonical/maas-react-components";
-import { Button } from "@canonical/react-components";
 import type {
   Column,
+  Row,
   ColumnDef,
   ColumnSort,
-  ExpandedState,
   GroupingState,
+  ExpandedState,
+  SortingState,
   Header,
-  Row,
   RowSelectionState,
-  SortingState,
 } from "@tanstack/react-table";
 import {
+  flexRender,
   getCoreRowModel,
   getExpandedRowModel,
   getGroupedRowModel,
   useReactTable,
-  flexRender,
 } from "@tanstack/react-table";
 import classNames from "classnames";
 
+import TableCheckbox from "@/app/base/components/GenericTable/TableCheckbox";
+import TableHeader from "@/app/base/components/GenericTable/TableHeader";
+
 import "./_index.scss";
-import SortingIndicator from "./SortingIndicator";
 
 type GenericTableProps<T> = {
-  ariaLabel?: string;
+  canSelect?: boolean;
   columns: ColumnDef<T, Partial<T>>[];
   data: T[];
-  filterCells: (row: Row<T>, column: Column<T>) => boolean;
-  filterHeaders: (header: Header<T, unknown>) => boolean;
-  getRowId: (
-    originalRow: T,
-    index: number,
-    parent?: Row<T> | undefined
-  ) => string;
+  filterCells?: (row: Row<T>, column: Column<T>) => boolean;
+  filterHeaders?: (header: Header<T, unknown>) => boolean;
   groupBy?: string[];
   noData?: ReactNode;
+  pin?: { value: string; isTop: boolean }[];
   sortBy?: ColumnSort[];
-  rowSelection: RowSelectionState;
+  rowSelection?: RowSelectionState;
   setRowSelection?: Dispatch<SetStateAction<RowSelectionState>>;
 };
 
 const GenericTable = <T,>({
-  ariaLabel,
+  canSelect = false,
   columns,
   data,
-  filterCells,
-  filterHeaders,
-  getRowId,
+  filterCells = () => true,
+  filterHeaders = () => true,
   groupBy,
-  sortBy,
   noData,
+  pin,
+  sortBy,
   rowSelection,
   setRowSelection,
 }: GenericTableProps<T>) => {
@@ -61,8 +63,62 @@ const GenericTable = <T,>({
   const [expanded, setExpanded] = useState<ExpandedState>(true);
   const [sorting, setSorting] = useState<SortingState>(sortBy ?? []);
 
-  const sortedData = useMemo(() => {
+  if (canSelect) {
+    columns = [
+      {
+        id: "select",
+        accessorKey: "id",
+        enableSorting: false,
+        header: "",
+        cell: ({ row }) =>
+          !row.getIsGrouped() ? <TableCheckbox row={row} /> : null,
+      },
+      ...columns,
+    ];
+
+    if (groupBy) {
+      columns = [
+        {
+          id: "group-select",
+          accessorKey: "id",
+          enableSorting: false,
+          header: ({ table }) => <TableCheckbox.All table={table} />,
+          cell: ({ row }) =>
+            row.getIsGrouped() ? <TableCheckbox.Group row={row} /> : null,
+        },
+        ...columns,
+      ];
+    }
+  }
+
+  data = useMemo(() => {
     return [...data].sort((a, b) => {
+      if (pin && pin.length > 0 && grouping.length > 0) {
+        for (const { value, isTop } of pin) {
+          const groupId = grouping[0];
+          const aValue = a[groupId as keyof typeof a];
+          const bValue = b[groupId as keyof typeof b];
+
+          if (aValue === value && bValue !== value) {
+            return isTop ? -1 : 1;
+          }
+          if (bValue === value && aValue !== value) {
+            return isTop ? 1 : -1;
+          }
+        }
+      }
+
+      for (const groupId of grouping) {
+        const aGroupValue = a[groupId as keyof typeof a];
+        const bGroupValue = b[groupId as keyof typeof b];
+        if (aGroupValue < bGroupValue) {
+          return -1;
+        }
+        if (aGroupValue > bGroupValue) {
+          return 1;
+        }
+      }
+
       for (const { id, desc } of sorting) {
         const aValue = a[id as keyof typeof a];
         const bValue = b[id as keyof typeof b];
@@ -75,10 +131,10 @@ const GenericTable = <T,>({
       }
       return 0;
     });
-  }, [data, sorting]);
+  }, [data, sorting, grouping, pin]);
 
   const table = useReactTable<T>({
-    data: sortedData,
+    data,
     columns,
     state: {
       grouping,
@@ -101,40 +157,15 @@ const GenericTable = <T,>({
     groupedColumnMode: false,
     enableRowSelection: true,
     enableMultiRowSelection: true,
-    getRowId,
   });
 
   return (
-    <DynamicTable
-      aria-label={ariaLabel}
-      className="p-table-dynamic--with-select generic-table"
-      variant={"full-height"}
-    >
+    <DynamicTable className="p-generic-table" variant="full-height">
       <thead>
         {table.getHeaderGroups().map((headerGroup) => (
           <tr key={headerGroup.id}>
             {headerGroup.headers.filter(filterHeaders).map((header) => (
-              <th className={classNames(`${header.column.id}`)} key={header.id}>
-                {header.column.getCanSort() ? (
-                  <Button
-                    appearance="link"
-                    className="p-button--table-header"
-                    onClick={header.column.getToggleSortingHandler()}
-                    type="button"
-                  >
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    <SortingIndicator header={header} />
-                  </Button>
-                ) : (
-                  flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )
-                )}
-              </th>
+              <TableHeader header={header} key={header.id} />
             ))}
           </tr>
         ))}
diff --git a/src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.tsx b/src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.tsx
index 6f3cad8a42..75777497a3 100644
--- a/src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.tsx
+++ b/src/app/base/components/GenericTable/TableCheckbox/TableCheckbox.tsx
@@ -24,7 +24,7 @@ const TableAllCheckbox = <T,>({ table, ...props }: TableCheckboxProps<T>) => {
   }
 
   return (
-    <label className="p-checkbox--inline">
+    <label className="p-checkbox--inline p-table-checkbox--all">
       <input
         aria-checked={checked}
         aria-label="select all"
@@ -54,7 +54,7 @@ const TableGroupCheckbox = <T,>({ row, ...props }: TableCheckboxProps<T>) => {
   const isSomeSubRowsSelected =
     !row.getIsAllSubRowsSelected() && row.getIsSomeSelected();
   return (
-    <label className="p-checkbox--inline">
+    <label className="p-checkbox--inline p-table-checkbox--group">
       <input
         aria-checked={isSomeSubRowsSelected ? "mixed" : undefined}
         className="p-checkbox__input"
@@ -84,7 +84,7 @@ const TableCheckbox = <T,>({ row, ...props }: TableCheckboxProps<T>) => {
     return null;
   }
   return (
-    <label className="p-checkbox--inline">
+    <label className="p-checkbox--inline p-table-checkbox">
       <input
         className="p-checkbox__input"
         type="checkbox"
diff --git a/src/app/base/components/GenericTable/TableHeader/TableHeader.tsx b/src/app/base/components/GenericTable/TableHeader/TableHeader.tsx
new file mode 100644
index 0000000000..13deec15c8
--- /dev/null
+++ b/src/app/base/components/GenericTable/TableHeader/TableHeader.tsx
@@ -0,0 +1,32 @@
+import { Button } from "@canonical/react-components";
+import type { Header } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
+import classNames from "classnames";
+
+import SortingIndicator from "@/app/base/components/GenericTable/SortingIndicator";
+
+type TableHeaderProps<T> = {
+  header: Header<T, unknown>;
+};
+
+const TableHeader = <T,>({ header }: TableHeaderProps<T>) => {
+  return (
+    <th className={classNames(`${header.column.id}`)} key={header.id}>
+      {header.column.getCanSort() ? (
+        <Button
+          appearance="link"
+          className="p-button--table-header"
+          onClick={header.column.getToggleSortingHandler()}
+          type="button"
+        >
+          {flexRender(header.column.columnDef.header, header.getContext())}
+          <SortingIndicator header={header} />
+        </Button>
+      ) : (
+        flexRender(header.column.columnDef.header, header.getContext())
+      )}
+    </th>
+  );
+};
+
+export default TableHeader;
diff --git a/src/app/base/components/GenericTable/TableHeader/index.ts b/src/app/base/components/GenericTable/TableHeader/index.ts
new file mode 100644
index 0000000000..3ddc450b82
--- /dev/null
+++ b/src/app/base/components/GenericTable/TableHeader/index.ts
@@ -0,0 +1 @@
+export { default } from "./TableHeader";
diff --git a/src/app/base/components/GenericTable/_index.scss b/src/app/base/components/GenericTable/_index.scss
index b183c4d39d..358c9c68d5 100644
--- a/src/app/base/components/GenericTable/_index.scss
+++ b/src/app/base/components/GenericTable/_index.scss
@@ -1,11 +1,10 @@
-.generic-table {
-  table-layout: auto;
-  th:not(th:nth-of-type(1), th:nth-of-type(2), th:last-of-type) {
-    padding-left: 1.5rem;
+.p-generic-table {
+  thead, tbody {
+    display: table-row-group;
+    width: 100%;
   }
 
-  .individual-row {
-    width: calc(100% - 1rem);
-    margin-left: 1rem;
+  .group-select, .select {
+    width: 2rem;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/images/components/SMImagesTable/SMImagesTable.tsx b/src/app/images/components/SMImagesTable/SMImagesTable.tsx
index f184cfa202..6149d0b7e8 100644
--- a/src/app/images/components/SMImagesTable/SMImagesTable.tsx
+++ b/src/app/images/components/SMImagesTable/SMImagesTable.tsx
@@ -5,13 +5,13 @@ import type { RowSelectionState } from "@tanstack/react-table";
 import { useSelector } from "react-redux";
 
 import ImagesTableHeader from "./ImagesTableHeader";
-import useImageTableColumns, {
-  filterCells,
-  filterHeaders,
-} from "./useImageTableColumns/useImageTableColumns";
 
 import GenericTable from "@/app/base/components/GenericTable";
 import { useSidePanel } from "@/app/base/side-panel-context";
+import useImageTableColumns, {
+  filterCells,
+  filterHeaders,
+} from "@/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns";
 import { ImageSidePanelViews } from "@/app/images/constants";
 import type { Image } from "@/app/images/types";
 import bootResourceSelectors from "@/app/store/bootresource/selectors";
@@ -80,11 +80,11 @@ export const SMImagesTable: React.FC = () => {
         />
       )}
       <GenericTable
+        canSelect
         columns={columns}
         data={images}
         filterCells={filterCells}
         filterHeaders={filterHeaders}
-        getRowId={(row) => `${row.id}`}
         groupBy={["name"]}
         noData={
           <TableCaption>
@@ -96,6 +96,10 @@ export const SMImagesTable: React.FC = () => {
             </TableCaption.Description>
           </TableCaption>
         }
+        pin={[
+          { value: "Ubuntu", isTop: true },
+          { value: "Other", isTop: false },
+        ]}
         rowSelection={selectedRows}
         setRowSelection={setSelectedRows}
         sortBy={[{ id: "release", desc: true }]}
diff --git a/src/app/images/components/SMImagesTable/_index.scss b/src/app/images/components/SMImagesTable/_index.scss
index c54ef48e50..7652d4655f 100644
--- a/src/app/images/components/SMImagesTable/_index.scss
+++ b/src/app/images/components/SMImagesTable/_index.scss
@@ -1,4 +1,4 @@
-.generic-table {
+.p-generic-table {
   .status {
     width: 15rem;
   }
diff --git a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx b/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx
index 266b89e5e3..fb0c63c329 100644
--- a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx
+++ b/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.test.tsx
@@ -3,7 +3,7 @@ import { vi } from "vitest";
 
 import useImageTableColumns from "@/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns";
 import type { Image } from "@/app/images/types";
-import { screen, renderHook, render } from "@/testing/utils";
+import { renderHook } from "@/testing/utils";
 
 vi.mock("@/context", async () => {
   const actual = await vi.importActual("@/context");
@@ -41,7 +41,6 @@ it("returns the correct number of columns", () => {
   const { result } = setupTestCase();
   expect(result.current).toBeInstanceOf(Array);
   expect(result.current.map((column) => column.id)).toStrictEqual([
-    "select",
     "name",
     "release",
     "architecture",
@@ -53,15 +52,3 @@ it("returns the correct number of columns", () => {
     "action",
   ]);
 });
-
-it("input has correct accessible label", () => {
-  const { result, props } = setupTestCase("Ubuntu");
-
-  const selectColumn = result.current.find((column) => column.id === "select");
-  // @ts-ignore-next-line
-  const cellValue = selectColumn.cell(props);
-  render(cellValue);
-
-  const inputElement = screen.getByRole("checkbox");
-  expect(inputElement).toHaveAccessibleName("Ubuntu");
-});
diff --git a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx b/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx
index 52ed95627f..d75df20b32 100644
--- a/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx
+++ b/src/app/images/components/SMImagesTable/useImageTableColumns/useImageTableColumns.tsx
@@ -2,17 +2,16 @@ import { useMemo } from "react";
 
 import { Icon, Spinner } from "@canonical/react-components";
 import type {
+  Column,
   ColumnDef,
-  Row,
   Getter,
   Header,
-  Column,
+  Row,
 } from "@tanstack/react-table";
 import pluralize from "pluralize";
 
 import DoubleRow from "@/app/base/components/DoubleRow";
 import GroupRowActions from "@/app/base/components/GenericTable/GroupRowActions";
-import TableCheckbox from "@/app/base/components/GenericTable/TableCheckbox";
 import TableActions from "@/app/base/components/TableActions";
 import TooltipButton from "@/app/base/components/TooltipButton";
 import type { Image } from "@/app/images/types";
@@ -22,9 +21,9 @@ export type ImageColumnDef = ColumnDef<Image, Partial<Image>>;
 
 export const filterCells = (row: Row<Image>, column: Column<Image>) => {
   if (row.getIsGrouped()) {
-    return ["select", "name", "action"].includes(column.id);
+    return ["group-select", "name", "action"].includes(column.id);
   } else {
-    return column.id !== "name";
+    return !["name"].includes(column.id);
   }
 };
 
@@ -41,27 +40,6 @@ const useImageTableColumns = ({
   return useMemo(
     () =>
       [
-        {
-          id: "select",
-          accessorKey: "id",
-          enableSorting: false,
-          header: ({ table }) => {
-            return <TableCheckbox.All table={table} />;
-          },
-          cell: ({
-            row,
-            getValue,
-          }: {
-            row: Row<Image>;
-            getValue: Getter<Image["name"]>;
-          }) => {
-            return row.getIsGrouped() ? (
-              <TableCheckbox.Group aria-label={getValue()} row={row} />
-            ) : (
-              <TableCheckbox aria-label={getValue()} row={row} />
-            );
-          },
-        },
         {
           id: "name",
           accessorKey: "name",
@@ -93,26 +71,22 @@ const useImageTableColumns = ({
         {
           id: "architecture",
           accessorKey: "architecture",
-          enableSorting: false,
+          enableSorting: true,
           header: () => "Architecture",
         },
         {
           id: "size",
           accessorKey: "size",
-          enableSorting: false,
+          enableSorting: true,
           header: () => "Size",
         },
         {
           id: "canDeployToMemory",
           accessorKey: "canDeployToMemory",
-          enableSorting: false,
+          enableSorting: true,
           header: () => "Deployable in Memory",
-          cell: ({
-            getValue,
-          }: {
-            getValue: Getter<Image["canDeployToMemory"]>;
-          }) =>
-            getValue() ? (
+          cell: ({ row: { original: canDeployToMemory } }) =>
+            canDeployToMemory ? (
               <TooltipButton
                 iconName="task-outstanding"
                 iconProps={{ "aria-label": "supported" }}
@@ -129,11 +103,15 @@ const useImageTableColumns = ({
         {
           id: "status",
           accessorKey: "status",
-          enableSorting: false,
+          enableSorting: true,
           header: () => "Status",
-          cell: ({ row }) => {
+          cell: ({
+            row: {
+              original: { status, lastSynced },
+            },
+          }) => {
             let statusIcon;
-            switch (row.original.status) {
+            switch (status) {
               case "Synced":
                 statusIcon = <Icon aria-label={"synced"} name={"success"} />;
                 break;
@@ -145,8 +123,8 @@ const useImageTableColumns = ({
               <DoubleRow
                 data-testid="resource-status"
                 icon={statusIcon}
-                primary={row.original.status}
-                secondary={row.original.lastSynced ?? ""}
+                primary={status}
+                secondary={lastSynced ?? ""}
               />
             );
           },
@@ -154,13 +132,17 @@ const useImageTableColumns = ({
         {
           id: "lastDeployed",
           accessorKey: "lastDeployed",
-          enableSorting: false,
+          enableSorting: true,
           header: () => "Last deployed",
-          cell: ({ row }) => {
-            return row.original.lastDeployed ? (
+          cell: ({
+            row: {
+              original: { lastDeployed },
+            },
+          }) => {
+            return lastDeployed ? (
               <DoubleRow
-                primary={getTimeDistanceString(row.original.lastDeployed)}
-                secondary={formatUtcDatetime(row.original.lastDeployed)}
+                primary={getTimeDistanceString(lastDeployed)}
+                secondary={formatUtcDatetime(lastDeployed)}
               />
             ) : (
               "—"
@@ -170,7 +152,7 @@ const useImageTableColumns = ({
         {
           id: "machines",
           accessorKey: "machines",
-          enableSorting: false,
+          enableSorting: true,
           header: () => "Machines",
           cell: ({ row }) => {
             return row.original.machines || "—";
diff --git a/src/app/zones/views/ZonesList/ZonesList.test.tsx b/src/app/zones/views/ZonesList/ZonesList.test.tsx
index 1bff1e7d92..b4a558fb28 100644
--- a/src/app/zones/views/ZonesList/ZonesList.test.tsx
+++ b/src/app/zones/views/ZonesList/ZonesList.test.tsx
@@ -1,4 +1,4 @@
-import ZonesList, { TestIds } from "./ZonesListTable/ZonesListTable";
+import ZonesList from "./ZonesListTable/ZonesListTable";
 
 import * as factory from "@/testing/factories";
 import { renderWithBrowserRouter, screen } from "@/testing/utils";
@@ -20,7 +20,7 @@ describe("ZonesList", () => {
     };
     renderWithBrowserRouter(<ZonesList />, { route: "/zones", queryData });
 
-    expect(screen.getByTestId(TestIds.ZonesTable)).toBeInTheDocument();
+    expect(screen.getByRole("table")).toBeInTheDocument();
   });
 
   it("shows a message if there are no zones", () => {
diff --git a/src/app/zones/views/ZonesList/ZonesListTable/ZonesListTable.tsx b/src/app/zones/views/ZonesList/ZonesListTable/ZonesListTable.tsx
index 3423acc677..f44367040e 100644
--- a/src/app/zones/views/ZonesList/ZonesListTable/ZonesListTable.tsx
+++ b/src/app/zones/views/ZonesList/ZonesListTable/ZonesListTable.tsx
@@ -1,94 +1,23 @@
-import { MainTable } from "@canonical/react-components";
-import { Link } from "react-router-dom";
+import React from "react";
+
+import { TableCaption } from "@canonical/maas-react-components";
 
 import { useZones } from "@/app/api/query/zones";
-import urls from "@/app/base/urls";
-import { FilterDevices } from "@/app/store/device/utils";
-import { FilterMachines } from "@/app/store/machine/utils";
+import GenericTable from "@/app/base/components/GenericTable";
+import useZonesTableColumns from "@/app/zones/views/ZonesList/ZonesListTable/useZonesTableColumns/useZonesTableColumns";
 
-export enum TestIds {
-  ZonesTable = "zones-table",
-}
+import "./_index.scss";
 
-const ZonesListTable = (): JSX.Element => {
+const ZonesListTable: React.FC = () => {
   const zones = useZones();
 
-  const headers = [
-    { content: "Name", sortKey: "name" },
-    { content: "Description", sortKey: "description" },
-    { content: "Machines", sortKey: "machines", className: "u-align--right" },
-    { content: "Devices", sortKey: "devices", className: "u-align--right" },
-    {
-      content: "Controllers",
-      sortKey: "controllers",
-      className: "u-align--right",
-    },
-  ];
-
-  const rows = zones?.data?.map?.((zone) => {
-    const devicesFilter = FilterDevices.filtersToQueryString({
-      zone: [zone.name],
-    });
-    const machinesFilter = FilterMachines.filtersToQueryString({
-      zone: [zone.name],
-    });
-    return {
-      key: zone.id,
-      className: "p-table__row",
-      columns: [
-        {
-          content: (
-            <Link to={`${urls.zones.details({ id: zone.id })}`}>
-              {zone.name}
-            </Link>
-          ),
-        },
-        {
-          content: zone.description,
-        },
-        {
-          content: (
-            <Link to={`${urls.machines.index}${machinesFilter}`}>
-              {zone.machines_count}
-            </Link>
-          ),
-          className: "u-align--right",
-        },
-        {
-          content: (
-            <Link to={`${urls.devices.index}${devicesFilter}`}>
-              {zone.devices_count}
-            </Link>
-          ),
-          className: "u-align--right",
-        },
-        {
-          content: (
-            <Link to={urls.controllers.index}>{zone.controllers_count}</Link>
-          ),
-          className: "u-align--right",
-        },
-      ],
-      sortData: {
-        name: zone.name,
-        description: zone.description,
-        machines: zone.machines_count,
-        devices: zone.devices_count,
-        controllers: zone.controllers_count,
-      },
-    };
-  });
+  const columns = useZonesTableColumns();
 
   return (
-    <MainTable
-      className="p-table--zones"
-      data-testid={TestIds.ZonesTable}
-      defaultSort="name"
-      defaultSortDirection="ascending"
-      emptyStateMsg="No zones available."
-      headers={headers}
-      rows={rows}
-      sortable
+    <GenericTable
+      columns={columns}
+      data={zones.data!}
+      noData={<TableCaption>No zones available.</TableCaption>}
     />
   );
 };
diff --git a/src/app/zones/views/ZonesList/ZonesListTable/_index.scss b/src/app/zones/views/ZonesList/ZonesListTable/_index.scss
new file mode 100644
index 0000000000..5bd986c8f2
--- /dev/null
+++ b/src/app/zones/views/ZonesList/ZonesListTable/_index.scss
@@ -0,0 +1,7 @@
+.p-generic-table {
+  th, td {
+    &:is(.machines, .devices, .controllers) {
+      text-align: right;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/zones/views/ZonesList/ZonesListTable/useZonesTableColumns/useZonesTableColumns.tsx b/src/app/zones/views/ZonesList/ZonesListTable/useZonesTableColumns/useZonesTableColumns.tsx
new file mode 100644
index 0000000000..8d9c9282a3
--- /dev/null
+++ b/src/app/zones/views/ZonesList/ZonesListTable/useZonesTableColumns/useZonesTableColumns.tsx
@@ -0,0 +1,90 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { Link } from "react-router-dom";
+
+import urls from "@/app/base/urls";
+import { FilterDevices } from "@/app/store/device/utils";
+import { FilterMachines } from "@/app/store/machine/utils";
+import type { Zone } from "@/app/store/zone/types";
+
+export type ZoneColumnDef = ColumnDef<Zone, Partial<Zone>>;
+
+const filterDevices = (name: string) =>
+  FilterDevices.filtersToQueryString({
+    zone: [name],
+  });
+
+const machinesFilter = (name: string) =>
+  FilterMachines.filtersToQueryString({
+    zone: [name],
+  });
+
+const useZonesTableColumns = (): ZoneColumnDef[] => {
+  return [
+    {
+      id: "name",
+      accessorKey: "name",
+      enableSorting: true,
+      header: "Name",
+      cell: ({ row }) => {
+        return (
+          <Link to={`${urls.zones.details({ id: row.original.id })}`}>
+            {row.original.name}
+          </Link>
+        );
+      },
+    },
+    {
+      id: "description",
+      accessorKey: "description",
+      enableSorting: true,
+      header: "Description",
+    },
+    {
+      id: "machines",
+      accessorKey: "machines_count",
+      enableSorting: true,
+      header: "Machines",
+      cell: ({ row }) => {
+        return (
+          <Link
+            className="u-align--right"
+            to={`${urls.machines.index}${machinesFilter(row.original.name)}`}
+          >
+            {row.original.machines_count}
+          </Link>
+        );
+      },
+    },
+    {
+      id: "devices",
+      accessorKey: "devices_count",
+      enableSorting: true,
+      header: "Devices",
+      cell: ({ row }) => {
+        return (
+          <Link
+            className="u-align--right"
+            to={`${urls.devices.index}${filterDevices(row.original.name)}`}
+          >
+            {row.original.devices_count}
+          </Link>
+        );
+      },
+    },
+    {
+      id: "controllers",
+      accessorKey: "controllers_count",
+      enableSorting: true,
+      header: "Controllers",
+      cell: ({ row }) => {
+        return (
+          <Link className="u-align--right" to={`${urls.controllers.index}`}>
+            {row.original.controllers_count}
+          </Link>
+        );
+      },
+    },
+  ];
+};
+
+export default useZonesTableColumns;