diff --git a/components/HtaCenterPage.module.scss b/components/HtaCenterPage.module.scss
index 12f07509..e7dd5bbc 100644
--- a/components/HtaCenterPage.module.scss
+++ b/components/HtaCenterPage.module.scss
@@ -3,3 +3,8 @@
     float: left;
     width: 200px;
 }
+
+.overviewImg {
+    width: 100%;
+    max-width: 600px;
+}
diff --git a/components/HtaCenterPage.tsx b/components/HtaCenterPage.tsx
index ddac4bd1..6a94f4d1 100644
--- a/components/HtaCenterPage.tsx
+++ b/components/HtaCenterPage.tsx
@@ -1,10 +1,12 @@
 import _ from 'lodash';
+import { useEffect, useState } from 'react';
 import { Container, Row } from 'react-bootstrap';
 
 import { HtaCenter, PrincipalInvestigator } from '../types';
 import styles from './HtaCenterPage.module.scss';
 
 export interface HtaCenterPageProps {
+    id: string;
     hta: HtaCenter;
     showGrantNumber?: boolean;
 }
@@ -62,8 +64,22 @@ const PrincipalInvestigators = (props: {
     }
 };
 
-const Overview = (props: { description: string | string[] }) => {
-    const description = [...[props.description]].flat();
+const Overview = (props: { hta: HtaCenter; id: string }) => {
+    const description = [...[props.hta.description]].flat();
+    const [hasOverviewImg, setHasOverviewImg] = useState<boolean>(false);
+    const imgSrc = `/${props.hta.phase}/${props.id}_overview.png`;
+
+    // overview image may not exist for all centers
+    // we need to hide the section in case no image found
+    useEffect(() => {
+        fetch(imgSrc)
+            .then((response) => {
+                if (response.status === 200) {
+                    setHasOverviewImg(true);
+                }
+            })
+            .catch(() => setHasOverviewImg(false));
+    }, []);
 
     return (
         <>
@@ -71,11 +87,20 @@ const Overview = (props: { description: string | string[] }) => {
             {description.map((d, index) => (
                 <p key={index}>{d}</p>
             ))}
+            {hasOverviewImg && (
+                <div className="text-center">
+                    <img
+                        className={styles.overviewImg}
+                        src={imgSrc}
+                        alt={`${props.id}_overview`}
+                    />
+                </div>
+            )}
         </>
     );
 };
 
-const HtaCenterPage = ({ hta, showGrantNumber }: HtaCenterPageProps) => {
+const HtaCenterPage = ({ id, hta, showGrantNumber }: HtaCenterPageProps) => {
     if (!hta) {
         return <div>Loading...</div>;
     }
@@ -85,7 +110,7 @@ const HtaCenterPage = ({ hta, showGrantNumber }: HtaCenterPageProps) => {
             <Row className={'contentWrapper'}>
                 <div className="col">
                     <h1>{hta.title}</h1>
-                    <Overview description={hta.description} />
+                    <Overview hta={hta} id={id} />
                     {showGrantNumber && hta.grantNumber && (
                         <p>
                             <b>Grant Number</b>: {hta.grantNumber}
diff --git a/pages/center/[id].tsx b/pages/center/[id].tsx
index 60062854..81634d1a 100644
--- a/pages/center/[id].tsx
+++ b/pages/center/[id].tsx
@@ -40,7 +40,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
         getCenter(phase1Centers, params?.id) ||
         getCenter(phase2Centers, params?.id);
 
-    return { props: { hta } };
+    return { props: { hta, id: params?.id } };
 };
 
 export default HTAPage;
diff --git a/public/HTA3_overview.webp b/public/HTA3_overview.webp
deleted file mode 100644
index f9706841..00000000
Binary files a/public/HTA3_overview.webp and /dev/null differ
diff --git a/public/HTA4_overview.webp b/public/HTA4_overview.webp
deleted file mode 100644
index 9fa0e978..00000000
Binary files a/public/HTA4_overview.webp and /dev/null differ
diff --git a/public/HTA7_overview.webp b/public/HTA7_overview.webp
deleted file mode 100644
index ca7cb72e..00000000
Binary files a/public/HTA7_overview.webp and /dev/null differ
diff --git a/public/HTA1_overview.png b/public/phase1/hta1_overview.png
similarity index 100%
rename from public/HTA1_overview.png
rename to public/phase1/hta1_overview.png
diff --git a/public/phase1/hta3_overview.png b/public/phase1/hta3_overview.png
new file mode 100644
index 00000000..e50a6f74
Binary files /dev/null and b/public/phase1/hta3_overview.png differ
diff --git a/public/phase1/hta4_overview.png b/public/phase1/hta4_overview.png
new file mode 100644
index 00000000..5225393d
Binary files /dev/null and b/public/phase1/hta4_overview.png differ
diff --git a/public/phase1/hta7_overview.png b/public/phase1/hta7_overview.png
new file mode 100644
index 00000000..4b07fe37
Binary files /dev/null and b/public/phase1/hta7_overview.png differ