diff --git a/frontend/src/lib/components/ConfirmDialog.svelte b/frontend/src/lib/components/ConfirmDialog.svelte
index 09d5af19..66f7e28a 100644
--- a/frontend/src/lib/components/ConfirmDialog.svelte
+++ b/frontend/src/lib/components/ConfirmDialog.svelte
@@ -18,7 +18,7 @@ $effect(() => {
 
 <dialog
 	bind:this={dialogEl}
-	class="max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg"
+	class="m-auto w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg backdrop:bg-black/50"
 	aria-labelledby="confirm-title"
 	oncancel={(e) => {
 		e.preventDefault();
@@ -42,16 +42,16 @@ $effect(() => {
 		<div class="flex items-center justify-end gap-3">
 			<button
 				type="button"
-				class="min-h-[44px] rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
+				class="min-h-[44px] cursor-pointer rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
 				onclick={() => service.settle(false)}
 			>
 				{opts.cancelLabel ?? m.btn_cancel()}
 			</button>
 			<button
 				type="button"
-				class="min-h-[44px] rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
-					? 'bg-danger text-danger-fg'
-					: 'bg-primary text-primary-fg'}"
+				class="min-h-[44px] cursor-pointer rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
+					? 'bg-danger text-danger-fg hover:bg-danger/80'
+					: 'bg-primary text-primary-fg hover:bg-primary/80'}"
 				onclick={() => service.settle(true)}
 			>
 				{opts.confirmLabel ?? m.btn_confirm()}