diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index 212e97432..a90c9e778 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -1,4 +1,4 @@
-import { Image, PageFragment } from '@custom/schema';
+import { Image, Link, PageFragment } from '@custom/schema';
 import React from 'react';
 
 export function PageHero(props: NonNullable<PageFragment['hero']>) {
@@ -45,6 +45,16 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
           {props.lead ? (
             <p className="mt-6 text-lg leading-8 text-gray-300">{props.lead}</p>
           ) : null}
+          {props.ctaText && props.ctaUrl ? (
+            <Link
+              href={props.ctaUrl}
+              className={
+                'mt-7 inline-block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
+              }
+            >
+              {props.ctaText}
+            </Link>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index f72684dcb..dc50f159d 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -74,6 +74,8 @@ export const FullHero = {
           source: image(Landscape, { width: 2000 }),
           alt: 'Stock photo landscape hero.',
         },
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
       },
     },
   },