diff --git a/app/about/AboutPage.tsx b/app/about/AboutPage.tsx
index 38589e0c..c79d675a 100644
--- a/app/about/AboutPage.tsx
+++ b/app/about/AboutPage.tsx
@@ -26,7 +26,7 @@ export function AboutPage() {
       <div className="aboutCover relative  max-w-full mx-auto w-[960px] flex flex-col gap-3 sm:gap-4">
         <h1 className={`hidden`}>Leaflet</h1>
         <img
-          src="/about/HeroText.png"
+          src="/about/HeroText.webp"
           alt=""
           className="absolute left-1/2 -translate-x-1/2 top-0 sm:top-[3%] z-10 w-[90%] sm:w-[75%]"
         />
diff --git a/app/about/Features.tsx b/app/about/Features.tsx
index bf3b1b51..70c571c3 100644
--- a/app/about/Features.tsx
+++ b/app/about/Features.tsx
@@ -4,7 +4,7 @@ export const Features = () => {
       <div className="aboutSpotlightFeatures pt-16 sm:pt-32 flex flex-col gap-16  sm:gap-32">
         <div className="flex md:flex-row flex-col md:gap-12 gap-4 justify-center">
           <img
-            src="/about/reach-audience.png"
+            src="/about/reach-audience.webp"
             alt=""
             className="w-fill min-w-[160px] max-w-[720px] grow mx-auto"
           />
@@ -27,7 +27,7 @@ export const Features = () => {
             </p>
           </div>
           <img
-            src="/about/customize.png"
+            src="/about/customize.webp"
             alt=""
             className="w-fill min-w-[160px] max-w-[720px] grow mx-auto"
           />