diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 96f0c425b..0ae5d9de1 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -34,7 +34,14 @@ import {
   Query,
 } from '@elastic/eui';
 import { difference } from 'lodash';
-import React, { Dispatch, ReactNode, SetStateAction, useCallback, useState } from 'react';
+import React, {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useState,
+  useContext,
+} from 'react';
 import { AppDependencies } from '../../../types';
 import { Action, DataObject, ActionGroupItem, ExpandedRowMapInterface } from '../../types';
 import {
@@ -54,6 +61,9 @@ import { useDeleteConfirmState } from '../../utils/delete-confirm-modal-utils';
 import { useContextMenuState } from '../../utils/context-menu';
 import { generateResourceName } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
+import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { DataSourceContext } from '../../app-router';
+import { createDataSourceQuery } from '../../../../utils/datasource-utils';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -182,6 +192,8 @@ export function PermissionList(props: AppDependencies) {
   const [selection, setSelection] = React.useState<PermissionListingItem[]>([]);
   const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMapInterface>({});
 
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
+
   // Modal state
   const [editModal, setEditModal] = useState<ReactNode>(null);
 
@@ -194,7 +206,10 @@ export function PermissionList(props: AppDependencies) {
   const fetchData = useCallback(async () => {
     try {
       setLoading(true);
-      const actionGroups = await fetchActionGroups(props.coreStart.http);
+      const actionGroups = await fetchActionGroups(
+        props.coreStart.http,
+        createDataSourceQuery(dataSource.id)
+      );
       setActionGroupDict(actionGroups);
       setPermissionList(await mergeAllPermissions(actionGroups));
     } catch (e) {
@@ -203,11 +218,11 @@ export function PermissionList(props: AppDependencies) {
     } finally {
       setLoading(false);
     }
-  }, [props.coreStart.http]);
+  }, [props.coreStart.http, dataSource.id]);
 
   React.useEffect(() => {
     fetchData();
-  }, [props.coreStart.http, fetchData]);
+  }, [props.coreStart.http, fetchData, dataSource.id]);
 
   const handleDelete = async () => {
     const groupsToDelete: string[] = selection.map((r) => r.name);
@@ -328,6 +343,12 @@ export function PermissionList(props: AppDependencies) {
 
   return (
     <>
+      <SecurityPluginTopNavMenu
+        {...props}
+        dataSourcePickerReadOnly={true}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
       <EuiPageHeader>
         <EuiTitle size="l">
           <h1>Permissions</h1>
diff --git a/public/apps/configuration/top-nav-menu.tsx b/public/apps/configuration/top-nav-menu.tsx
index ce2dfb1a0..a3422627b 100644
--- a/public/apps/configuration/top-nav-menu.tsx
+++ b/public/apps/configuration/top-nav-menu.tsx
@@ -16,7 +16,6 @@
 import React from 'react';
 import { DataSourceSelectableConfig } from 'src/plugins/data_source_management/public';
 import { DataSourceOption } from 'src/plugins/data_source_management/public/components/data_source_menu/types';
-import { PLUGIN_NAME } from '../../../common';
 import { AppDependencies } from '../types';
 
 export interface TopNavMenuProps extends AppDependencies {
diff --git a/public/apps/configuration/utils/action-groups-utils.tsx b/public/apps/configuration/utils/action-groups-utils.tsx
index 048448ead..f5d41f8bf 100644
--- a/public/apps/configuration/utils/action-groups-utils.tsx
+++ b/public/apps/configuration/utils/action-groups-utils.tsx
@@ -13,7 +13,7 @@
  *   permissions and limitations under the License.
  */
 
-import { HttpStart } from 'opensearch-dashboards/public';
+import { HttpStart, HttpFetchQuery } from 'opensearch-dashboards/public';
 import { map } from 'lodash';
 import { API_ENDPOINT_ACTIONGROUPS, CLUSTER_PERMISSIONS, INDEX_PERMISSIONS } from '../constants';
 import { DataObject, ActionGroupItem, ActionGroupUpdate, ObjectsMessage } from '../types';
@@ -29,10 +29,14 @@ export interface PermissionListingItem {
   hasIndexPermission: boolean;
 }
 
-export async function fetchActionGroups(http: HttpStart): Promise<DataObject<ActionGroupItem>> {
+export async function fetchActionGroups(
+  http: HttpStart,
+  query: HttpFetchQuery
+): Promise<DataObject<ActionGroupItem>> {
   const actiongroups = await httpGet<ObjectsMessage<ActionGroupItem>>({
     http,
     url: API_ENDPOINT_ACTIONGROUPS,
+    query,
   });
   return actiongroups.data;
 }
@@ -50,8 +54,11 @@ export function transformActionGroupsToListingFormat(
   }));
 }
 
-export async function fetchActionGroupListing(http: HttpStart): Promise<PermissionListingItem[]> {
-  return transformActionGroupsToListingFormat(await fetchActionGroups(http));
+export async function fetchActionGroupListing(
+  http: HttpStart,
+  query: HttpFetchQuery
+): Promise<PermissionListingItem[]> {
+  return transformActionGroupsToListingFormat(await fetchActionGroups(http, query));
 }
 
 function getClusterSinglePermissions(): PermissionListingItem[] {
@@ -76,8 +83,11 @@ function getIndexSinglePermissions(): PermissionListingItem[] {
   }));
 }
 
-export async function getAllPermissionsListing(http: HttpStart): Promise<PermissionListingItem[]> {
-  return mergeAllPermissions(await fetchActionGroups(http));
+export async function getAllPermissionsListing(
+  http: HttpStart,
+  query: HttpFetchQuery
+): Promise<PermissionListingItem[]> {
+  return mergeAllPermissions(await fetchActionGroups(http, query));
 }
 
 export async function mergeAllPermissions(