diff --git a/src/components/Modals/PermissionModal.vue b/src/components/Modals/PermissionModal.vue
index cafe98caecfc434a49b94d4dbafb537afafba36c..a470e2fc5060b2b59c8b01612ed6cc5ad7bc9751 100644
--- a/src/components/Modals/PermissionModal.vue
+++ b/src/components/Modals/PermissionModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, watch, ref, computed } from "vue";
 import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
+import DeleteModal from "@/components/Modals/DeleteModal.vue";
 import { Modal } from "bootstrap";
 import dayjs from "dayjs";
 import type {
@@ -248,7 +249,7 @@ function formSubmit() {
  * @param bucketName Bucket to delete
  * @param uid ID of grantee of the permission
  */
-function deletePermission(bucketName: string, uid: string) {
+function confirmedDeletePermission(bucketName: string, uid: string) {
   if (!formState.loading) {
     formState.loading = true;
     BucketPermissionsService.bucketPermissionsDeletePermissionForBucket(
@@ -280,6 +281,15 @@ onMounted(() => {
 </script>
 
 <template>
+  <DeleteModal
+    :modalID="'delete-permission-modal' + randomIDSuffix"
+    modal-label="some-label"
+    object-name-delete="permission"
+    :back-modal-id="modalID"
+    @confirm-delete="
+      confirmedDeletePermission(permission.bucket_name, permission.uid)
+    "
+  />
   <div class="toast-container position-fixed top-0 end-0 p-3">
     <div
       role="alert"
@@ -329,7 +339,8 @@ onMounted(() => {
         fill="currentColor"
         class="me-2"
         :class="{ 'delete-icon': !formState.loading }"
-        @click="deletePermission(permission.bucket_name, permission.uid)"
+        data-bs-toggle="modal"
+        :data-bs-target="'#delete-permission-modal' + randomIDSuffix"
       />
       <bootstrap-icon
         v-if="formState.readonly && props.editable"