diff --git a/.jules/palette.md b/.jules/palette.md
index 00f41cd..9cc85e1 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -1,3 +1,4 @@
 ## 2024-10-24 - Accessible Icon Props and Loading Button State
+
 **Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity.
 **Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements.
diff --git a/src/components/Record.svelte b/src/components/Record.svelte
index 913b790..770822d 100644
--- a/src/components/Record.svelte
+++ b/src/components/Record.svelte
@@ -29,6 +29,7 @@
 	$: disabled = !edit;
 	$: validator = getValidator(klass);
 	$: maxLength = 'maxLength' in validator.rules ? (validator.rules['maxLength'] as number) : 64;
+	$: dialogId = klass.toLowerCase().replace(/\s+/g, '-');
 
 	let edit = false;
 
@@ -55,13 +56,15 @@
 <div class="record-container {editMode ? 'edit' : ''}">
 	<Dialog
 		bind:open={dialogOpen}
-		aria-labelledby="confirmation-title"
-		aria-describedby="confirmation-content"
+		aria-labelledby={`confirmation-title-${dialogId}`}
+		aria-describedby={`confirmation-content-${dialogId}`}
 	>
-		<Title id="simple-title">Confirm action</Title>
-		<Content id="simple-content">Do you really want to remove the record?</Content>
+		<Title id={`confirmation-title-${dialogId}`}>Confirm action</Title>
+		<Content id={`confirmation-content-${dialogId}`}
+			>Do you really want to remove the record?</Content
+		>
 		<Actions>
-			<Button>
+			<Button action="close">
 				<Label>No</Label>
 			</Button>
 			<Button on:click={destroy}>