diff --git a/apps/web/src/components/ui/optimized-image.test.tsx b/apps/web/src/components/ui/optimized-image.test.tsx
index dbff1883d..398ec7dba 100644
--- a/apps/web/src/components/ui/optimized-image.test.tsx
+++ b/apps/web/src/components/ui/optimized-image.test.tsx
@@ -19,7 +19,7 @@ describe('OptimizedImage Component', () => {
     render(<OptimizedImage src="test.jpg" alt="Test image" />);
     const wrapper = document.querySelector('.relative');
     expect(wrapper).toBeInTheDocument();
-    expect(wrapper?.querySelector('.bg-kodo-slate')).toBeInTheDocument();
+    expect(wrapper?.querySelector('.bg-muted')).toBeInTheDocument();
   });
 
   it('renders custom placeholder while loading', () => {
diff --git a/apps/web/src/components/ui/optimized-image/BlurPlaceholder.tsx b/apps/web/src/components/ui/optimized-image/BlurPlaceholder.tsx
index 73a63594d..58f42e7ed 100644
--- a/apps/web/src/components/ui/optimized-image/BlurPlaceholder.tsx
+++ b/apps/web/src/components/ui/optimized-image/BlurPlaceholder.tsx
@@ -14,7 +14,7 @@ export function BlurPlaceholder({
   if (!blurDataURL) {
     return (
       <div
-        className={`bg-kodo-slate animate-pulse ${className}`}
+        className={`bg-muted animate-pulse ${className}`}
         style={{ width, height }}
       />
     );
diff --git a/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx b/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx
index a96cb7d92..e73dbcce4 100644
--- a/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx
+++ b/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx
@@ -82,10 +82,10 @@ export function OptimizedImage({
     return (
       fallback || (
         <div
-          className={`bg-kodo-slate flex items-center justify-center ${className}`}
+          className={`bg-muted flex items-center justify-center ${className}`}
           style={{ width, height }}
         >
-          <span className="text-kodo-content-dim text-sm">
+          <span className="text-muted-foreground text-sm">
             Image non disponible
           </span>
         </div>
diff --git a/apps/web/src/components/ui/optimized-image/OptimizedImageSkeleton.tsx b/apps/web/src/components/ui/optimized-image/OptimizedImageSkeleton.tsx
index 32bb5cd17..fc1a4fc27 100644
--- a/apps/web/src/components/ui/optimized-image/OptimizedImageSkeleton.tsx
+++ b/apps/web/src/components/ui/optimized-image/OptimizedImageSkeleton.tsx
@@ -18,7 +18,7 @@ export function OptimizedImageSkeleton({
   return (
     <div
       className={cn(
-        'bg-kodo-slate animate-pulse rounded-lg',
+        'bg-muted animate-pulse rounded-lg',
         className,
       )}
       style={{ width, height }}