diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index f257904..05f79f0 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -257,6 +257,7 @@ export default function WorkFlow() {
                   <ErrorBoundary>
                     <ThumbnailGrid
                       isLoading={isLoading}
+                      isPlaying={isPlaying}
                       currentStep={currentStep}
                       currentSketchIndex={currentSketchIndex}
                       taskSketch={taskSketch}
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index 35cff67..5c4c948 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -7,6 +7,7 @@ import { ProgressiveReveal, presets } from '@/components/ui/progressive-reveal';
 
 interface ThumbnailGridProps {
   isLoading: boolean;
+  isPlaying: boolean;
   currentStep: string;
   currentSketchIndex: number;
   taskSketch: any[];
@@ -20,6 +21,7 @@ interface ThumbnailGridProps {
 
 export function ThumbnailGrid({
   isLoading,
+  isPlaying,
   currentStep,
   currentSketchIndex,
   taskSketch,
@@ -183,7 +185,7 @@ export function ThumbnailGrid({
           <div className="w-full h-full transform hover:scale-105 transition-transform duration-500">
             <img 
               className={`w-full h-full object-cover transition-all duration-300 ${
-                !taskVideos[index] ? 'filter blur-sm opacity-60' : ''
+                (!taskVideos[index] && !isPlaying) ? 'filter blur-sm opacity-60' : ''
               }`}
               src={sketch.url}
               alt={`Thumbnail ${index + 1}`}