diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro
index 4a0cb4e7..f803c535 100644
--- a/apps/website/src/components/ServiceCard.astro
+++ b/apps/website/src/components/ServiceCard.astro
@@ -54,7 +54,8 @@ const image = await src();
       `text-white
       h-full
       lg:h-[620px]
-      p-7
+      p-5
+      md:p-7
       lg:p-12
       grid
       grid-cols-6
@@ -71,17 +72,22 @@ const image = await src();
     )}
   >
     <div
-      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
+      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-4 md:gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
     >
-      <span class="grid md:flex gap-7">
-        <img src={iconPath} alt="" role="presentation" class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
+      <span class="grid md:flex gap-4 md:gap-7">
+        <img
+          src={iconPath}
+          alt=""
+          role="presentation"
+          class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12"
+        />
         <div class="gap-y-2 flex flex-col">
           <h4
-            class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
+            class="font-medium text-lg leading-[22px] md:text-[28px] md:leading-[30px] text-left"
           >
             {title}
           </h4>
-          <p class="text-lg">{subtitle}</p>
+          <p class="text-base md:text-lg">{subtitle}</p>
         </div>
       </span>
       <div
@@ -97,7 +103,7 @@ const image = await src();
         />
       </div>
       <div
-        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
+        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:text-sm [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
         set:html={content.html}
       />
     </div>
diff --git a/apps/website/src/content/services/create-an-evolving-architecture.md b/apps/website/src/content/services/create-an-evolving-architecture.md
index 1633f2da..aa1b64d8 100644
--- a/apps/website/src/content/services/create-an-evolving-architecture.md
+++ b/apps/website/src/content/services/create-an-evolving-architecture.md
@@ -10,10 +10,9 @@ bgColor: "bg-[#424C6DE5]/[0.9]"
 
 From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Backed by strong product engineering practices and tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands.
 </br>
-</br>
-</br>
-<a
-    class='underline underline-offset-2'
-    href="/blog/using-lago-to-create-a-flexible-billing-system">
-Case Study: Submix Billing System
-</a>
+
+<div class="pt-6">
+    <a class='underline underline-offset-2 text-base md:text-[20px]' href="/blog/using-lago-to-create-a-flexible-billing-system">
+        Case Study: Submix Billing System
+    </a>
+</div>
diff --git a/apps/website/src/content/services/improving-engineering-tempo.md b/apps/website/src/content/services/improving-engineering-tempo.md
index c934da9c..b76980de 100644
--- a/apps/website/src/content/services/improving-engineering-tempo.md
+++ b/apps/website/src/content/services/improving-engineering-tempo.md
@@ -10,13 +10,12 @@ bgColor: "bg-[#3C3843E5]/[0.9]"
 
 By optimizing workflows and breaking down tasks, we boost engineering tempo and support your team in delivering higher-quality software, faster. Through hands-on process coaching, placing experienced engineers directly in your team, or deploying a dedicated task force to unblock delivery, we streamline development to make releases more frequent and reduce production failures.
 </br>
-</br>
-</br>
-<div class="flex justify-end items-center gap-4">
+
+<div class="flex justify-end items-center gap-4 pt-6">
   <p class="text-right">Schedule a free DevEx audit</p>
   <a id="contact-us-our-services-cta"
-     class="flex font-medium w-fit h-[61px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
+     class="flex font-medium w-fit h-[61px] items-center px-4 leading-tight py-2 rounded-md text-sm md:text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90 max-md:h-[45px]"
      href="/contact">
     Contact Us
   </a>
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css
index d0d40dc6..f6861161 100644
--- a/apps/website/src/styles/main.css
+++ b/apps/website/src/styles/main.css
@@ -151,3 +151,96 @@ body:has(nav #nav-menu-toggle:checked) {
     top: 460px;
   }
 }
+
+@media (width < 768px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: -21px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 80px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 150px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 220px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 440px;
+  }
+}
+
+@media (width <= 435px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: 0px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 100px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 120px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 140px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 0px;
+  }
+}
+
+@media (width <= 375px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: 0px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 80px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 100px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 120px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 0px;
+  }
+}