diff --git a/apps/website/public/arrow-top-right.svg b/apps/website/public/arrow-top-right.svg
deleted file mode 100644
index fbc278c0..00000000
--- a/apps/website/public/arrow-top-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.24194 13.8275L13.0939 3.97559M13.0939 3.97559H3.99996M13.0939 3.97559V13.1667" stroke="#1E1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/website/src/components/BookACallButton.astro b/apps/website/src/components/BookACallButton.astro
new file mode 100644
index 00000000..a50ae014
--- /dev/null
+++ b/apps/website/src/components/BookACallButton.astro
@@ -0,0 +1,55 @@
+---
+import { Image } from "astro:assets";
+import crocoderLogo from "../assets/crocoder-logo.png";
+import BookACallModal from "./BookACallModal.astro";
+import ArrowTopRight from "./icons/ArrowTopRight.astro";
+
+export interface Props {
+  calLink: string;
+  eventType: string;
+}
+---
+
+<BookACallModal {...Astro.props} modalId="book-a-call-modal" />
+<button
+  id="book-a-call-modal-button"
+  class="rounded-full
+    bg-periwinkle
+    p-4
+    pr-8
+    text-white
+    hidden
+    gap-4
+    items-center
+    fixed
+    bottom-4
+    right-4
+    z-20
+    cursor-pointer
+    sm:flex
+    md:bottom-7
+    md:right-7"
+>
+  <Image
+    src={crocoderLogo}
+    alt="Crocoder Crocodile Logo"
+    class="h-9 md:h-[51px] w-auto"
+    widths={[160, 320]}
+    sizes={"160px"}
+    loading="eager"
+  />
+  <span class="flex gap-6 text-base md:text-xl items-center font-medium">
+    Book a call <ArrowTopRight classNames="w-4 h-4 md:w-6 md:h-6" />
+  </span>
+</button>
+
+<script>
+  const modalButton = document.getElementById("book-a-call-modal-button");
+  const modal = document.getElementById(
+    "book-a-call-modal"
+  ) as HTMLDialogElement;
+
+  modalButton?.addEventListener("click", () => {
+    modal.showModal();
+  });
+</script>
diff --git a/apps/website/src/components/BookACallForm.astro b/apps/website/src/components/BookACallForm.astro
index daaf3283..6a1ae572 100644
--- a/apps/website/src/components/BookACallForm.astro
+++ b/apps/website/src/components/BookACallForm.astro
@@ -12,6 +12,7 @@ export interface Props {
   eventType?: string;
   className?: string;
   contentClassName?: string;
+  deferLoad?: boolean;
 }
 
 const {
@@ -19,15 +20,19 @@ const {
   eventType = "hello",
   className,
   contentClassName,
+  deferLoad,
 } = Astro.props;
 ---
 
 <Section
   className={classNames(
     "bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]",
-    className,
+    className
+  )}
+  contentClassName={classNames(
+    `${grid_classes} items-center`,
+    contentClassName
   )}
-  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"
@@ -62,12 +67,13 @@ const {
   <div
     class="relative col-span-6 md:col-span-10 md:col-start-2 overflow-hidden flex flex-col justify-center bg-white rounded lg:min-h-[460px]"
   >
-    <div id="book-a-call"></div>
+    <div id="book-a-call" class="min-h-[460px]"></div>
     <CalcomEmbedInline
       calLink={calLink}
       eventType={eventType}
       elementOrSelector="#book-a-call"
       hideEventTypeDetails={false}
+      deferLoad={deferLoad}
     />
   </div>
 </Section>
diff --git a/apps/website/src/components/BookACallModal.astro b/apps/website/src/components/BookACallModal.astro
new file mode 100644
index 00000000..e433c725
--- /dev/null
+++ b/apps/website/src/components/BookACallModal.astro
@@ -0,0 +1,157 @@
+---
+import CloseCrossX from "./icons/CloseCrossX.astro";
+import Modal from "./Modal.astro";
+import Pill from "./Pill.astro";
+
+export interface Props {
+  calLink: string;
+  eventType: string;
+  modalId: string;
+}
+
+const { calLink, eventType, modalId } = Astro.props;
+---
+
+<Modal
+  id={modalId}
+  classNames="w-[1017px] max-w-[calc(100%-16px)] max-h-[calc(100vh-64px)]"
+>
+  <section class="p-7" slot="main">
+    <header class="flex flex-col gap-4 sm:items-center mb-8 relative">
+      <button id="close-modal" class="absolute -top-3 -right-3 cursor-pointer"
+        ><span class="relative z-[-1]">
+          <CloseCrossX />
+        </span>
+      </button>
+      <Pill className="max-[350px]:text-sm">Book your call today</Pill>
+      <h2 class="text-4xl font-medium">
+        Let's Build <span class="text-crocoder-green">Together</span>
+      </h2>
+      <p class="text-secondary text-base max-w-[700px] sm:text-center">
+        Tell us what you're working on — we'll match you with our engineers who
+        can ramp up quickly, integrate seamlessly, and bring real product
+        impact.
+      </p>
+    </header>
+    <!-- This element is used for calcom to append iframe to it when loaded -->
+    <div id="book-a-call-calendar-wrapper" class="min-h-[460px]"></div>
+  </section>
+</Modal>
+<script
+  type="text/javascript"
+  is:inline
+  define:vars={{
+    calLink,
+    layout: "month_view",
+    elementOrSelector: "#book-a-call-calendar-wrapper",
+    hideEventTypeDetails: false,
+    eventType,
+    modalId,
+  }}
+>
+  const modal = document.getElementById(modalId);
+
+  const loadCalEmbed = () => {
+    (function (C, A, L) {
+      let p = function (a, ar) {
+        a.q.push(ar);
+      };
+      let d = C.document;
+      C.Cal =
+        C.Cal ||
+        function () {
+          let cal = C.Cal;
+          let ar = arguments;
+          if (!cal.loaded) {
+            cal.ns = {};
+            cal.q = cal.q || [];
+            d.head.appendChild(d.createElement("script")).src = A;
+            cal.loaded = true;
+          }
+          if (ar[0] === L) {
+            const api = function () {
+              p(api, arguments);
+            };
+            const namespace = ar[1];
+            api.q = api.q || [];
+            if (typeof namespace === "string") {
+              cal.ns[namespace] = cal.ns[namespace] || api;
+              p(cal.ns[namespace], ar);
+              p(cal, ["initNamespace", namespace]);
+            } else p(cal, ar);
+            return;
+          }
+          p(cal, ar);
+        };
+    })(window, "https://app.cal.com/embed/embed.js", "init");
+    Cal("init", eventType, { origin: "https://cal.com" });
+
+    Cal.ns[eventType]("inline", {
+      elementOrSelector,
+      config: { layout, theme: "light" },
+      calLink,
+    });
+
+    Cal.ns[eventType]("ui", {
+      styles: {
+        body: {
+          background: "transparent",
+        },
+        branding: {
+          brandColor: "#FEB534",
+          lightColor: "#494545",
+          lighterColor: "#4c4848",
+          lightestColor: "#7c7777",
+          highlightColor: "#1E1A1A",
+          medianColor: "#1E1A1A",
+        },
+        enabledDateButton: {
+          backgroundColor: "rgba(254, 181, 52, 0.65)", //"rgba(254, 181, 52, 0.40)",
+        },
+        disabledDateButton: {
+          backgroundColor: "rgba(232,232,232,0.30)",
+        },
+      },
+      hideEventTypeDetails,
+      layout,
+    });
+
+    Cal.ns[eventType]("on", {
+      action: "bookingSuccessful",
+      callback: (e) => {
+        const { data, type, namespace } = e.detail;
+        console.log("Booking successful:", { data, type, namespace });
+        window.location.href = "/contact/success?src=calcom";
+      },
+    });
+
+    Cal("on", {
+      action: "bookingSuccessful",
+      callback: (e) => {
+        const { data, type, namespace } = e.detail;
+        console.log("Global booking successful:", { data, type, namespace });
+        window.location.href = "/contact/success?src=calcom";
+      },
+    });
+  };
+
+  modal.addEventListener("click", (e) => {
+    if (!e.currentTarget) return;
+
+    const dialogElem = e.currentTarget;
+
+    if (e.target === dialogElem || e.target.id === "close-modal") {
+      dialogElem.close();
+    }
+  });
+
+  modal.addEventListener("beforetoggle", (e) => {
+    const calendarWrapper = e.currentTarget.querySelector(
+      "#book-a-call-calendar-wrapper"
+    );
+    /* Avoid loading calcom embed if already exists */
+    if (calendarWrapper.children?.length) return;
+
+    loadCalEmbed();
+  });
+</script>
diff --git a/apps/website/src/components/CalcomEmbedInline.astro b/apps/website/src/components/CalcomEmbedInline.astro
index 0f7e4323..5c3134e3 100644
--- a/apps/website/src/components/CalcomEmbedInline.astro
+++ b/apps/website/src/components/CalcomEmbedInline.astro
@@ -3,8 +3,9 @@ export interface Props {
   calLink: string;
   eventType: string;
   layout?: "month_view" | "week_view" | "column_view";
-  elementOrSelector: string;
+  elementOrSelector: `#${string}`;
   hideEventTypeDetails?: boolean;
+  deferLoad?: boolean;
 }
 
 const {
@@ -13,6 +14,7 @@ const {
   layout = "month_view",
   elementOrSelector,
   hideEventTypeDetails = false,
+  deferLoad = false,
 } = Astro.props;
 ---
 
@@ -25,8 +27,8 @@ const {
     elementOrSelector,
     hideEventTypeDetails,
     eventType,
+    deferLoad,
   }}
-  async
 >
   const loadCalEmbed = () => {
     (function (C, A, L) {
@@ -111,10 +113,36 @@ const {
       },
     });
   };
+  if (deferLoad) {
+    const calcomWrapper = document.getElementById(
+      elementOrSelector.substring(1)
+    );
 
-  if ("requestIdleCallback" in window) {
+    const handleLoadEmbed = (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          loadCalEmbed();
+          observer.unobserve(calcomWrapper);
+        }
+      });
+    };
+
+    const opts = {
+      rootMargin: "1000px 0px",
+    };
+
+    const observer = new IntersectionObserver(handleLoadEmbed, opts);
+
+    observer.observe(calcomWrapper);
+  }
+
+  const isRicSupported = "requestIdleCallback" in window;
+
+  if (!deferLoad && isRicSupported) {
     requestIdleCallback(loadCalEmbed);
-  } else {
+  }
+
+  if (!deferLoad && !isRicSupported) {
     window.addEventListener("load", loadCalEmbed);
   }
 </script>
