diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index f345dfcc..3c704d1a 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -428,18 +428,15 @@ input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
   @apply brightness-[500];
 }
 
-/* Image fade-in on load */
-img:not([src=""]) {
+img:not(.no-fade):not([src=""]) {
   opacity: 0;
   transition: opacity 0.8s ease-in-out;
 }
 
-/* Fade in when image has loaded class */
-img.loaded {
+img.loaded:not(.no-fade) {
   opacity: 1;
 }
 
-/* For images that are already cached/loaded, show them immediately */
-img[complete]:not([src=""]) {
+img[complete]:not(.no-fade):not([src=""]) {
   opacity: 1;
 }
diff --git a/src/components/player/atoms/ProgressBar.tsx b/src/components/player/atoms/ProgressBar.tsx
index 90b91dcc..0c15fd82 100644
--- a/src/components/player/atoms/ProgressBar.tsx
+++ b/src/components/player/atoms/ProgressBar.tsx
@@ -59,7 +59,7 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
             {currentThumbnail && (
               <img
                 src={currentThumbnail.data}
-                className="h-24 border rounded-xl border-gray-800"
+                className="h-24 border rounded-xl border-gray-800 no-fade"
               />
             )}
             <p className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max">
diff --git a/src/components/player/internals/KeyboardEvents.tsx b/src/components/player/internals/KeyboardEvents.tsx
index 3fcb6404..627c3edb 100644
--- a/src/components/player/internals/KeyboardEvents.tsx
+++ b/src/components/player/internals/KeyboardEvents.tsx
@@ -178,7 +178,7 @@ export function KeyboardEvents() {
         if (evt.repeat) {
           return;
         }
-        
+
         // Skip if a button is targeted
         if (
           evt.target &&
@@ -243,7 +243,7 @@ export function KeyboardEvents() {
         if (evt.repeat) {
           return;
         }
-        
+
         // Skip if a button is targeted
         if (
           evt.target &&
diff --git a/src/setup/imageFadeIn.ts b/src/setup/imageFadeIn.ts
index 79e779d9..158f2031 100644
--- a/src/setup/imageFadeIn.ts
+++ b/src/setup/imageFadeIn.ts
@@ -5,7 +5,7 @@
 export function initializeImageFadeIn() {
   // Handle images that are already loaded (cached)
   const handleExistingImages = () => {
-    const images = document.querySelectorAll("img:not(.loaded)");
+    const images = document.querySelectorAll(`img:not(.no-fade):not([src=""]`);
     images.forEach((img) => {
       const htmlImg = img as HTMLImageElement;
       if (htmlImg.complete && htmlImg.naturalHeight !== 0) {
@@ -35,7 +35,7 @@ export function initializeImageFadeIn() {
   // Also check periodically for images that might have loaded
   // This handles edge cases where the load event might not fire
   const checkInterval = setInterval(() => {
-    const images = document.querySelectorAll("img:not(.loaded)");
+    const images = document.querySelectorAll(`img:not(.no-fade):not([src=""]`);
     if (images.length === 0) {
       clearInterval(checkInterval);
       return;