diff --git a/apps/website/src/assets/croco_in_cloud.png b/apps/website/src/assets/croco_in_cloud.png
new file mode 100644
index 00000000..85eba119
Binary files /dev/null and b/apps/website/src/assets/croco_in_cloud.png differ
diff --git a/apps/website/src/assets/pic_phase_3.png b/apps/website/src/assets/pic_phase_3.png
index 3983f215..7b5953e0 100644
Binary files a/apps/website/src/assets/pic_phase_3.png and b/apps/website/src/assets/pic_phase_3.png differ
diff --git a/apps/website/src/assets/staff_collaboration.png b/apps/website/src/assets/staff_collaboration.png
new file mode 100644
index 00000000..858d83e1
Binary files /dev/null and b/apps/website/src/assets/staff_collaboration.png differ
diff --git a/apps/website/src/components/icons/CircleCheck.astro b/apps/website/src/components/icons/CircleCheck.astro
index 1c3a614b..3b3ab47e 100644
--- a/apps/website/src/components/icons/CircleCheck.astro
+++ b/apps/website/src/components/icons/CircleCheck.astro
@@ -4,7 +4,7 @@ import classnames from "classnames";
 
 type Props = HTMLAttributes<"svg"> & { classNames?: string };
 
-const { width, height, classNames } = Astro.props;
+const { width, height, classNames, stroke } = Astro.props;
 ---
 
 <svg
@@ -17,7 +17,7 @@ const { width, height, classNames } = Astro.props;
 >
   <path
     d="M6.96437 12.7707L9.75943 15.9083C9.83415 15.9946 9.92716 16.0631 10.0317 16.109C10.1363 16.1548 10.2497 16.1768 10.3638 16.1733C10.4787 16.1713 10.5919 16.1446 10.6956 16.095C10.7993 16.0454 10.891 15.974 10.9647 15.8858L17.5048 8.06773M22.4038 12C22.4038 17.7459 17.7459 22.4038 12 22.4038C6.25414 22.4038 1.59619 17.7459 1.59619 12C1.59619 6.25414 6.25414 1.59619 12 1.59619C17.7459 1.59619 22.4038 6.25414 22.4038 12Z"
-    stroke="#00A708"
+    stroke={stroke || "#00A708"}
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"></path>
diff --git a/apps/website/src/components/staff-agmentation/MainContent.astro b/apps/website/src/components/staff-agmentation/MainContent.astro
index cd9196a0..3f0c2bb5 100644
--- a/apps/website/src/components/staff-agmentation/MainContent.astro
+++ b/apps/website/src/components/staff-agmentation/MainContent.astro
@@ -1,13 +1,13 @@
 ---
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
-import circleCheckIcon from "../../assets/circle-check-icon.svg";
-import paulJeszenszky from "../../assets/paul-jeszenszky.png";
-import picCrocoderTeam from "../../assets/pic-crocoder-team-3362ae.png";
-import quoteIcon from "../../assets/quote-icon.svg";
-import targetIconCorrect from "../../assets/target-icon-correct.svg";
+import crocoIcon from "../../assets/croco_in_cloud.png";
+import idealForIllustration from "../../assets/pic_phase_3.png";
+import staffCollaborationImg from "../../assets/staff_collaboration.png";
 import Pill from "../../components/Pill.astro";
 import Section from "../../components/Section.astro";
