diff --git a/components/ContentType/ContentPage/index.tsx b/components/ContentType/ContentPage/index.tsx
index 5c5c63893..b6a556dc5 100644
--- a/components/ContentType/ContentPage/index.tsx
+++ b/components/ContentType/ContentPage/index.tsx
@@ -44,6 +44,7 @@ export default async function ContentPage() {
             <Hero
               alt={hero_image.meta.alt || hero_image.meta.caption || ""}
               src={hero_image.url}
+              focalPoint={hero_image.focalPoint}
             />
           </div>
         ) : null}
diff --git a/components/DeprecatedJsonToHtml/renderOptions.tsx b/components/DeprecatedJsonToHtml/renderOptions.tsx
index a73efe396..c22f469e0 100644
--- a/components/DeprecatedJsonToHtml/renderOptions.tsx
+++ b/components/DeprecatedJsonToHtml/renderOptions.tsx
@@ -397,6 +397,7 @@ export const renderOptions: RenderOptions = {
               height={365}
               src={image.url}
               width={width}
+              focalPoint={image.focalPoint}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>
diff --git a/components/Hero/hero.ts b/components/Hero/hero.ts
index 29fd1b8d1..07cc2cb1c 100644
--- a/components/Hero/hero.ts
+++ b/components/Hero/hero.ts
@@ -1,4 +1,7 @@
+import type { FocalPoint } from "@/types/components/image"
+
 export interface HeroProps {
   alt: string
   src: string
+  focalPoint?: FocalPoint
 }
diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
index fade3e6b0..0c1df4108 100644
--- a/components/Hero/index.tsx
+++ b/components/Hero/index.tsx
@@ -4,7 +4,7 @@ import { HeroProps } from "./hero"
 
 import styles from "./hero.module.css"
 
-export default async function Hero({ alt, src }: HeroProps) {
+export default async function Hero({ alt, src, focalPoint }: HeroProps) {
   return (
     <Image
       className={styles.hero}
@@ -12,6 +12,7 @@ export default async function Hero({ alt, src }: HeroProps) {
       height={480}
       width={1196}
       src={src}
+      focalPoint={focalPoint}
     />
   )
 }
diff --git a/components/ImageContainer/index.tsx b/components/ImageContainer/index.tsx
index c7e23d621..390aaa81b 100644
--- a/components/ImageContainer/index.tsx
+++ b/components/ImageContainer/index.tsx
@@ -18,6 +18,7 @@ export default function ImageContainer({
           height={365}
           width={600}
           alt={leftImage.meta.alt || leftImage.title}
+          focalPoint={leftImage.focalPoint}
         />
         <Caption>{leftImage.meta.caption}</Caption>
       </article>
@@ -28,6 +29,7 @@ export default function ImageContainer({
           height={365}
           width={600}
           alt={rightImage.meta.alt || rightImage.title}
+          focalPoint={rightImage.focalPoint}
         />
         <Caption>{leftImage.meta.caption}</Caption>
       </article>
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index ce7a325b5..219981529 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -396,6 +396,7 @@ export const renderOptions: RenderOptions = {
               height={365}
               src={image.url}
               width={width}
+              focalPoint={image.focalPoint}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>
diff --git a/components/TempDesignSystem/Card/CardImage/index.tsx b/components/TempDesignSystem/Card/CardImage/index.tsx
index 9c3233e87..bcdbd265a 100644
--- a/components/TempDesignSystem/Card/CardImage/index.tsx
+++ b/components/TempDesignSystem/Card/CardImage/index.tsx
@@ -24,6 +24,7 @@ export default function CardImage({
                 alt={backgroundImage.title}
                 width={180}
                 height={180}
+                focalPoint={backgroundImage.focalPoint}
               />
             )
         )}
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index f820f9877..4a2ab61a9 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -53,6 +53,7 @@ export default function Card({
             alt={backgroundImage.meta.alt || backgroundImage.title}
             width={imageWidth}
             height={imageHeight}
+            focalPoint={backgroundImage.focalPoint}
           />
         </div>
       )}
diff --git a/components/TempDesignSystem/LoyaltyCard/index.tsx b/components/TempDesignSystem/LoyaltyCard/index.tsx
index b748407f1..ea49366fc 100644
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -32,6 +32,7 @@ export default function LoyaltyCard({
           height={160}
           className={styles.image}
           alt={image.meta.alt || image.title}
+          focalPoint={image.focalPoint}
         />
       ) : null}
       <Title as="h5" level="h3" textAlign="center">
diff --git a/components/TempDesignSystem/TeaserCard/index.tsx b/components/TempDesignSystem/TeaserCard/index.tsx
index a5a578df1..bc40df889 100644
--- a/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/index.tsx
@@ -35,6 +35,7 @@ export default function TeaserCard({
             className={styles.backgroundImage}
             width={399}
             height={201}
+            focalPoint={image.focalPoint}
           />
         </div>
       )}
diff --git a/types/components/image.ts b/types/components/image.ts
index 6ecd9f2cb..67ef46278 100644
--- a/types/components/image.ts
+++ b/types/components/image.ts
@@ -30,5 +30,3 @@ export interface ApiImage {
 export interface ImageProps extends NextImageProps {
   focalPoint?: FocalPoint
 }
-
-export type ImageType = ImageVaultAsset | ApiImage