diff --git a/components/PastEditionCard/index.tsx b/components/PastEditionCard/index.tsx
index 282c134a8..b6c457513 100644
--- a/components/PastEditionCard/index.tsx
+++ b/components/PastEditionCard/index.tsx
@@ -1,4 +1,5 @@
 import React, { JSX } from 'react';
+import Image from 'next/image';
 import ILink from '../illustration/link';
 
 interface PastEditonCardProp {
@@ -6,9 +7,9 @@ interface PastEditonCardProp {
 }
 
 const PastEditonCard = ({ url }: PastEditonCardProp): JSX.Element => {
-  let year = url.split('.')[1];
+  const year = url.split('.')[1];
   return (
-    <div className="bg-white bg-opacity-10 backdrop-blur-lg bg-clip-padding shadow-lg p-4 w-full mx-auto border-[1.66px] border-[#FFFFFF66] rounded-xl ">
+    <div className="bg-white bg-opacity-10 backdrop-blur-lg bg-clip-padding shadow-lg p-4 w-full mx-auto border-[1.66px] border-[#FFFFFF66] rounded-xl">
       <div className="flex items-center flex-wrap justify-between">
         <h1 className="text-2xl text-white font-semibold">{year}</h1>
         <div>
@@ -16,21 +17,23 @@ const PastEditonCard = ({ url }: PastEditonCardProp): JSX.Element => {
             href={url}
             rel="noreferrer"
             target="_blank"
-            className="flex hover:scale-95 transiti items-center justify-center"
+            className="flex hover:scale-95 transition items-center justify-center"
           >
             <p className="mr-2 text-white text-sm">View Website</p>
-            <ILink className="w-5 " fill="white" />
+            <ILink className="w-5" fill="white" />
           </a>
         </div>
       </div>
 
-      <iframe
-        src={url}
-        height={250}
-        width={'100%'}
-        scrolling="no"
-        className="pointer-events-none overflow-hidden rounded-lg my-4"
-      />
+      <div className="relative w-full h-[250px] my-4 rounded-lg overflow-hidden">
+        <Image
+          src={`/img/past-editions/${year}.webp`}
+          alt={`AsyncAPI Conference ${year}`}
+          fill
+          className="object-cover"
+          sizes="(max-width: 768px) 100vw, 50vw"
+        />
+      </div>
     </div>
   );
 };
diff --git a/next-env.d.ts b/next-env.d.ts
index 52e831b43..254b73c16 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/public/img/past-editions/2020.webp b/public/img/past-editions/2020.webp
new file mode 100644
index 000000000..21fb98485
Binary files /dev/null and b/public/img/past-editions/2020.webp differ
diff --git a/public/img/past-editions/2021.webp b/public/img/past-editions/2021.webp
new file mode 100644
index 000000000..dc052a60c
Binary files /dev/null and b/public/img/past-editions/2021.webp differ
diff --git a/public/img/past-editions/2022.webp b/public/img/past-editions/2022.webp
new file mode 100644
index 000000000..86fbbd4e8
Binary files /dev/null and b/public/img/past-editions/2022.webp differ
diff --git a/public/img/past-editions/2023.webp b/public/img/past-editions/2023.webp
new file mode 100644
index 000000000..2c542000f
Binary files /dev/null and b/public/img/past-editions/2023.webp differ
diff --git a/public/img/past-editions/2024.webp b/public/img/past-editions/2024.webp
new file mode 100644
index 000000000..8ad01ecac
Binary files /dev/null and b/public/img/past-editions/2024.webp differ
diff --git a/public/img/past-editions/2025.webp b/public/img/past-editions/2025.webp
new file mode 100644
index 000000000..db9ad6b0d
Binary files /dev/null and b/public/img/past-editions/2025.webp differ