diff --git a/resources/css/app.css b/resources/css/app.css
index d8630fa0f..3b66cc4e1 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -161,6 +161,7 @@ html, body {
 /* Structural surfaces: color scheme variables applied to main chrome */
 body {
     background-color: var(--surface-body) !important;
+    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .dark body {
     background-color: var(--surface-body-dark) !important;
diff --git a/resources/views/browse/index.blade.php b/resources/views/browse/index.blade.php
index 63f68e311..5eee1bf0d 100644
--- a/resources/views/browse/index.blade.php
+++ b/resources/views/browse/index.blade.php
@@ -137,8 +137,8 @@
                                             $hasValidCover = $coverUrl && !str_contains($coverUrl, 'no-cover.png');
                                         @endphp
                                         @if($hasValidCover)
-                                            <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 href="{{ url('/details/' . $result->guid) }}" class="shrink-0 bg-gray-100 dark:bg-gray-700 rounded mr-3" x-show="showThumbs" @unless(request()->query('thumbs') === '1') style="display:none" @endunless>
+                                                <img src="{{ request()->query('thumbs') === '1' ? $coverUrl : '' }}" 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">
@@ -284,8 +284,8 @@
                                     $mHasCover = $mCoverUrl && !str_contains($mCoverUrl, 'no-cover.png');
                                 @endphp
                                 @if($mHasCover)
-                                    <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 href="{{ url('/details/' . $result->guid) }}" class="block mb-2 bg-gray-100 dark:bg-gray-700 rounded-lg" x-show="showThumbs" @unless(request()->query('thumbs') === '1') style="display:none" @endunless>
+                                        <img src="{{ request()->query('thumbs') === '1' ? $mCoverUrl : '' }}" 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/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index f9643096a..44104bc89 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -25,7 +25,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
 </head>
-<body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
+<body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased">
     <div class="h-screen flex">
         <!-- Admin Sidebar -->
         <aside id="sidebar" class="hidden md:flex md:flex-col w-64 bg-gray-900 dark:bg-gray-950 text-white shrink-0 h-full overflow-y-auto">
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index 7e13d0380..f834e0b56 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -30,7 +30,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
 </head>
-<body class="bg-gray-50 dark:bg-gray-900 font-sans antialiased transition-colors duration-200">
+<body class="bg-gray-50 dark:bg-gray-900 font-sans antialiased">
     <div class="h-screen flex">
         <!-- Sidebar -->
         @auth
diff --git a/resources/views/partials/theme-init.blade.php b/resources/views/partials/theme-init.blade.php
index 5a9a667e9..6fac35326 100644
--- a/resources/views/partials/theme-init.blade.php
+++ b/resources/views/partials/theme-init.blade.php
@@ -1,9 +1,9 @@
 {{--
     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, and sets an inline background-color on <html> so the
-    first paint is never white (even before external CSS loads).
+    1. The blocking script applies the 'dark' class and data-color-scheme to <html> synchronously.
+    2. The style tag that follows uses those attributes to set html AND body background-color
+       for every scheme/dark combo so the first paint is never white.
 --}}
 <script nonce="{{ csp_nonce() }}">
 (function() {
@@ -20,6 +20,13 @@
         d.classList.add('dark');
     }
     d.setAttribute('data-color-scheme', scheme);
-    d.style.backgroundColor = isDark ? '#0f172a' : '#f8fafc';
 })();
 </script>
+<style nonce="{{ csp_nonce() }}">
+html, body { background-color: #f8fafc; }
+html.dark, html.dark body { background-color: #0f172a; }
+html[data-color-scheme="emerald"], html[data-color-scheme="emerald"] body { background-color: #f0fdf4; }
+html.dark[data-color-scheme="emerald"], html.dark[data-color-scheme="emerald"] body { background-color: #071a12; }
+html[data-color-scheme="violet"], html[data-color-scheme="violet"] body { background-color: #faf5ff; }
+html.dark[data-color-scheme="violet"], html.dark[data-color-scheme="violet"] body { background-color: #120b20; }
+</style>
