diff --git a/packages/frontend/src/routes/admin/articles/+page.svelte b/packages/frontend/src/routes/admin/articles/+page.svelte
index 85ee88b..d0f0e9c 100644
--- a/packages/frontend/src/routes/admin/articles/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -21,8 +20,7 @@
   let deleteTarget: Article | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/admin/comments/+page.svelte b/packages/frontend/src/routes/admin/comments/+page.svelte
index 1a63f5f..e128459 100644
--- a/packages/frontend/src/routes/admin/comments/+page.svelte
+++ b/packages/frontend/src/routes/admin/comments/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,8 +17,7 @@
   let deleteTarget: { id: number; comment: string } | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/admin/recordings/+page.svelte b/packages/frontend/src/routes/admin/recordings/+page.svelte
index e4fc3eb..1ec93d9 100644
--- a/packages/frontend/src/routes/admin/recordings/+page.svelte
+++ b/packages/frontend/src/routes/admin/recordings/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -19,8 +18,7 @@
   let deleteTarget: Recording | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index 9bc6e76..49fee63 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -16,8 +15,7 @@
 
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
   let deleteTarget: User | null = $state(null);
   let deleteOpen = $state(false);
diff --git a/packages/frontend/src/routes/admin/videos/+page.svelte b/packages/frontend/src/routes/admin/videos/+page.svelte
index 059eccd..8f13460 100644
--- a/packages/frontend/src/routes/admin/videos/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { page } from "$app/state";
   import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -18,8 +17,7 @@
   let deleteTarget: Video | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 728e85f..08cbb52 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -18,8 +17,7 @@
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   const featuredArticle = $derived(
diff --git a/packages/frontend/src/routes/models/+page.svelte b/packages/frontend/src/routes/models/+page.svelte
index 6e72e0e..3a278db 100644
--- a/packages/frontend/src/routes/models/+page.svelte
+++ b/packages/frontend/src/routes/models/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -15,8 +14,7 @@
 
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => { searchValue = data.search ?? ""; });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {
diff --git a/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte b/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
index 1bda2f4..7401d6a 100644
--- a/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
+++ b/packages/frontend/src/routes/play/components/device-mapping-dialog.svelte
@@ -16,7 +16,7 @@
   let { open, recordedDevices, connectedDevices, onConfirm, onCancel }: Props = $props();
 
   // Device mappings: recorded device name -> connected device
-  let mappings = $state(new SvelteMap<string, BluetoothDevice>());
+  let mappings = new SvelteMap<string, BluetoothDevice>();
 
   // Check if a connected device is compatible with a recorded device
   function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {
diff --git a/packages/frontend/src/routes/videos/+page.svelte b/packages/frontend/src/routes/videos/+page.svelte
index aaefef3..31924d7 100644
--- a/packages/frontend/src/routes/videos/+page.svelte
+++ b/packages/frontend/src/routes/videos/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { untrack } from "svelte";
   import { _ } from "svelte-i18n";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
@@ -18,10 +17,7 @@
   const timeAgo = new TimeAgo("en");
   const { data } = $props();
 
-  let searchValue = $state(untrack(() => data.search ?? ""));
-  $effect(() => {
-    searchValue = data.search ?? "";
-  });
+  let searchValue = $derived(data.search ?? "");
   let searchTimeout: ReturnType<typeof setTimeout>;
 
   function debounceSearch(value: string) {