diff --git a/apps/website/src/assets/chat-two-bubbles.svg b/apps/website/src/assets/chat-two-bubbles.svg
new file mode 100644
index 00000000..916b5ba3
--- /dev/null
+++ b/apps/website/src/assets/chat-two-bubbles.svg
@@ -0,0 +1,4 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.1387 17.478C35.815 17.478 39.3407 18.9384 41.9401 21.538C44.5396 24.1375 46.0001 27.6632 46.0001 31.3394C46.0089 34.068 45.2023 36.7369 43.6844 39.004L46.0001 45.2009L38.205 43.7984C36.3303 44.7126 34.2737 45.1921 32.188 45.2009C30.1023 45.2097 28.0416 44.7475 26.1593 43.8493C24.277 42.9511 22.6217 41.6393 21.3167 40.0124C20.0117 38.3856 19.0906 36.4851 18.6222 34.4526C18.1538 32.4203 18.15 30.3084 18.6112 28.2743C19.0724 26.2403 19.9867 24.3365 21.2859 22.7049C22.5851 21.0733 24.2357 19.756 26.1148 18.851C27.9939 17.946 30.053 17.4767 32.1387 17.478Z" stroke="#FEB534" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.1281 9.35694C31.9317 6.56206 28.9185 4.52159 25.508 3.51963C22.0975 2.51768 18.4594 2.6041 15.1003 3.76687C11.7412 4.92964 8.82828 7.11087 6.76704 10.0069C4.70582 12.9029 3.59891 16.3696 3.60042 19.9242C3.59031 23.3032 4.58974 26.6081 6.47054 29.4152L3.60042 37.047L10.5148 35.8076" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/public/hands-puzzle.svg b/apps/website/src/assets/hands-puzzle.svg
similarity index 100%
rename from apps/website/public/hands-puzzle.svg
rename to apps/website/src/assets/hands-puzzle.svg
diff --git a/apps/website/src/assets/staff-augmentation-team.jpg b/apps/website/src/assets/staff-augmentation-team.jpg
new file mode 100644
index 00000000..d714eede
Binary files /dev/null and b/apps/website/src/assets/staff-augmentation-team.jpg differ
diff --git a/apps/website/src/components/BookACallForm.astro b/apps/website/src/components/BookACallForm.astro
index 22f18f5b..daaf3283 100644
--- a/apps/website/src/components/BookACallForm.astro
+++ b/apps/website/src/components/BookACallForm.astro
@@ -11,12 +11,14 @@ export interface Props {
   calLink?: string;
   eventType?: string;
   className?: string;
+  contentClassName?: string;
 }
 
 const {
   calLink = "team/crocoder/hello",
   eventType = "hello",
   className,
+  contentClassName,
 } = Astro.props;
 ---
 
@@ -25,7 +27,7 @@ const {
     "bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]",
     className,
   )}
-  contentClassName={`${grid_classes} items-center`}
+  contentClassName={classNames(`${grid_classes} items-center`, contentClassName)}
 >
   <div
     class="col-span-6 md:col-span-8 md:col-start-3 -translate-y-1/2 -mb-40 xl:col-span-6 xl:col-start-4 lg:-mb-60"
diff --git a/apps/website/src/components/staff-agmentation/GetYourPlanForm.astro b/apps/website/src/components/staff-agmentation/GetYourPlanForm.astro
index e9bc0527..9abc5606 100644
--- a/apps/website/src/components/staff-agmentation/GetYourPlanForm.astro
+++ b/apps/website/src/components/staff-agmentation/GetYourPlanForm.astro
@@ -93,7 +93,6 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
       <p id="form-notification" class="text-sm min-h-6 pt-1"></p>
     </div>
     <script>
