diff --git a/src/components/global/Banner.tsx b/src/components/global/Banner.tsx
index 4058716..920c705 100644
--- a/src/components/global/Banner.tsx
+++ b/src/components/global/Banner.tsx
@@ -8,6 +8,9 @@ const pacifico = Pacifico({ weight: "400", subsets: ["latin"] });
 export default async function Banner() {
   const headerImage = await prisma.artwork.findFirst({
     where: { setAsHeader: true },
+    include: {
+      file: true
+    }
     // include: {
     //   variants: {
     //     where: { type: "modified" },
@@ -24,7 +27,7 @@ export default async function Banner() {
       {headerImage && (
         <div className="relative w-full h-24 md:h-48 lg:h-48">
           <Image
-            src={`/api/image/${headerImage.variants[0].s3Key}`}
+            src={`/api/image/modified/${headerImage.file.fileKey}.webp`}
             alt={alt}
             fill
             className="object-cover"