diff --git a/src/client/components/ConfirmDialog.ts b/src/client/components/ConfirmDialog.ts
index f92e2f14d..f2dcdbaf3 100644
--- a/src/client/components/ConfirmDialog.ts
+++ b/src/client/components/ConfirmDialog.ts
@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators.js";
 import { translateText } from "../Utils";
 
 /**
- * A reusable inline confirmation dialog.
+ * A reusable inline confirmation / acknowledgement dialog.
  *
  * Usage:
  * ```html
@@ -28,10 +28,16 @@ import { translateText } from "../Utils";
  */
 @customElement("confirm-dialog")
 export class ConfirmDialog extends LitElement {
+  @property() heading = "";
   @property() message = "";
   @property() variant: "danger" | "warning" = "danger";
   @property() textareaPlaceholder = "";
+  @property() confirmText = "";
   @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean }) showClose = false;
+  @property({ type: Boolean }) wide = false;
+  @property() buttons: "confirmCancel" | "confirmOnly" | "none" =
+    "confirmCancel";
 
   @state() private text = "";
 
@@ -74,14 +80,29 @@ export class ConfirmDialog extends LitElement {
 
     return html`
       <div
-        class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80"
+        class="fixed inset-0 z-[10020] flex items-center justify-center bg-black/80"
         @click=${(e: Event) => {
           if (e.target === e.currentTarget) this.handleCancel();
         }}
       >
         <div
-          class="mx-4 w-full max-w-sm p-6 rounded-2xl border ${borderColor} ${cardBg} shadow-2xl"
+          class="relative mx-4 w-full ${this.wide
+            ? "max-w-md"
+            : "max-w-sm"} p-6 rounded-2xl border ${borderColor} ${cardBg} shadow-2xl"
         >
+          ${this.showClose
+            ? html`<button
+                @click=${() => this.handleCancel()}
+                class="absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-lg text-xl leading-none text-white/50 hover:bg-white/10 hover:text-white transition-all"
+              >
+                ×
+              </button>`
+            : ""}
+          ${this.heading
+            ? html`<h2 class="text-lg font-bold text-white mb-2 pr-8">
+                ${this.heading}
+              </h2>`
+            : ""}
           <p class="text-sm font-medium ${textColor} mb-5">${this.message}</p>
           ${this.textareaPlaceholder
             ? html`<textarea
@@ -94,22 +115,26 @@ export class ConfirmDialog extends LitElement {
                 class="w-full px-3 py-2 mb-4 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/30 focus:outline-none focus:ring-2 focus:ring-amber-500/50 text-sm resize-none"
               ></textarea>`
             : ""}
-          <div class="flex gap-3">
-            <button
-              @click=${() => this.handleCancel()}
-              ?disabled=${this.disabled}
-              class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl bg-white/5 text-white/60 border border-white/10 hover:bg-white/10 hover:text-white/80 transition-all disabled:opacity-50 disabled:pointer-events-none"
-            >
-              ${translateText("common.cancel")}
-            </button>
-            <button
-              @click=${() => this.handleConfirm()}
-              ?disabled=${this.disabled}
-              class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl ${btnClass} transition-all disabled:opacity-50 disabled:pointer-events-none border-0"
-            >
-              ${translateText("common.confirm")}
-            </button>
-          </div>
+          ${this.buttons === "none"
+            ? ""
+            : html`<div class="flex gap-3">
+                ${this.buttons === "confirmCancel"
+                  ? html`<button
+                      @click=${() => this.handleCancel()}
+                      ?disabled=${this.disabled}
+                      class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl bg-white/5 text-white/60 border border-white/10 hover:bg-white/10 hover:text-white/80 transition-all disabled:opacity-50 disabled:pointer-events-none"
+                    >
+                      ${translateText("common.cancel")}
+                    </button>`
+                  : ""}
+                <button
+                  @click=${() => this.handleConfirm()}
+                  ?disabled=${this.disabled}
+                  class="flex-1 px-4 py-2.5 text-xs font-bold uppercase tracking-wider rounded-xl ${btnClass} transition-all disabled:opacity-50 disabled:pointer-events-none border-0"
+                >
+                  ${this.confirmText || translateText("common.confirm")}
+                </button>
+              </div>`}
         </div>
       </div>
     `;