-      import type { SyntheticEvent } from "react";
       import * as notification from "../../content/contact/notification.md";
 
       const thankYouCardSection = document.getElementById(
diff --git a/apps/website/src/components/staff-agmentation/OurEngineers.astro b/apps/website/src/components/staff-agmentation/OurEngineers.astro
index bcdbf114..b400bc50 100644
--- a/apps/website/src/components/staff-agmentation/OurEngineers.astro
+++ b/apps/website/src/components/staff-agmentation/OurEngineers.astro
@@ -1,79 +1,122 @@
 ---
-import { Image } from "astro:assets";
-import circleCheckIcon from "../../assets/circle-check-icon.svg";
-import crocoderIll16 from "../../assets/crocoder-ill-16-1.png";
+import { Picture } from "astro:assets";
+import team from "../../assets/staff-augmentation-team.jpg";
+import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
 import { grid_classes } from "../../components/_grid";
-import { getCollection, type CollectionEntry } from "astro:content";
-import type { MainContent } from "./MainContent.astro";
+import "../../styles/main.css";
+import { getCollection } from "astro:content";
+import { Image } from "astro:assets";
+
+const contentVariantID = String(
+  Astro.url.searchParams.get("id") || "backfill-your-developer-gap",
+);
 
-const staffContent = (await getCollection("staff_augmentation")) as {
+const staffAugmentation = (await getCollection("staff_augmentation")) as {
   data: {
     id: string;
-    main: MainContent;
+    main: {
+      ourEngineers: {
+        image: string;
+        alt: string;
+        title: string;
+        description: string;
+      }[];
+    };
   };
 }[];
 
-const contentVariantId = String(
-  Astro.url.searchParams.get("id") || "backfill-your-developer-gap"
-);
-
-let content = staffContent.find((c) => c.data.id === contentVariantId);
+let content = staffAugmentation.find((v) => v.data.id === contentVariantID);
 
 if (!content) {
-  content = staffContent[0];
+  content = staffAugmentation[0];
 }
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/*.svg",
+);
 ---
 
-<!-- Engineers Section -->
-<Section className="!py-12 md:!py-20">
-  <div class={`${grid_classes} gap-8 md:gap-20`}>
-    <div class="col-span-6 md:col-span-12 lg:col-span-6">
-      <h2
-        class="text-[28px] leading-[32px] md:text-[54px] md:leading-[60px] tracking-tight font-medium mb-6 md:mb-12"
+<Section className="!p-0" contentClassName="md:max-w-screen">
+  <div
+    class="relative pt-49 pb-18 md:pb-24 min-[1920px]:pb-48 min-[1920px]:pt-98"
+  >
+    <Picture
+      src={team}
+      alt="Developers collaborating"
+      widths={[320, 480, 578, 640, 720, 800, 940, 1200, 1412, 1920]}
+      sizes="100vw"
+      format="avif"
+      loading="lazy"
+      class="absolute inset-0 w-full h-full object-cover object-top md:object-[50%_25%] -z-10 bg-[#424c6d]"
+    />
+    <div
+      class="absolute inset-0 -z-10"
+      style="background:linear-gradient(180deg,rgba(30, 26, 26, 0) 0%, #1E1A1A 100%)"
+    >
+      <!-- Overlay -->
+    </div>
+    <div class="mx-auto xl:px-0">
+      <div
+        class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
       >
-        <span class="text-secondary">Our </span><span class="text-[#607A1A]"
-          >Engineers</span
+        <div
+          class="row-start-1
+          col-start-1
+          col-span-6
+          md:col-span-10
+          md:col-start-2
+          text-white"
         >
-      </h2>
-
-      <div class="space-y-4 md:space-y-7">
+          <div class="flex flex-col items-center gap-2 md:gap-4 max-h-fit">
+            <Pill
+              className="text-[10px] min-[340px]:text-xs min-[390px]:text-sm sm:text-base px-2 py-1 min-[390px]:px-3 min-[390px]:py-1.5 sm:px-4 sm:py-2 max-h-[36px]"
+              >Why work with us</Pill
+            >
+            <h2
+              class="text-[18px] leading-[22px] min-[390px]:text-[24px] min-[390px]:leading-[28px] sm:text-[32px] sm:leading-[36px] md:text-[54px] md:leading-[59.4px] font-medium lg:text-[74px] lg:leading-[82px] tracking-tight text-center"
+            >
+              Our <span class="text-crocoder-orange">Engineers</span>
+            </h2>
+            <p
+              class="font-normal text-sm leading-5 min-[390px]:text-base min-[390px]:leading-6 sm:text-lg sm:leading-7 md:text-[22px] md:leading-8 tracking-normal lg:px-32 text-center"
+            >
+              Our software development services helped clients big and small
+              build solutions with a lasting impact.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="bg-contrast">
+    <div
+      class={`${grid_classes}
+    md:max-w-[var(--max-width)]
+    pl-4 md:pl-7 pr-0 lg:pr-7 py-0
+    md:mx-auto
+    relative
+    min-[1281px]:px-0
+    `}
+    >
+      <div
+        class="col-span-6 md:col-span-12 flex gap-2 overflow-x-auto no-scrollbar pr-4 md:pr-7 lg:px-0 lg:overflow-hidden"
+      >
         {
-          content.data.main.ourEngineers.map((q) => (
-            <div class="flex gap-4 md:gap-7">
-              <div class="w-8 h-8 md:w-12 md:h-12 flex-shrink-0">
-                <Image
-                  src={circleCheckIcon}
-                  alt="Check icon"
-                  width={48}
-                  height={48}
-                  loading="lazy"
-                  class="w-full h-full"
-                />
-              </div>
-              <div>
-                <p class="text-[16px] leading-[24px] md:text-[22px] md:leading-8 font-semibold text-secondary">
-                  {q.title}
-                </p>
-                <p class="text-[16px] leading-[24px] md:text-[22px] md:leading-8 text-secondary">
-                  {q.description}
-                </p>
-              </div>
+          content.data.main.ourEngineers.map((c) => (
+            <div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 min-w-[240px] lg:flex-1 lg:min-w-auto">
+              <Image
+                src={images[c.image]()}
+                alt={c.alt}
+                width={48}
+                height={48}
+              />
+              <h2 class="text-[22px] text-[#FFFFFF]">{c.title}</h2>
+              <p class="text-base leading-6 text-[#FFFFFF]">{c.description}</p>
             </div>
           ))
         }
       </div>
     </div>
-
-    <div class="hidden lg:block col-span-6 lg:col-span-6">
-      <Image
-        src={crocoderIll16}
-        alt="CroCoder engineering team"
-        widths={[320, 480, 640, 720, 800, 940]}
-        sizes="calc(50vw - 28px)"
-        loading="lazy"
-        class="w-full h-auto"
-      />
-    </div>
   </div>
 </Section>
diff --git a/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md b/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md
index add7cb09..5dc23296 100644
--- a/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md
+++ b/apps/website/src/content/ctoservices/expert-driven-team-augmentation.md
@@ -1,7 +1,7 @@
 ---
 idx: 2
 image: "/pic-people-collaborating-1.png"
-iconFirst: "/hands-puzzle.svg"
+iconFirst: "/src/assets/hands-puzzle.svg"
 iconSecond: "/performance-increase.svg"
 sectionTitle: "Expert-driven Team Augmentation"
 titleFirst: "Seamless integration"
diff --git a/apps/website/src/content/staff_augmentation/variant_1.md b/apps/website/src/content/staff_augmentation/variant_1.md
index 911b1b9d..59b0aaca 100644
--- a/apps/website/src/content/staff_augmentation/variant_1.md
+++ b/apps/website/src/content/staff_augmentation/variant_1.md
@@ -38,22 +38,32 @@ main:
     ourEngineers:
       [
         {
+          image: "/src/assets/target-icon-correct.svg",
+          alt: "Illustration of a target",
           title: "Goal-Driven",
           description: "They focus on outcomes, not just tasks",
         },
         {
+          image: "/src/assets/seo_search_graph.svg",
+          alt: "Illustration of search graph",
           title: "Proactive",
           description: "They solve problems without waiting for instructions",
         },
         {
+          image: "/src/assets/chat-two-bubbles.svg",
+          alt: "Illustration of two cloud bubbles",
           title: "Communicative",
           description: "Async-ready, remote-native, and highly collaborative",
         },
         {
+          image: "/src/assets/hands-puzzle.svg",
+          alt: "Illustration of hands on puzzle",
           title: "Flexible",
           description: "Short-term, long-term, or somewhere in between",
         },
         {
+          image: "/src/assets/check_badge.svg",
+          alt: "Illustration of check badge",
           title: "Skilled across levels",
           description: "From promising juniors to proven engineering leads",
         },
diff --git a/apps/website/src/content/staff_augmentation/variant_2.md b/apps/website/src/content/staff_augmentation/variant_2.md
index 3c9f98ce..66f5f09e 100644
--- a/apps/website/src/content/staff_augmentation/variant_2.md
+++ b/apps/website/src/content/staff_augmentation/variant_2.md
@@ -40,22 +40,32 @@ main:
     ourEngineers:
       [
         {
+          image: "/src/assets/target-icon-correct.svg",
+          alt: "Illustration of a target",
           title: "Product-minded",
           description: "Focused on moving the project forward",
         },
         {
+          image: "/src/assets/seo_search_graph.svg",
+          alt: "Illustration of search graph",
           title: "Proactive",
           description: "Jump into work and unblock critical paths without waiting",
         },
         {
+          image: "/src/assets/chat-two-bubbles.svg",
+          alt: "Illustration of two cloud bubbles",
           title: "Communicative",
           description: "Async-ready, remote-native, and highly collaborative",
         },
         {
+          image: "/src/assets/hands-puzzle.svg",
+          alt: "Illustration of hands on puzzle",
           title: "Flexible",
           description: "Short-term, long-term, or somewhere in between",
         },
         {
+          image: "/src/assets/check_badge.svg",
+          alt: "Illustration of check badge",
           title: "Skilled across levels",
           description: "From promising juniors to proven engineering leads",
         },
diff --git a/apps/website/src/content/staff_augmentation/variant_3.md b/apps/website/src/content/staff_augmentation/variant_3.md
index 472fe674..d3a19293 100644
--- a/apps/website/src/content/staff_augmentation/variant_3.md
+++ b/apps/website/src/content/staff_augmentation/variant_3.md
@@ -40,22 +40,32 @@ main:
     ourEngineers:
       [
         {
+          image: "/src/assets/target-icon-correct.svg",
+          alt: "Illustration of a target",
           title: "Problem-Solvers",
           description: "They unblock issues and improve the system as they work",
         },
         {
+          image: "/src/assets/seo_search_graph.svg",
+          alt: "Illustration of search graph",
           title: "Proactive",
           description: "Senior-level initiative to drive results fast",
         },
         {
+          image: "/src/assets/chat-two-bubbles.svg",
+          alt: "Illustration of two cloud bubbles",
           title: "Communicative",
           description: "Async-ready, remote-native, and highly collaborative",
         },
         {
+          image: "/src/assets/hands-puzzle.svg",
+          alt: "Illustration of hands on puzzle",
           title: "Flexible",
           description: "Short-term, long-term, or somewhere in between",
         },
         {
+          image: "/src/assets/check_badge.svg",
+          alt: "Illustration of check badge",
           title: "Skilled across levels",
           description: "Proven senior specialists ready to tackle your toughest challenges",
         },
diff --git a/apps/website/src/pages/staff-augmentation.astro b/apps/website/src/pages/staff-augmentation.astro
index df372ef9..78ea6927 100644
--- a/apps/website/src/pages/staff-augmentation.astro
+++ b/apps/website/src/pages/staff-augmentation.astro
@@ -31,12 +31,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   <Specialization />
   <OurEngineers />
 
-  <BookACallForm
-    calLink="team/crocoder/staff-augmentation-intro"
-    eventType="staff-augmentation-intro"
-  >
-    <span slot="title"> Let's Build Together </span>
-  </BookACallForm>
-
-  <Footer />
+  <div class="bg-contrast w-full">
+    <BookACallForm
+      className="!bg-transparent !py-0 mt-[300px] md:mt-[400px] overflow-visible"
+      contentClassName="items-center bg-secondary rounded-4xl md:rounded-[96px] pb-[122px] px-4"
+      calLink="team/crocoder/staff-augmentation-intro"
+      eventType="staff-augmentation-intro"
+    >
+      <span slot="title"> Let's Build Together </span>
+    </BookACallForm>
+  </div>
 </Base>
+
+<Footer />