diff --git a/src/app/_components/joker-card.tsx b/src/app/_components/joker-card.tsx
index 16c4796..6d8ca69 100644
--- a/src/app/_components/joker-card.tsx
+++ b/src/app/_components/joker-card.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { OptimizedImage } from '@/components/optimized-image'
 import type { ElementType } from 'react'
 import slugify from 'slugify'
 
@@ -16,7 +17,11 @@ export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
       className={'flex scroll-mt-36 flex-col items-center gap-2'}
       id={`${slugify(name, { lower: true, strict: true })}-toc`}
     >
-      <img src={img} alt={name} className={'!m-0 max-w-24 rounded-md'} />
+      <OptimizedImage
+        src={img}
+        alt={name}
+        className={'!m-0 max-w-24 rounded-md'}
+      />
       <div className={'flex flex-col gap-1'}>
         <Heading className={'!m-0 text-nowrap font-medium text-sm'}>
           {name}