diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
index acf5bf980..a803aae9c 100644
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
@@ -29,21 +29,16 @@
           <div class="btn-group">
             <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
               <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)="deleteField(field)"
-              *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }"
-              buttonClasses="btn-sm btn-outline-danger"
-              iconName="trash">
-            </pngx-confirm-button>
+              </button>
+              <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
+                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </li>
-  }
-  @if (fields.length === 0) {
-    <li class="list-group-item" i18n>No fields defined.</li>
-  }
-</ul>
+        </li>
+      }
+      @if (fields.length === 0) {
+        <li class="list-group-item" i18n>No fields defined.</li>
+      }
+    </ul>
diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts
index bde7bf964..8797d6803 100644
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts
@@ -21,7 +21,6 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 
 const fields: CustomField[] = [
   {
@@ -50,7 +49,6 @@ describe('CustomFieldsComponent', () => {
         IfPermissionsDirective,
         PageHeaderComponent,
         ConfirmDialogComponent,
-        ConfirmButtonComponent,
       ],
       providers: [
         {
@@ -139,22 +137,27 @@ describe('CustomFieldsComponent', () => {
   })
 
   it('should support delete, show notification on error / success', () => {
-    const deleteButton = fixture.debugElement.query(
-      By.directive(ConfirmButtonComponent)
-    )
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const deleteSpy = jest.spyOn(customFieldsService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[4]
+    deleteButton.triggerEventHandler('click')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog = modal.componentInstance as ConfirmDialogComponent
+
     // fail first
     deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting')))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    editDialog.confirmClicked.emit()
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(reloadSpy).not.toHaveBeenCalled()
 
     // succeed
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
+    editDialog.confirmClicked.emit()
     expect(reloadSpy).toHaveBeenCalled()
   })
 })
diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
index b427b8c2b..33f2751a9 100644
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
@@ -65,15 +65,27 @@ export class CustomFieldsComponent
   }
 
   deleteField(field: CustomField) {
-    this.customFieldsService.delete(field).subscribe({
-      next: () => {
-        this.toastService.showInfo($localize`Deleted field`)
-        this.customFieldsService.clearCache()
-        this.reload()
-      },
-      error: (e) => {
-        this.toastService.showError($localize`Error deleting field.`, e)
-      },
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete field`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this field.`
+    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.customFieldsService.delete(field).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showInfo($localize`Deleted field`)
+          this.customFieldsService.clearCache()
+          this.reload()
+        },
+        error: (e) => {
+          this.toastService.showError($localize`Error deleting field.`, e)
+        },
+      })
     })
   }