diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.html b/src-ui/src/app/components/admin/users-groups/users-groups.component.html
index 3f91842d4..826599f8a 100644
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.html
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.html
@@ -33,64 +33,74 @@
             <div class="btn-group">
               <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
                 <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+              </button>
+              <pngx-confirm-button
+                label="Delete"
+                i18n-label
+                (confirm)="deleteUser(user)"
+                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }"
+                buttonClasses="btn-sm btn-outline-danger"
+                iconName="trash">
+              </pngx-confirm-button>
+            </div>
+          </div>
+        </div>
+      </li>
+    }
+  </ul>
+}
+
+@if (groups) {
+  <h4 class="mt-4 d-flex">
+    <ng-container i18n>Groups</ng-container>
+    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
+      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
+    </button>
+  </h4>
+  @if (groups.length > 0) {
+    <ul class="list-group">
+      <li class="list-group-item">
+        <div class="row">
+          <div class="col" i18n>Name</div>
+          <div class="col"></div>
+          <div class="col"></div>
+          <div class="col" i18n>Actions</div>
+        </div>
+      </li>
+      @for (group of groups; track group) {
+        <li class="list-group-item">
+          <div class="row">
+            <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
+            <div class="col"></div>
+            <div class="col"></div>
+            <div class="col">
+              <div class="btn-group">
+                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
+                  <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
                 </button>
-                <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                  </button>
-                </div>
+                <pngx-confirm-button
+                  label="Delete"
+                  i18n-label
+                  (confirm)="deleteGroup(group)"
+                  *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }"
+                  buttonClasses="btn-sm btn-outline-danger"
+                  iconName="trash">
+                </pngx-confirm-button>
               </div>
             </div>
-          </li>
-        }
-      </ul>
-    }
-
-    @if (groups) {
-      <h4 class="mt-4 d-flex">
-        <ng-container i18n>Groups</ng-container>
-        <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
-          <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
-        </button>
-      </h4>
-      @if (groups.length > 0) {
-        <ul class="list-group">
-          <li class="list-group-item">
-            <div class="row">
-              <div class="col" i18n>Name</div>
-              <div class="col"></div>
-              <div class="col"></div>
-              <div class="col" i18n>Actions</div>
-            </div>
-          </li>
-          @for (group of groups; track group) {
-            <li class="list-group-item">
-              <div class="row">
-                <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
-                <div class="col"></div>
-                <div class="col"></div>
-                <div class="col">
-                  <div class="btn-group">
-                    <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
-                      <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
-                      </button>
-                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                        <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              }
-              @if (groups.length === 0) {
-                <li class="list-group-item" i18n>No groups defined</li>
-              }
-            </ul>
-          }
-        }
-
-        @if (!users || !groups) {
-          <div>
-            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-            <div class="visually-hidden" i18n>Loading...</div>
           </div>
-        }
+        </li>
+      }
+      @if (groups.length === 0) {
+        <li class="list-group-item" i18n>No groups defined</li>
+      }
+    </ul>
+  }
+}
+
+@if (!users || !groups) {
+  <div>
+    <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+    <div class="visually-hidden" i18n>Loading...</div>
+  </div>
+}
diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts b/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts
index 79bc569dd..2e8b3fdad 100644
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts
@@ -44,6 +44,8 @@ import { UsersAndGroupsComponent } from './users-groups.component'
 import { User } from 'src/app/data/user'
 import { Group } from 'src/app/data/group'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { By } from '@angular/platform-browser'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 
 const users = [
   { id: 1, username: 'user1', is_superuser: false },
@@ -83,6 +85,7 @@ describe('UsersAndGroupsComponent', () => {
         PermissionsUserComponent,
         PermissionsGroupComponent,
         IfOwnerDirective,
+        ConfirmButtonComponent,
       ],
       providers: [CustomDatePipe, DatePipe, PermissionsGuard],
       imports: [
@@ -160,10 +163,9 @@ describe('UsersAndGroupsComponent', () => {
 
   it('should support delete user, show error if needed', () => {
     completeSetup()
-    let modal: NgbModalRef
-    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
-    component.deleteUser(users[0])
-    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
+    const deleteButton = fixture.debugElement.query(
+      By.directive(ConfirmButtonComponent)
+    )
     const deleteSpy = jest.spyOn(userService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@@ -171,10 +173,10 @@ describe('UsersAndGroupsComponent', () => {
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting user'))
     )
-    deleteDialog.confirm()
-    expect(toastErrorSpy).toBeCalled()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    expect(toastErrorSpy).toHaveBeenCalled()
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteDialog.confirm()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(listAllSpy).toHaveBeenCalled()
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted user')
   })
@@ -218,10 +220,9 @@ describe('UsersAndGroupsComponent', () => {
 
   it('should support delete group, show error if needed', () => {
     completeSetup()
-    let modal: NgbModalRef
-    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
-    component.deleteGroup(users[0])
-    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
+    const deleteButton = fixture.debugElement.queryAll(
+      By.directive(ConfirmButtonComponent)
+    )[2]
     const deleteSpy = jest.spyOn(groupService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@@ -229,10 +230,10 @@ describe('UsersAndGroupsComponent', () => {
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting group'))
     )
-    deleteDialog.confirm()
-    expect(toastErrorSpy).toBeCalled()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    expect(toastErrorSpy).toHaveBeenCalled()
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteDialog.confirm()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(listAllSpy).toHaveBeenCalled()
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted group')
   })
diff --git a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts
index f049677ab..9d0b30f44 100644
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts
@@ -108,28 +108,16 @@ export class UsersAndGroupsComponent
   }
 
   deleteUser(user: User) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    modal.componentInstance.title = $localize`Confirm delete user account`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete this user account.`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
-    modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Proceed`
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
-      this.usersService.delete(user).subscribe({
-        next: () => {
-          modal.close()
-          this.toastService.showInfo($localize`Deleted user`)
-          this.usersService.listAll().subscribe((r) => {
-            this.users = r.results
-          })
-        },
-        error: (e) => {
-          this.toastService.showError($localize`Error deleting user.`, e)
-        },
-      })
+    this.usersService.delete(user).subscribe({
+      next: () => {
+        this.toastService.showInfo($localize`Deleted user`)
+        this.usersService.listAll().subscribe((r) => {
+          this.users = r.results
+        })
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error deleting user.`, e)
+      },
     })
   }
 
@@ -158,28 +146,16 @@ export class UsersAndGroupsComponent
   }
 
   deleteGroup(group: Group) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    modal.componentInstance.title = $localize`Confirm delete user group`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete this user group.`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
-    modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Proceed`
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
-      this.groupsService.delete(group).subscribe({
-        next: () => {
-          modal.close()
-          this.toastService.showInfo($localize`Deleted group`)
-          this.groupsService.listAll().subscribe((r) => {
-            this.groups = r.results
-          })
-        },
-        error: (e) => {
-          this.toastService.showError($localize`Error deleting group.`, e)
-        },
-      })
+    this.groupsService.delete(group).subscribe({
+      next: () => {
+        this.toastService.showInfo($localize`Deleted group`)
+        this.groupsService.listAll().subscribe((r) => {
+          this.groups = r.results
+        })
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error deleting group.`, e)
+      },
     })
   }