diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index e0bfb31..03dcbe1 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -9,7 +9,7 @@
 
 	let { open, onToggle, counts }: Props = $props();
 
-	const navItems = [
+	const navItems = $derived([
 		{
 			href: '/',
 			label: 'Dashboard',
@@ -47,7 +47,7 @@
 			label: 'Gallery',
 			icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
 		}
-	];
+	]);
 </script>
 
 <aside
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index aac9b60..4e53317 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -19,6 +19,7 @@
 			<button
 				onclick={() => (sidebarOpen = !sidebarOpen)}
 				class="rounded-md p-1.5 text-gray-500 hover:bg-gray-100 lg:hidden dark:text-gray-400 dark:hover:bg-gray-700"
+				aria-label="Toggle sidebar"
 			>
 				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
diff --git a/src/routes/(app)/components/[id]/+page.svelte b/src/routes/(app)/components/[id]/+page.svelte
index 684e437..f519573 100644
--- a/src/routes/(app)/components/[id]/+page.svelte
+++ b/src/routes/(app)/components/[id]/+page.svelte
@@ -2,7 +2,7 @@
 	import { formatDate, timeAgo } from '$lib/utils/date.js';
 
 	let { data } = $props();
-	const c = data.component;
+	const c = $derived(data.component);
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/components/[id]/edit/+page.svelte b/src/routes/(app)/components/[id]/edit/+page.svelte
index 5401eab..c4b53c5 100644
--- a/src/routes/(app)/components/[id]/edit/+page.svelte
+++ b/src/routes/(app)/components/[id]/edit/+page.svelte
@@ -3,7 +3,7 @@
 	import { COMPONENT_TYPES, COMPONENT_CONDITIONS } from '$lib/constants.js';
 
 	let { data, form } = $props();
-	const c = data.component;
+	const c = $derived(data.component);
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/devices/[id]/+page.svelte b/src/routes/(app)/devices/[id]/+page.svelte
index 478c989..80102b3 100644
--- a/src/routes/(app)/devices/[id]/+page.svelte
+++ b/src/routes/(app)/devices/[id]/+page.svelte
@@ -498,7 +498,7 @@
 									</select>
 									<input type="text" name="unit" placeholder="Unit"
 										class="w-16 rounded-md border border-gray-200 px-2 py-1 text-xs 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">
+									<button type="submit" aria-label="Add item" 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">
 										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 										</svg>
diff --git a/src/routes/(app)/devices/[id]/edit/+page.svelte b/src/routes/(app)/devices/[id]/edit/+page.svelte
index 8f10471..20d8668 100644
--- a/src/routes/(app)/devices/[id]/edit/+page.svelte
+++ b/src/routes/(app)/devices/[id]/edit/+page.svelte
@@ -5,12 +5,12 @@
 
 	let { data, form } = $props();
 
-	const d = data.device;
-	const cd = data.computerDetails;
-	let category = $state(form?.values?.category ?? d.category);
-	let brand = $state(String(form?.values?.brand ?? d.brand ?? ''));
-	let model = $state(String(form?.values?.model ?? d.model ?? ''));
-	const existingVoltages = (d.voltage ?? '').split(',').map((v: string) => v.trim()).filter(Boolean);
+	const d = $derived(data.device);
+	const cd = $derived(data.computerDetails);
+	let category = $state(form?.values?.category as string ?? data.device.category);
+	let brand = $state(String(form?.values?.brand ?? data.device.brand ?? ''));
+	let model = $state(String(form?.values?.model ?? data.device.model ?? ''));
+	const existingVoltages = $derived((d.voltage ?? '').split(',').map((v: string) => v.trim()).filter(Boolean));
 </script>
 
 <svelte:head>
diff --git a/svelte.config.js b/svelte.config.js
index d1fedcb..e6d4807 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,6 +3,13 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	compilerOptions: {
+		warningFilter: (warning) => {
+			// Intentional: form inputs initialize from props once, then diverge
+			if (warning.code === 'state_referenced_locally') return false;
+			return true;
+		}
+	},
 	preprocess: vitePreprocess(),
 	kit: {
 		adapter: adapter({