diff --git a/static/assets/style.css b/static/assets/style.css
index a9662d9..786654a 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -1,6 +1,4 @@
 @import 'tailwindcss';
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap');
 @import '@toolwind/anchors';
 
 @source "../../templates/**/*.gohtml";
diff --git a/templates/base.gohtml b/templates/base.gohtml
index 9338eb1..0bd313c 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -3,6 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap">
   {{/* page title injected from child template */}}
   <title>MyAnimeList: {{template "title" .}}</title>
   <link rel="manifest" href="/static/assets/manifest.json">
diff --git a/templates/components/filter_bar.gohtml b/templates/components/filter_bar.gohtml
index e01268a..b5c5437 100644
--- a/templates/components/filter_bar.gohtml
+++ b/templates/components/filter_bar.gohtml
@@ -30,7 +30,7 @@
     <input type="hidden" name="sfw" value="{{.SFW}}" data-sfw-value>
     {{range $g := .Genres}}<input type="hidden" name="genres" value="{{$g}}">{{end}}
     <label class="flex cursor-pointer items-center gap-2">
-      <input type="checkbox" class="sr-only" {{if .SFW}}checked{{end}} onchange="this.form.querySelector('[data-sfw-value]').value = this.checked; const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
+      <input id="filter-sfw" type="checkbox" class="sr-only" {{if .SFW}}checked{{end}} onchange="this.form.querySelector('[data-sfw-value]').value = this.checked; const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
       <div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if .SFW}}border-accent bg-accent{{else}}border-border bg-transparent{{end}}">
         <svg class="{{if not .SFW}}hidden {{end}}h-3 w-3 text-on-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
       </div>
@@ -57,7 +57,7 @@
           {{$genreID := .MalID}}
           {{$isSelected := hasGenre $genreID $selectedGenreIDs}}
           <label class="flex cursor-pointer items-center gap-3 px-2 py-1.5 text-sm text-foreground-muted hover:bg-surface-hover hover:text-foreground">
-            <input type="checkbox" class="sr-only" name="genres" value="{{.MalID}}" {{if $isSelected}}checked{{end}} onchange="const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
+            <input id="genre-{{.MalID}}" type="checkbox" class="sr-only" name="genres" value="{{.MalID}}" {{if $isSelected}}checked{{end}} onchange="const box = this.nextElementSibling; box.classList.toggle('border-accent', this.checked); box.classList.toggle('bg-accent', this.checked); box.classList.toggle('border-border', !this.checked); box.classList.toggle('bg-transparent', !this.checked); box.querySelector('svg').classList.toggle('hidden', !this.checked)">
             <div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if $isSelected}}border-accent bg-accent{{else}}border-border bg-transparent{{end}}">
               <svg class="{{if not $isSelected}}hidden {{end}}h-3 w-3 text-on-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
             </div>
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index 9259f0f..907682b 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -78,14 +78,14 @@
                 <div class="flex items-center justify-between px-5 py-2.5">
                   <span class="text-[15px] font-medium text-foreground">Autoplay</span>
                   <label class="relative inline-flex cursor-pointer items-center">
-                    <input type="checkbox" data-autoplay class="peer sr-only" checked />
+                    <input id="player-autoplay" type="checkbox" data-autoplay class="peer sr-only" checked />
                     <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-foreground-muted/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                   </label>
                 </div>
                 <div class="flex items-center justify-between px-5 py-2.5">
                   <span class="text-[15px] font-medium text-foreground">Auto-skip</span>
                   <label class="relative inline-flex cursor-pointer items-center">
-                    <input type="checkbox" data-autoskip class="peer sr-only" />
+                    <input id="player-autoskip" type="checkbox" data-autoskip class="peer sr-only" />
                     <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-foreground-muted/20 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                   </label>
                 </div>
@@ -101,11 +101,11 @@
                     </button>
                     <div class="hidden px-5 py-2 flex flex-col gap-1">
                       <span class="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">Subtitles</span>
-                      <select data-subtitle-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
+                      <select id="player-subtitle-select" data-subtitle-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
                     </div>
                     <div class="hidden px-5 py-2 flex flex-col gap-1">
                       <span class="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">Quality</span>
-                      <select data-quality-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
+                      <select id="player-quality-select" data-quality-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
                     </div>
                   </div>
                 </div>
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index 5615ef4..ae38d01 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -89,11 +89,11 @@
 
         <div class="px-4 py-4 flex flex-col gap-4">
           <div class="flex items-center gap-3">
-            <label class="text-xs text-foreground-muted w-12">Type</label>
+            <label for="segment-type-trigger" class="text-xs text-foreground-muted w-12">Type</label>
             <input type="hidden" data-segment-type-value value="ed" />
             <ui-dropdown class="relative block flex-1" data-align="left" data-width="w-full">
               <div data-trigger>
-                <button type="button" data-segment-type-trigger class="w-full flex items-center justify-between px-3 py-2 bg-background-button border border-border text-sm text-foreground hover:bg-surface-hover transition-colors">
+                <button id="segment-type-trigger" type="button" data-segment-type-trigger class="w-full flex items-center justify-between px-3 py-2 bg-background-button border border-border text-sm text-foreground hover:bg-surface-hover transition-colors">
                   <span data-segment-type-label>Ending (ED)</span>
                   <svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
                 </button>
@@ -179,7 +179,7 @@
         <div class="flex items-center justify-between">
           <span class="text-sm font-normal text-foreground-muted">Episodes</span>
           {{if gt $totalEpisodes 100}}
-            <input type="text" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 rounded border border-border text-foreground placeholder-foreground-muted focus:outline-none focus:border-accent" />
+            <input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 rounded border border-border text-foreground placeholder-foreground-muted focus:outline-none focus:border-accent" />
           {{end}}
         </div>
 
