diff --git a/static/dedupe.ts b/static/dedupe.ts
new file mode 100644
index 0000000..4fba844
--- /dev/null
+++ b/static/dedupe.ts
@@ -0,0 +1,18 @@
+const dedupe = (): void => {
+  const script = document.currentScript as HTMLScriptElement | null
+  if (!script) return
+  const containerId = script.getAttribute('data-container')
+  const container = containerId ? document.getElementById(containerId) : document
+  if (!container) return
+  const seen = new Set<string>()
+  container.querySelectorAll('[data-id]').forEach((item) => {
+    const id = item.getAttribute('data-id')
+    if (id && seen.has(id)) {
+      item.remove()
+    } else if (id) {
+      seen.add(id)
+    }
+  })
+}
+
+dedupe()
diff --git a/static/sort_filter.ts b/static/sort_filter.ts
new file mode 100644
index 0000000..4bfe270
--- /dev/null
+++ b/static/sort_filter.ts
@@ -0,0 +1,23 @@
+const initSortFilter = (): void => {
+  const sortSelect = document.getElementById('sort-select') as HTMLSelectElement | null
+  const orderSelect = document.getElementById('order-select') as HTMLSelectElement | null
+
+  const submitForm = (): void => {
+    const form = document.getElementById('sort-form') as HTMLFormElement | null
+    if (form) form.submit()
+  }
+
+  sortSelect?.addEventListener('change', () => {
+    const input = document.getElementById('sort-input') as HTMLInputElement | null
+    if (input) input.value = sortSelect.value
+    submitForm()
+  })
+
+  orderSelect?.addEventListener('change', () => {
+    const input = document.getElementById('order-input') as HTMLInputElement | null
+    if (input) input.value = orderSelect.value
+    submitForm()
+  })
+}
+
+document.addEventListener('DOMContentLoaded', initSortFilter)
diff --git a/web/components/anime_list.templ b/web/components/anime_list.templ
index 4b3e3b0..bec95db 100644
--- a/web/components/anime_list.templ
+++ b/web/components/anime_list.templ
@@ -14,19 +14,7 @@ templ InfiniteAnimeList(animes []jikan.Anime, watchlistStatuses map[int]string,
 	if hasNext {
 		<div class="col-span-full h-px w-full" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
 	}
-	<script data-container={ containerID }>
-		const containerId = document.currentScript.getAttribute('data-container');
-		const container = document.getElementById(containerId) || document;
-		const seen = new Set();
-		container.querySelectorAll('[data-id]').forEach(item => {
-			const id = item.getAttribute('data-id');
-			if (id && seen.has(id)) {
-				item.remove();
-			} else if (id) {
-				seen.add(id);
-			}
-		});
-	</script>
+	<script src="/dist/dedupe.js" data-container={ containerID } defer></script>
 }
 
 templ CatalogItem(anime jikan.Anime, watchlistStatus string) {
diff --git a/web/components/sort_filter.templ b/web/components/sort_filter.templ
index cda2463..745f07c 100644
--- a/web/components/sort_filter.templ
+++ b/web/components/sort_filter.templ
@@ -11,14 +11,14 @@ templ SortFilter(opts SortFilterOptions) {
 	<div class="mb-4 flex flex-wrap items-center gap-3 bg-(--panel) p-3 max-lg:flex-col max-lg:items-start max-lg:gap-2">
 		<div class="flex items-center gap-2">
 			<label for="sort-select" class="text-xs text-(--text-muted)">Sort by</label>
-			<select id="sort-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
+			<select id="sort-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)">
 				<option value="date" selected?={ opts.Sort == "date" }>Date added</option>
 				<option value="title" selected?={ opts.Sort == "title" }>Title</option>
 			</select>
 		</div>
 		<div class="flex items-center gap-2">
 			<label for="order-select" class="text-xs text-(--text-muted)">Order</label>
-			<select id="order-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
+			<select id="order-select" class="h-8 bg-(--surface-select) px-2 text-xs text-(--text)">
 				<option value="desc" selected?={ opts.Order == "desc" }>Descending</option>
 				<option value="asc" selected?={ opts.Order == "asc" }>Ascending</option>
 			</select>
@@ -34,4 +34,5 @@ templ SortFilter(opts SortFilterOptions) {
 			<input type="hidden" name="status" value={ opts.Status }/>
 		}
 	</form>
+	<script src="/dist/sort_filter.js" defer></script>
 }
diff --git a/web/templates/studio.templ b/web/templates/studio.templ
index c2083f2..01d44ac 100644
--- a/web/templates/studio.templ
+++ b/web/templates/studio.templ
@@ -90,17 +90,5 @@ templ StudioAnimeItems(animes []jikan.Anime, watchlistStatuses map[int]string, h
 	if hasNext {
 		@StudioLoadMore(studioID, nextPage)
 	}
-	<script data-container="studio-anime-content">
-		const containerId = document.currentScript.getAttribute('data-container');
-		const container = document.getElementById(containerId) || document;
-		const seen = new Set();
-		container.querySelectorAll('[data-id]').forEach(item => {
-			const id = item.getAttribute('data-id');
-			if (id && seen.has(id)) {
-				item.remove();
-			} else if (id) {
-				seen.add(id);
-			}
-		});
-	</script>
+	<script src="/dist/dedupe.js" data-container="studio-anime-content" defer></script>
 }