diff --git a/apps/website/src/components/ExternalLink.astro b/apps/website/src/components/ExternalLink.astro
index 334e9311..5d181f95 100644
--- a/apps/website/src/components/ExternalLink.astro
+++ b/apps/website/src/components/ExternalLink.astro
@@ -1,5 +1,7 @@
 ---
 import classnames from "classnames";
+import ArrowTopRight from "./icons/ArrowTopRight.astro";
+
 interface Props {
   href: string;
   text: string;
@@ -16,10 +18,5 @@ const { href, text, classNames } = Astro.props;
   >
     {text}
   </a>
-  <img
-    src={"arrow-top-right.svg"}
-    alt="Arrow Top Right"
-    role="presentation"
-    class="h-3 w-3 sm:h-4 sm:w-4"
-  />
+  <ArrowTopRight classNames="h-3 w-3 sm:h-4 sm:w-4" stroke="#1E1A1A" />
 </div>
diff --git a/apps/website/src/components/Pill.astro b/apps/website/src/components/Pill.astro
index 3a1f41c5..0fd1d959 100644
--- a/apps/website/src/components/Pill.astro
+++ b/apps/website/src/components/Pill.astro
@@ -1,13 +1,17 @@
 ---
 import classNames from "classnames";
 
+type Props = {
+  className?: string;
+};
+
 const { className } = Astro.props;
 ---
 
 <div
   class={classNames(
     "bg-white py-2 px-4 gap-2.5 border border-[rgb(60,56,67)]/[0.2] rounded-full uppercase font-bold text-base w-fit leading-none tracking-normal text-secondary whitespace-nowrap",
-    className,
+    className
   )}
 >
   <slot />
diff --git a/apps/website/src/components/ServiceCard.astro b/apps/website/src/components/ServiceCard.astro
index 2fde4c18..91aca5c9 100644
--- a/apps/website/src/components/ServiceCard.astro
+++ b/apps/website/src/components/ServiceCard.astro
@@ -4,6 +4,7 @@ import classnames from "classnames";
 import BlogLink from "./BlogLink.astro";
 import CTA from "./CTA.astro";
 import IconSubtitle from "./IconSubtitle.astro";
+import ArrowTopRight from "./icons/ArrowTopRight.astro";
 
 interface Props {
   idx: number;
@@ -105,11 +106,9 @@ const image = await src();
             ) : (
               <CTA id="contact-cta" href={link.href}>
                 {link.text}
-                <img
-                  src={"arrow-top-right.svg"}
-                  alt="Arrow Top Right"
-                  role="presentation"
-                  class="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4"
+                <ArrowTopRight
+                  classNames="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4"
+                  stroke="#1E1A1A"
                 />
               </CTA>
             )
diff --git a/apps/website/src/components/contact/Hero.astro b/apps/website/src/components/contact/Hero.astro
index fcee15af..98b98d45 100644
--- a/apps/website/src/components/contact/Hero.astro
+++ b/apps/website/src/components/contact/Hero.astro
@@ -11,7 +11,7 @@ import RightArrow from "../icons/RightArrow.astro";
 
 <Section className="!p-0">
   <div
-    class="bg-[#4E5BC8] rounded-b-4xl md:rounded-b-[96px] relative overflow-hidden"
+    class="bg-periwinkle rounded-b-4xl md:rounded-b-[96px] relative overflow-hidden"
   >
     <Picture src={hero} alt="" class="w-full h-full absolute top-0 left-0" />
     <div
diff --git a/apps/website/src/components/footer.astro b/apps/website/src/components/footer.astro
index 1ff98d4e..25b58dc3 100644
--- a/apps/website/src/components/footer.astro
+++ b/apps/website/src/components/footer.astro
@@ -17,7 +17,7 @@ const copyright = `
 <footer
   class="w-full
    px-4 sm:px-7
-   py-12 lg:py-16
+   pt-12 pb-32 lg:pt-16 lg:pb-32
    overflow-hidden
    bg-contrast"
 >
diff --git a/apps/website/src/components/icons/ArrowTopRight.astro b/apps/website/src/components/icons/ArrowTopRight.astro
new file mode 100644
index 00000000..db3941fe
--- /dev/null
+++ b/apps/website/src/components/icons/ArrowTopRight.astro
@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import classnames from "classnames";
+
+type Props = HTMLAttributes<"svg"> & { classNames?: string };
+
+const { stroke, classNames } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="17"
+  viewBox="0 0 16 17"
+  fill="none"
+  class={classnames(classNames)}
+>
+  <path
+    d="M3.24194 13.8275L13.0939 3.97559M13.0939 3.97559H3.99996M13.0939 3.97559V13.1667"
+    stroke={stroke || "white"}
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>
diff --git a/apps/website/src/components/icons/CloseCrossX.astro b/apps/website/src/components/icons/CloseCrossX.astro
new file mode 100644
index 00000000..e71292cd
--- /dev/null
+++ b/apps/website/src/components/icons/CloseCrossX.astro
@@ -0,0 +1,14 @@
+<svg
+  width="32"
+  height="32"
+  viewBox="0 0 32 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M25.9072 5.59277L5.09277 26.4072M5.09277 5.59277L25.9072 26.4072"
+    stroke="#3C3843"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>
diff --git a/apps/website/src/layouts/base.astro b/apps/website/src/layouts/base.astro
index 6c6e1c80..78f0978d 100644
--- a/apps/website/src/layouts/base.astro
+++ b/apps/website/src/layouts/base.astro
@@ -66,9 +66,8 @@ const { className, ogImage } = Astro.props;
       items-center 
       justify-center 
       min-h-screen 
-      bg-gray-100 
-      has-[dialog[open]]:overflow-hidden`,
-      className,
+      bg-gray-100`,
+      className
     )}
   >
     <slot />
diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro
index 5236c249..356e5097 100644
--- a/apps/website/src/pages/contact.astro
+++ b/apps/website/src/pages/contact.astro
@@ -12,7 +12,7 @@ import "../styles/main.css";
   <Navigation />
   <Hero />
   <Clients />
-  <BookACallForm className="!mt-[100px] md:!mt-[210px]">
+  <BookACallForm deferLoad className="!mt-[100px] md:!mt-[210px]">
     <span slot="title">
       Everything <span class="text-crocoder-yellow"> Kicks Off </span>
       with One Call
diff --git a/apps/website/src/pages/for-ctos.astro b/apps/website/src/pages/for-ctos.astro
index b7d9fe13..02587f55 100644
--- a/apps/website/src/pages/for-ctos.astro
+++ b/apps/website/src/pages/for-ctos.astro
@@ -23,6 +23,7 @@ const { ogImage = "https://www.crocoder.dev/cto-metadata-img.png" } =
   <BookACallForm
     calLink="team/crocoder/hands-off-cto"
     eventType="hands-off-cto"
+    deferLoad
   >
     <span slot="title">
       Everything <span class="text-crocoder-yellow"> Kicks Off </span>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index ad7f28f3..77ec155c 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import BookACallButton from "../components/BookACallButton.astro";
 import BookACallForm from "../components/BookACallForm.astro";
 import Clients from "../components/Clients.astro";
 import Footer from "../components/footer.astro";
@@ -14,17 +15,18 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   Astro.props;
 ---
 
-<Base className="bg-white" ogImage={ogImage}>
+<Base className="bg-white relative" ogImage={ogImage}>
   <Navigation />
   <Hero />
   <Clients />
   <Values />
   <Testimonial />
   <Services />
-  <BookACallForm>
+  <BookACallForm deferLoad>
     <span slot="title">
       Build Your Business <span class="text-crocoder-yellow"> With Us </span>
     </span>
   </BookACallForm>
+  <BookACallButton calLink="team/crocoder/hello" eventType="book-modal" />
   <Footer />
 </Base>
diff --git a/apps/website/src/pages/staff-augmentation.astro b/apps/website/src/pages/staff-augmentation.astro
index 78ea6927..0d8290b1 100644
--- a/apps/website/src/pages/staff-augmentation.astro
+++ b/apps/website/src/pages/staff-augmentation.astro
@@ -37,6 +37,7 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
       contentClassName="items-center bg-secondary rounded-4xl md:rounded-[96px] pb-[122px] px-4"
       calLink="team/crocoder/staff-augmentation-intro"
       eventType="staff-augmentation-intro"
+      deferLoad
     >
       <span slot="title"> Let's Build Together </span>
     </BookACallForm>
diff --git a/apps/website/src/pages/vibe-code-mvp.astro b/apps/website/src/pages/vibe-code-mvp.astro
index 501bc4b3..bd905cf2 100644
--- a/apps/website/src/pages/vibe-code-mvp.astro
+++ b/apps/website/src/pages/vibe-code-mvp.astro
@@ -28,7 +28,7 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   <WhyWorkWithUs />
   <GetInTouch />
   <div class="bg-contrast w-full">
-    <BookACallForm>
+    <BookACallForm deferLoad>
       <span slot="title">
         Build Your Business <span class="text-crocoder-yellow"> With Us </span>
       </span>
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
index 9183a49e..24e93850 100644
--- a/apps/website/tailwind.config.js
+++ b/apps/website/tailwind.config.js
@@ -53,6 +53,7 @@ module.exports = {
         "crocoder-green": theme.colors.default.theme_color.crocoder_green,
         "crocoder-orange": theme.colors.default.theme_color.crocoder_orange,
         "light-gray": theme.colors.default.text_color.gray,
+        periwinkle: theme.colors.default.theme_color.periwinkle,
       },
       fontSize: {
         base: font_base + "px",
diff --git a/apps/website/theme.json b/apps/website/theme.json
index a494304d..8ca02b69 100644
--- a/apps/website/theme.json
+++ b/apps/website/theme.json
@@ -11,7 +11,8 @@
         "crocoder_yellow": "#FEC343",
         "contrast": "#1E1A1A",
         "crocoder_green": "#607A1A",
-        "crocoder_orange": "#FEB534"
+        "crocoder_orange": "#FEB534",
+        "periwinkle": "#4E5BC8"
       },
       "text_color": {
         "default": "#747577",