diff --git a/src/core/templatetags/media_tags.py b/src/core/templatetags/media_tags.py
index 6270e4a..0cb9a04 100644
--- a/src/core/templatetags/media_tags.py
+++ b/src/core/templatetags/media_tags.py
@@ -73,3 +73,86 @@ def status_badge_class(status):
     """
 
     return STATUS_CLASSES.get(status, "badge-ghost")
+
+
+@register.simple_tag
+def query_string(request, **kwargs):
+    """
+    Build a query string from current GET parameters, with updates from kwargs.
+
+    Args:
+        request: The current request object
+        **kwargs: Parameters to add/update/remove (None to remove)
+
+    Returns:
+        Query string with all parameters (including multi-value params)
+
+    Example usage:
+        <a href="?{% query_string request view_mode='grid' %}">Grid</a>
+        <a href="?{% query_string request sort=None %}">Clear sort</a>
+    """
+    if not hasattr(request, "GET"):
+        return ""
+
+    # Start with a copy of current GET parameters (handles multi-value)
+    params = request.GET.copy()
+
+    # Update with provided kwargs
+    for key, value in kwargs.items():
+        if value is None:
+            # Remove parameter
+            params.pop(key, None)
+        else:
+            # Set parameter (replaces all values)
+            params[key] = value
+
+    # Build query string
+    return params.urlencode() if params else ""
+
+
+@register.simple_tag
+def query_string_exclude(request, *exclude_keys):
+    """
+    Build a query string from current GET parameters, excluding specified keys.
+
+    Args:
+        request: The current request object
+        *exclude_keys: Parameter names to exclude
+
+    Returns:
+        Query string with all parameters except excluded ones
+
+    Example usage:
+        <a href="?{% query_string_exclude request 'page' %}">Without page</a>
+    """
+    if not hasattr(request, "GET"):
+        return ""
+
+    params = request.GET.copy()
+
+    for key in exclude_keys:
+        params.pop(key, None)
+
+    return params.urlencode() if params else ""
+
+
+@register.filter
+def toggle_sort_direction(sort_value):
+    """
+    Toggle the direction of a sort parameter.
+
+    Args:
+        sort_value: Current sort value (e.g., '-review_date' or 'review_date')
+
+    Returns:
+        Sort value with inverted direction
+
+    Example usage:
+        {{ sort|toggle_sort_direction }}
+    """
+    if not sort_value:
+        return "review_date"
+
+    if sort_value.startswith("-"):
+        return sort_value[1:]
+    return f"-{sort_value}"
diff --git a/src/core/urls.py b/src/core/urls.py
index 949b3c8..b47a47b 100644
--- a/src/core/urls.py
+++ b/src/core/urls.py
@@ -9,7 +9,6 @@
     path("media/<int:pk>/", views.media_detail, name="media_detail"),
     path("media/<int:pk>/edit/", views.media_edit, name="media_edit"),
     path("media/<int:pk>/delete/", views.media_delete, name="media_delete"),
-    path("search/", views.search_media, name="search"),
     path("load-more/", views.load_more_media, name="load_more_media"),
     path("agents/search-htmx/", views.agent_search_htmx, name="agent_search_htmx"),
     path("agents/select-htmx/", views.agent_select_htmx, name="agent_select_htmx"),
diff --git a/src/core/views.py b/src/core/views.py
index eb28f3d..f39a7cb 100644
--- a/src/core/views.py
+++ b/src/core/views.py
@@ -1,9 +1,11 @@
+import contextlib
 import tarfile
 import tempfile
 from pathlib import Path
 
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
+from django.core.exceptions import ValidationError
 from django.core.management import call_command
 from django.core.management.base import CommandError
 from django.core.paginator import Paginator
@@ -18,7 +20,7 @@
 
 
 def _resolve_sorting(request):
-    """Return validated sorting info: selected field, sort string (with sign), and ordering."""
+    """Return validated sorting info: selected field and normalized sort string (with sign)."""
     default_field = "review_date"
     sort = request.GET.get("sort") or request.GET.get("order_by") or f"-{default_field}"
 
@@ -27,20 +29,21 @@ def _resolve_sorting(request):
     sort_field = raw_field if raw_field in valid_fields else default_field
 
     is_desc = sort.startswith("-")
-    ordering = f"-{sort_field}" if is_desc else sort_field
-    normalized_sort = ordering  # ensure field is validated
-    return sort_field, normalized_sort, ordering
+    normalized_sort = f"-{sort_field}" if is_desc else sort_field
+    return sort_field, normalized_sort
 
 
 def _extract_filters(request):
     """Extract filter parameters from request and return filters dict."""
     filters = {
         "contributor": request.GET.get("contributor", ""),
-        "type": request.GET.get("type", ""),
-        "status": request.GET.get("status", ""),
-        "score": request.GET.get("score", ""),
+        "type": request.GET.getlist("type"),
+        "status": request.GET.getlist("status"),
+        "score": request.GET.getlist("score"),
         "review_from": request.GET.get("review_from", ""),
         "review_to": request.GET.get("review_to", ""),
+        "has_review": request.GET.get("has_review", ""),
+        "has_cover": request.GET.get("has_cover", ""),
     }
     filters["has_any"] = any(
         [
@@ -49,16 +52,30 @@ def _extract_filters(request):
             filters["score"],
             filters["review_from"],
             filters["review_to"],
+            filters["has_review"],
+            filters["has_cover"],
         ]
     )
 
-    # Add display names for active filters
+    # Add display names for active filters (as list of tuples: (value, label))
     if filters["type"]:
-        filters["type_display"] = dict(Media.media_type.field.choices).get(filters["type"], filters["type"])
+        type_choices_dict = dict(Media.media_type.field.choices)
+        filters["type_display"] = [(t, type_choices_dict.get(t, t)) for t in filters["type"]]
     if filters["status"]:
-        filters["status_display"] = dict(Media.status.field.choices).get(filters["status"], filters["status"])
-    if filters["score"] and filters["score"] != "none":
-        filters["score_display"] = dict(Media.score.field.choices).get(int(filters["score"]), filters["score"])
+        status_choices_dict = dict(Media.status.field.choices)
+        filters["status_display"] = [(s, status_choices_dict.get(s, s)) for s in filters["status"]]
+    if filters["score"]:
+        score_choices_dict = dict(Media.score.field.choices)
+        filters["score_display"] = []
+        for s in filters["score"]:
+            if s == "none":
+                filters["score_display"].append(("none", _("Not rated")))
+            else:
+                try:
+                    filters["score_display"].append((s, score_choices_dict.get(int(s), s)))
+                except ValueError:
+                    # Skip malformed score values from URL
+                    continue
 
     return filters
 
@@ -82,39 +99,96 @@ def _build_search_queryset(query):
     ).distinct()
 
 
-def _apply_filters(queryset, filters):
-    """Apply filters to a queryset and return (queryset, contributor)."""
+def _apply_contributor_filter(queryset, contributor_id):
+    """Apply contributor filter to queryset and return (queryset, contributor)."""
     contributor = None
-    if filters["contributor"]:
-        contributor = Agent.objects.filter(pk=filters["contributor"]).first()
+    if contributor_id:
+        contributor = Agent.objects.filter(pk=contributor_id).first()
         if contributor:
             queryset = queryset.filter(contributors=contributor)
-    if filters["type"]:
-        queryset = queryset.filter(media_type=filters["type"])
-    if filters["status"]:
-        queryset = queryset.filter(status=filters["status"])
-    if filters["score"]:
-        if filters["score"] == "none":
-            queryset = queryset.filter(score__isnull=True)
+    return queryset, contributor
+
+
+def _apply_type_filter(queryset, media_types):
+    """Apply OR filter for media types."""
+    if not media_types:
+        return queryset
+    return queryset.filter(media_type__in=media_types)
+
+
+def _apply_status_filter(queryset, statuses):
+    """Apply OR filter for statuses."""
+    if not statuses:
+        return queryset
+    return queryset.filter(status__in=statuses)
+
+
+def _apply_score_filter(queryset, scores):
+    """Apply OR filter for scores (including 'none' for null scores)."""
+    if not scores:
+        return queryset
+    score_q = Q()
+    for score in scores:
+        if score == "none":
+            score_q |= Q(score__isnull=True)
         else:
-            queryset = queryset.filter(score=int(filters["score"]))
+            try:
+                score_q |= Q(score=int(score))
+            except ValueError:
+                # Skip malformed score values from URL
+                continue
+    return queryset.filter(score_q)
+
+
+def _apply_date_and_content_filters(queryset, filters):
+    """Apply review date, review content, and cover filters."""
     if filters["review_from"]:
-        queryset = queryset.filter(review_date__gte=filters["review_from"])
+        # Skip malformed date values from URL
+        with contextlib.suppress(ValueError, TypeError, ValidationError):
+            queryset = queryset.filter(review_date__gte=filters["review_from"])
     if filters["review_to"]:
-        queryset = queryset.filter(review_date__lte=filters["review_to"])
+        # Skip malformed date values from URL
+        with contextlib.suppress(ValueError, TypeError, ValidationError):
+            queryset = queryset.filter(review_date__lte=filters["review_to"])
+    if filters["has_review"] == "empty":
+        queryset = queryset.filter(Q(review__isnull=True) | Q(review=""))
+    elif filters["has_review"] == "filled":
+        queryset = queryset.exclude(Q(review__isnull=True) | Q(review=""))
+    if filters["has_cover"] == "empty":
+        queryset = queryset.filter(Q(cover__isnull=True) | Q(cover=""))
+    elif filters["has_cover"] == "filled":
+        queryset = queryset.exclude(Q(cover__isnull=True) | Q(cover=""))
+    return queryset
+
+
+def _apply_filters(queryset, filters):
+    """Apply filters to a queryset and return (queryset, contributor)."""
+    queryset, contributor = _apply_contributor_filter(queryset, filters["contributor"])
+    queryset = _apply_type_filter(queryset, filters["type"])
+    queryset = _apply_status_filter(queryset, filters["status"])
+    queryset = _apply_score_filter(queryset, filters["score"])
+    queryset = _apply_date_and_content_filters(queryset, filters)
     return queryset, contributor
 
 
-@login_required
-def index(request):
-    """Main view for displaying media list."""
-    # Get query parameters
-    view_mode = request.GET.get("view_mode", "grid")  # 'list' or 'grid'
-    sort_field, sort, ordering = _resolve_sorting(request)
+def _build_media_context(request):
+    """
+    Build and filter media queryset from request parameters.
+
+    Returns a tuple of (page_obj, context_dict) ready for rendering.
+    This consolidates the common logic used by index and load_more_media views.
+    """
+    view_mode = request.GET.get("view_mode", "grid")
+    sort_field, sort = _resolve_sorting(request)
     filters = _extract_filters(request)
+    search_query = request.GET.get("search", "").strip()
+
+    # Build queryset based on whether it's a search or not
+    queryset = _build_search_queryset(search_query) if search_query else Media.objects.all()
 
-    queryset = Media.objects.order_by(ordering)
+    # Apply filters and sorting
     queryset, contributor = _apply_filters(queryset, filters)
+    queryset = queryset.order_by(sort)
 
     # Pagination: 20 items per page
     page_number = request.GET.get("page", 1)
@@ -125,7 +199,6 @@ def index(request):
         "media_list": page_obj.object_list,
         "page_obj": page_obj,
         "view_mode": view_mode,
-        "order_by": ordering,
         "sort_field": sort_field,
         "sort": sort,
         "contributor": contributor,
@@ -133,10 +206,13 @@ def index(request):
         **_get_field_choices(),
     }
 
-    # If it's an HTMX request (filters/sorting), return the full list
-    if request.headers.get("HX-Request"):
-        return render(request, "partials/media-list.html", context)
+    return page_obj, context
+
 
+@login_required
+def index(request):
+    """Main view for displaying media list."""
+    _, context = _build_media_context(request)
     return render(request, "media.html", context)
 
 
@@ -202,69 +278,12 @@ def media_delete(request, pk):
 @login_required
 def load_more_media(request):
     """HTMX view: load next page of media items for infinite scrolling."""
-    view_mode = request.GET.get("view_mode", "grid")
-    sort_field, sort, ordering = _resolve_sorting(request)
-    filters = _extract_filters(request)
-    query = request.GET.get("search", "")
-
-    # Build queryset based on whether it's a search or not
-    queryset = _build_search_queryset(query) if query else Media.objects.all()
-
-    queryset = queryset.order_by(ordering)
-    queryset, contributor = _apply_filters(queryset, filters)
-
-    # Pagination
-    page_number = request.GET.get("page", 1)
-    paginator = Paginator(queryset, 20)
-    page_obj = paginator.get_page(page_number)
-
-    context = {
-        "media_list": page_obj.object_list,
-        "page_obj": page_obj,
-        "view_mode": view_mode,
-        "order_by": ordering,
-        "sort_field": sort_field,
-        "sort": sort,
-        "contributor": contributor,
-        "filters": filters,
-        **_get_field_choices(),
-    }
+    _, context = _build_media_context(request)
 
     # Return only the items + load more button
     return render(request, "partials/media-items-page.html", context)
 
 
-@login_required
-def search_media(request):
-    query = request.GET.get("search", "")
-    view_mode = request.GET.get("view_mode", "grid")
-    sort_field, sort, ordering = _resolve_sorting(request)
-    filters = _extract_filters(request)
-
-    media = _build_search_queryset(query)
-
-    media, contributor = _apply_filters(media, filters)
-    media = media.order_by(ordering)
-
-    # Pagination: 20 items per page
-    page_number = request.GET.get("page", 1)
-    paginator = Paginator(media, 20)
-    page_obj = paginator.get_page(page_number)
-
-    context = {
-        "media_list": page_obj.object_list,
-        "page_obj": page_obj,
-        "view_mode": view_mode,
-        "order_by": ordering,
-        "sort_field": sort_field,
-        "sort": sort,
-        "contributor": contributor,
-        "filters": filters,
-        **_get_field_choices(),
-    }
-    return render(request, "partials/media-list.html", context)
-
-
 @login_required
 def agent_search_htmx(request):
     query = request.GET.get("q", "").strip()
diff --git a/src/static/js/base.js b/src/static/js/base.js
index 4eb025d..818c62f 100644
--- a/src/static/js/base.js
+++ b/src/static/js/base.js
@@ -39,160 +39,63 @@ const DEFAULT_PARAMS = {
     'sort': '-review_date',
 };
 
-// Remove empty and default parameters before HTMX sends the request
-document.body.addEventListener('htmx:configRequest', function(event) {
-    const params = event.detail.parameters;
-    const toDelete = [];
+// Clean URL on page load - remove empty and default parameters
+document.addEventListener('DOMContentLoaded', function() {
+    const url = new URL(window.location);
+    const params = url.searchParams;
+    let needsCleanup = false;
 
-    for (const key in params) {
-        const value = params[key];
+    // Build list of keys to delete (can't delete while iterating)
+    const keysToDelete = [];
+
+    for (const [key, value] of params.entries()) {
         // Remove empty values
         if (value === '' || value === null || value === undefined) {
-            toDelete.push(key);
+            keysToDelete.push(key);
         }
         // Remove default values
         else if (DEFAULT_PARAMS[key] === value) {
-            toDelete.push(key);
+            keysToDelete.push(key);
         }
     }
 
-    toDelete.forEach(key => delete params[key]);
-});
-
-// FILTER BADGES
-
-// Create a filter badge
-function createFilterBadge(filterName, displayText, badgeClass = 'badge-secondary') {
-    const container = document.getElementById('active-filters-badges');
-    if (!container) return null;
-
-    // Remove existing badge for this filter
-    const existing = container.querySelector(`[data-filter="${filterName}"]`);
-    if (existing) existing.remove();
-
-    const badge = document.createElement('div');
-    badge.className = `badge ${badgeClass} gap-1`;
-    badge.dataset.filter = filterName;
-    badge.innerHTML = `
-        <span>${displayText}</span>
-        <button type="button" class="btn btn-ghost btn-xs btn-circle filter-badge-remove" data-filter="${filterName}">
-            ✕
-        </button>
-    `;
-    container.appendChild(badge);
-    return badge;
-}
-
-// Remove a filter badge and reset the corresponding input
-function removeFilterBadge(filterName) {
-    const container = document.getElementById('active-filters-badges');
-    if (!container) return;
-
-    const badge = container.querySelector(`[data-filter="${filterName}"]`);
-    if (badge) badge.remove();
-
-    // Reset the corresponding input(s)
-    if (filterName === 'review') {
-        const reviewFrom = document.getElementById('review-from');
-        const reviewTo = document.getElementById('review-to');
-        if (reviewFrom) reviewFrom.value = '';
-        if (reviewTo) reviewTo.value = '';
-    } else if (filterName === 'contributor') {
-        const input = document.getElementById('contributor');
-        if (input) input.value = '';
-    } else {
-        const input = document.getElementById(filterName);
-        if (input) input.value = '';
-    }
-}
-
-// Handle filter badge remove button clicks
-document.body.addEventListener('click', function(e) {
-    const removeBtn = e.target.closest('.filter-badge-remove');
-    if (!removeBtn) return;
-
-    const filterName = removeBtn.dataset.filter;
-    removeFilterBadge(filterName);
-
-    // Trigger HTMX request to update the list
-    const typeSelect = document.getElementById('type');
-    if (typeSelect) {
-        htmx.trigger(typeSelect, 'change');
-    }
-});
-
-// Update badges when select filters change
-document.body.addEventListener('change', function(e) {
-    const target = e.target;
-    const container = document.getElementById('active-filters-badges');
-    if (!container) return;
-
-    if (target.id === 'type' || target.id === 'status' || target.id === 'score') {
-        const existing = container.querySelector(`[data-filter="${target.id}"]`);
-
-        if (target.value) {
-            // Get display text from selected option
-            const selectedOption = target.options[target.selectedIndex];
-            let displayText = selectedOption.textContent.trim();
-
-            createFilterBadge(target.id, displayText);
-        } else if (existing) {
-            existing.remove();
-        }
-    }
+    // Delete marked keys
+    keysToDelete.forEach(key => {
+        params.delete(key);
+        needsCleanup = true;
+    });
 
-    if (target.id === 'review-from' || target.id === 'review-to') {
-        const reviewFrom = document.getElementById('review-from');
-        const reviewTo = document.getElementById('review-to');
-        const existing = container.querySelector('[data-filter="review"]');
-
-        if (reviewFrom.value || reviewTo.value) {
-            let displayText = '📅 ';
-            if (reviewFrom.value && reviewTo.value) {
-                displayText += `${reviewFrom.value} → ${reviewTo.value}`;
-            } else if (reviewFrom.value) {
-                displayText += `≥ ${reviewFrom.value}`;
-            } else {
-                displayText += `≤ ${reviewTo.value}`;
-            }
-            createFilterBadge('review', displayText);
-        } else if (existing) {
-            existing.remove();
-        }
+    // Update URL if cleanup was needed
+    if (needsCleanup) {
+        const newUrl = url.pathname + (params.toString() ? '?' + params.toString() : '');
+        window.history.replaceState({}, '', newUrl);
     }
 });
 
-// Handle contributor link clicks
+// Handle badge removal - simple page reload with filter removed
 document.body.addEventListener('click', function(e) {
-    const link = e.target.closest('.contributor-link');
-    if (!link) return;
+    const btn = e.target.closest('.remove-filter-badge');
+    if (!btn) return;
 
-    const contributorId = link.dataset.contributorId;
-    const contributorName = link.dataset.contributorName;
+    const filterName = btn.dataset.filter;
+    const filterValue = btn.dataset.value;
 
-    // Update hidden input
-    document.getElementById('contributor').value = contributorId;
+    // Build new URL without this filter value
+    const url = new URL(window.location);
+    const params = url.searchParams;
 
-    // Create badge
-    const badge = createFilterBadge('contributor', contributorName, 'badge-primary');
-    if (badge) {
-        badge.id = 'contributor-badge';
-        const nameSpan = badge.querySelector('span');
-        if (nameSpan) nameSpan.id = 'contributor-badge-name';
+    if (filterValue) {
+        // For multi-value filters (type, status, score)
+        const values = params.getAll(filterName).filter(v => v !== filterValue);
+        params.delete(filterName);
+        values.forEach(v => params.append(filterName, v));
+    } else {
+        // For single-value filters
+        params.delete(filterName);
     }
-});
 
-// VIEW MODE TOGGLE
-// Dynamically update active button state on click
-const viewModeToggle = document.getElementById('view-mode');
-if (viewModeToggle) {
-    viewModeToggle.addEventListener('click', function(e) {
-        if (e.target.closest('button')) {
-            document.querySelectorAll('#view-mode button').forEach(btn => btn.classList.remove('btn-active'));
-            e.target.closest('button').classList.add('btn-active');
-        }
-    });
-}
+    window.location.href = url.toString();
+});
 
 // FORM VALIDATION STYLING
 // Toggle input-error class based on HTMX validation response
diff --git a/src/templates/backup_manage.html b/src/templates/backup_manage.html
index bb3fe0e..5142a7e 100644
--- a/src/templates/backup_manage.html
+++ b/src/templates/backup_manage.html
@@ -23,7 +23,7 @@ <h1 class="text-3xl font-bold mb-8">{% translate "Backup Management" %}</h1>
       <div class="card bg-base-200 shadow-xl">
         <div class="card-body">
           <h2 class="card-title">
-            {% heroicon_outline "arrow-down-tray" class="w-6 h-6" %}
+            {% heroicon_mini "arrow-down-tray" %}
             {% translate "Export Backup" %}
           </h2>
           <p class="text-sm opacity-70">
@@ -44,7 +44,7 @@ <h2 class="card-title">
             <button id="export-backup-btn"
                     class="btn btn-primary"
                     onclick="downloadBackup(this)">
-              {% heroicon_outline "arrow-down-tray" class="w-5 h-5" %}
+              {% heroicon_mini "arrow-down-tray" %}
               {% translate "Download Backup" %}
             </button>
           </div>
@@ -54,7 +54,7 @@ <h2 class="card-title">
       <div class="card bg-base-200 shadow-xl border-2 border-warning">
         <div class="card-body">
           <h2 class="card-title text-warning">
-            {% heroicon_outline "arrow-up-tray" class="w-6 h-6" %}
+            {% heroicon_mini "arrow-up-tray" %}
             {% translate "Import Backup" %}
           </h2>
           <p class="text-sm opacity-70">{% translate "Restore your data from a backup archive." %}</p>
@@ -93,7 +93,7 @@ <h2 class="card-title text-warning">
               <button type="button"
                       onclick="this.form.checkValidity() && (document.getElementById('confirm-import-modal').checked = true) || this.form.reportValidity()"
                       class="btn btn-warning">
-                {% heroicon_outline "arrow-up-tray" class="w-5 h-5" %}
+                {% heroicon_mini "arrow-up-tray" %}
                 {% translate "Import Backup" %}
               </button>
             </div>
@@ -105,7 +105,7 @@ <h2 class="card-title text-warning">
     <div class="mt-8 card bg-base-100 shadow-xl">
       <div class="card-body">
         <h3 class="card-title text-lg">
-          {% heroicon_outline "information-circle" class="w-6 h-6" %}
+          {% heroicon_outline "information-circle" %}
           {% translate "Backup Information" %}
         </h3>
         <div class="divider"></div>
@@ -145,10 +145,12 @@ <h4 class="font-semibold mb-1">💡 {% translate "Best Practices" %}</h4>
     </div>
     <!-- Back Button -->
     <div class="mt-6">
-      <a href="{% url 'home' %}" class="btn btn-ghost">
-        {% heroicon_outline "arrow-left" class="w-5 h-5" %}
+      <button type="button"
+              onclick="history.length> 1 ? history.back() : window.location.href='{% url 'home' %}'"
+              class="btn btn-ghost">
+        {% heroicon_outline "arrow-left" %}
         {% translate "Back to Home" %}
-      </a>
+      </button>
     </div>
   </div>
   {# Confirmation modal for backup import #}
diff --git a/src/templates/base.html b/src/templates/base.html
index 0c44227..c6e2e1f 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -38,7 +38,7 @@
           <div class="flex-none">
             <label for="sidebar-drawer"
                    aria-label="Open sidebar"
-                   class="btn btn-square btn-ghost">{% heroicon_outline "bars-3" class="w-6 h-6" %}</label>
+                   class="btn btn-square btn-ghost">{% heroicon_outline "bars-3" %}</label>
           </div>
           <!-- Logo (mobile only) -->
           <div class="flex-1">
diff --git a/src/templates/media.html b/src/templates/media.html
index 232cc50..4382424 100644
--- a/src/templates/media.html
+++ b/src/templates/media.html
@@ -1,97 +1,127 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% translate "Search" %}
+{% load static %}
+{% load media_tags %}
 {% block title %}
   Datakult
 {% endblock title %}
 {% block content %}
-  <h1 class="text-4xl my-4">{% translate "My media" %}</h1>
+  <div class="flex items-baseline gap-4 my-4">
+    <h1 class="text-4xl">{% translate "My media" %}</h1>
+    <span class="text-sm text-base-content/70">
+      {{ page_obj.paginator.count }}
+      {% if page_obj.paginator.count > 1 %}
+        {% translate "items" %}
+      {% else %}
+        {% translate "item" %}
+      {% endif %}
+    </span>
+  </div>
   <div class="flex flex-col gap-4">
-    <div class="flex justify-between gap-4">
-      {# View mode toggle #}
-      {% include "partials/view-mode-toggle.html" %}
-      {# Sort selector #}
-      <div class="flex join items-center">
-        <button type="button"
-                id="sort-direction-toggle"
-                class="btn join-item"
-                hx-get="{% url 'home' %}"
-                hx-target="#media-list"
-                hx-include="#sort, #view-mode-input, #contributor, #type, #status, #score, #review-from, #review-to"
-                hx-push-url="true"
-                hx-on:click="const sortInput = document.getElementById('sort'); const value = sortInput.value || '-review_date'; const isDesc = value.startsWith('-'); const field = isDesc ? value.slice(1) : value; const next = isDesc ? field : '-' + field; sortInput.value = next; const icon = this.querySelector('svg'); if (icon) { icon.classList.toggle('rotate-180'); }">
-          {% with "transition-transform" as icon_base_class %}
-            {% if sort|slice:":1" == '-' %}
-              {% heroicon_mini "arrow-up" class=icon_base_class|add:" rotate-180" %}
-            {% else %}
-              {% heroicon_mini "arrow-up" class=icon_base_class %}
-            {% endif %}
-          {% endwith %}
-        </button>
+    {# Top bar with search and controls #}
+    <div class="flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch sm:items-center">
+      {# Search bar - takes remaining space #}
+      <form method="get" action="{% url 'home' %}" class="flex-1 order-1">
+        {# Hidden fields to preserve current state #}
+        <input type="hidden" name="view_mode" value="{{ view_mode }}" />
+        <input type="hidden" name="sort" value="{{ sort }}" />
         <input type="hidden"
-               id="sort"
-               name="sort"
-               value="{{ sort|default:'-review_date' }}"
-               hx-get="{% url 'home' %}"
-               hx-target="#media-list"
-               hx-include="#view-mode-input, #contributor, #type, #status, #score, #review-from, #review-to"
-               hx-trigger="change"
-               hx-push-url="true" />
-        <select class="select join-item"
-                id="sort-field"
-                hx-on:change="const sortInput = document.getElementById('sort'); const current = sortInput.value || '-review_date'; const isDesc = current.startsWith('-'); const prefix = isDesc ? '-' : ''; sortInput.value = prefix + this.value; sortInput.dispatchEvent(new Event('change', { bubbles: true }));">
-          <option value="created_at"
-                  {% if sort_field == 'created_at' %}selected{% endif %}>{% translate "Creation date" %}</option>
-          <option value="review_date"
-                  {% if sort_field == 'review_date' %}selected{% endif %}>{% translate "Review date" %}</option>
-          <option value="score" {% if sort_field == 'score' %}selected{% endif %}>{% translate "Score" %}</option>
-        </select>
+               name="contributor"
+               value="{{ contributor.id|default:'' }}" />
+        {% for type_val in filters.type %}<input type="hidden" name="type" value="{{ type_val }}" />{% endfor %}
+        {% for status_val in filters.status %}<input type="hidden" name="status" value="{{ status_val }}" />{% endfor %}
+        {% for score_val in filters.score %}<input type="hidden" name="score" value="{{ score_val }}" />{% endfor %}
+        {% if filters.review_from %}<input type="hidden" name="review_from" value="{{ filters.review_from }}" />{% endif %}
+        {% if filters.review_to %}<input type="hidden" name="review_to" value="{{ filters.review_to }}" />{% endif %}
+        {% if filters.has_review %}<input type="hidden" name="has_review" value="{{ filters.has_review }}" />{% endif %}
+        {% if filters.has_cover %}<input type="hidden" name="has_cover" value="{{ filters.has_cover }}" />{% endif %}
+        <label class="input flex items-center gap-2">
+          <input type="search"
+                 class="grow"
+                 placeholder="{% translate "Search" %}"
+                 name="search"
+                 value="{{ request.GET.search|default:'' }}"
+                 id="search-input" />
+          {% if request.GET.search %}
+            <a href="?{% query_string_exclude request 'search' %}"
+               class="btn btn-ghost btn-sm btn-circle"
+               title="{% translate "Clear search" %}">{% heroicon_mini "x-mark" %}</a>
+          {% endif %}
+          <button type="submit" class="btn btn-ghost btn-sm btn-circle">{% heroicon_mini "magnifying-glass" %}</button>
+        </label>
+      </form>
+      {# Right controls group #}
+      <div class="flex gap-2 order-2 flex-wrap sm:flex-nowrap">
+        {# View mode toggle #}
+        {% include "partials/view-mode-toggle.html" %}
+        {# Sort selector #}
+        <div class="flex join items-center">
+          <a href="?{% query_string request sort=sort|toggle_sort_direction %}"
+             class="btn join-item btn-sm sm:btn-md">
+            {% with "transition-transform" as icon_base_class %}
+              {% if sort|slice:":1" == '-' %}
+                {% heroicon_mini "arrow-up" class=icon_base_class|add:" rotate-180" %}
+              {% else %}
+                {% heroicon_mini "arrow-up" class=icon_base_class %}
+              {% endif %}
+            {% endwith %}
+          </a>
+          <select class="select join-item select-sm sm:select-md"
+                  id="sort-field-select"
+                  onchange="window.location.href = '?{% query_string_exclude request 'sort' 'sort_field' %}&sort=' + (this.value.startsWith('-') ? this.value : '{% if sort|slice:":1" == "-" %}-{% endif %}' + this.value)">
+            <option value="created_at"
+                    {% if sort_field == 'created_at' %}selected{% endif %}>{% translate "Creation date" %}</option>
+            <option value="review_date"
+                    {% if sort_field == 'review_date' %}selected{% endif %}>{% translate "Review date" %}</option>
+            <option value="score" {% if sort_field == 'score' %}selected{% endif %}>{% translate "Score" %}</option>
+          </select>
+        </div>
+        {# Filters button - opens drawer #}
+        <label for="filters-drawer" class="btn btn-sm sm:btn-md" type="button">
+          {% heroicon_mini "funnel" %}
+          <span class="hidden sm:inline">{% translate "Filters" %}</span>
+        </label>
+        {# Add button #}
+        <a href="{% url 'media_add' %}" class="btn btn-primary btn-sm sm:btn-md">
+          {% heroicon_outline "plus" %}
+          <span class="hidden sm:inline">{% translate "Add" %}</span>
+        </a>
       </div>
-      {# Search and add button #}
-      <label class="input flex-1">
-        {% heroicon_mini "magnifying-glass" %}
-        <input type="search"
-               class="grow"
-               placeholder="{% translate "Search" %}"
-               name="search"
-               hx-get="{% url 'search' %}"
-               hx-trigger="keyup delay:500ms"
-               hx-target="#media-list"
-               hx-include="#view-mode-input, #sort, #contributor, #type, #status, #score, #review-from, #review-to"
-               hx-indicator="#spinner"
-               hx-on::before-request="document.getElementById('media-list').style.opacity = 0.4"
-               hx-on::after-request="document.getElementById('media-list').style.opacity = 1" />
-        {% include "partials/spinner.html" with id="spinner" size="xl" htmx_indicator=True %}
-      </label>
-      <a href="{% url 'media_add' %}" class="btn btn-primary">{% heroicon_outline "plus" %}{% translate "Add" %}</a>
     </div>
-    {# Filters #}
-    {% include "partials/filters.html" %}
     {# Active filters badges #}
     <div id="active-filters-badges" class="flex flex-wrap gap-2 items-center">
       {% if filters.type %}
-        <div class="badge badge-secondary gap-1" data-filter="type">
-          <span>{{ filters.type_display|default:filters.type }}</span>
-          <button type="button"
-                  class="btn btn-ghost btn-xs btn-circle filter-badge-remove"
-                  data-filter="type">{% heroicon_mini "x-mark" class="w-4 h-4" %}</button>
-        </div>
+        {% for type_val, type_label in filters.type_display %}
+          <div class="badge badge-secondary gap-1">
+            <span>{{ type_label }}</span>
+            <button type="button"
+                    class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                    data-filter="type"
+                    data-value="{{ type_val }}">{% heroicon_mini "x-mark" %}</button>
+          </div>
+        {% endfor %}
       {% endif %}
       {% if filters.status %}
-        <div class="badge badge-secondary gap-1" data-filter="status">
-          <span>{{ filters.status_display|default:filters.status }}</span>
-          <button type="button"
-                  class="btn btn-ghost btn-xs btn-circle filter-badge-remove"
-                  data-filter="status">{% heroicon_mini "x-mark" class="w-4 h-4" %}</button>
-        </div>
+        {% for status_val, status_label in filters.status_display %}
+          <div class="badge badge-secondary gap-1">
+            <span>{{ status_label }}</span>
+            <button type="button"
+                    class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                    data-filter="status"
+                    data-value="{{ status_val }}">{% heroicon_mini "x-mark" %}</button>
+          </div>
+        {% endfor %}
       {% endif %}
       {% if filters.score %}
-        <div class="badge badge-secondary gap-1" data-filter="score">
-          <span>{% if filters.score == 'none' %}{% translate "Not rated" %}{% else %}{{ filters.score }}⭐ - {{ filters.score_display|default:filters.score }}{% endif %}</span>
-          <button type="button"
-                  class="btn btn-ghost btn-xs btn-circle filter-badge-remove"
-                  data-filter="score">{% heroicon_mini "x-mark" class="w-4 h-4" %}</button>
-        </div>
+        {% for score_val, score_label in filters.score_display %}
+          <div class="badge badge-secondary gap-1">
+            <span>{{ score_label }}</span>
+            <button type="button"
+                    class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                    data-filter="score"
+                    data-value="{{ score_val }}">{% heroicon_mini "x-mark" %}</button>
+          </div>
+        {% endfor %}
       {% endif %}
       {% if filters.review_from or filters.review_to %}
         <div class="badge badge-secondary gap-1" data-filter="review">
@@ -99,8 +129,36 @@ <h1 class="text-4xl my-4">{% translate "My media" %}</h1>
             {% if filters.review_from and filters.review_to %}→{% endif %}
           {{ filters.review_to }}</span>
           <button type="button"
-                  class="btn btn-ghost btn-xs btn-circle filter-badge-remove"
-                  data-filter="review">{% heroicon_mini "x-mark" class="w-4 h-4" %}</button>
+                  class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                  data-filter="review">{% heroicon_mini "x-mark" %}</button>
+        </div>
+      {% endif %}
+      {% if filters.has_review %}
+        <div class="badge badge-secondary gap-1" data-filter="has_review">
+          <span>
+            {% if filters.has_review == 'empty' %}
+              {% translate "No review" %}
+            {% else %}
+              {% translate "Has review" %}
+            {% endif %}
+          </span>
+          <button type="button"
+                  class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                  data-filter="has_review">{% heroicon_mini "x-mark" %}</button>
+        </div>
+      {% endif %}
+      {% if filters.has_cover %}
+        <div class="badge badge-secondary gap-1" data-filter="has_cover">
+          <span>
+            {% if filters.has_cover == 'empty' %}
+              {% translate "No cover" %}
+            {% else %}
+              {% translate "Has cover" %}
+            {% endif %}
+          </span>
+          <button type="button"
+                  class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                  data-filter="has_cover">{% heroicon_mini "x-mark" %}</button>
         </div>
       {% endif %}
       {% if contributor %}
@@ -109,15 +167,13 @@ <h1 class="text-4xl my-4">{% translate "My media" %}</h1>
              id="contributor-badge">
           <span id="contributor-badge-name">{{ contributor.name }}</span>
           <button type="button"
-                  class="btn btn-ghost btn-xs btn-circle filter-badge-remove"
-                  data-filter="contributor">{% heroicon_mini "x-mark" class="w-4 h-4" %}</button>
+                  class="btn btn-ghost btn-xs btn-circle remove-filter-badge"
+                  data-filter="contributor">{% heroicon_mini "x-mark" %}</button>
         </div>
       {% endif %}
     </div>
-    <input type="hidden"
-           id="contributor"
-           name="contributor"
-           value="{{ contributor.id|default:'' }}" />
   </div>
+  {# Filters drawer #}
+  {% include "partials/filters-drawer.html" %}
   {% include "partials/media-list.html" %}
 {% endblock content %}
diff --git a/src/templates/media_detail.html b/src/templates/media_detail.html
index 94c4bab..028a5c7 100644
--- a/src/templates/media_detail.html
+++ b/src/templates/media_detail.html
@@ -18,7 +18,7 @@ <h1 class="text-4xl font-bold">
           {% if media.pub_year %}<span class="text-2xl opacity-70 font-normal">({{ media.pub_year }})</span>{% endif %}
         </h1>
       </div>
-      <a href="{% url 'media_edit' media.pk %}" class="btn btn-primary">{% heroicon_outline "pencil" %}{% translate "Edit" %}</a>
+      <a href="{% url 'media_edit' media.pk %}" class="btn btn-primary">{% heroicon_mini "pencil-square" %}{% translate "Edit" %}</a>
     </div>
     {# Main content #}
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -50,7 +50,7 @@ <h1 class="text-4xl font-bold">
             {# Contributors #}
             {% if media.contributors.all %}
               <div class="flex items-center gap-2 flex-wrap">
-                {% heroicon_outline "user" class="w-5 h-5 opacity-50 shrink-0" %}
+                {% heroicon_mini "user" class="opacity-50 shrink-0" %}
                 <div class="flex flex-wrap gap-1">{% include "partials/media-contributors.html" with use_htmx=False %}</div>
               </div>
             {% endif %}
@@ -60,7 +60,7 @@ <h1 class="text-4xl font-bold">
                  target="_blank"
                  rel="noopener noreferrer"
                  class="link link-primary text-sm flex items-center gap-2">
-                {% heroicon_outline "arrow-top-right-on-square" class="w-5 h-5 shrink-0" %}
+                {% heroicon_mini "arrow-top-right-on-square" class="shrink-0" %}
                 <span class="truncate">{% translate "External metadata" %}</span>
               </a>
             {% endif %}
@@ -82,7 +82,7 @@ <h1 class="text-4xl font-bold">
                 <div class="flex items-center gap-2">{% include "partials/media-status-badge.html" %}</div>
                 {% if media.review_date %}
                   <div class="flex items-center gap-2 text-sm opacity-70">
-                    {% heroicon_outline "calendar" class="w-5 h-5" %}
+                    {% heroicon_mini "calendar" %}
                     <span>{{ media.review_date }}</span>
                   </div>
                 {% endif %}
diff --git a/src/templates/media_edit.html b/src/templates/media_edit.html
index 7ce2cc8..b2ba4b8 100644
--- a/src/templates/media_edit.html
+++ b/src/templates/media_edit.html
@@ -166,7 +166,7 @@ <h1 class="text-4xl font-bold">
                             id="set-today-btn"
                             class="btn btn-xs btn-ghost gap-1"
                             title="{% translate "Set to today" %}">
-                      {% heroicon_mini "calendar" class="w-4 h-4" %}
+                      {% heroicon_mini "calendar" %}
                       {% translate "Today" %}
                     </button>
                   </label>
@@ -199,7 +199,7 @@ <h1 class="text-4xl font-bold">
             <div class="card bg-base-200 shadow-md">
               <div class="card-body p-4">
                 <label for="confirm-delete-modal" class="btn btn-error w-full">
-                  {% heroicon_outline "trash" class="w-5 h-5" %}
+                  {% heroicon_outline "trash" %}
                   {% translate "Delete" %}
                 </label>
               </div>
diff --git a/src/templates/partials/filters-drawer.html b/src/templates/partials/filters-drawer.html
new file mode 100644
index 0000000..98bff8a
--- /dev/null
+++ b/src/templates/partials/filters-drawer.html
@@ -0,0 +1,200 @@
+{% load i18n %}
+{# Filters drawer - opens from the right side #}
+<div class="drawer drawer-end z-50">
+  <!-- Hidden checkbox to control drawer state -->
+  <input id="filters-drawer" type="checkbox" class="drawer-toggle" />
+  <!-- Drawer side panel -->
+  <div class="drawer-side">
+    <!-- Overlay -->
+    <label for="filters-drawer"
+           aria-label="Close filters"
+           class="drawer-overlay"></label>
+    <!-- Filters panel content -->
+    <form method="get"
+          action="{% url 'home' %}"
+          class="bg-base-200 min-h-full w-80 p-4 flex flex-col gap-4">
+      {# Header #}
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-semibold">{% translate "Filters" %}</h2>
+        <label for="filters-drawer" class="btn btn-sm btn-circle btn-ghost">{% heroicon_outline "x-mark" %}</label>
+      </div>
+      {# Hidden fields to preserve view_mode, sort, contributor and search #}
+      <input type="hidden" name="view_mode" value="{{ view_mode }}" />
+      <input type="hidden" name="sort" value="{{ sort }}" />
+      <input type="hidden"
+             name="contributor"
+             value="{{ contributor.id|default:'' }}" />
+      {% if request.GET.search %}<input type="hidden" name="search" value="{{ request.GET.search }}" />{% endif %}
+      {# Filters content #}
+      <div class="flex flex-col gap-3">
+        {# Media type filter #}
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">{% translate "Media type" %}</span>
+          </label>
+          <div class="dropdown dropdown-bottom w-full">
+            <label tabindex="0"
+                   class="select select-bordered select-sm w-full flex items-center justify-between cursor-pointer">
+              <span class="flex-1" id="type-filter-label">
+                {% if filters.type %}
+                  {{ filters.type|length }} {% translate "selected" %}
+                {% else %}
+                  {% translate "All types" %}
+                {% endif %}
+              </span>
+            </label>
+            <div tabindex="0"
+                 class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-full mt-1 max-h-60 overflow-y-auto flex-nowrap">
+              {% for value, label in media_type_choices %}
+                <label class="label cursor-pointer justify-start gap-2 hover:bg-base-200 rounded px-2">
+                  <input type="checkbox"
+                         name="type"
+                         value="{{ value }}"
+                         class="checkbox checkbox-sm"
+                         {% if value in filters.type %}checked{% endif %} />
+                  <span class="label-text">{{ label }}</span>
+                </label>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+        {# Status filter #}
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">{% translate "Status" %}</span>
+          </label>
+          <div class="dropdown dropdown-bottom w-full">
+            <label tabindex="0"
+                   class="select select-bordered select-sm w-full flex items-center justify-between cursor-pointer">
+              <span class="flex-1" id="status-filter-label">
+                {% if filters.status %}
+                  {{ filters.status|length }} {% translate "selected" %}
+                {% else %}
+                  {% translate "All statuses" %}
+                {% endif %}
+              </span>
+            </label>
+            <div tabindex="0"
+                 class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-full mt-1 max-h-60 overflow-y-auto flex-nowrap">
+              {% for value, label in status_choices %}
+                <label class="label cursor-pointer justify-start gap-2 hover:bg-base-200 rounded px-2">
+                  <input type="checkbox"
+                         name="status"
+                         value="{{ value }}"
+                         class="checkbox checkbox-sm"
+                         {% if value in filters.status %}checked{% endif %} />
+                  <span class="label-text">{{ label }}</span>
+                </label>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+        {# Score filter #}
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">{% translate "Score" %}</span>
+          </label>
+          <div class="dropdown dropdown-bottom w-full">
+            <label tabindex="0"
+                   class="select select-bordered select-sm w-full flex items-center justify-between cursor-pointer">
+              <span class="flex-1" id="score-filter-label">
+                {% if filters.score %}
+                  {{ filters.score|length }} {% translate "selected" %}
+                {% else %}
+                  {% translate "All scores" %}
+                {% endif %}
+              </span>
+            </label>
+            <div tabindex="0"
+                 class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-full mt-1 max-h-60 overflow-y-auto flex-nowrap">
+              {% for value, label in score_choices reversed %}
+                <label class="label cursor-pointer justify-start gap-2 hover:bg-base-200 rounded px-2">
+                  <input type="checkbox"
+                         name="score"
+                         value="{{ value }}"
+                         class="checkbox checkbox-sm"
+                         {% if value|stringformat:"d" in filters.score %}checked{% endif %} />
+                  <span class="label-text">{{ value }}⭐ - {{ label }}</span>
+                </label>
+              {% endfor %}
+              <label class="label cursor-pointer justify-start gap-2 hover:bg-base-200 rounded px-2">
+                <input type="checkbox"
+                       name="score"
+                       value="none"
+                       class="checkbox checkbox-sm"
+                       {% if "none" in filters.score %}checked{% endif %} />
+                <span class="label-text">{% translate "Not rated" %}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+        {# Review date range filter #}
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">{% translate "Review date" %}</span>
+          </label>
+          <div class="flex flex-col gap-2">
+            <input type="date"
+                   name="review_from"
+                   id="review-from"
+                   class="input input-bordered input-sm"
+                   placeholder="{% translate "From" %}"
+                   value="{{ filters.review_from }}" />
+            <input type="date"
+                   name="review_to"
+                   id="review-to"
+                   class="input input-bordered input-sm"
+                   placeholder="{% translate "To" %}"
+                   value="{{ filters.review_to }}" />
+          </div>
+        </div>
+        {# Has review filter #}
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">{% translate "Review" %}</span>
+          </label>
+          <select name="has_review"
+                  id="has-review"
+                  class="select select-bordered select-sm">
+            <option value="">{% translate "All" %}</option>
+            <option value="filled"
+                    {% if filters.has_review == 'filled' %}selected{% endif %}>{% translate "Has review" %}</option>
+            <option value="empty"
+                    {% if filters.has_review == 'empty' %}selected{% endif %}>{% translate "No review" %}</option>
+          </select>
+        </div>
+        {# Has cover filter #}
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text font-medium">{% translate "Cover" %}</span>
+          </label>
+          <select name="has_cover"
+                  id="has-cover"
+                  class="select select-bordered select-sm">
+            <option value="">{% translate "All" %}</option>
+            <option value="filled"
+                    {% if filters.has_cover == 'filled' %}selected{% endif %}>{% translate "Has cover" %}</option>
+            <option value="empty"
+                    {% if filters.has_cover == 'empty' %}selected{% endif %}>{% translate "No cover" %}</option>
+          </select>
+        </div>
+      </div>
+      {# Divider #}
+      <div class="divider"></div>
+      {# Actions #}
+      <div class="flex flex-col gap-2">
+        {# Apply filters button #}
+        <button type="submit" class="btn btn-primary btn-sm">
+          {% heroicon_mini "funnel" %}
+          {% translate "Apply" %}
+        </button>
+        {# Clear all filters button #}
+        <a href="{% url 'home' %}?view_mode={{ view_mode }}&sort={{ sort }}"
+           class="btn btn-sm btn-outline">
+          {% heroicon_mini "x-mark" %}
+          {% translate "Clear" %}
+        </a>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/src/templates/partials/filters.html b/src/templates/partials/filters.html
deleted file mode 100644
index 4ee6af6..0000000
--- a/src/templates/partials/filters.html
+++ /dev/null
@@ -1,71 +0,0 @@
-{% load i18n %}
-{# Filter controls for media list #}
-<div class="flex flex-wrap gap-2 items-center" id="filters">
-  {# Media type filter #}
-  <select name="type"
-          id="type"
-          class="select select-sm select-bordered"
-          hx-get="{% url 'home' %}"
-          hx-target="#media-list"
-          hx-include="#view-mode-input, #sort, #contributor, #status, #score, #review-from, #review-to"
-          hx-push-url="true">
-    <option value="">{% translate "All types" %}</option>
-    {% for value, label in media_type_choices %}
-      <option value="{{ value }}" {% if filters.type == value %}selected{% endif %}>{{ label }}</option>
-    {% endfor %}
-  </select>
-  {# Status filter #}
-  <select name="status"
-          id="status"
-          class="select select-sm select-bordered"
-          hx-get="{% url 'home' %}"
-          hx-target="#media-list"
-          hx-include="#view-mode-input, #sort, #contributor, #type, #score, #review-from, #review-to"
-          hx-push-url="true">
-    <option value="">{% translate "All statuses" %}</option>
-    {% for value, label in status_choices %}
-      <option value="{{ value }}" {% if filters.status == value %}selected{% endif %}>{{ label }}</option>
-    {% endfor %}
-  </select>
-  {# Score filter #}
-  <select name="score"
-          id="score"
-          class="select select-sm select-bordered"
-          hx-get="{% url 'home' %}"
-          hx-target="#media-list"
-          hx-include="#view-mode-input, #sort, #contributor, #type, #status, #review-from, #review-to"
-          hx-push-url="true">
-    <option value="">{% translate "All scores" %}</option>
-    {% for value, label in score_choices reversed %}
-      <option value="{{ value }}" {% if filters.score == value|stringformat:"d" %}selected{% endif %}>
-        {{ value }}⭐ - {{ label }}
-      </option>
-    {% endfor %}
-    <option value="none" {% if filters.score == 'none' %}selected{% endif %}>{% translate "Not rated" %}</option>
-  </select>
-  {# Review date range filter #}
-  <div class="flex items-center gap-1">
-    <span class="text-sm text-base-content/70">{% translate "Reviewed" %}</span>
-    <input type="date"
-           name="review_from"
-           id="review-from"
-           class="input input-sm input-bordered w-36"
-           value="{{ filters.review_from }}"
-           hx-get="{% url 'home' %}"
-           hx-target="#media-list"
-           hx-trigger="change"
-           hx-include="#view-mode-input, #sort, #contributor, #type, #status, #score, #review-to"
-           hx-push-url="true" />
-    <span class="text-sm text-base-content/70">{% translate "to" %}</span>
-    <input type="date"
-           name="review_to"
-           id="review-to"
-           class="input input-sm input-bordered w-36"
-           value="{{ filters.review_to }}"
-           hx-get="{% url 'home' %}"
-           hx-target="#media-list"
-           hx-trigger="change"
-           hx-include="#view-mode-input, #sort, #contributor, #type, #status, #score, #review-from"
-           hx-push-url="true" />
-  </div>
-</div>
diff --git a/src/templates/partials/load-more-trigger.html b/src/templates/partials/load-more-trigger.html
index 77aa58e..df69dcb 100644
--- a/src/templates/partials/load-more-trigger.html
+++ b/src/templates/partials/load-more-trigger.html
@@ -1,21 +1,20 @@
 {% load i18n %}
+{% load media_tags %}
 {# This partial creates a "Load more" trigger that uses HTMX infinite scroll #}
 {% if page_obj.has_next %}
   {% if view_mode == 'grid' %}
     <div id="load-more-trigger"
-         hx-get="{% url 'load_more_media' %}?page={{ page_obj.next_page_number }}"
+         hx-get="{% url 'load_more_media' %}?{% query_string request page=page_obj.next_page_number %}"
          hx-trigger="revealed"
          hx-swap="outerHTML"
-         hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to, [name='search']"
          class="col-span-full flex justify-center py-4">
       {% include "partials/spinner.html" with size="lg" show_text=True text=_("Loading more...") inline=True %}
     </div>
   {% else %}
     <tr id="load-more-trigger"
-        hx-get="{% url 'load_more_media' %}?page={{ page_obj.next_page_number }}"
+        hx-get="{% url 'load_more_media' %}?{% query_string request page=page_obj.next_page_number %}"
         hx-trigger="revealed"
-        hx-swap="outerHTML"
-        hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to, [name='search']">
+        hx-swap="outerHTML">
       <td colspan="8" class="text-center py-4">
         {% include "partials/spinner.html" with size="lg" show_text=True text=_("Loading more...") inline=True %}
       </td>
diff --git a/src/templates/partials/media-contributors.html b/src/templates/partials/media-contributors.html
index 22fd825..c314f14 100644
--- a/src/templates/partials/media-contributors.html
+++ b/src/templates/partials/media-contributors.html
@@ -1,23 +1,9 @@
 {# Renders the list of contributors with links #}
-{# Parameters: media, use_htmx (optional, default True if not set) #}
+{# Parameters: media, view_mode, sort #}
 {% if media.contributors.all %}
   {% for contributor in media.contributors.all %}
-    {% if use_htmx == False %}
-      {# Normal link to home page with contributor filter #}
-      <a href="{% url 'home' %}?contributor={{ contributor.id }}"
-         class="link link-hover contributor-link">{{ contributor.name }}</a>
-      {% if not forloop.last %};{% endif %}
-    {% else %}
-      {# HTMX link for in-page filtering (default) #}
-      <a href="#"
-         class="link link-hover contributor-link"
-         data-contributor-id="{{ contributor.id }}"
-         data-contributor-name="{{ contributor.name }}"
-         hx-get="{% url 'home' %}?contributor={{ contributor.id }}"
-         hx-target="#media-list"
-         hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to"
-         hx-push-url="true">{{ contributor.name }}</a>
-      {% if not forloop.last %};{% endif %}
-    {% endif %}
+    <a href="{% url 'home' %}?view_mode={{ view_mode|default:'grid' }}&sort={{ sort|default:'-review_date' }}&contributor={{ contributor.id }}"
+       class="link link-hover contributor-link">{{ contributor.name }}</a>
+    {% if not forloop.last %};{% endif %}
   {% endfor %}
 {% endif %}
diff --git a/src/templates/partials/media-edit-button.html b/src/templates/partials/media-edit-button.html
index fbdd8d7..80b8e1d 100644
--- a/src/templates/partials/media-edit-button.html
+++ b/src/templates/partials/media-edit-button.html
@@ -4,4 +4,4 @@
 <a href="{% url 'media_edit' media.id %}"
    class="btn btn-outline btn-sm btn-primary tooltip"
    data-tip="{% translate "Edit" %}"
-   aria-label="{% translate "Edit" %} {{ media.title }}">{% heroicon_outline "pencil-square" %}</a>
+   aria-label="{% translate "Edit" %} {{ media.title }}">{% heroicon_mini "pencil-square" %}</a>
diff --git a/src/templates/partials/media-score-badge.html b/src/templates/partials/media-score-badge.html
index d4594fc..c5f8ee4 100644
--- a/src/templates/partials/media-score-badge.html
+++ b/src/templates/partials/media-score-badge.html
@@ -3,6 +3,6 @@
 {% if media.score %}
   <span class="badge badge-neutral gap-0 {{ extra_class }}">
     {{ media.score }}
-    {% heroicon_mini "star" class="fill-orange-400 h-4" %}
+    {% heroicon_mini "star" class="fill-orange-400 h-4 w-4" %}
   &nbsp;{{ media.get_score_display }}</span>
 {% endif %}
diff --git a/src/templates/partials/sidebar-nav.html b/src/templates/partials/sidebar-nav.html
index 4ece954..16fdfbc 100644
--- a/src/templates/partials/sidebar-nav.html
+++ b/src/templates/partials/sidebar-nav.html
@@ -16,7 +16,7 @@
   <!-- Main navigation -->
   <li>
     <a href="{% url 'home' %}">
-      {% heroicon_outline "rectangle-stack" class="w-5 h-5" %}
+      {% heroicon_outline "rectangle-stack" %}
       {% translate "All" %}
     </a>
   </li>
@@ -27,35 +27,35 @@
   <li>
     <a href="{% url 'home' %}?status=PLANNED"
        class="{% if request.GET.status == 'PLANNED' %} active {% endif %}">
-      {% heroicon_outline "clock" class="w-5 h-5" %}
+      {% heroicon_mini "clock" %}
       {% translate "Planned" %}
     </a>
   </li>
   <li>
     <a href="{% url 'home' %}?status=IN_PROGRESS"
        class="{% if request.GET.status == 'IN_PROGRESS' %} active {% endif %}">
-      {% heroicon_outline "play" class="w-5 h-5" %}
+      {% heroicon_outline "play" %}
       {% translate "In progress" %}
     </a>
   </li>
   <li>
     <a href="{% url 'home' %}?status=COMPLETED"
        class="{% if request.GET.status == 'COMPLETED' %} active {% endif %}">
-      {% heroicon_outline "check-circle" class="w-5 h-5" %}
+      {% heroicon_mini "check-circle" %}
       {% translate "Completed" %}
     </a>
   </li>
   <li>
     <a href="{% url 'home' %}?status=PAUSED"
        class="{% if request.GET.status == 'PAUSED' %} active {% endif %}">
-      {% heroicon_outline "pause" class="w-5 h-5" %}
+      {% heroicon_mini "pause" %}
       {% translate "Paused" %}
     </a>
   </li>
   <li>
     <a href="{% url 'home' %}?status=DNF"
        class="{% if request.GET.status == 'DNF' %} active {% endif %}">
-      {% heroicon_outline "x-circle" class="w-5 h-5" %}
+      {% heroicon_mini "x-circle" %}
       {% translate "Did not finish" %}
     </a>
   </li>
@@ -66,13 +66,13 @@
   {% if user.is_authenticated %}
     <li>
       <a href="{% url 'accounts:profile_edit' %}">
-        {% heroicon_outline "user-circle" class="w-5 h-5" %}
+        {% heroicon_mini "user-circle" %}
         {% translate "Profile" %}
       </a>
     </li>
     <li>
       <a href="{% url 'backup_manage' %}">
-        {% heroicon_outline "arrow-down-tray" class="w-5 h-5" %}
+        {% heroicon_mini "arrow-down-tray" %}
         {% translate "Backups" %}
       </a>
     </li>
@@ -80,7 +80,7 @@
   <!-- Theme selector - compact dropdown -->
   <li class="dropdown w-full">
     <div tabindex="0" role="button" class="flex items-center gap-2 w-full">
-      {% heroicon_outline "sun" class="w-5 h-5" %}
+      {% heroicon_mini "sun" %}
       <span>{% translate "Theme" %}</span>
     </div>
     <ul tabindex="0"
@@ -123,13 +123,13 @@
       <form action="{% url 'logout' %}" method="post">
         {% csrf_token %}
         <button type="submit" class="flex items-center gap-2 w-full text-left">
-          {% heroicon_outline "arrow-right-on-rectangle" class="w-5 h-5" %}
+          {% heroicon_outline "arrow-right-on-rectangle" %}
           {% translate "Logout" %}
         </button>
       </form>
     {% else %}
       <a href="{% url 'login' %}">
-        {% heroicon_outline "arrow-right-on-rectangle" class="w-5 h-5" %}
+        {% heroicon_outline "arrow-right-on-rectangle" %}
         {% translate "Login" %}
       </a>
     {% endif %}
diff --git a/src/templates/partials/view-mode-toggle.html b/src/templates/partials/view-mode-toggle.html
index c00d5d7..edad862 100644
--- a/src/templates/partials/view-mode-toggle.html
+++ b/src/templates/partials/view-mode-toggle.html
@@ -1,22 +1,11 @@
 {% load i18n %}
+{% load media_tags %}
 {# Reusable view mode toggle. #}
-<input type="hidden"
-       id="view-mode-input"
-       name="view_mode"
-       value="{{ view_mode|default:'grid' }}" />
 <div class="join" id="view-mode">
-        <button class="join-item btn {% if view_mode == 'grid' %}btn-active{% endif %}"
-                hx-get="{% url 'home' %}?view_mode=grid"
-                hx-target="#media-list"
-                hx-include="#sort, #contributor, #type, #status, #score, #review-from, #review-to"
-                hx-push-url="true"
-                hx-on::after-request="document.getElementById('view-mode-input').value = 'grid';"
-                aria-label="{% translate "Grid" %}">{% heroicon_mini "squares-2x2" class="h-4 w-4" %}</button>
-        <button class="join-item btn {% if view_mode == 'list' %}btn-active{% endif %}"
-                hx-get="{% url 'home' %}?view_mode=list"
-                hx-target="#media-list"
-                hx-include="#sort, #contributor, #type, #status, #score, #review-from, #review-to"
-                hx-push-url="true"
-                hx-on::after-request="document.getElementById('view-mode-input').value = 'list';"
-                aria-label="{% translate "List" %}">{% heroicon_mini "list-bullet" class="h-4 w-4" %}</button>
+   <a href="?{% query_string request view_mode='grid' %}"
+      class="join-item btn btn-sm sm:btn-md {% if view_mode == 'grid' %}btn-active{% endif %}"
+      aria-label="{% translate "Grid" %}">{% heroicon_mini "squares-2x2" %}</a>
+   <a href="?{% query_string request view_mode='list' %}"
+      class="join-item btn btn-sm sm:btn-md {% if view_mode == 'list' %}btn-active{% endif %}"
+      aria-label="{% translate "List" %}">{% heroicon_mini "list-bullet" %}</a>
 </div>
diff --git a/src/tests/core/test_views.py b/src/tests/core/test_views.py
index 7e80224..6daf0b9 100644
--- a/src/tests/core/test_views.py
+++ b/src/tests/core/test_views.py
@@ -162,11 +162,11 @@ def test_media_delete_get_redirects(self, logged_in_client, media):
 
 
 class TestSearchView:
-    """Tests for the search view."""
+    """Tests for the search view (integrated into index view)."""
 
     def test_search_with_query(self, logged_in_client, media):
         """Search returns results matching the query."""
-        response = logged_in_client.get(reverse("search"), {"search": media.title})
+        response = logged_in_client.get(reverse("home"), {"search": media.title})
 
         assert response.status_code == 200
 
@@ -175,7 +175,7 @@ def test_search_by_title(self, logged_in_client, media_factory):
         media_factory(title="Unique Title Here")
         media_factory(title="Other Book")
 
-        response = logged_in_client.get(reverse("search"), {"search": "Unique"})
+        response = logged_in_client.get(reverse("home"), {"search": "Unique"})
 
         assert len(response.context["media_list"]) == 1
 
@@ -185,7 +185,7 @@ def test_search_by_contributor(self, logged_in_client, db):
         media = Media.objects.create(title="Some Book", media_type="BOOK")
         media.contributors.add(agent)
 
-        response = logged_in_client.get(reverse("search"), {"search": "Famous"})
+        response = logged_in_client.get(reverse("home"), {"search": "Famous"})
 
         assert media in response.context["media_list"]
 
@@ -253,21 +253,21 @@ def test_default_sorting(self, logged_in_client):
         response = logged_in_client.get(reverse("home"))
 
         assert response.context["sort_field"] == "review_date"
-        assert response.context["order_by"] == "-review_date"
+        assert response.context["sort"] == "-review_date"
 
     def test_custom_sorting(self, logged_in_client):
         """Custom sorting is applied."""
         response = logged_in_client.get(reverse("home"), {"sort": "score"})
 
         assert response.context["sort_field"] == "score"
-        assert response.context["order_by"] == "score"
+        assert response.context["sort"] == "score"
 
     def test_descending_sorting(self, logged_in_client):
         """Descending sorting is applied."""
         response = logged_in_client.get(reverse("home"), {"sort": "-review_date"})
 
         assert response.context["sort_field"] == "review_date"
-        assert response.context["order_by"] == "-review_date"
+        assert response.context["sort"] == "-review_date"
 
     def test_invalid_sort_field_uses_default(self, logged_in_client):
         """Invalid sort field falls back to default."""
@@ -325,6 +325,20 @@ def test_filter_by_no_score(self, logged_in_client, media_factory):
         assert "Unrated" in titles
         assert "Rated" not in titles
 
+    def test_filter_with_invalid_date_ignores_filter(self, logged_in_client, media_factory):
+        """Invalid date values in URL are silently ignored."""
+        media_factory(title="Recent", review_date="2025-01-01")
+        media_factory(title="Old", review_date="2020-01-01")
+
+        # Try with invalid date format - should not crash and return all results
+        response = logged_in_client.get(reverse("home"), {"review_from": "not-a-date"})
+
+        assert response.status_code == 200
+        titles = [m.title for m in response.context["media_list"]]
+        # Both should be present since the invalid filter was ignored
+        assert "Recent" in titles
+        assert "Old" in titles
+
 
 class TestMediaReviewHtmxViews:
     """Tests for HTMX views that display media reviews."""
@@ -569,7 +583,7 @@ def test_search_paginates_results(self, logged_in_client, media_factory):
         for i in range(25):
             media_factory(title=f"Searchable {i}")
 
-        response = logged_in_client.get(reverse("search"), {"search": "Searchable"})
+        response = logged_in_client.get(reverse("home"), {"search": "Searchable"})
 
         assert response.status_code == 200
         assert len(response.context["media_list"]) == 20
@@ -733,8 +747,8 @@ def test_media_detail_contributor_links_to_filtered_list(self, logged_in_client,
         response = logged_in_client.get(reverse("media_detail", kwargs={"pk": media.pk}))
         content = response.content.decode("utf-8")
 
-        # Should contain a normal link (not HTMX) to home with contributor filter
-        expected_url = f'href="/?contributor={agent.id}"'
-        assert expected_url in content
+        # Should contain a link to home with contributor filter
+        assert f"contributor={agent.id}" in content
+        assert 'class="link link-hover contributor-link"' in content
         # Should NOT contain HTMX attributes for contributor links
         assert "hx-target" not in content
diff --git a/src/theme/static_src/src/styles.css b/src/theme/static_src/src/styles.css
index 716e1c4..07bff08 100644
--- a/src/theme/static_src/src/styles.css
+++ b/src/theme/static_src/src/styles.css
@@ -30,7 +30,12 @@
 
 /* Form validation error styles */
 .label-text-alt {
-  @apply inline-block max-w-full break-words whitespace-normal;
+  @apply inline-block max-w-full wrap-break-word whitespace-normal;
+}
+
+/* Force checkboxes to be square */
+.checkbox {
+  border-radius: 0.25rem;
 }
 
 /* Markdown content styles */