diff --git a/templates/bookshelf.templ b/templates/bookshelf.templ
index 46b5d35..29fbca5 100644
--- a/templates/bookshelf.templ
+++ b/templates/bookshelf.templ
@@ -37,286 +37,255 @@ templ BookShelf(
 					class="mb-6 card p-4 rounded-lg border"
 					style="background-color: var(--bg-secondary); border-color: var(--border);"
 				>
-					<div class="flex flex-wrap gap-4 items-center">
-						<!-- Library Selector -->
-						<div class="flex-1 min-w-[200px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Library
-							</label>
-							<select
-								id="library-select"
-								class="w-full px-3 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-								hx-get="/api/media-items/search"
-								hx-target="#books-grid"
-								hx-trigger="change"
-								hx-include="#filter-form"
-							>
-								if len(libraries) == 0 {
-									<option value="">No libraries available</option>
-								} else {
-									for _, lib := range libraries {
-										if lib.ID == currentLibraryID {
-											<option value={ lib.ID } selected>{ lib.Name }</option>
-										} else {
-											<option value={ lib.ID }>{ lib.Name }</option>
+					<form id="filter-form" hx-get="/api/media-items/search" hx-target="#books-grid">
+						<div class="flex flex-wrap gap-4 items-center">
+							<!-- Library Selector -->
+							<div class="flex-1 min-w-[200px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Library
+								</label>
+								<select
+									id="library-select"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								>
+									if len(libraries) == 0 {
+										<option value="">No libraries available</option>
+									} else {
+										for _, lib := range libraries {
+											if lib.ID == currentLibraryID {
+												<option value={ lib.ID } selected>{ lib.Name }</option>
+											} else {
+												<option value={ lib.ID }>{ lib.Name }</option>
+											}
 										}
 									}
-								}
-							</select>
-						</div>
-						<!-- Search Input -->
-						<div class="flex-1 min-w-[200px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Search
-							</label>
-							<input
-								name="q"
-								type="text"
-								placeholder="Search all fields..."
-								hx-get="/api/media-items/search"
-								hx-trigger="keyup[key=='Enter'] from:#filter-form, keyup changed delay:500ms"
-								hx-target="#books-grid"
-								hx-include="#filter-form, #library-select"
-							/>
-						</div>
-						<!-- Author Filter with Autocomplete -->
-						<div class="flex-1 min-w-[150px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Author
-							</label>
-							<input
-								type="text"
-								name="author_filter"
-								placeholder="Filter by author"
-								class="w-full px-3 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-								hx-get="/api/media-items/search"
-								hx-target="#books-grid"
-								hx-trigger="keyup[key=='Enter'] from:#filter-form"
-								hx-include="#filter-form"
-								list="author-datalist"
-								@input.debounce.300ms="if($el.value.length >= 2) fetchAuthorValues($el)"
-							/>
-							<datalist id="author-datalist"></datalist>
-						</div>
-						<!-- Tags Filter with Autocomplete -->
-						<div class="flex-1 min-w-[150px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Tags</label>
-							<input
-								type="text"
-								name="tags_filter"
-								placeholder="Filter by tags"
-								class="w-full px-3 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-								hx-get="/api/media-items/search"
-								hx-target="#books-grid"
-								hx-trigger="keyup[key=='Enter'] from:#filter-form"
-								hx-include="#filter-form"
-								list="tags-datalist"
-								@input.debounce.300ms="if($el.value.length >= 2) fetchTagValues($el)"
-							/>
-							<datalist id="tags-datalist"></datalist>
-						</div>
-						// <!-- Genre Filter with Autocomplete -->
-						// <div class="flex-1 min-w-[150px]">
-						// 	<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-						// 		Genre
-						// 	</label>
-						// 	<input
-						// 		type="text"
-						// 		name="genre_filter"
-						// 		placeholder="Filter by genre"
-						// 		class="w-full px-3 py-2 border rounded-lg"
-						// 		style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-						// 		hx-get="/api/media-items/search"
-						// 		hx-target="#books-grid"
-						// 		hx-trigger="keyup[key=='Enter'] from:#filter-form"
-						// 		hx-include="#filter-form"
-						// 		list="genre-datalist"
-						// 		@input.debounce.300ms="if($el.value.length >= 2) fetchGenreValues($el)"
-						// 	/>
-						// 	<datalist id="genre-datalist"></datalist>
-						// </div>
-						<!-- Series Filter with Autocomplete (NEW) -->
-						<div class="flex-1 min-w-[150px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Series
-							</label>
-							<input
-								type="text"
-								name="series_filter"
-								placeholder="Filter by series"
-								class="w-full px-3 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-								hx-get="/api/media-items/search"
-								hx-target="#books-grid"
-								hx-trigger="keyup[key=='Enter'] from:#filter-form"
-								hx-include="#filter-form"
-								list="series-datalist"
-								@input.debounce.300ms="if($el.value.length >= 2) fetchSeriesValues($el)"
-							/>
-							<datalist id="series-datalist"></datalist>
-						</div>
-						<!-- Language Filter with Autocomplete (NEW) -->
-						<div class="flex-1 min-w-[150px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Language
-							</label>
-							<input
-								type="text"
-								name="language_filter"
-								placeholder="Filter by language"
-								class="w-full px-3 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-								hx-get="/api/media-items/search"
-								hx-target="#books-grid"
-								hx-trigger="keyup[key=='Enter'] from:#filter-form"
-								hx-include="#filter-form"
-								list="language-datalist"
-								@input.debounce.300ms="if($el.value.length >= 2) fetchLanguageValues($el)"
-							/>
-							<datalist id="language-datalist"></datalist>
-						</div>
-						<!-- Year Range -->
-						<div class="flex-1 min-w-[200px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Year Range
-							</label>
-							<div class="flex gap-2">
+								</select>
+							</div>
+							<!-- Search Input -->
+							<div class="flex-1 min-w-[200px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Search
+								</label>
 								<input
-									type="number"
-									name="year_min"
-									placeholder="From"
-									class="w-full px-3 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-									hx-get="/api/media-items/search"
-									hx-target="#books-grid"
-									hx-trigger="keyup[key=='Enter'] from:#filter-form"
-									hx-include="#filter-form"
-								/>
-								<input
-									type="number"
-									name="year_max"
-									placeholder="To"
-									class="w-full px-3 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-									hx-get="/api/media-items/search"
-									hx-target="#books-grid"
-									hx-trigger="keyup[key=='Enter'] from:#filter-form"
-									hx-include="#filter-form"
+									name="q"
+									type="text"
+									placeholder="Search all fields..."
 								/>
 							</div>
-						</div>
-						<!-- Has Cover Filter -->
-						<div class="flex items-end">
-							<label class="flex items-center gap-2 cursor-pointer">
+							<!-- Author Filter with Autocomplete -->
+							<div class="flex-1 min-w-[150px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Author
+								</label>
 								<input
-									type="checkbox"
-									name="has_cover"
-									value="true"
-									class="w-4 h-4 rounded"
+									type="text"
+									name="author_filter"
+									placeholder="Filter by author"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									list="author-datalist"
+									@input.debounce.300ms="if($el.value.length >= 2) fetchAuthorValues($el)"
+								/>
+								<datalist id="author-datalist"></datalist>
+							</div>
+							<!-- Tags Filter with Autocomplete -->
+							<div class="flex-1 min-w-[150px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Tags</label>
+								<input
+									type="text"
+									name="tags_filter"
+									placeholder="Filter by tags"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									list="tags-datalist"
+									@input.debounce.300ms="if($el.value.length >= 2) fetchTagValues($el)"
+								/>
+								<datalist id="tags-datalist"></datalist>
+							</div>
+							// <!-- Genre Filter with Autocomplete -->
+							// <div class="flex-1 min-w-[150px]">
+							// 	<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+							// 		Genre
+							// 	</label>
+							// 	<input
+							// 		type="text"
+							// 		name="genre_filter"
+							// 		placeholder="Filter by genre"
+							// 		class="w-full px-3 py-2 border rounded-lg"
+							// 		style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							// 		list="genre-datalist"
+							// 		@input.debounce.300ms="if($el.value.length >= 2) fetchGenreValues($el)"
+							// 	/>
+							// 	<datalist id="genre-datalist"></datalist>
+							// </div>
+							<!-- Series Filter with Autocomplete (NEW) -->
+							<div class="flex-1 min-w-[150px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Series
+								</label>
+								<input
+									type="text"
+									name="series_filter"
+									placeholder="Filter by series"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									list="series-datalist"
+									@input.debounce.300ms="if($el.value.length >= 2) fetchSeriesValues($el)"
+								/>
+								<datalist id="series-datalist"></datalist>
+							</div>
+							<!-- Language Filter with Autocomplete (NEW) -->
+							<div class="flex-1 min-w-[150px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Language
+								</label>
+								<input
+									type="text"
+									name="language_filter"
+									placeholder="Filter by language"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									list="language-datalist"
+									@input.debounce.300ms="if($el.value.length >= 2) fetchLanguageValues($el)"
+								/>
+								<datalist id="language-datalist"></datalist>
+							</div>
+							<!-- Year Range -->
+							<div class="flex-1 min-w-[200px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Year Range
+								</label>
+								<div class="flex gap-2">
+									<input
+										type="number"
+										name="year_min"
+										placeholder="From"
+										class="w-full px-3 py-2 border rounded-lg"
+										style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									/>
+									<input
+										type="number"
+										name="year_max"
+										placeholder="To"
+										class="w-full px-3 py-2 border rounded-lg"
+										style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									/>
+								</div>
+							</div>
+							<!-- Has Cover Filter -->
+							<div class="flex items-end">
+								<label class="flex items-center gap-2 cursor-pointer">
+									<input type="hidden" name="has_cover" value="false"/>
+									<input
+										type="checkbox"
+										name="has_cover"
+										value="true"
+										checked
+										class="w-4 h-4 rounded"
+									/>
+									<span class="text-sm" style="color: var(--text-primary)">Has Cover</span>
+								</label>
+							</div>
+							<!-- Sort By Dropdown (PRESERVED) -->
+							<div class="flex-1 min-w-[150px]">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
+									Sort By
+								</label>
+								<select
+									name="sort"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
 									hx-get="/api/media-items/search"
 									hx-target="#books-grid"
 									hx-trigger="change"
 									hx-include="#filter-form"
-								/>
-								<span class="text-sm" style="color: var(--text-primary)">Has Cover</span>
-							</label>
-						</div>
-						<!-- Sort By Dropdown (PRESERVED) -->
-						<div class="flex-1 min-w-[150px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-								Sort By
-							</label>
-							<select
-								name="sort"
-								class="w-full px-3 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-								hx-get="/api/media-items/search"
-								hx-target="#books-grid"
-								hx-trigger="change"
-								hx-include="#filter-form"
-							>
-								<option value="title ASC">Title (A-Z)</option>
-								<option value="title DESC">Title (Z-A)</option>
-								<option value="author ASC">Author (A-Z)</option>
-								<option value="created_at DESC">Date Added</option>
-								<option value="page_count DESC">Page Count</option>
-							</select>
-						</div>
-						<!-- Save Filter Button (PRESERVED) -->
-						<div class="flex items-end">
-							<button
-								@click="showSaveFilterModal()"
-								class="px-4 py-2 rounded-lg font-medium"
-								style="background-color: var(--accent); color: var(--bg-primary);"
-							>
-								💾 Save Filter
-							</button>
-						</div>
-						<!-- Load Filter Button (PRESERVED) -->
-						<div class="flex items-end relative">
-							<button
-								@click="toggleFiltersDropdown()"
-								class="px-4 py-2 rounded-lg font-medium border"
-								style="border-color: var(--border); color: var(--text-primary);"
-							>
-								📂 Load Filter
-							</button>
-							<!-- Saved Filters Dropdown (PRESERVED) -->
-							<div
-								x-show="showFiltersDropdown"
-								@click.outside="showFiltersDropdown = false"
-								x-transition:enter="transition ease-out duration-200"
-								x-transition:enter-start="opacity-0 scale-95"
-								x-transition:enter-end="opacity-100 scale-100"
-								x-transition:leave="transition ease-in duration-150"
-								x-transition:leave-start="opacity-100 scale-100"
-								x-transition:leave-end="opacity-0 scale-95"
-								class="absolute top-full mt-2 right-0 w-80 rounded-lg shadow-lg z-50"
-								style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;"
-							>
-								<div class="p-4">
-									<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">
-										Saved Filters
-									</h3>
-									<!-- Filter List -->
-									<div class="space-y-2" id="saved-filters-list">
-										for _, filter := range savedFilters {
-											filterUUID := string(filter.ID.Bytes[0:16])
-											<div class="flex items-center justify-between p-2 rounded hover:opacity-80" style="background-color: var(--bg-primary);" data-filter-id={ uuidToString(filter.ID) }>
-												<button data-action="load-filter" class="flex-1 text-left px-2 py-1 rounded" style="color: var(--text-primary);">
-													{ filter.Name }
-												</button>
-												<button data-action="delete-filter" class="p-1 hover:opacity-70 rounded" style="color: var(--text-secondary);" title="Delete filter">🗑️</button>
+								>
+									<option value="title ASC">Title (A-Z)</option>
+									<option value="title DESC">Title (Z-A)</option>
+									<option value="author ASC">Author (A-Z)</option>
+									<option value="created_at DESC">Date Added</option>
+									<option value="page_count DESC">Page Count</option>
+								</select>
+							</div>
+							<!-- Submit Button -->
+							<div class="flex items-end">
+								<button
+									type="submit"
+									class="px-6 py-2 rounded-lg font-medium"
+									style="background-color: var(--accent); color: var(--bg-primary);"
+								>
+									🔍 Search
+								</button>
+							</div>
+							<!-- Save Filter Button (PRESERVED) -->
+							<div class="flex items-end">
+								<button
+									@click="showSaveFilterModal()"
+									class="px-4 py-2 rounded-lg font-medium"
+									style="background-color: var(--accent); color: var(--bg-primary);"
+								>
+									💾 Save Filter
+								</button>
+							</div>
+							<!-- Load Filter Button (PRESERVED) -->
+							<div class="flex items-end relative">
+								<button
+									@click="toggleFiltersDropdown()"
+									class="px-4 py-2 rounded-lg font-medium border"
+									style="border-color: var(--border); color: var(--text-primary);"
+								>
+									📂 Load Filter
+								</button>
+								<!-- Saved Filters Dropdown (PRESERVED) -->
+								<div
+									x-show="showFiltersDropdown"
+									@click.outside="showFiltersDropdown = false"
+									x-transition:enter="transition ease-out duration-200"
+									x-transition:enter-start="opacity-0 scale-95"
+									x-transition:enter-end="opacity-100 scale-100"
+									x-transition:leave="transition ease-in duration-150"
+									x-transition:leave-start="opacity-100 scale-100"
+									x-transition:leave-end="opacity-0 scale-95"
+									class="absolute top-full mt-2 right-0 w-80 rounded-lg shadow-lg z-50"
+									style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;"
+								>
+									<div class="p-4">
+										<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">
+											Saved Filters
+										</h3>
+										<!-- Filter List -->
+										<div class="space-y-2" id="saved-filters-list">
+											for _, filter := range savedFilters {
+												filterUUID := string(filter.ID.Bytes[0:16])
+												<div class="flex items-center justify-between p-2 rounded hover:opacity-80" style="background-color: var(--bg-primary);" data-filter-id={ uuidToString(filter.ID) }>
+													<button data-action="load-filter" class="flex-1 text-left px-2 py-1 rounded" style="color: var(--text-primary);">
+														{ filter.Name }
+													</button>
+													<button data-action="delete-filter" class="p-1 hover:opacity-70 rounded" style="color: var(--text-secondary);" title="Delete filter">🗑️</button>
+												</div>
+											}
+										</div>
+										<!-- Empty State -->
+										if len(savedFilters) == 0 {
+											<div class="text-sm py-4 text-center" style="color: var(--text-secondary);">
+												No saved filters yet
 											</div>
 										}
 									</div>
-									<!-- Empty State -->
-									if len(savedFilters) == 0 {
-										<div class="text-sm py-4 text-center" style="color: var(--text-secondary);">
-											No saved filters yet
-										</div>
-									}
 								</div>
 							</div>
+							<!-- Clear Filters Button (PRESERVED) -->
+							<div class="flex items-end">
+								<button
+									@click="clearFilters()"
+									class="px-4 py-2 rounded-lg font-medium border"
+									style="border-color: var(--border); color: var(--text-primary);"
+								>
+									✕ Clear
+								</button>
+							</div>
 						</div>
-						<!-- Clear Filters Button (PRESERVED) -->
-						<div class="flex items-end">
-							<button
-								@click="clearFilters()"
-								class="px-4 py-2 rounded-lg font-medium border"
-								style="border-color: var(--border); color: var(--text-primary);"
-							>
-								✕ Clear
-							</button>
-						</div>
-					</div>
-					<!-- Hidden form for HTMX include (PRESERVED) -->
-					<form id="filter-form" class="hidden">
-						<input type="hidden" name="limit" value="50"/>
-						<input type="hidden" name="offset" value="0"/>
 					</form>
 				</div>
 				<!-- Books Grid -->
@@ -411,6 +380,9 @@ templ BookShelf(
 								Save
 							</button>
 						</div>
+						<!-- Hidden pagination state -->
+						<input type="hidden" name="limit" value="50"/>
+						<input type="hidden" name="offset" value="0"/>
 					</form>
 				</div>
 			</div>
diff --git a/templates/bookshelf_templ.go b/templates/bookshelf_templ.go
index ff5aab3..b8f9cac 100644
--- a/templates/bookshelf_templ.go
+++ b/templates/bookshelf_templ.go
@@ -52,7 +52,7 @@ func BookShelf(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><!-- Filter Bar --><div class=\"mb-6 card p-4 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex flex-wrap gap-4 items-center\"><!-- Library Selector --><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Library</label> <select id=\"library-select\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"change\" hx-include=\"#filter-form\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><!-- Filter Bar --><div class=\"mb-6 card p-4 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><form id=\"filter-form\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\"><div class=\"flex flex-wrap gap-4 items-center\"><!-- Library Selector --><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Library</label> <select id=\"library-select\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -71,7 +71,7 @@ func BookShelf(
 					var templ_7745c5c3_Var2 string
 					templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(lib.ID)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 60, Col: 33}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 57, Col: 34}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 					if templ_7745c5c3_Err != nil {
@@ -84,7 +84,7 @@ func BookShelf(
 					var templ_7745c5c3_Var3 string
 					templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(lib.Name)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 60, Col: 55}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 57, Col: 56}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 					if templ_7745c5c3_Err != nil {
@@ -102,7 +102,7 @@ func BookShelf(
 					var templ_7745c5c3_Var4 string
 					templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(lib.ID)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 62, Col: 33}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 59, Col: 34}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 					if templ_7745c5c3_Err != nil {
@@ -115,7 +115,7 @@ func BookShelf(
 					var templ_7745c5c3_Var5 string
 					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(lib.Name)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 62, Col: 46}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 59, Col: 47}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 					if templ_7745c5c3_Err != nil {
@@ -128,7 +128,7 @@ func BookShelf(
 				}
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</select></div><!-- Search Input --><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Search</label> <input name=\"q\" type=\"text\" placeholder=\"Search all fields...\" hx-get=\"/api/media-items/search\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form, keyup changed delay:500ms\" hx-target=\"#books-grid\" hx-include=\"#filter-form, #library-select\"></div><!-- Author Filter with Autocomplete --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Author</label> <input type=\"text\" name=\"author_filter\" placeholder=\"Filter by author\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form\" hx-include=\"#filter-form\" list=\"author-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchAuthorValues($el)\"> <datalist id=\"author-datalist\"></datalist></div><!-- Tags Filter with Autocomplete --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Tags</label> <input type=\"text\" name=\"tags_filter\" placeholder=\"Filter by tags\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form\" hx-include=\"#filter-form\" list=\"tags-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchTagValues($el)\"> <datalist id=\"tags-datalist\"></datalist></div><!-- Series Filter with Autocomplete (NEW) --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Series</label> <input type=\"text\" name=\"series_filter\" placeholder=\"Filter by series\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form\" hx-include=\"#filter-form\" list=\"series-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchSeriesValues($el)\"> <datalist id=\"series-datalist\"></datalist></div><!-- Language Filter with Autocomplete (NEW) --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Language</label> <input type=\"text\" name=\"language_filter\" placeholder=\"Filter by language\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form\" hx-include=\"#filter-form\" list=\"language-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchLanguageValues($el)\"> <datalist id=\"language-datalist\"></datalist></div><!-- Year Range --><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Year Range</label><div class=\"flex gap-2\"><input type=\"number\" name=\"year_min\" placeholder=\"From\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form\" hx-include=\"#filter-form\"> <input type=\"number\" name=\"year_max\" placeholder=\"To\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"keyup[key=='Enter'] from:#filter-form\" hx-include=\"#filter-form\"></div></div><!-- Has Cover Filter --><div class=\"flex items-end\"><label class=\"flex items-center gap-2 cursor-pointer\"><input type=\"checkbox\" name=\"has_cover\" value=\"true\" class=\"w-4 h-4 rounded\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"change\" hx-include=\"#filter-form\"> <span class=\"text-sm\" style=\"color: var(--text-primary)\">Has Cover</span></label></div><!-- Sort By Dropdown (PRESERVED) --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sort By</label> <select name=\"sort\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"change\" hx-include=\"#filter-form\"><option value=\"title ASC\">Title (A-Z)</option> <option value=\"title DESC\">Title (Z-A)</option> <option value=\"author ASC\">Author (A-Z)</option> <option value=\"created_at DESC\">Date Added</option> <option value=\"page_count DESC\">Page Count</option></select></div><!-- Save Filter Button (PRESERVED) --><div class=\"flex items-end\"><button @click=\"showSaveFilterModal()\" class=\"px-4 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent); color: var(--bg-primary);\">💾 Save Filter</button></div><!-- Load Filter Button (PRESERVED) --><div class=\"flex items-end relative\"><button @click=\"toggleFiltersDropdown()\" class=\"px-4 py-2 rounded-lg font-medium border\" style=\"border-color: var(--border); color: var(--text-primary);\">📂 Load Filter</button><!-- Saved Filters Dropdown (PRESERVED) --><div x-show=\"showFiltersDropdown\" @click.outside=\"showFiltersDropdown = false\" x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"opacity-0 scale-95\" x-transition:enter-end=\"opacity-100 scale-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"opacity-100 scale-100\" x-transition:leave-end=\"opacity-0 scale-95\" class=\"absolute top-full mt-2 right-0 w-80 rounded-lg shadow-lg z-50\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;\"><div class=\"p-4\"><h3 class=\"text-sm font-semibold mb-3\" style=\"color: var(--text-primary)\">Saved Filters</h3><!-- Filter List --><div class=\"space-y-2\" id=\"saved-filters-list\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</select></div><!-- Search Input --><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Search</label> <input name=\"q\" type=\"text\" placeholder=\"Search all fields...\"></div><!-- Author Filter with Autocomplete --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Author</label> <input type=\"text\" name=\"author_filter\" placeholder=\"Filter by author\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" list=\"author-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchAuthorValues($el)\"> <datalist id=\"author-datalist\"></datalist></div><!-- Tags Filter with Autocomplete --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Tags</label> <input type=\"text\" name=\"tags_filter\" placeholder=\"Filter by tags\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" list=\"tags-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchTagValues($el)\"> <datalist id=\"tags-datalist\"></datalist></div><!-- Series Filter with Autocomplete (NEW) --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Series</label> <input type=\"text\" name=\"series_filter\" placeholder=\"Filter by series\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" list=\"series-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchSeriesValues($el)\"> <datalist id=\"series-datalist\"></datalist></div><!-- Language Filter with Autocomplete (NEW) --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Language</label> <input type=\"text\" name=\"language_filter\" placeholder=\"Filter by language\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" list=\"language-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchLanguageValues($el)\"> <datalist id=\"language-datalist\"></datalist></div><!-- Year Range --><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Year Range</label><div class=\"flex gap-2\"><input type=\"number\" name=\"year_min\" placeholder=\"From\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"> <input type=\"number\" name=\"year_max\" placeholder=\"To\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div></div><!-- Has Cover Filter --><div class=\"flex items-end\"><label class=\"flex items-center gap-2 cursor-pointer\"><input type=\"checkbox\" name=\"has_cover\" value=\"true\" class=\"w-4 h-4 rounded\"> <span class=\"text-sm\" style=\"color: var(--text-primary)\">Has Cover</span></label></div><!-- Sort By Dropdown (PRESERVED) --><div class=\"flex-1 min-w-[150px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sort By</label> <select name=\"sort\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" hx-get=\"/api/media-items/search\" hx-target=\"#books-grid\" hx-trigger=\"change\" hx-include=\"#filter-form\"><option value=\"title ASC\">Title (A-Z)</option> <option value=\"title DESC\">Title (Z-A)</option> <option value=\"author ASC\">Author (A-Z)</option> <option value=\"created_at DESC\">Date Added</option> <option value=\"page_count DESC\">Page Count</option></select></div><!-- Submit Button --><div class=\"flex items-end\"><button type=\"submit\" class=\"px-6 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent); color: var(--bg-primary);\">🔍 Search</button></div><!-- Save Filter Button (PRESERVED) --><div class=\"flex items-end\"><button @click=\"showSaveFilterModal()\" class=\"px-4 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent); color: var(--bg-primary);\">💾 Save Filter</button></div><!-- Load Filter Button (PRESERVED) --><div class=\"flex items-end relative\"><button @click=\"toggleFiltersDropdown()\" class=\"px-4 py-2 rounded-lg font-medium border\" style=\"border-color: var(--border); color: var(--text-primary);\">📂 Load Filter</button><!-- Saved Filters Dropdown (PRESERVED) --><div x-show=\"showFiltersDropdown\" @click.outside=\"showFiltersDropdown = false\" x-transition:enter=\"transition ease-out duration-200\" x-transition:enter-start=\"opacity-0 scale-95\" x-transition:enter-end=\"opacity-100 scale-100\" x-transition:leave=\"transition ease-in duration-150\" x-transition:leave-start=\"opacity-100 scale-100\" x-transition:leave-end=\"opacity-0 scale-95\" class=\"absolute top-full mt-2 right-0 w-80 rounded-lg shadow-lg z-50\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;\"><div class=\"p-4\"><h3 class=\"text-sm font-semibold mb-3\" style=\"color: var(--text-primary)\">Saved Filters</h3><!-- Filter List --><div class=\"space-y-2\" id=\"saved-filters-list\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -140,7 +140,7 @@ func BookShelf(
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(uuidToString(filter.ID))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 288, Col: 172}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 259, Col: 173}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -153,7 +153,7 @@ func BookShelf(
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(filter.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 290, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 261, Col: 27}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -174,7 +174,7 @@ func BookShelf(
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div></div></div><!-- Clear Filters Button (PRESERVED) --><div class=\"flex items-end\"><button @click=\"clearFilters()\" class=\"px-4 py-2 rounded-lg font-medium border\" style=\"border-color: var(--border); color: var(--text-primary);\">✕ Clear</button></div></div><!-- Hidden form for HTMX include (PRESERVED) --><form id=\"filter-form\" class=\"hidden\"><input type=\"hidden\" name=\"limit\" value=\"50\"> <input type=\"hidden\" name=\"offset\" value=\"0\"></form></div><!-- Books Grid --><div id=\"books-grid\" class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div></div></div><!-- Clear Filters Button (PRESERVED) --><div class=\"flex items-end\"><button @click=\"clearFilters()\" class=\"px-4 py-2 rounded-lg font-medium border\" style=\"border-color: var(--border); color: var(--text-primary);\">✕ Clear</button></div></div></form></div><!-- Books Grid --><div id=\"books-grid\" class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -194,7 +194,7 @@ func BookShelf(
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(errorMessage)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 328, Col: 59}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 295, Col: 59}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -227,7 +227,7 @@ func BookShelf(
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(offset/limit + 1)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 347, Col: 32}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/bookshelf.templ`, Line: 314, Col: 32}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -248,7 +248,7 @@ func BookShelf(
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div></div><!-- Save Filter Modal --><div x-show=\"showSaveModal\" @click.self=\"showSaveModal = false\" x-transition class=\"fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7); display: none;\"><div @click.stop class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Save Filter</h2><button @click=\"showSaveModal = false\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form @submit=\"saveFilter($event)\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Filter Name</label> <input type=\"text\" x-model=\"filterName\" placeholder=\"My Custom Filter\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" required></div><div class=\"flex justify-end gap-2\"><button type=\"button\" @click=\"showSaveModal = false\" class=\"px-4 py-2 rounded-lg border\" style=\"border-color: var(--border); color: var(--text-primary);\">Cancel</button> <button type=\"submit\" class=\"px-4 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent); color: var(--bg-primary);\">Save</button></div></form></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div></div><!-- Save Filter Modal --><div x-show=\"showSaveModal\" @click.self=\"showSaveModal = false\" x-transition class=\"fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7); display: none;\"><div @click.stop class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Save Filter</h2><button @click=\"showSaveModal = false\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form @submit=\"saveFilter($event)\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Filter Name</label> <input type=\"text\" x-model=\"filterName\" placeholder=\"My Custom Filter\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" required></div><div class=\"flex justify-end gap-2\"><button type=\"button\" @click=\"showSaveModal = false\" class=\"px-4 py-2 rounded-lg border\" style=\"border-color: var(--border); color: var(--text-primary);\">Cancel</button> <button type=\"submit\" class=\"px-4 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent); color: var(--bg-primary);\">Save</button></div><!-- Hidden pagination state --><input type=\"hidden\" name=\"limit\" value=\"50\"> <input type=\"hidden\" name=\"offset\" value=\"0\"></form></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}