diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
new file mode 100644
index 0000000..c743539
--- /dev/null
+++ b/src/app/components/Hero.tsx
@@ -0,0 +1,24 @@
+import { GridContainer } from '@trussworks/react-uswds';
+import styles from '../styles/Hero.module.scss';
+
+interface HeroProps {
+  header: string;
+  subheader: string;
+}
+
+export default function Hero({ header, subheader }: HeroProps) {
+  return (
+    <section className="usa-graphic-list usa-section usa-section--light-blue">
+      <GridContainer>
+        <div className={styles.content}>
+          <div className="flex flex-col items-start gap-3 self-start">
+            <h1 className={styles.heading}>{header}</h1>
+            <p className="font-['Source Sans Pro'] max-w-[862px] text-[22px] font-light leading-[33px] text-[#224a58]">
+              {subheader}
+            </p>
+          </div>
+        </div>
+      </GridContainer>
+    </section>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6667fc4..742fc6c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,15 +2,18 @@ import MarkdownContent from './components/MarkdownComponent';
 import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
+import Hero from './components/Hero';
 
 export default async function Home() {
   return (
     <>
-      <section className="usa-graphic-list usa-section usa-section--light-blue">
-        <div className="grid-container">
-          {MarkdownContent('homepage/section_1.md')}
-        </div>
-      </section>
+      <Hero
+        header="Improve the way your jurisdiction collects, processes, and views public
+      health data"
+        subheader="Turn your jurisdiction's data into meaningful intelligence that drives
+      timely public health action using CDC's free, cloud-based products built
+      from Data Integration Building Blocks, or DIBBs."
+      />
       <section className="usa-section">
         <div className="grid-container">
           <Grid row>
diff --git a/src/app/styles/Hero.module.scss b/src/app/styles/Hero.module.scss
new file mode 100644
index 0000000..df87bed
--- /dev/null
+++ b/src/app/styles/Hero.module.scss
@@ -0,0 +1,18 @@
+.content {
+    display: flex;
+    padding: 0px 30px;
+    align-items: center;
+    gap: 60px;
+    max-width: 1200px;
+}
+
+.heading {
+    max-width: 965px;
+    color: #224A58;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    margin: 0px;
+}
\ No newline at end of file