diff --git a/src/routes/(app)/checklists/+page.svelte b/src/routes/(app)/checklists/+page.svelte
index 84c4851..7829124 100644
--- a/src/routes/(app)/checklists/+page.svelte
+++ b/src/routes/(app)/checklists/+page.svelte
@@ -3,7 +3,10 @@
 
 	let { data, form } = $props();
 	let showNewTemplate = $state(false);
-	let newItemText: Record<string, string> = $state({});
+	function resetForm(form: HTMLFormElement) {
+		const input = form.querySelector('input[name="text"]') as HTMLInputElement;
+		if (input) input.value = '';
+	}
 </script>
 
 <svelte:head>
@@ -95,11 +98,19 @@
 					</div>
 
 					<!-- Add item -->
-					<form method="POST" action="?/addItem" use:enhance
-						onsubmit={() => { newItemText[template.id] = ''; }}
+					<form method="POST" action="?/addItem" use:enhance={() => {
+							return async ({ update, result }) => {
+								await update();
+								if (result.type === 'success') {
+									const form = document.querySelector(`form[data-template="${template.id}"]`) as HTMLFormElement;
+									if (form) resetForm(form);
+								}
+							};
+						}}
+						data-template={template.id}
 						class="mt-2 flex gap-2">
 						<input type="hidden" name="templateId" value={template.id} />
-						<input type="text" name="text" required bind:value={newItemText[template.id]}
+						<input type="text" name="text" required
 							placeholder="Add item..."
 							class="flex-1 rounded-md border border-gray-200 px-3 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" />
 						<button type="submit" class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">Add</button>
diff --git a/src/routes/(app)/devices/[id]/+page.svelte b/src/routes/(app)/devices/[id]/+page.svelte
index 5d03bd5..f2e25be 100644
--- a/src/routes/(app)/devices/[id]/+page.svelte
+++ b/src/routes/(app)/devices/[id]/+page.svelte
@@ -11,7 +11,10 @@
 	let showLogForm = $state(false);
 	let showNewChecklist = $state(false);
 	let showImportChecklist = $state(false);
-	let newItemText: Record<string, string> = $state({});
+	function resetInput(formEl: HTMLFormElement) {
+		const input = formEl.querySelector('input[name="text"]') as HTMLInputElement;
+		if (input) input.value = '';
+	}
 </script>
 
 <svelte:head>
@@ -436,11 +439,19 @@
 								</div>
 
 								<!-- Add item -->
-								<form method="POST" action="?/addChecklistItem" use:enhance
-									onsubmit={() => { newItemText[checklist.id] = ''; }}
+								<form method="POST" action="?/addChecklistItem" use:enhance={() => {
+										return async ({ update, result }) => {
+											await update();
+											if (result.type === 'success') {
+												const form = document.querySelector(`form[data-checklist="${checklist.id}"]`) as HTMLFormElement;
+												if (form) resetInput(form);
+											}
+										};
+									}}
+									data-checklist={checklist.id}
 									class="mt-2 flex gap-2">
 									<input type="hidden" name="checklistId" value={checklist.id} />
-									<input type="text" name="text" required bind:value={newItemText[checklist.id]}
+									<input type="text" name="text" required
 										placeholder="Add item..."
 										class="flex-1 rounded-md border border-gray-200 px-2 py-1 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" />
 									<button type="submit" class="rounded-md px-2 py-1 text-sm text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20">