diff --git a/pages/[lang]/index.res b/pages/[lang]/index.res
index bd4a306c..83a18c91 100644
--- a/pages/[lang]/index.res
+++ b/pages/[lang]/index.res
@@ -77,7 +77,13 @@ module T = {
   ) =>
     <Page.Unstructured>
       <Hero
-        imageSrc="/static/oc-sq.jpeg"
+        imageSrc="/static/hero-caml-400w.jpeg"
+        imageSrcSet="/static/hero-caml-400w.jpeg 400w,
+                     /static/hero-caml-600w.jpeg 600w,
+                     /static/hero-caml-800w.jpeg 800w"
+        imageSizes="(max-width: 599px) 200px, 
+                    (max-width: 799px) 300px, 
+                    (min-width: 800px) 400px"
         imagePos={#Right}
         header=heroContent.heroHeader
         body=heroContent.heroBody
diff --git a/pages/storybook.res b/pages/storybook.res
index 470c5998..679ebfcd 100644
--- a/pages/storybook.res
+++ b/pages/storybook.res
@@ -434,7 +434,7 @@ module Categories = {
     module Hero = {
       @react.component
       let make = () => {
-        let imageSrc = "/static/oc-sq.jpeg"
+        let imageSrc = "/static/hero-caml-800w.jpeg"
         let header = "A Header"
         let body = "Some body text here that should be in latin. Some more body text here and here. Text text text text text text text text text text text text text."
         let buttonLinks = {
diff --git a/public/static/hero-caml-400w.jpeg b/public/static/hero-caml-400w.jpeg
new file mode 100644
index 00000000..9713fc83
Binary files /dev/null and b/public/static/hero-caml-400w.jpeg differ
diff --git a/public/static/hero-caml-600w.jpeg b/public/static/hero-caml-600w.jpeg
new file mode 100644
index 00000000..07520be8
Binary files /dev/null and b/public/static/hero-caml-600w.jpeg differ
diff --git a/public/static/hero-caml-800w.jpeg b/public/static/hero-caml-800w.jpeg
new file mode 100644
index 00000000..828f4f0c
Binary files /dev/null and b/public/static/hero-caml-800w.jpeg differ
diff --git a/public/static/oc-sq.jpeg b/public/static/oc-sq.jpeg
deleted file mode 100644
index 5b6d3dce..00000000
Binary files a/public/static/oc-sq.jpeg and /dev/null differ
diff --git a/src/Hero.res b/src/Hero.res
index a5265d0f..62d54fda 100644
--- a/src/Hero.res
+++ b/src/Hero.res
@@ -21,14 +21,14 @@ module HeroTextContainer = {
     </div>
 }
 
-let image = (~src, ~pos) => {
+let image = (~srcSet="", ~sizes="", ~src, ~pos) => {
   let horizontalPlace = switch pos {
   | #Right => "lg:right-0"
   | #Left => "lg:left-0"
   }
   <div
     className={`relative w-full h-64 sm:h-72 md:h-96 lg:absolute lg:inset-y-0 ${horizontalPlace} lg:w-1/2 lg:h-full`}>
-    <img className="absolute inset-0 w-full h-full object-cover" src alt="" />
+    <img className="absolute inset-0 w-full h-full object-cover" src srcSet sizes alt="" />
   </div>
 }
 
@@ -89,10 +89,10 @@ let callToActionArea = (~header, ~body, ~buttonLinks, ~imagePos) => {
 }
 
 @react.component
-let make = (~imageSrc, ~header, ~body, ~buttonLinks=?, ~imagePos, ()) =>
-  <SectionContainer.LargeCentered>
+let make = (~imageSrcSet="", ~imageSizes="", ~imageSrc, ~header, ~body, ~buttonLinks=?, ~imagePos, ()) =>
+  <SectionContainer.LargeCentered> 
     <div className="lg:relative">
       {callToActionArea(~header, ~body, ~buttonLinks, ~imagePos)}
-      {image(~src=imageSrc, ~pos=imagePos)}
+      {image(~srcSet=imageSrcSet, ~sizes=imageSizes, ~src=imageSrc, ~pos=imagePos)}
     </div>
   </SectionContainer.LargeCentered>
diff --git a/src/Hero.resi b/src/Hero.resi
index 4616a2e1..8c06dc08 100644
--- a/src/Hero.resi
+++ b/src/Hero.resi
@@ -14,6 +14,8 @@ type buttonLinks = {
 
 @react.component
 let make: (
+  ~imageSrcSet: string=?,
+  ~imageSizes: string=?,
   ~imageSrc: string,
   ~header: string,
   ~body: string,