diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7c34dc69b..214f36854 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,7 @@
             "name": "fam-frontend",
             "version": "0.0.0",
             "dependencies": {
-                "@bcgov-nr/nr-theme": "^1.8.4",
+                "@bcgov-nr/nr-theme": "^1.8.5",
                 "@carbon/icons-vue": "^10.72.1",
                 "aws-amplify": "^5.3.6",
                 "axios": "1.6.5",
@@ -7638,9 +7638,9 @@
             }
         },
         "node_modules/@bcgov-nr/nr-theme": {
-            "version": "1.8.4",
-            "resolved": "https://registry.npmjs.org/@bcgov-nr/nr-theme/-/nr-theme-1.8.4.tgz",
-            "integrity": "sha512-otXy8RsKZ1GdMIGlJRP5XvY5AdxkkNFI74DQYJ4hpz4ED7XYDpDM9Ab4C+w935HmWpAtaTMX/1W6f6nA8PAYyw=="
+            "version": "1.8.5",
+            "resolved": "https://registry.npmjs.org/@bcgov-nr/nr-theme/-/nr-theme-1.8.5.tgz",
+            "integrity": "sha512-J+Hg/7RvzxmqL6nRCB8YUnNMiHm63VzTQ8i8Q9j/2NgDL8YjovcZb8fOoI8QTFeuw3DswV4Bb48w7RAM4OpGxQ=="
         },
         "node_modules/@bcoe/v8-coverage": {
             "version": "0.2.3",
diff --git a/frontend/package.json b/frontend/package.json
index 397b41c48..dd7243757 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,7 @@
         "test-coverage": "vitest run --coverage"
     },
     "dependencies": {
-        "@bcgov-nr/nr-theme": "^1.8.4",
+        "@bcgov-nr/nr-theme": "^1.8.5",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
         "axios": "1.6.5",
diff --git a/frontend/src/components/managePermissions/ConfirmDialogText.vue b/frontend/src/components/managePermissions/ConfirmDialogText.vue
index 97c28612b..ffd306031 100644
--- a/frontend/src/components/managePermissions/ConfirmDialogText.vue
+++ b/frontend/src/components/managePermissions/ConfirmDialogText.vue
@@ -8,6 +8,11 @@ const props = defineProps({
     userName: {
         type: String,
         required: true
+    },
+    customMsg: {
+        type: String,
+        required: false,
+        default: 'access'
     }
 });
 </script>
@@ -15,7 +20,7 @@ const props = defineProps({
 <template>
     <p>
         Are you sure you want to remove
-        <strong>{{ props.role }}</strong> access to
+        <strong>{{ props.role }}</strong> {{ props.customMsg }} from
         <strong>{{ props.userName }}</strong> in
         <strong>{{ selectedApplicationDisplayText }}</strong>
     </p>
diff --git a/frontend/src/components/managePermissions/ManagePermissions.vue b/frontend/src/components/managePermissions/ManagePermissions.vue
index 0db6798c9..5c0ac63a9 100644
--- a/frontend/src/components/managePermissions/ManagePermissions.vue
+++ b/frontend/src/components/managePermissions/ManagePermissions.vue
@@ -26,11 +26,12 @@ import type {
     FamAppAdminGetResponse,
 } from 'fam-admin-mgmt-api/model';
 import {
-    deletAndRefreshUserRoleAssignments,
+    deleteAndRefreshUserRoleAssignments,
     deleteAndRefreshApplicationAdmin,
     fetchUserRoleAssignments,
     fetchApplicationAdmins,
     fetchDelegatedAdmins,
+    deleteAndRefreshDelegatedAdmin,
 } from '@/services/fetchData';
 import { Severity } from '@/enum/SeverityEnum';
 import { IconSize } from '@/enum/IconEnum';
@@ -94,14 +95,14 @@ const deleteUserRoleAssignment = async (
     assignment: FamApplicationUserRoleAssignmentGet
 ) => {
     try {
-        userRoleAssignments.value = await deletAndRefreshUserRoleAssignments(
+        userRoleAssignments.value = await deleteAndRefreshUserRoleAssignments(
             assignment.user_role_xref_id,
             assignment.role.application_id
         );
 
         setNotificationMsg(
             Severity.Success,
-            `You removed ${assignment.role.role_name} access to ${assignment.user.user_name}`
+            `You removed ${assignment.role.role_name} access from ${assignment.user.user_name}`
         );
     } catch (error: any) {
         setNotificationMsg(
@@ -128,6 +129,26 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
         );
     }
 };
+
+const deleteDelegatedAdminAssignment = async (
+    delegatedAdminAssignment: FamAccessControlPrivilegeGetResponse
+) => {
+    try {
+        delegatedAdmins.value = await deleteAndRefreshDelegatedAdmin(
+            delegatedAdminAssignment.access_control_privilege_id
+        );
+
+        setNotificationMsg(
+            Severity.Success,
+            `You removed ${delegatedAdminAssignment.role.role_name} privilege from ${delegatedAdminAssignment.user.user_name}`
+        );
+    } catch (error: any) {
+        setNotificationMsg(
+            Severity.Error,
+            `An error has occured. ${error.response.data.detail.description}`
+        );
+    }
+};
 </script>
 
 <template>
@@ -211,6 +232,9 @@ const deleteAppAdmin = async (admin: FamAppAdminGetResponse) => {
                     <DelegatedAdminTable
                         :loading="isLoading()"
                         :delegatedAdmins="delegatedAdmins || []"
+                        @deleteDelegatedAdminAssignment="
+                            deleteDelegatedAdminAssignment
+                        "
                     />
                 </TabPanel>
             </TabView>
diff --git a/frontend/src/components/managePermissions/table/DelegatedAdminTable.vue b/frontend/src/components/managePermissions/table/DelegatedAdminTable.vue
index c66b9e743..53a1298c8 100644
--- a/frontend/src/components/managePermissions/table/DelegatedAdminTable.vue
+++ b/frontend/src/components/managePermissions/table/DelegatedAdminTable.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, type PropType } from 'vue';
+import { ref, reactive, type PropType } from 'vue';
 import { FilterMatchMode } from 'primevue/api';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
+import { useConfirm } from 'primevue/useconfirm';
+import ConfirmDialog from 'primevue/confirmdialog';
 
 import { routeItems } from '@/router/routeItem';
 import {
@@ -11,8 +13,14 @@ import {
     TABLE_ROWS_PER_PAGE,
 } from '@/store/Constants';
 import DataTableHeader from '@/components/managePermissions/table/DataTableHeader.vue';
+import { IconSize } from '@/enum/IconEnum';
 import type { FamAccessControlPrivilegeGetResponse } from 'fam-admin-mgmt-api/model';
 
+type emit = (
+    e: 'deleteDelegatedAdminAssignment',
+    item: FamAccessControlPrivilegeGetResponse
+) => void;
+
 const props = defineProps({
     loading: {
         type: Boolean,
@@ -50,18 +58,45 @@ const delegatedAdminFilters = ref({
 const delegatedAdminSearchChange = (newvalue: string) => {
     delegatedAdminFilters.value.global.value = newvalue;
 };
+
+const confirm = useConfirm();
+
+const emit = defineEmits<emit>();
+
+const confirmDeleteData = reactive({
+    adminName: '',
+    role: '',
+});
+
+const deleteDelegatedAdmin = (
+    delegatedAdmin: FamAccessControlPrivilegeGetResponse
+) => {
+    confirmDeleteData.adminName = delegatedAdmin.user.user_name;
+    confirmDeleteData.role = delegatedAdmin.role.parent_role
+        ? delegatedAdmin.role.parent_role.role_name
+        : delegatedAdmin.role.role_name;
+    confirm.require({
+        group: 'deleteDelegatedAdmin',
+        header: 'Remove Privilege',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Remove',
+        accept: () => {
+            emit('deleteDelegatedAdminAssignment', delegatedAdmin);
+        },
+    });
+};
 </script>
 
 <template>
-    <!-- Hidden until functionality is available
-    <ConfirmDialog group="deleteAdmin">
+    <ConfirmDialog group="deleteDelegatedAdmin">
         <template #message>
-            <ConfirmDialogtext
-                :userName=""
-                :role=""
+            <ConfirmDialogText
+                :userName="confirmDeleteData.adminName"
+                :role="confirmDeleteData.role"
+                customMsg="privilege"
             />
         </template>
-    </ConfirmDialog> -->
+    </ConfirmDialog>
     <div class="data-table-container">
         <div class="custom-data-table">
             <DataTableHeader
@@ -127,12 +162,15 @@ const delegatedAdminSearchChange = (newvalue: string) => {
                 </Column>
                 <Column header="Action">
                     <template #body="{ data }">
-                        <!-- Hidden until functionality is available
-                            <button
-                                class="btn btn-icon"
-                            >
-                                <Icon icon="edit" :size="IconSize.small"/>
-                            </button> -->
+                        <button
+                            class="btn btn-icon"
+                            @click="deleteDelegatedAdmin(data)"
+                        >
+                            <Icon
+                                icon="trash-can"
+                                :size="IconSize.small"
+                            />
+                        </button>
                     </template>
                 </Column>
             </DataTable>
diff --git a/frontend/src/services/fetchData.ts b/frontend/src/services/fetchData.ts
index 139c1f7c0..4834e529e 100644
--- a/frontend/src/services/fetchData.ts
+++ b/frontend/src/services/fetchData.ts
@@ -8,6 +8,7 @@ import {
     AdminMgmtApiService,
 } from '@/services/ApiServiceFactory';
 import FamLoginUserState from '@/store/FamLoginUserState';
+import { selectedApplicationId } from '@/store/ApplicationState';
 
 // --- Fetching data (from backend)
 
@@ -43,7 +44,7 @@ export const fetchUserRoleAssignments = async (
  * @param userRoleXrefId id to delete fam_user_role_assignment record.
  * @param applicationId id to fetch and refresh fam_user_role_assignment records with the applicationId.
  */
-export const deletAndRefreshUserRoleAssignments = async (
+export const deleteAndRefreshUserRoleAssignments = async (
     userRoleXrefId: number,
     applicationId: number
 ): Promise<FamApplicationUserRoleAssignmentGet[]> => {
@@ -125,3 +126,19 @@ export const fetchDelegatedAdmins = async (
     return delegatedAdmins;
 
 };
+
+/**
+ * This will call api to delete delegatedAdminPrivilege record from backend and fetch again
+ * to refresh the state.
+ * @param accessPrivilegegId id to delete delegated admin accesss record.
+ */
+export const deleteAndRefreshDelegatedAdmin = async (
+    accessPrivilegegId: number
+): Promise<FamAccessControlPrivilegeGetResponse[]> => {
+    await AdminMgmtApiService.delegatedAdminApi.deleteAccessControlPrivilege(
+        accessPrivilegegId
+    );
+    // When deletion is successful, refresh (fetch) for frontend state.
+    return fetchDelegatedAdmins(selectedApplicationId.value);
+};
+