diff --git a/resources/js/alpine/components/cart-page.js b/resources/js/alpine/components/cart-page.js
index 13702d2e3..9f7e05554 100644
--- a/resources/js/alpine/components/cart-page.js
+++ b/resources/js/alpine/components/cart-page.js
@@ -80,6 +80,23 @@ Alpine.data('cartPage', () => ({
 // Multi-operations for browse pages (select all releases, download, cart, delete)
 Alpine.data('releaseMultiOps', () => ({
     allChecked: false,
+    showThumbs: false,
+
+    init() {
+        var attr = this.$el.getAttribute('data-show-thumbs');
+        this.showThumbs = attr === '1';
+    },
+
+    toggleThumbs() {
+        this.showThumbs = !this.showThumbs;
+        var url = new URL(window.location);
+        if (this.showThumbs) {
+            url.searchParams.set('thumbs', '1');
+        } else {
+            url.searchParams.delete('thumbs');
+        }
+        history.replaceState(null, '', url);
+    },
 
     toggleAll() {
         const boxes = document.querySelectorAll('.chkRelease');
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index ba4aa0d24..1437cea6b 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -1,9 +1,9 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+<div class="surface-panel rounded-xl shadow-sm">
     <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
                 <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
diff --git a/resources/views/browse/index.blade.php b/resources/views/browse/index.blade.php
index 5df87b0b5..63f68e311 100644
--- a/resources/views/browse/index.blade.php
+++ b/resources/views/browse/index.blade.php
@@ -43,7 +43,7 @@
     </div>
 
     @if($results->count() > 0)
-        <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
+        <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps" data-show-thumbs="{{ request()->query('thumbs', '0') === '1' ? '1' : '0' }}">
             <div class="px-6 py-4 surface-panel-alt border-b">
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                     <!-- Left Section -->
@@ -124,7 +124,7 @@
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Action</th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                    <tbody class="surface-panel divide-y divide-gray-200 dark:divide-gray-700">
                         @foreach($results as $result)
                             <tr class="hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-700 transition">
                                 <td class="px-3 py-4 whitespace-nowrap">
@@ -133,13 +133,12 @@
                                 <td class="px-3 py-4">
                                     <div class="flex items-start">
                                         @php
-                                            $showThumbnails = request()->query('thumbs', '0') === '1';
-                                            $coverUrl = ($result->cover ?? false) ? $result->cover : ($showThumbnails ? getReleaseCover($result) : null);
+                                            $coverUrl = ($result->cover ?? false) ? $result->cover : getReleaseCover($result);
                                             $hasValidCover = $coverUrl && !str_contains($coverUrl, 'no-cover.png');
                                         @endphp
                                         @if($hasValidCover)
-                                            <a href="{{ url('/details/' . $result->guid) }}" class="shrink-0">
-                                                <img src="{{ $coverUrl }}" class="w-12 h-16 object-cover rounded mr-3 shadow-sm hover:shadow-md transition" alt="Cover" loading="lazy">
+                                            <a href="{{ url('/details/' . $result->guid) }}" class="shrink-0 bg-gray-100 dark:bg-gray-700 rounded mr-3" x-show="showThumbs" x-cloak>
+                                                <img x-bind:src="showThumbs ? '{{ $coverUrl }}' : ''" class="w-12 h-16 object-cover rounded shadow-sm hover:shadow-md transition" alt="Cover" loading="lazy">
                                             </a>
                                         @endif
                                         <div class="flex-1">
@@ -281,13 +280,12 @@
                             <input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-primary-600 dark:text-primary-500 focus:ring-primary-500 dark:bg-gray-700 mt-1" name="release[]" value="{{ $result->guid }}" @change="onCheckboxChange()">
                             <div class="flex-1 min-w-0">
                                 @php
-                                    $showThumbs = request()->query('thumbs', '0') === '1';
-                                    $mCoverUrl = ($result->cover ?? false) ? $result->cover : ($showThumbs ? getReleaseCover($result) : null);
+                                    $mCoverUrl = ($result->cover ?? false) ? $result->cover : getReleaseCover($result);
                                     $mHasCover = $mCoverUrl && !str_contains($mCoverUrl, 'no-cover.png');
                                 @endphp
                                 @if($mHasCover)
-                                    <a href="{{ url('/details/' . $result->guid) }}" class="block mb-2">
-                                        <img src="{{ $mCoverUrl }}" class="w-16 h-20 object-cover rounded-lg shadow-sm" alt="Cover" loading="lazy">
+                                    <a href="{{ url('/details/' . $result->guid) }}" class="block mb-2 bg-gray-100 dark:bg-gray-700 rounded-lg" x-show="showThumbs" x-cloak>
+                                        <img x-bind:src="showThumbs ? '{{ $mCoverUrl }}' : ''" class="w-16 h-20 object-cover rounded-lg shadow-sm" alt="Cover" loading="lazy">
                                     </a>
                                 @endif
                                 <a href="{{ url('/details/' . $result->guid) }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium wrap-break-word text-base">
diff --git a/resources/views/components/view-toggle.blade.php b/resources/views/components/view-toggle.blade.php
index b66cc34df..5b850203c 100644
--- a/resources/views/components/view-toggle.blade.php
+++ b/resources/views/components/view-toggle.blade.php
@@ -82,11 +82,7 @@
         $listUrl .= '?' . http_build_query($listParams);
     }
 
-    // Build thumbnail toggle URL for list view
-    $thumbParams = $currentParams;
     $showThumbnails = request()->query('thumbs', '0') === '1';
-    $thumbParams['thumbs'] = $showThumbnails ? '0' : '1';
-    $thumbUrl = request()->url() . '?' . http_build_query($thumbParams);
 @endphp
 
 <div class="flex items-center gap-2 text-sm">
@@ -105,15 +101,17 @@
         @endif
         <span class="font-semibold text-gray-800 dark:text-gray-200">List</span>
 
-        {{-- Thumbnail toggle in list view --}}
+        {{-- Thumbnail toggle in list view - client-side via Alpine --}}
         @if($covgroup || $shows)
             <span class="text-gray-400 dark:text-gray-500 ml-2">|</span>
-            <a href="{{ $thumbUrl }}"
-               class="inline-flex items-center gap-1 {{ $showThumbnails ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400' }} hover:text-blue-800 dark:hover:text-blue-300"
-               title="{{ $showThumbnails ? 'Hide thumbnails' : 'Show thumbnails' }}">
+            <button type="button"
+               @click="toggleThumbs()"
+               class="inline-flex items-center gap-1 hover:text-blue-800 dark:hover:text-blue-300 cursor-pointer"
+               x-bind:class="showThumbs ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'"
+               x-bind:title="showThumbs ? 'Hide thumbnails' : 'Show thumbnails'">
                 <i class="fas fa-image text-xs"></i>
-                <span>{{ $showThumbnails ? 'Hide Thumbs' : 'Show Thumbs' }}</span>
-            </a>
+                <span x-text="showThumbs ? 'Hide Thumbs' : 'Show Thumbs'"></span>
+            </button>
         @endif
     @endif
 </div>
diff --git a/resources/views/console/index.blade.php b/resources/views/console/index.blade.php
index 677507bbe..5db33b034 100644
--- a/resources/views/console/index.blade.php
+++ b/resources/views/console/index.blade.php
@@ -5,9 +5,9 @@
 @endpush
 
 @section('content')
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+<div class="surface-panel rounded-xl shadow-sm">
     <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav class="flex" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-3">
                 <li class="inline-flex items-center">
@@ -87,7 +87,7 @@
                             $totalFailed = collect($releases)->sum(fn($r) => (int)($r->failed_count ?? 0));
                         @endphp
 
-                        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
+                        <div class="surface-panel border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                             <div class="flex flex-row">
                                 <!-- Console Cover -->
                                 <div class="shrink-0">
diff --git a/resources/views/games/index.blade.php b/resources/views/games/index.blade.php
index f1499574a..2d1100584 100644
--- a/resources/views/games/index.blade.php
+++ b/resources/views/games/index.blade.php
@@ -5,9 +5,9 @@
 @endpush
 
 @section('content')
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+<div class="surface-panel rounded-xl shadow-sm">
     <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
                 <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>
diff --git a/resources/views/music/index.blade.php b/resources/views/music/index.blade.php
index 25598c1e8..4c51b2c45 100644
--- a/resources/views/music/index.blade.php
+++ b/resources/views/music/index.blade.php
@@ -5,7 +5,7 @@
 @endpush
 
 @section('content')
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+<div class="surface-panel rounded-xl shadow-sm">
     <!-- Breadcrumb -->
     <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
diff --git a/resources/views/partials/theme-init.blade.php b/resources/views/partials/theme-init.blade.php
index 3dd39b98e..5a9a667e9 100644
--- a/resources/views/partials/theme-init.blade.php
+++ b/resources/views/partials/theme-init.blade.php
@@ -2,7 +2,8 @@
     Dark mode and color scheme initialization - MUST be included at the very top of <head>,
     BEFORE any CSS/Vite tags, to prevent white flash on page load.
     This tiny blocking script applies the 'dark' class and data-color-scheme to <html> synchronously
-    before the browser paints any content.
+    before the browser paints any content, and sets an inline background-color on <html> so the
+    first paint is never white (even before external CSS loads).
 --}}
 <script nonce="{{ csp_nonce() }}">
 (function() {
@@ -14,9 +15,11 @@
         var t = localStorage.getItem('theme') || 'light';
         var scheme = localStorage.getItem('color_scheme') || 'blue';
     @endauth
-    if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    var isDark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    if (isDark) {
         d.classList.add('dark');
     }
     d.setAttribute('data-color-scheme', scheme);
+    d.style.backgroundColor = isDark ? '#0f172a' : '#f8fafc';
 })();
 </script>
diff --git a/resources/views/search/index.blade.php b/resources/views/search/index.blade.php
index 20cb97415..ff5da0ed3 100644
--- a/resources/views/search/index.blade.php
+++ b/resources/views/search/index.blade.php
@@ -204,7 +204,7 @@
                             <th class="px-3 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Action</th>
                         </tr>
                     </thead>
-                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                    <tbody class="surface-panel divide-y divide-gray-200 dark:divide-gray-700">
                         @foreach($results as $result)
                             <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                 <td class="px-3 py-4 whitespace-nowrap">
diff --git a/resources/views/series/viewseries.blade.php b/resources/views/series/viewseries.blade.php
index c6bf80f40..f5387bd28 100644
--- a/resources/views/series/viewseries.blade.php
+++ b/resources/views/series/viewseries.blade.php
@@ -1,9 +1,9 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+<div class="surface-panel rounded-xl shadow-sm">
     <!-- Breadcrumb -->
-    <div class="px-6 py-4 border-b border-gray-200">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
             <ol class="flex items-center space-x-2 text-sm text-gray-600">
                 <li><a href="{{ url($site['home_link'] ?? '/') }}" class="hover:text-blue-600">Home</a></li>