diff --git a/apps/website/src/assets/wide-staff-hero.svg b/apps/website/src/assets/wide-staff-hero.svg
new file mode 100644
index 00000000..95bd57fb
--- /dev/null
+++ b/apps/website/src/assets/wide-staff-hero.svg
@@ -0,0 +1,14 @@
+<svg width="1870" height="777" viewBox="0 0 1870 777" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1496.45 193.965L1591.29 221.928L1538.64 307.38L1633.48 335.342L1580.82 420.794" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1734.57 630.619L1736.01 568.012L1796.95 586.094L1798.38 523.487L1859.33 541.569" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1532.37 718.159L1509.9 774.21L1460.98 737.267L1438.51 793.318L1389.6 756.374" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1444.91 86.1841L1442.32 49.5837L1478.86 56.8028L1476.28 20.2024L1512.82 27.4215" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1717.51 156.637L1764.55 141.094L1767.24 191.313L1814.29 175.77L1816.98 225.989" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M277.573 212.378L311.785 225.638L289.682 255.617L323.894 268.877L301.79 298.856" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.9299 548.225L19.9694 457.308L117.275 451.203L86.3146 360.286L183.62 354.181" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M899.936 -2.35031L961.764 -39.3767L981.56 31.0508L1043.39 -5.97565L1063.18 64.4518" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M933.795 602.477L932.418 654.832L881.488 639.524L880.111 691.879L829.18 676.571" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M293.011 749.311L359.025 685.841L403.613 767.445L469.628 703.975L514.216 785.578" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M353.428 71.8128L359.725 17.1987L411.558 37.9292L417.854 -16.6849L469.687 4.0457" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M-14.7365 109.466L55.7188 129.808L17.0027 193.418L87.458 213.76L48.7418 277.37" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/components/staff-agmentation/Hero.astro b/apps/website/src/components/staff-agmentation/Hero.astro
index 3695c3f9..217f06d2 100644
--- a/apps/website/src/components/staff-agmentation/Hero.astro
+++ b/apps/website/src/components/staff-agmentation/Hero.astro
@@ -3,6 +3,7 @@ import { Picture } from "astro:assets";
 import { getCollection } from "astro:content";
 import classnames from "classnames";
 import hero from "../../assets/mobile-staff-hero.svg";
+import heroWide from "../../assets/wide-staff-hero.svg";
 import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
 import { grid_classes } from "../../components/_grid";
@@ -15,7 +16,7 @@ const staff = (await getCollection("staff_members")) as {
 }[];
 
 const contentVariantID = String(
-  Astro.url.searchParams.get("id") || "backfill-your-developer-gap",
+  Astro.url.searchParams.get("id") || "backfill-your-developer-gap"
 );
 
 const staffContent = (await getCollection("staff_augmentation")) as {
@@ -43,31 +44,18 @@ if (!content) {
 >
   <div
     class={classnames(
-      "mx-auto xl:px-0 bg-[#FFF1E1] rounded-b-4xl md:rounded-b-[96px] relative overflow-hidden",
+      "mx-auto xl:px-0 bg-[#FFF1E1] rounded-b-4xl md:rounded-b-[96px] relative overflow-hidden"
     )}
   >
-    <!-- Fills the empty left gap on wide screens.
-     Simulates `background-repeat`, because we can’t use
-     an SVG as background-image in combination with background-repeat
-     because it gets blurry. -->
     <Picture
       src={hero}
       alt=""
-      class="w-[1400px] h-full absolute top-0 -translate-x-full left-[calc(50%-800px)] z-[1] bg-[#FFF1E1] hidden min-[1600px]:block"
+      class="xl:min-w-[1400px] h-full absolute top-0 left-1/2 -translate-x-1/2 z-[1] bg-[#FFF1E1] min-[1600px]:hidden"
     />
-    <!-- Fills the empty right gap on wide screens.
-     Simulates `background-repeat`, because we can’t use
-     an SVG as background-image in combination with background-repeat
-     because it gets blurry. -->
     <Picture
-      src={hero}
-      alt=""
-      class="w-[1400px] h-full absolute top-0 left-[calc((50%-600px)+1400px)] z-[1] bg-[#FFF1E1] hidden min-[1600px]:block"
-    />
-    <Picture
-      src={hero}
+      src={heroWide}
       alt=""
-      class="w-[1400px] h-full absolute top-0 left-1/2 -translate-x-1/2 z-[1] bg-[#FFF1E1]"
+      class="h-full absolute top-0 left-0 z-[1] bg-[#FFF1E1] hidden min-[1600px]:block"
     />
     <div
       class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 !pt-[75px] md:mx-auto relative z-[2]`}
diff --git a/apps/website/src/components/staff-agmentation/StaffMember.astro b/apps/website/src/components/staff-agmentation/StaffMember.astro
index c3af3e2a..a7ac8f7f 100644
--- a/apps/website/src/components/staff-agmentation/StaffMember.astro
+++ b/apps/website/src/components/staff-agmentation/StaffMember.astro
@@ -13,7 +13,7 @@ type Props = {
 const { name, imagePath, role, idx } = Astro.props;
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
-  "/src/assets/staff/*.{jpg, png}",
+  "/src/assets/staff/*.{jpg, png}"
 );
 ---
 
@@ -29,7 +29,14 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
       "rotate-z-[15deg]": idx === 2,
     })}
   >
-    <Image width={230} height={230} src={images[imagePath]()} alt="" />
+    <Image
+      width={230}
+      height={230}
+      src={images[imagePath]()}
+      alt=""
+      widths={[320, 640]}
+      sizes={"320px"}
+    />
   </div>
   <div
     class={classnames("absolute w-full h-full top-0 left-0", {