+import { grid_classes } from "../_grid";
+import CircleCheck from "../icons/CircleCheck.astro";
 
 export type MainContent = {
   pillText: string;
@@ -29,7 +29,7 @@ const staffContent = (await getCollection("staff_augmentation")) as {
 }[];
 
 const contentVariantId = String(
-  Astro.url.searchParams.get("id") || "backfill-your-developer-gap",
+  Astro.url.searchParams.get("id") || "backfill-your-developer-gap"
 );
 
 let content = staffContent.find((c) => c.data.id === contentVariantId);
@@ -42,167 +42,132 @@ const { data } = content;
 ---
 
 <Section
-  className="!py-0 !px-0"
-  contentClassName="relative before:absolute before:z-[-1] before:top-0 before:w-full before:h-full before:bg-[#4E5BC8] md:max-w-screen"
+  className="!p-0 bg-[#4E5BC8]"
+  contentClassName="relative before:absolute before:z-[-1] before:top-0 before:w-full before:h-full bg-contrast rounded-t-4xl md:rounded-t-[96px] md:max-w-screen overflow-hidden pb-12 lg:pb-24"
 >
   <div
-    class="px-4 md:px-7 py-18 md:py-24 bg-[#1E1A1A] rounded-t-4xl md:rounded-t-[96px]"
+    class={`${grid_classes} md:max-w-[var(--max-width)] md:mx-auto relative z-[2]`}
   >
-    <div class="md:max-w-[var(--max-width)] md:mx-auto">
-      <!-- Section Title -->
+    <div
+      class="relative
+      col-span-6
+      overflow-hidden
+      h-[calc(120vw+100px)]
+      max-h-[700px]
+      md:col-span-12
+      md:h-[70vw]
+      lg:col-span-6
+      lg:max-h-[870px]
+      xl:overflow-visible"
+    >
       <div
-        class="flex flex-col items-center gap-4 mb-12 md:mb-24 px-1 md:px-2 xl:px-[104px] mx-auto"
+        class="aspect-square
+          relative
+          rounded-full
+          overflow-hidden
+          w-[120%]
+          max-w-[630px]
+          -left-1/4
+          -top-1/12
+          md:w-[70%]
+          md:-left-18
+          lg:w-[120%]
+          lg:-left-1/5
+          lg:max-w-[800px]"
       >
-      <Pill className="min-w-0 w-auto max-w-[280px] !whitespace-normal break-words text-center sm:w-fit sm:max-w-none">
-        {data.main.pillText}
-      </Pill>
-              <h2
-          class="text-[32px] leading-[36px] md:text-[48px] md:leading-[52px] lg:text-[60px] lg:leading-[66px] xl:text-[74px] xl:leading-[81px] font-medium tracking-[-2%] text-center"
+        <Image
+          src={staffCollaborationImg}
+          alt="Two male developers in CroCoder hoodies collaborating"
+          class="absolute top-1/12 left-1/6 md:left-0"
+        />
+      </div>
+      <Image
+        src={crocoIcon}
+        alt="Illustration of a crocodile in a cloud with laptop"
+        class="absolute bottom-0 left-4 lg:left-7 w-[300px]"
+      />
+    </div>
+    <div
+      class="col-span-6 md:col-span-12 py-12 lg:py-24 px-4 md:px-7 lg:col-span-6 lg:pl-0"
+    >
+      <div class="flex flex-col gap-4">
+        <Pill>We're 100% Focused on results</Pill>
+        <h2
+          class="text-[32px]
+            leading-[36px]
+            font-medium
+            tracking-[-2%]
+            md:text-[48px]
+            md:leading-[52px]
+            lg:text-[54px]
+            lg:leading-[1.1]"
         >
-          <span class="text-white block md:whitespace-nowrap"
-            >{data.main.title_1}</span
-          >
-          <span class="text-[#FEC343] block">{data.main.title_2}</span>
+          <span class="text-white block"> Flexible, Embedded Engineers, </span>
+          <span class="text-[#FEC343] block">Ready to Plug-In</span>
         </h2>
       </div>
-
-      <!-- Content Container -->
-      <div class="pb-12 md:pb-24">
-        <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
-          <!-- Left Column -->
-          <div class="space-y-4">
-            <!-- Main Description Card -->
-            <div
-              class="bg-[rgba(66,76,109,0.9)] rounded-2xl p-6 md:p-12 text-white"
-            >
-              <div
-                class="w-[60px] h-[60px] md:w-[90px] md:h-[90px] flex items-center justify-center mb-6 md:mb-7"
-              >
-                <Image
-                  src={targetIconCorrect}
-                  alt="Target icon"
-                  width={90}
-                  height={90}
-                  loading="lazy"
-                  class="w-full h-full"
-                />
-              </div>
-              <div class="space-y-4 md:space-y-7">
-                {
-                  data.main.aboutUs.map((about) => (
-                    <p class="text-[16px] leading-[24px] md:text-[22px] md:leading-[32px] font-normal">
-                      {about}
-                    </p>
-                  ))
-                }
-              </div>
-            </div>
-
-            <!-- Testimonial Card -->
-            <div
-              class="bg-white rounded-2xl p-4 md:p-7 backdrop-blur-[30px] flex flex-col md:flex-row gap-4"
-            >
-              <div class="flex-1">
-                <p
-                  class="text-sm md:text-base leading-[22px] md:leading-[26px] text-black mb-4 md:mb-7"
-                >
-                  We have found the perfect extension of our team with CroCoder.
-                  We operate as one team, celebrating our wins and working
-                  through the challenges together. They "own" the roadmap,
-                  deadlines and outcomes with us — from the ideation and
-                  direction stages through to post-launch optimization.
-                </p>
-                <div class="flex items-center gap-3">
-                  <div
-                    class="w-[48px] h-[48px] md:w-[72px] md:h-[72px] rounded-full overflow-hidden flex-shrink-0"
-                  >
-                    <Image
-                      src={paulJeszenszky}
-                      alt="Paul Jeszenszky"
-                      width={72}
-                      height={72}
-                      class="w-full h-full object-cover"
-                      loading="lazy"
-                    />
-                  </div>
-                  <div>
-                    <p
-                      class="text-[16px] md:text-[20px] leading-[22px] md:leading-[28px] text-black font-medium"
-                    >
-                      Paul Jeszenszky
-                    </p>
-                    <p
-                      class="text-[14px] md:text-[20px] leading-[20px] md:leading-[28px] text-black"
-                    >
-                      Submix co-founder & CEO
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="w-[60px] h-[40px] md:w-[82px] md:h-[54px] opacity-20 self-start md:self-auto"
-              >
-                <Image
-                  src={quoteIcon}
-                  alt="Quote icon"
-                  width={82}
-                  height={54}
-                  loading="lazy"
-                  class="w-full h-full"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- Right Column - Ideal for Teams Card -->
-          <div
-            class="bg-[rgba(60,56,67,0.8)] rounded-2xl p-6 md:p-12 text-white flex flex-col justify-center"
-          >
-            <h3
-              class="text-[24px] leading-[28px] md:text-[36px] md:leading-[40px] font-medium mb-4 md:mb-7"
-            >
-              Ideal for Teams who
-            </h3>
-            <div class="space-y-4 md:space-y-7 mb-4 md:mb-7">
-              {
-                content.data.main.fitChecks.map((check) => (
-                  <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] mb-2 leading-[24px] md:text-[22px] md:leading-[32px] md:h-8 flex items-center font-semibold">
-                        {check.highlight}
-                      </p>
-                      <p class="text-[16px] leading-[24px] md:text-[22px] md:leading-[32px]">
-                        {check.text}
-                      </p>
-                    </div>
-                  </div>
-                ))
-              }
-            </div>
-
-            <div class="flex justify-center">
-              <Image
-                src={picCrocoderTeam}
-                alt="CroCoder team"
-                widths={[320, 480, 640, 800]}
-                sizes="(max-width: 768px) calc(100vw - 32px), 640px"
-                loading="lazy"
-                class="w-full max-w-[625px] h-auto"
+      <div class="pt-12 flex flex-col gap-8">
+        {
+          data.main.aboutUs.map((p) => (
+            <p class="text-[22px] leading-8 text-white">{p}</p>
+          ))
+        }
+      </div>
+    </div>
+    <div
+      class="col-span-6
+        bg-[#3C3843CC]
+        rounded-[48px]
+        mx-4
+        py-12
+        px-4
+        flex
+        flex-col
+        items-center
+        overflow-hidden
+        md:col-span-12
+        md:mx-7
+        lg:p-12
+        xl:mx-7"
+    >
+      <h2
+        class="text-[32px]
+          leading-[36px]
+          font-medium
+          tracking-[-2%]
+        text-white
+          text-center
+          md:text-[48px]
+          md:leading-[52px]
+          lg:text-[54px]
+          lg:leading-[1.1]"
+      >
+        <span class="text-[#FEC343]">Ideal</span> For Teams Who
+      </h2>
+      <div class="flex flex-col lg:flex-row gap-7 mt-12">
+        {
+          data.main.fitChecks.map((c) => (
+            <div class="flex lg:flex-col items-center gap-4 grow basis-0">
+              <CircleCheck
+                width={48}
+                height={48}
+                stroke="#FEC343"
+                classNames="min-w-12"
               />
+              <p class="text-[22px] leading-8 text-white lg:text-center">
+                <strong>{c.highlight}</strong>
+                <br />
+                {c.text}
+              </p>
             </div>
-          </div>
-        </div>
+          ))
+        }
       </div>
+      <Image
+        src={idealForIllustration}
+        alt="Illustration of crocodile and developers collaborating"
+        class="w-[calc(100%+32px)] max-w-[715px] relative top-21"
+      />
     </div>
   </div>
 </Section>
diff --git a/apps/website/src/pages/staff-augmentation.astro b/apps/website/src/pages/staff-augmentation.astro
index ea2c8ad5..790b549a 100644
--- a/apps/website/src/pages/staff-augmentation.astro
+++ b/apps/website/src/pages/staff-augmentation.astro
@@ -33,18 +33,3 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
 
   <Footer />
 </Base>
-
-<script is:inline>
-  function handleActionHeroClick() {
-    window.navScroll = true;
-    setTimeout(() => {
-      window.navScroll = false;
-    }, 1500);
-  }
-
-  document
-    .querySelectorAll("#book-a-call-action-hero")
-    .forEach((element) =>
-      element.addEventListener("click", handleActionHeroClick),
-    );
-</script>