diff --git a/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte b/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
index 03dbcb5..1c206b7 100644
--- a/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
+++ b/packages/frontend/src/lib/components/image-viewer/image-viewer.svelte
@@ -145,7 +145,7 @@
 {#if isViewerOpen}
   <div class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in">
     <!-- Backdrop -->
-    <div class="absolute inset-0 bg-black/95 backdrop-blur-xl" onclick={closeViewer}></div>
+    <button type="button" class="absolute inset-0 bg-black/95 backdrop-blur-xl cursor-default" onclick={closeViewer} aria-label="Close viewer"></button>
 
     <!-- Viewer Content -->
     <div class="relative w-[90vw] h-[90vh] flex flex-col animate-slide-up">
diff --git a/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte b/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
index 041e82a..5494508 100644
--- a/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
+++ b/packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte
@@ -23,11 +23,13 @@
     ...rest
   }: FileDropZoneProps = $props();
 
-  if (maxFiles !== undefined && fileCount === undefined) {
-    console.warn(
-      "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
-    );
-  }
+  $effect(() => {
+    if (maxFiles !== undefined && fileCount === undefined) {
+      console.warn(
+        "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
+      );
+    }
+  });
 
   let uploading = $state(false);
 
diff --git a/packages/frontend/src/routes/about/+page.svelte b/packages/frontend/src/routes/about/+page.svelte
index b1c1b59..2648db3 100644
--- a/packages/frontend/src/routes/about/+page.svelte
+++ b/packages/frontend/src/routes/about/+page.svelte
@@ -7,7 +7,7 @@
 
   const { data } = $props();
 
-  const stats = [
+  const stats = $derived([
     {
       icon: "icon-[ri--user-heart-line]",
       value: data.stats.viewers_count,
@@ -28,7 +28,7 @@
       value: $_("about.stats.yearsFormatted", { values: { years: 5 } }),
       label: $_("about.stats.experience"),
     },
-  ];
+  ]);
 
   const team = [
     {
diff --git a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
index 1086572..ead40b9 100644
--- a/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/[id]/+page.svelte
@@ -154,7 +154,9 @@
           poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
           controls
           class="w-full rounded-lg bg-black max-h-72 mb-2"
-        ></video>
+        >
+          <track kind="captions" />
+        </video>
       {/if}
       <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
     </div>
diff --git a/packages/frontend/src/routes/magazine/+page.svelte b/packages/frontend/src/routes/magazine/+page.svelte
index 0504f83..728e85f 100644
--- a/packages/frontend/src/routes/magazine/+page.svelte
+++ b/packages/frontend/src/routes/magazine/+page.svelte
@@ -22,8 +22,9 @@
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
-  const featuredArticle =
-    data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null;
+  const featuredArticle = $derived(
+    data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null,
+  );
 
   function debounceSearch(value: string) {
     clearTimeout(searchTimeout);
diff --git a/packages/frontend/src/routes/play/+page.svelte b/packages/frontend/src/routes/play/+page.svelte
index 1ec1564..19a9c0b 100644
--- a/packages/frontend/src/routes/play/+page.svelte
+++ b/packages/frontend/src/routes/play/+page.svelte
@@ -480,12 +480,22 @@
                   .padStart(2, "0")}
               </span>
               <div
+                role="slider"
+                tabindex="0"
+                aria-label="Seek"
+                aria-valuemin={0}
+                aria-valuemax={data.recording.duration}
+                aria-valuenow={playbackProgress}
                 class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
                 onclick={(e) => {
                   const rect = e.currentTarget.getBoundingClientRect();
                   const percentage = ((e.clientX - rect.left) / rect.width) * 100;
                   seek(percentage);
                 }}
+                onkeydown={(e) => {
+                  if (e.key === "ArrowRight") seek(((playbackProgress + 1) / data.recording.duration) * 100);
+                  else if (e.key === "ArrowLeft") seek(((playbackProgress - 1) / data.recording.duration) * 100);
+                }}
               >
                 <div
                   class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"
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 7401d6a..1bda2f4 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 = new SvelteMap<string, BluetoothDevice>();
+  let mappings = $state(new SvelteMap<string, BluetoothDevice>());
 
   // Check if a connected device is compatible with a recorded device
   function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {