diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index a357f6c9ad833..f17755c294f47 100644
--- a/public/app/percona/inventory/Inventory.constants.ts
+++ b/public/app/percona/inventory/Inventory.constants.ts
@@ -29,3 +29,4 @@ export const inventoryTypes = {
 export const GET_SERVICES_CANCEL_TOKEN = 'getServices';
 export const GET_NODES_CANCEL_TOKEN = 'getNodes';
 export const GET_AGENTS_CANCEL_TOKEN = 'getAgents';
+export const CLUSTERS_SWITCH_KEY = 'pmm-organize-by-clusters';
diff --git a/public/app/percona/inventory/Inventory.messages.ts b/public/app/percona/inventory/Inventory.messages.ts
index 444cce68032f8..44f590eabd96f 100644
--- a/public/app/percona/inventory/Inventory.messages.ts
+++ b/public/app/percona/inventory/Inventory.messages.ts
@@ -27,6 +27,8 @@ export const Messages = {
       `Are you sure that you want to permanently delete ${nrItems} service${nrItems ? 's' : ''}`,
     servicesDeleted: (deletedItems: number, totalItems: number) =>
       `${deletedItems} of ${totalItems} services successfully deleted`,
+    organizeByClusters: 'Organize by Clusters',
+    technicalPreview: '(Technical Preview) ',
   },
   agents: {
     goBackToServices: 'Go back to services',
diff --git a/public/app/percona/inventory/Tabs/Nodes.tsx b/public/app/percona/inventory/Tabs/Nodes.tsx
index 5019cb6240751..7d738f55d8cc1 100644
--- a/public/app/percona/inventory/Tabs/Nodes.tsx
+++ b/public/app/percona/inventory/Tabs/Nodes.tsx
@@ -27,7 +27,7 @@ import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 import { appEvents } from '../../../core/app_events';
-import { GET_NODES_CANCEL_TOKEN } from '../Inventory.constants';
+import { CLUSTERS_SWITCH_KEY, GET_NODES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
 import { FlattenNode, MonitoringStatus, Node } from '../Inventory.types';
 import { StatusBadge } from '../components/StatusBadge/StatusBadge';
@@ -65,6 +65,11 @@ export const NodesTab = () => {
     [styles.actionItemTxtSpan]
   );
 
+  const clearClusterToggle = useCallback(() => {
+    // Reset toggle to false when linking from nodes
+    localStorage.removeItem(CLUSTERS_SWITCH_KEY);
+  }, []);
+
   const columns = useMemo(
     (): Array<ExtendedColumn<Node>> => [
       {
@@ -155,7 +160,7 @@ export const NodesTab = () => {
 
           if (value.length === 1) {
             return (
-              <Link className={styles.link} href={getServiceLink(value[0].serviceId)}>
+              <Link className={styles.link} href={getServiceLink(value[0].serviceId)} onClick={clearClusterToggle}>
                 {value[0].serviceName}
               </Link>
             );
@@ -166,7 +171,7 @@ export const NodesTab = () => {
       },
       getExpandAndActionsCol(getActions),
     ],
-    [styles, getActions]
+    [styles, getActions, clearClusterToggle]
   );
 
   const loadData = useCallback(async () => {
@@ -206,7 +211,7 @@ export const NodesTab = () => {
             <DetailsRow.Contents title={Messages.nodes.details.serviceNames}>
               {row.original.services.map((service) => (
                 <div key={service.serviceId}>
-                  <Link className={styles.link} href={getServiceLink(service.serviceId)}>
+                  <Link className={styles.link} href={getServiceLink(service.serviceId)} onClick={clearClusterToggle}>
                     {service.serviceName}
                   </Link>
                 </div>
@@ -234,7 +239,7 @@ export const NodesTab = () => {
         </DetailsRow>
       );
     },
-    [styles.tagList, styles.link]
+    [styles.tagList, styles.link, clearClusterToggle]
   );
 
   const deletionMsg = useMemo(() => {
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 80fa54e56259f..6e900b62d5b85 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -1,44 +1,31 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Row } from 'react-table';
+import { useLocalStorage } from 'react-use';
 
 import { locationService } from '@grafana/runtime';
-import { Badge, Button, HorizontalGroup, Icon, Link, TagList, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
-import { stripServiceId } from 'app/percona/check/components/FailedChecksTab/FailedChecksTab.utils';
-import { Action } from 'app/percona/dbaas/components/MultipleActions';
-import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
-import { ServiceIconWithText } from 'app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText';
-import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
+import { ReadMoreLink } from 'app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
 import { fetchActiveServiceTypesAction, fetchServicesAction } from 'app/percona/shared/core/reducers/services';
 import { getServices } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
-import { getDashboardLinkForService } from 'app/percona/shared/helpers/getDashboardLinkForService';
-import { getExpandAndActionsCol } from 'app/percona/shared/helpers/getExpandAndActionsCol';
 import { logger } from 'app/percona/shared/helpers/logger';
-import { ServiceStatus } from 'app/percona/shared/services/services/Services.types';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
-import { GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
+import { CLUSTERS_SWITCH_KEY, GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
-import { FlattenService, MonitoringStatus } from '../Inventory.types';
+import { FlattenService } from '../Inventory.types';
 import DeleteServiceModal from '../components/DeleteServiceModal';
 import DeleteServicesModal from '../components/DeleteServicesModal';
-import { StatusBadge } from '../components/StatusBadge/StatusBadge';
-import { StatusInfo } from '../components/StatusInfo/StatusInfo';
-import { StatusLink } from '../components/StatusLink/StatusLink';
 
-import {
-  getBadgeColorForServiceStatus,
-  getBadgeIconForServiceStatus,
-  getBadgeTextForServiceStatus,
-  getAgentsMonitoringStatus,
-  getNodeLink,
-} from './Services.utils';
+import { getAgentsMonitoringStatus } from './Services.utils';
+import Clusters from './Services/Clusters';
+import ServicesTable from './Services/ServicesTable';
 import { getStyles } from './Tabs.styles';
 
 export const Services = () => {
@@ -56,146 +43,13 @@ export const Services = () => {
         return {
           type: value.type,
           ...value.params,
+          cluster: value.params.cluster || value.params.customLabels?.cluster || '',
           agentsStatus: getAgentsMonitoringStatus(value.params.agents ?? []),
         };
       }),
     [fetchedServices]
   );
-
-  const getActions = useCallback(
-    (row: Row<FlattenService>): Action[] => [
-      {
-        content: (
-          <HorizontalGroup spacing="sm">
-            <Icon name="trash-alt" />
-            <span className={styles.actionItemTxtSpan}>{Messages.delete}</span>
-          </HorizontalGroup>
-        ),
-        action: () => {
-          setActionItem(row.original);
-          setModalVisible(true);
-        },
-      },
-      {
-        content: (
-          <HorizontalGroup spacing="sm">
-            <Icon name="pen" />
-            <span className={styles.actionItemTxtSpan}>{Messages.edit}</span>
-          </HorizontalGroup>
-        ),
-        action: () => {
-          const serviceId = row.original.serviceId.split('/').pop();
-          locationService.push(`/edit-instance/${serviceId}`);
-        },
-      },
-      {
-        content: Messages.services.actions.dashboard,
-        action: () => {
-          locationService.push(getDashboardLinkForService(row.original.type, row.original.serviceName));
-        },
-      },
-      {
-        content: Messages.services.actions.qan,
-        action: () => {
-          locationService.push(`/d/pmm-qan/pmm-query-analytics?var-service_name=${row.original.serviceName}`);
-        },
-      },
-    ],
-    [styles.actionItemTxtSpan]
-  );
-
-  const columns = useMemo(
-    (): Array<ExtendedColumn<FlattenService>> => [
-      {
-        Header: Messages.services.columns.serviceId,
-        id: 'serviceId',
-        accessor: 'serviceId',
-        hidden: true,
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.status,
-        accessor: 'status',
-        Cell: ({ value }: { value: ServiceStatus }) => (
-          <Badge
-            text={getBadgeTextForServiceStatus(value)}
-            color={getBadgeColorForServiceStatus(value)}
-            icon={getBadgeIconForServiceStatus(value)}
-          />
-        ),
-        tooltipInfo: <StatusInfo />,
-        type: FilterFieldTypes.DROPDOWN,
-        options: [
-          {
-            label: 'Up',
-            value: ServiceStatus.UP,
-          },
-          {
-            label: 'Down',
-            value: ServiceStatus.DOWN,
-          },
-          {
-            label: 'Unknown',
-            value: ServiceStatus.UNKNOWN,
-          },
-          {
-            label: 'N/A',
-            value: ServiceStatus.NA,
-          },
-        ],
-      },
-      {
-        Header: Messages.services.columns.serviceName,
-        accessor: 'serviceName',
-        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
-          <ServiceIconWithText text={value} dbType={row.original.type} />
-        ),
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.nodeName,
-        accessor: 'nodeName',
-        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
-          <Link className={styles.link} href={getNodeLink(row.original)}>
-            {value}
-          </Link>
-        ),
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.monitoring,
-        accessor: 'agentsStatus',
-        width: '70px',
-        Cell: ({ value, row }) => (
-          <StatusLink type="services" strippedId={stripServiceId(row.original.serviceId)} agentsStatus={value} />
-        ),
-        type: FilterFieldTypes.RADIO_BUTTON,
-        options: [
-          {
-            label: MonitoringStatus.OK,
-            value: MonitoringStatus.OK,
-          },
-          {
-            label: MonitoringStatus.FAILED,
-            value: MonitoringStatus.FAILED,
-          },
-        ],
-      },
-      {
-        Header: Messages.services.columns.address,
-        accessor: 'address',
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.port,
-        accessor: 'port',
-        width: '100px',
-        type: FilterFieldTypes.TEXT,
-      },
-      getExpandAndActionsCol(getActions),
-    ],
-    [styles, getActions]
-  );
+  const [showClusters, setShowClusters] = useLocalStorage(CLUSTERS_SWITCH_KEY, false);
 
   const loadData = useCallback(async () => {
     try {
@@ -216,6 +70,7 @@ export const Services = () => {
 
   useEffect(() => {
     loadData();
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -223,40 +78,10 @@ export const Services = () => {
     setSelectedRows(rows);
   }, []);
 
-  const renderSelectedSubRow = React.useCallback(
-    (row: Row<FlattenService>) => {
-      const labels = row.original.customLabels || {};
-      const labelKeys = Object.keys(labels);
-      const agents = row.original.agents || [];
-
-      return (
-        <DetailsRow>
-          {!!agents.length && (
-            <DetailsRow.Contents title={Messages.services.details.agents}>
-              <StatusBadge
-                strippedId={stripServiceId(row.original.serviceId)}
-                type={'services'}
-                agents={row.original.agents || []}
-              />
-            </DetailsRow.Contents>
-          )}
-          <DetailsRow.Contents title={Messages.services.details.serviceId}>
-            <span>{row.original.serviceId}</span>
-          </DetailsRow.Contents>
-          {!!labelKeys.length && (
-            <DetailsRow.Contents title={Messages.services.details.labels} fullRow>
-              <TagList
-                colorIndex={9}
-                className={styles.tagList}
-                tags={labelKeys.map((label) => `${label}=${labels![label]}`)}
-              />
-            </DetailsRow.Contents>
-          )}
-        </DetailsRow>
-      );
-    },
-    [styles.tagList]
-  );
+  const handleDelete = useCallback((service: FlattenService) => {
+    setActionItem(service);
+    setModalVisible(true);
+  }, []);
 
   const onModalClose = useCallback(() => {
     setModalVisible(false);
@@ -271,9 +96,28 @@ export const Services = () => {
 
   return (
     <OldPage navModel={navModel}>
-      <OldPage.Contents>
+      <OldPage.Contents isLoading={isLoading}>
         <FeatureLoader>
           <HorizontalGroup height={40} justify="flex-end" align="flex-start">
+            <HorizontalGroup align="center">
+              <InlineSwitch
+                id="organize-by-clusters"
+                label={Messages.services.organizeByClusters}
+                className={styles.clustersSwitch}
+                value={showClusters}
+                onClick={() => setShowClusters(!showClusters)}
+                showLabel
+                transparent
+              />
+              <Tooltip interactive placement="top" theme="info" content={<ReadMoreLink />}>
+                <div className={styles.technicalPreview}>
+                  <HorizontalGroup align="center" spacing="xs">
+                    <span>{Messages.services.technicalPreview}</span>
+                    <Icon name="info-circle" />
+                  </HorizontalGroup>
+                </div>
+              </Tooltip>
+            </HorizontalGroup>
             <Button
               size="md"
               disabled={selected.length === 0}
@@ -305,23 +149,16 @@ export const Services = () => {
               onDismiss={onModalClose}
             />
           )}
-          <Table
-            columns={columns}
-            data={flattenServices}
-            totalItems={flattenServices.length}
-            rowSelection
-            onRowSelection={handleSelectionChange}
-            showPagination
-            pageSize={25}
-            allRowsSelectionMode="page"
-            emptyMessage={Messages.services.emptyTable}
-            pendingRequest={isLoading}
-            overlayClassName={styles.overlay}
-            renderExpandedRow={renderSelectedSubRow}
-            autoResetSelectedRows={false}
-            getRowId={useCallback((row: FlattenService) => row.serviceId, [])}
-            showFilter
-          />
+          {showClusters ? (
+            <Clusters services={flattenServices} onDelete={handleDelete} onSelectionChange={handleSelectionChange} />
+          ) : (
+            <ServicesTable
+              flattenServices={flattenServices}
+              onSelectionChange={handleSelectionChange}
+              onDelete={handleDelete}
+              isLoading={isLoading}
+            />
+          )}
         </FeatureLoader>
       </OldPage.Contents>
     </OldPage>
diff --git a/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
new file mode 100644
index 0000000000000..4553762971802
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
@@ -0,0 +1,54 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { Row } from 'react-table';
+
+import { Collapse, HorizontalGroup, Icon, IconName } from '@grafana/ui';
+import { DATABASE_ICONS } from 'app/percona/shared/core';
+
+import { FlattenService } from '../../Inventory.types';
+
+import { ClusterItemProps } from './Clusters.type';
+import { removeClusterFilters, shouldClusterBeExpanded } from './Clusters.utils';
+import ServicesTable from './ServicesTable';
+
+const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete, onSelectionChange }) => {
+  const [isOpen, setIsOpen] = useState(shouldClusterBeExpanded(cluster.name));
+  const icon: IconName = cluster.type ? (DATABASE_ICONS[cluster.type] as IconName) : 'database';
+
+  const handleSelectionChange = useCallback(
+    (services: Array<Row<FlattenService>>) => {
+      onSelectionChange(cluster, services);
+    },
+    [cluster, onSelectionChange]
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      removeClusterFilters(cluster.name);
+    }
+  }, [isOpen, cluster.name]);
+
+  return (
+    <Collapse
+      collapsible
+      label={
+        <HorizontalGroup>
+          {!!icon && <Icon name={icon} data-testid="service-icon" />}
+          <span>{cluster.name}</span>
+        </HorizontalGroup>
+      }
+      isOpen={isOpen}
+      onToggle={() => setIsOpen(!isOpen)}
+    >
+      <ServicesTable
+        flattenServices={cluster.services}
+        isLoading={false}
+        onDelete={onDelete}
+        onSelectionChange={handleSelectionChange}
+        tableKey={cluster.name}
+        showPagination={false}
+      />
+    </Collapse>
+  );
+};
+
+export default ClusterItem;
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.tsx b/public/app/percona/inventory/Tabs/Services/Clusters.tsx
new file mode 100644
index 0000000000000..0b89950a06ff3
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.tsx
@@ -0,0 +1,42 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { Row } from 'react-table';
+
+import { FlattenService } from '../../Inventory.types';
+
+import ClusterItem from './ClusterItem';
+import { ClustersProps, ServicesCluster } from './Clusters.type';
+import { getClustersFromServices } from './Clusters.utils';
+
+const Clusters: FC<ClustersProps> = ({ services, onDelete, onSelectionChange }) => {
+  const clusters = useMemo(() => getClustersFromServices(services), [services]);
+  const [selection, setSelection] = useState({});
+
+  const handleSelectionChange = useCallback(
+    (cluster: ServicesCluster, selectedServices: Array<Row<FlattenService>>) => {
+      const selectionByClusters = {
+        ...selection,
+        [cluster.name]: selectedServices,
+      };
+      const selected = Object.values(selectionByClusters).flat() as Array<Row<FlattenService>>;
+      setSelection(selectionByClusters);
+      onSelectionChange(selected);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onSelectionChange]
+  );
+
+  return (
+    <div>
+      {clusters.map((cluster) => (
+        <ClusterItem
+          key={cluster.name}
+          cluster={cluster}
+          onDelete={onDelete}
+          onSelectionChange={handleSelectionChange}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Clusters;
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx b/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
new file mode 100644
index 0000000000000..45ea9c3e68d24
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
@@ -0,0 +1,23 @@
+import { Row } from 'react-table';
+
+import { Databases } from 'app/percona/shared/core';
+
+import { FlattenService } from '../../Inventory.types';
+
+export interface ClustersProps {
+  services: FlattenService[];
+  onDelete: (service: FlattenService) => void;
+  onSelectionChange: (services: Array<Row<FlattenService>>) => void;
+}
+
+export interface ClusterItemProps {
+  cluster: ServicesCluster;
+  onDelete: (service: FlattenService) => void;
+  onSelectionChange: (cluster: ServicesCluster, services: Array<Row<FlattenService>>) => void;
+}
+
+export interface ServicesCluster {
+  name: string;
+  type?: Databases;
+  services: FlattenService[];
+}
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
new file mode 100644
index 0000000000000..f14e63e93e839
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
@@ -0,0 +1,29 @@
+import { locationService } from '@grafana/runtime';
+import { Databases } from 'app/percona/shared/core';
+
+import { FlattenService } from '../../Inventory.types';
+
+import { ServicesCluster } from './Clusters.type';
+
+export const getClustersFromServices = (services: FlattenService[]): ServicesCluster[] => {
+  const clusterNames = [...new Set(services.map((s) => s.cluster || s.serviceName))];
+  return clusterNames.map<ServicesCluster>((clusterName) => {
+    const clusterServices = services.filter((s) => s.cluster === clusterName);
+
+    return {
+      name: clusterName,
+      type: clusterServices[0]?.type as Databases,
+      services: clusterServices,
+    };
+  });
+};
+
+export const shouldClusterBeExpanded = (clusterName: string): boolean => {
+  const search = locationService.getSearchObject();
+  return !!search[clusterName];
+};
+
+export const removeClusterFilters = (clusterName: string) => {
+  const search = locationService.getSearchObject();
+  locationService.partial({ ...search, [clusterName]: undefined });
+};
diff --git a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
new file mode 100644
index 0000000000000..55d14ab928267
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
@@ -0,0 +1,238 @@
+import React, { FC, useCallback, useMemo } from 'react';
+import { Row } from 'react-table';
+
+import { locationService } from '@grafana/runtime';
+import { Badge, HorizontalGroup, Icon, Link, TagList, useStyles2 } from '@grafana/ui';
+import { Action } from 'app/percona/dbaas/components/MultipleActions';
+import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
+import { ServiceIconWithText } from 'app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText';
+import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
+import { getDashboardLinkForService } from 'app/percona/shared/helpers/getDashboardLinkForService';
+import { getExpandAndActionsCol } from 'app/percona/shared/helpers/getExpandAndActionsCol';
+import { ServiceStatus } from 'app/percona/shared/services/services/Services.types';
+
+import { Messages } from '../../Inventory.messages';
+import { FlattenService, MonitoringStatus } from '../../Inventory.types';
+import { StatusBadge } from '../../components/StatusBadge/StatusBadge';
+import { StatusInfo } from '../../components/StatusInfo/StatusInfo';
+import { StatusLink } from '../../components/StatusLink/StatusLink';
+import {
+  getBadgeColorForServiceStatus,
+  getBadgeTextForServiceStatus,
+  getBadgeIconForServiceStatus,
+  getNodeLink,
+  stripServiceId,
+} from '../Services.utils';
+import { getStyles } from '../Tabs.styles';
+
+interface ServicesTableProps {
+  isLoading: boolean;
+  flattenServices: FlattenService[];
+  onSelectionChange: (rows: Array<Row<FlattenService>>) => void;
+  onDelete: (service: FlattenService) => void;
+  showPagination?: boolean;
+  tableKey?: string;
+}
+
+const ServicesTable: FC<ServicesTableProps> = ({
+  isLoading,
+  flattenServices,
+  onSelectionChange,
+  onDelete,
+  tableKey,
+  showPagination = true,
+}) => {
+  const styles = useStyles2(getStyles);
+
+  const getActions = useCallback(
+    (row: Row<FlattenService>): Action[] => [
+      {
+        content: (
+          <HorizontalGroup spacing="sm">
+            <Icon name="trash-alt" />
+            <span className={styles.actionItemTxtSpan}>{Messages.delete}</span>
+          </HorizontalGroup>
+        ),
+        action: () => {
+          onDelete(row.original);
+        },
+      },
+      {
+        content: (
+          <HorizontalGroup spacing="sm">
+            <Icon name="pen" />
+            <span className={styles.actionItemTxtSpan}>{Messages.edit}</span>
+          </HorizontalGroup>
+        ),
+        action: () => {
+          const serviceId = row.original.serviceId.split('/').pop();
+          locationService.push(`/edit-instance/${serviceId}`);
+        },
+      },
+      {
+        content: Messages.services.actions.dashboard,
+        action: () => {
+          locationService.push(getDashboardLinkForService(row.original.type, row.original.serviceName));
+        },
+      },
+      {
+        content: Messages.services.actions.qan,
+        action: () => {
+          locationService.push(`/d/pmm-qan/pmm-query-analytics?var-service_name=${row.original.serviceName}`);
+        },
+      },
+    ],
+    [styles.actionItemTxtSpan, onDelete]
+  );
+
+  const columns = useMemo(
+    (): Array<ExtendedColumn<FlattenService>> => [
+      {
+        Header: Messages.services.columns.serviceId,
+        id: 'serviceId',
+        accessor: 'serviceId',
+        hidden: true,
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.status,
+        accessor: 'status',
+        Cell: ({ value }: { value: ServiceStatus }) => (
+          <Badge
+            text={getBadgeTextForServiceStatus(value)}
+            color={getBadgeColorForServiceStatus(value)}
+            icon={getBadgeIconForServiceStatus(value)}
+          />
+        ),
+        tooltipInfo: <StatusInfo />,
+        type: FilterFieldTypes.DROPDOWN,
+        options: [
+          {
+            label: 'Up',
+            value: ServiceStatus.UP,
+          },
+          {
+            label: 'Down',
+            value: ServiceStatus.DOWN,
+          },
+          {
+            label: 'Unknown',
+            value: ServiceStatus.UNKNOWN,
+          },
+          {
+            label: 'N/A',
+            value: ServiceStatus.NA,
+          },
+        ],
+      },
+      {
+        Header: Messages.services.columns.serviceName,
+        accessor: 'serviceName',
+        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
+          <ServiceIconWithText text={value} dbType={row.original.type} />
+        ),
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.nodeName,
+        accessor: 'nodeName',
+        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
+          <Link className={styles.link} href={getNodeLink(row.original)}>
+            {value}
+          </Link>
+        ),
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.monitoring,
+        accessor: 'agentsStatus',
+        width: '70px',
+        Cell: ({ value, row }) => (
+          <StatusLink type="services" strippedId={stripServiceId(row.original.serviceId)} agentsStatus={value} />
+        ),
+        type: FilterFieldTypes.RADIO_BUTTON,
+        options: [
+          {
+            label: MonitoringStatus.OK,
+            value: MonitoringStatus.OK,
+          },
+          {
+            label: MonitoringStatus.FAILED,
+            value: MonitoringStatus.FAILED,
+          },
+        ],
+      },
+      {
+        Header: Messages.services.columns.address,
+        accessor: 'address',
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.port,
+        accessor: 'port',
+        width: '100px',
+        type: FilterFieldTypes.TEXT,
+      },
+      getExpandAndActionsCol(getActions),
+    ],
+    [styles, getActions]
+  );
+
+  const renderSelectedSubRow = React.useCallback(
+    (row: Row<FlattenService>) => {
+      const labels = row.original.customLabels || {};
+      const labelKeys = Object.keys(labels);
+      const agents = row.original.agents || [];
+
+      return (
+        <DetailsRow>
+          {!!agents.length && (
+            <DetailsRow.Contents title={Messages.services.details.agents}>
+              <StatusBadge
+                strippedId={stripServiceId(row.original.serviceId)}
+                type={'services'}
+                agents={row.original.agents || []}
+              />
+            </DetailsRow.Contents>
+          )}
+          <DetailsRow.Contents title={Messages.services.details.serviceId}>
+            <span>{row.original.serviceId}</span>
+          </DetailsRow.Contents>
+          {!!labelKeys.length && (
+            <DetailsRow.Contents title={Messages.services.details.labels} fullRow>
+              <TagList
+                colorIndex={9}
+                className={styles.tagList}
+                tags={labelKeys.map((label) => `${label}=${labels![label]}`)}
+              />
+            </DetailsRow.Contents>
+          )}
+        </DetailsRow>
+      );
+    },
+    [styles.tagList]
+  );
+
+  return (
+    <Table
+      columns={columns}
+      data={flattenServices}
+      totalItems={flattenServices.length}
+      rowSelection
+      onRowSelection={onSelectionChange}
+      showPagination={showPagination}
+      pageSize={25}
+      allRowsSelectionMode="page"
+      emptyMessage={Messages.services.emptyTable}
+      pendingRequest={isLoading}
+      overlayClassName={styles.overlay}
+      renderExpandedRow={renderSelectedSubRow}
+      autoResetSelectedRows={false}
+      getRowId={useCallback((row: FlattenService) => row.serviceId, [])}
+      showFilter
+      tableKey={tableKey}
+    />
+  );
+};
+
+export default ServicesTable;
diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index e7ccb5d60891a..d92e2a61c19da 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -60,4 +60,17 @@ export const getStyles = ({ colors, spacing }: GrafanaTheme2) => ({
   link: css`
     color: ${colors.text.link};
   `,
+  clustersSwitch: css`
+    display: flex;
+    flex-direction: row-reverse;
+
+    & > label {
+      padding: 0;
+      padding-left: ${spacing(1)};
+    }
+  `,
+  technicalPreview: css`
+    margin-left: -${spacing(1.5)};
+    color: ${colors.text.secondary};
+  `,
 });
diff --git a/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx b/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx
index e213691f9f1ce..aad3a50dc9426 100644
--- a/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx
+++ b/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx
@@ -5,7 +5,7 @@ import { Icon, Tooltip, useTheme } from '@grafana/ui';
 import { Messages } from './TechnicalPreview.messages';
 import { getStyles } from './TechnicalPreview.styles';
 
-const ReadMoreLink = () => {
+export const ReadMoreLink = () => {
   const theme = useTheme();
   const styles = getStyles(theme);
 
@@ -25,7 +25,7 @@ export const TechnicalPreview = () => {
 
   return (
     <div className={styles.labelWrapper}>
-      <Tooltip placement="top" theme="info" content={<ReadMoreLink />}>
+      <Tooltip interactive placement="top" theme="info" content={<ReadMoreLink />}>
         <h1>
           <Icon name={'info-circle'} /> {Messages.labelText}
         </h1>