diff --git a/public/app/features/correlations/CorrelationsPage.tsx b/public/app/features/correlations/CorrelationsPage.tsx
index aad40039be2..a8ae0739c66 100644
--- a/public/app/features/correlations/CorrelationsPage.tsx
+++ b/public/app/features/correlations/CorrelationsPage.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { negate } from 'lodash';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { Status } from '@grafana/api-clients/rtkq/correlations/v0alpha1';
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
 import { CorrelationData, CorrelationsData, isFetchError, reportInteraction } from '@grafana/runtime';
@@ -34,14 +35,19 @@ type CorrelationsPageProps = {
   correlations?: CorrelationsData;
   isLoading: boolean;
   changePageFn?: (page: number) => void;
-  removeFn?: (params: RemoveCorrelationParams) => Promise<{
-    message: string;
-  }>;
+  removeFn?: (params: RemoveCorrelationParams) => Promise<
+    | {
+        message: string;
+      }
+    | Status
+  >;
   error?: Error;
 };
 
+const collator = new Intl.Collator();
+
 const sortDatasource: SortByFn<CorrelationData> = (a, b, column) =>
-  a.values[column].name.localeCompare(b.values[column].name);
+  collator.compare(a.values[column].name, b.values[column].name);
 
 const isCorrelationsReadOnly = (correlation: CorrelationData) => correlation.provisioned;
 
@@ -78,13 +84,15 @@ export default function CorrelationsPage(props: CorrelationsPageProps) {
 
   const handleDelete = useCallback(
     async (params: RemoveCorrelationParams, isLastRow: boolean) => {
-      await removeFn(params);
-      reportInteraction('grafana_correlations_deleted');
+      if (removeFn) {
+        await removeFn(params);
+        reportInteraction('grafana_correlations_deleted');
 
-      if (isLastRow) {
-        page.current--;
+        if (isLastRow) {
+          page.current--;
+        }
+        fetchCorrelations({ page: page.current });
       }
-      fetchCorrelations({ page: page.current });
     },
     [removeFn, fetchCorrelations]
   );
diff --git a/public/app/features/correlations/CorrelationsPageWrapper.tsx b/public/app/features/correlations/CorrelationsPageWrapper.tsx
index 15461182484..f300113c1ca 100644
--- a/public/app/features/correlations/CorrelationsPageWrapper.tsx
+++ b/public/app/features/correlations/CorrelationsPageWrapper.tsx
@@ -1,8 +1,10 @@
 import { useRef, useState } from 'react';
 
+import { useDeleteCorrelationMutation } from '@grafana/api-clients/rtkq/correlations/v0alpha1';
 import { config, CorrelationsData } from '@grafana/runtime';
 
 import CorrelationsPage from './CorrelationsPage';
+import { RemoveCorrelationParams } from './types';
 import { useCorrelations } from './useCorrelations';
 import { useCorrelationsK8s } from './useCorrelationsK8s';
 
@@ -21,17 +23,13 @@ function CorrelationsPageLegacy() {
 
 function CorrelationsPageAppPlatform() {
   // todo remove fake limit
-  /* const { currentData, isLoading, error } = useListCorrelationQuery({ limit: 10 });
-  const enrichedCorrelations = (correlations?: CorrelationList) => {
-    return correlations !== undefined
-      ? correlations.items.map((item) => toEnrichedCorrelationDataK8s(item)).filter((i) => i !== undefined)
-      : [];
-  }; */
+
   const [page, setPage] = useState(1);
   let totalItems = useRef(0);
 
   const limit = 10;
   const { currentData, isLoading, error, remainingItems } = useCorrelationsK8s(limit, page);
+  const [deleteCorrelation] = useDeleteCorrelationMutation();
   if (page === 1) {
     totalItems.current = remainingItems;
   }
@@ -55,6 +53,10 @@ function CorrelationsPageAppPlatform() {
       }}
       isLoading={isLoading}
       error={error as Error}
+      removeFn={(params: RemoveCorrelationParams) => {
+        const deleteData = deleteCorrelation({ name: params.uid });
+        return deleteData.unwrap();
+      }}
     />
   );
 }