diff --git a/apps/contact/app/(helpers)/notion.ts b/apps/contact/app/(helpers)/notion.ts
new file mode 100644
index 00000000..51fa3074
--- /dev/null
+++ b/apps/contact/app/(helpers)/notion.ts
@@ -0,0 +1,166 @@
+import { Client, isFullPage } from "@notionhq/client";
+import { notifyContactCreated } from "./slack";
+
+const { NOTION_TOKEN, MENTION_EMAILS, MENTION_IDS } = process.env;
+
+const notion = new Client({ auth: NOTION_TOKEN });
+
+const mentionPerson = ({ id }: { id: string }) => [
+  {
+    mention: {
+      user: {
+        id,
+      },
+    },
+    plain_text: "",
+    href: null,
+  },
+  {
+    text: {
+      content: " ",
+    },
+  },
+];
+
+const getMentions = () => {
+  if (MENTION_EMAILS && MENTION_IDS) {
+    const emails = MENTION_EMAILS.split(",");
+    const ids = MENTION_IDS.split(",");
+
+    if (emails.length && ids.length) {
+      return ids.map((id, i) => ({
+        id,
+      }));
+    }
+  }
+  return [];
+};
+
+const mentionPeople = () => {
+  return getMentions().flatMap(mentionPerson);
+};
+
+const createContactObject = (
+  id: string,
+  email: string,
+  name: string,
+  content: string,
+  databaseID: string,
+  source: string,
+) => ({
+  parent: {
+    database_id: databaseID,
+  },
+  properties: {
+    id: {
+      title: [
+        {
+          text: {
+            content: id,
+          },
+        },
+      ],
+    },
+    email: {
+      email,
+    },
+    name: {
+      rich_text: [
+        {
+          text: {
+            content: name,
+          },
+        },
+      ],
+    },
+    date: {
+      date: {
+        start: new Date().toISOString(),
+      },
+    },
+    source: {
+      rich_text: [
+        {
+          text: {
+            content: source,
+          },
+        },
+      ],
+    },
+  },
+  children: [
+    {
+      paragraph: {
+        rich_text: [
+          {
+            text: {
+              content,
+            },
+          },
+        ],
+      },
+    },
+    {
+      paragraph: {
+        rich_text: mentionPeople(),
+      },
+    },
+  ],
+});
+
+const createContact = async (
+  id: string,
+  email: string,
+  name: string,
+  content: string,
+  databaseID: string,
+  source: string,
+) => {
+  const response = await notion.pages.create(
+    createContactObject(id, email, name, content, databaseID, source),
+  );
+
+  if (response.id && isFullPage(response)) {
+    return {
+      id: response.id,
+      url: response.url,
+    };
+  }
+  throw {
+    body: {
+      message: "Failed to create notion page",
+    },
+  };
+};
+
+export const processContact = async (event: {
+  id: string;
+  email: string;
+  name: string;
+  message: string;
+  databaseID: string;
+  source: string;
+}) => {
+  const { id, email, name, message, databaseID, source } = event;
+
+  if (!id || !email || !name || !databaseID) {
+    console.log({ event });
+    throw {
+      body: {
+        message: "Missing data in process contact event",
+      },
+    };
+  }
+
+  const { id: notionPageID, url } = await createContact(
+    `Message from ${name} (${id})`,
+    email,
+    name,
+    message,
+    databaseID,
+    source,
+  );
+
+  await notifyContactCreated(name, email, url);
+  return notionPageID;
+};
diff --git a/apps/contact/app/(helpers)/slack.ts b/apps/contact/app/(helpers)/slack.ts
new file mode 100644
index 00000000..8114d6d9
--- /dev/null
+++ b/apps/contact/app/(helpers)/slack.ts
@@ -0,0 +1,73 @@
+const { SLACK_CHANNEL, SLACK_BOT_TOKEN, IS_OFFLINE } = process.env;
+
+export const createPayload = (name: string, email: string, url: string) => ({
+  channel: SLACK_CHANNEL,
+  blocks: [
+    {
+      type: "header",
+      text: {
+        type: "plain_text",
+        text: "We have 1 new message(s).",
+        emoji: true,
+      },
+    },
+    {
+      type: "section",
+      text: {
+        type: "mrkdwn",
+        text: `We got a new message from _${name}_ (_${email}_).`,
+      },
+    },
+    {
+      type: "divider",
+    },
+    {
+      type: "section",
+      text: {
+        type: "mrkdwn",
+        text: " ",
+      },
+      accessory: {
+        type: "button",
+        text: {
+          type: "plain_text",
+          text: "Show me the message",
+          emoji: true,
+        },
+        value: "new_message_click",
+        url,
+        action_id: "button-action",
+      },
+    },
+  ],
+});
+
+export const notifyContactCreated = async (
+  name: string,
+  email: string,
+  url: string,
+) => {
+  const payload = createPayload(name, email, url);
+  const payloadStringify = JSON.stringify(payload);
+
+  if (IS_OFFLINE) {
+    console.log(payload);
+  } else {
+    const result = await fetch("https://slack.com/api/chat.postMessage", {
+      method: "POST",
+      body: payloadStringify,
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+        "Content-Length": payloadStringify.length.toString(),
+        Authorization: `Bearer ${SLACK_BOT_TOKEN}`,
+        Accept: "application/json",
+      },
+    });
+    if (result.status !== 200) {
+      throw {
+        body: "Could not send notification message to Slack",
+        statusCode: result.status,
+      };
+    }
+  }
+};
diff --git a/apps/contact/app/api/contact/route.ts b/apps/contact/app/api/contact/route.ts
index 8f2e1534..56b05a37 100644
--- a/apps/contact/app/api/contact/route.ts
+++ b/apps/contact/app/api/contact/route.ts
@@ -1,5 +1,6 @@
-import { Client, isFullPage } from "@notionhq/client";
+import { processContact } from "@/app/(helpers)/notion";
 import { nanoid } from "nanoid";
+import { NextRequest } from "next/server";
 import z from "zod";
 
 const bodyValidationSchema = z.object({
@@ -7,254 +8,15 @@ const bodyValidationSchema = z.object({
     .string()
     .min(3, { message: "Name must be at least 3 characters long" }),
   email: z
-    .string()
-    .min(1, { message: "Required field" })
-    .email({ message: "Invalid email adress" }),
+    .email({ message: "Invalid email adress" })
+    .min(1, { message: "Required field" }),
   message: z.string().min(1, { message: "Required field" }),
   hasConsent: z.boolean().optional(),
 });
 
 type RequestBody = z.infer<typeof bodyValidationSchema>;
 
-const {
-  NOTION_TOKEN,
-  SLACK_CHANNEL,
-  SLACK_BOT_TOKEN,
-  MENTION_EMAILS,
-  MENTION_IDS,
-  NOTION_DATABASE_ID,
-  IS_OFFLINE,
-} = process.env;
-
-const notion = new Client({ auth: NOTION_TOKEN });
-
-const createPayload = (name: string, email: string, url: string) => ({
-  channel: SLACK_CHANNEL,
-  blocks: [
-    {
-      type: "header",
-      text: {
-        type: "plain_text",
-        text: "We have 1 new message(s).",
-        emoji: true,
-      },
-    },
-    {
-      type: "section",
-      text: {
-        type: "mrkdwn",
-        text: `We got a new message from _${name}_ (_${email}_).`,
-      },
-    },
-    {
-      type: "divider",
-    },
-    {
-      type: "section",
-      text: {
-        type: "mrkdwn",
-        text: " ",
-      },
-      accessory: {
-        type: "button",
-        text: {
-          type: "plain_text",
-          text: "Show me the message",
-          emoji: true,
-        },
-        value: "new_message_click",
-        url,
-        action_id: "button-action",
-      },
-    },
-  ],
-});
-
-const notifyContactCreated = async (
-  name: string,
-  email: string,
-  url: string,
-) => {
-  const payload = createPayload(name, email, url);
-  const payloadStringify = JSON.stringify(payload);
-
-  if (IS_OFFLINE) {
-    console.log(payload);
-  } else {
-    try {
-      const result = await fetch("https://slack.com/api/chat.postMessage", {
-        method: "POST",
-        body: payloadStringify,
-        headers: {
-          "Content-Type": "application/json; charset=utf-8",
-          "Content-Length": payloadStringify.length.toString(),
-          Authorization: `Bearer ${SLACK_BOT_TOKEN}`,
-          Accept: "application/json",
-        },
-      });
-      if (result.status !== 200) {
-        throw {
-          statusCode: result.status,
-          headers: {
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Credentials": true,
-          },
-        };
-      }
-    } catch (error) {
-      throw error;
-    }
-  }
-};
-
-const mentionPerson = ({ id, email }: { id: string; email: string }) => [
-  {
-    mention: {
-      user: {
-        id,
-        person: {
-          email,
-        },
-      },
-    },
-    plain_text: "",
-    href: null,
-  },
-  {
-    text: {
-      content: " ",
-    },
-  },
-];
-
-const getMentions = () => {
-  if (MENTION_EMAILS && MENTION_IDS) {
-    const emails = MENTION_EMAILS.split(",");
-    const ids = MENTION_IDS.split(",");
-
-    if (emails.length && ids.length) {
-      return ids.map((id, i) => ({
-        id,
-        email: emails[i],
-      }));
-    }
-  }
-  return [];
-};
-
-const mentionPeople = () => {
-  return getMentions().flatMap(mentionPerson);
-};
-
-const createContactObject = (
-  id: string,
-  email: string,
-  name: string,
-  content: string,
-) => ({
-  parent: {
-    database_id: NOTION_DATABASE_ID || "",
-  },
-  properties: {
-    id: {
-      title: [
-        {
-          text: {
-            content: id,
-          },
-        },
-      ],
-    },
-    email: {
-      email,
-    },
-    name: {
-      rich_text: [
-        {
-          text: {
-            content: name,
-          },
-        },
-      ],
-    },
-    date: {
-      date: {
-        start: new Date().toISOString(),
-      },
-    },
-  },
-  children: [
-    {
-      paragraph: {
-        rich_text: [
-          {
-            text: {
-              content,
-            },
-          },
-        ],
-      },
-    },
-    {
-      paragraph: {
-        rich_text: mentionPeople(),
-      },
-    },
-  ],
-});
-
-const createContact = async (
-  id: string,
-  email: string,
-  name: string,
-  content: string,
-) => {
-  try {
-    const response = await notion.pages.create(
-      createContactObject(id, email, name, content),
-    );
-
-    if (response.id && isFullPage(response)) {
-      return response.url;
-    }
-    throw {
-      body: {
-        message: "Failed to create notion page",
-      },
-    };
-  } catch (error) {
-    throw error;
-  }
-};
-
-const processContact = async (event: {
-  id: string;
-  email: string;
-  name: string;
-  message: string;
-}) => {
-  try {
-    const { id, email, name, message } = event;
-
-    if (!id || !email || !name || !message) {
-      throw {
-        body: {
-          message: "Missing id, email, name or message",
-        },
-      };
-    }
-
-    const url = await createContact(
-      `Message from ${name} (${id})`,
-      email,
-      name,
-      message,
-    );
-    await notifyContactCreated(name, email, url);
-  } catch (error) {
-    throw error;
-  }
-};
+const { NOTION_DATABASE_ID } = process.env;
 
 const allowRequest = async (request: Request & { ip?: string }) => {
   return { success: true, limit: 1, reset: Date.now() + 30000, remaining: 1 };
@@ -271,7 +33,7 @@ export async function OPTIONS() {
   });
 }
 
-export async function POST(request: Request) {
+export async function POST(request: NextRequest) {
   const corsHeaders = {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Credentials": "true",
@@ -330,6 +92,8 @@ export async function POST(request: Request) {
         email,
         name,
         message,
+        databaseID: NOTION_DATABASE_ID || "",
+        source: request.nextUrl.searchParams.get("source") || "Unknown",
       });
 
       return new Response(
diff --git a/apps/website/src/assets/contact-hero.svg b/apps/website/src/assets/contact-hero.svg
new file mode 100644
index 00000000..8804c54f
--- /dev/null
+++ b/apps/website/src/assets/contact-hero.svg
@@ -0,0 +1,10 @@
+<svg width="1280" height="817" viewBox="0 0 1280 817" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M1189.65 253.965L1284.49 281.928L1231.83 367.38L1326.68 395.342L1274.02 480.794" stroke="white" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1235.57 768.159L1213.1 824.21L1164.19 787.267L1141.72 843.318L1092.8 806.374" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1148.11 86.1841L1145.52 49.5837L1182.06 56.8028L1179.48 20.2024L1216.02 27.4215" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.5" d="M-9.22654 222.378L24.9853 235.638L2.88209 265.617L37.094 278.877L14.9907 308.856" stroke="white" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M603.135 -2.35031L664.963 -39.3767L684.76 31.0508L746.588 -5.97565L766.384 64.4518" stroke="#5EA400" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.5" d="M686.995 652.477L685.618 704.832L634.687 689.524L633.31 741.879L582.379 726.571" stroke="white" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M-3.78802 799.311L62.2261 735.841L106.815 817.445L172.829 753.975L217.417 835.578" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M56.6282 71.8128L62.9252 17.1987L114.758 37.9292L121.055 -16.6849L172.888 4.0457" stroke="#FFA800" stroke-width="20.4706" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/components/BaseContactForm.astro b/apps/website/src/components/BaseContactForm.astro
new file mode 100644
index 00000000..01bd3198
--- /dev/null
+++ b/apps/website/src/components/BaseContactForm.astro
@@ -0,0 +1,227 @@
+---
+import classnames from "classnames";
+import * as formContent from "../content/contact/form.md";
+import "../styles/loader.css";
+import Field from "./Field.astro";
+
+type Props = {
+  onDark?: boolean;
+  classNames?: string;
+};
+
+const { onDark, classNames } = Astro.props;
+---
+
+<form
+  class={classnames(
+    "group/contact-us flex flex-col gap-2 relative",
+    classNames,
+  )}
+  id="contact-us-form"
+  novalidate
+>
+  <Field
+    isTextArea={false}
+    inputProps={{
+      name: "form-full-name",
+      maxlength: "100",
+      placeholder: formContent.frontmatter.fullname,
+      required: true,
+      minlength: 2,
+    }}
+    labelProps={{
+      for: "form-full-name",
+      "aria-hidden": "false",
+    }}
+    label={formContent.frontmatter.fullname}
+    errorText={formContent.frontmatter.fullnameLength}
+    onDark={onDark}
+  />
+  <Field
+    isTextArea={false}
+    inputProps={{
+      name: "form-email",
+      maxlength: "100",
+      placeholder: formContent.frontmatter.email,
+      type: "email",
+      required: true,
+    }}
+    labelProps={{
+      for: "form-email",
+      "aria-hidden": "false",
+    }}
+    label={formContent.frontmatter.email}
+    errorText={formContent.frontmatter.emailInvalid}
+    onDark={onDark}
+  />
+  <div>
+    <Field
+      isTextArea
+      textAreaProps={{
+        name: "form-message",
+        maxlength: 1500,
+        minlength: 1,
+        placeholder: formContent.frontmatter.projectInfo,
+        id: "form-message",
+        required: true,
+      }}
+      labelProps={{
+        for: "form-message",
+        "aria-hidden": "false",
+      }}
+      label={formContent.frontmatter.projectInfo}
+      errorText={formContent.frontmatter.requiredField}
+      onDark={onDark}
+    />
+    <span class="text-secondary text-xs text-right mt-1 block">
+      <span id="char-counter">0</span>/1500
+    </span>
+  </div>
+
+  <div>
+    <div class="flex gap-2.5">
+      <input
+        id="form-consent"
+        name="form-consent"
+        type="checkbox"
+        required
+        aria-describedby="form-consent-text"
+        class="h-4 w-4 rounded border-gray-300 text-[#67a807] focus:ring-[#67a807] mt-1 cursor-pointer"
+      />
+      <label
+        set:html={formContent.frontmatter.consent}
+        id="form-consent-text"
+        for="form-consent"
+        class={classnames(
+          "[&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer text-sm sm:text-base",
+          {
+            "text-secondary": !onDark,
+            "text-neutral-50": onDark,
+          },
+        )}
+      />
+    </div>
+    <button
+      id="form-submit-button"
+      class="rounded-md
+      min-h-14
+      group-invalid/contact-us:pointer-events-none
+      group-invalid/contact-us:focus-visible:outline-transparent
+      bg-crocoder-yellow
+      hover:bg-crocoder-yellow/90
+      px-[25px] w-full py-4
+      focus-visible:bg-crocoder-yellow/90
+      focus:bg-crocoder-yellow/90
+      focus-visible:outline-1
+      focus-visible:outline-secondary
+      text-center
+      text-secondary
+      text-base
+      font-medium mt-6"
+    >
+      <span id="submit-content"
+        >{
+          Astro.slots.has("submit-button-content") ? (
+            <slot name="submit-button-content" />
+          ) : (
+            formContent.frontmatter.submit
+          )
+        }</span
+      >
+      <span id="submit-loader" class="loader mx-auto hidden"></span>
+    </button>
+    <p id="form-notification" class="text-sm min-h-6 pt-1"></p>
+  </div>
+  <script>
+    import * as notification from "../content/contact/notification.md";
+
+    const messageField = document.getElementById("form-message");
+    const charCounter = document.getElementById("char-counter");
+
+    const form = document.getElementById("contact-us-form");
+
+    const submitBtn = form?.querySelector("#form-submit-button");
+    const submitBtnContent = submitBtn?.querySelectorAll("#submit-content")[0];
+    const submitBtnLoader = submitBtn?.querySelectorAll("#submit-loader")[0];
+
+    const notificationElem = form?.querySelector(
+      "#form-notification",
+    ) as HTMLElement;
+
+    const currentUrl = new URL(window.location.href);
+
+    const showLoader = () => {
+      if (submitBtnContent && submitBtnLoader) {
+        submitBtnContent.classList.add("hidden");
+        submitBtnLoader.classList.add("!block");
+      }
+    };
+
+    const hideLoader = () => {
+      if (submitBtnContent && submitBtnLoader) {
+        submitBtnContent.classList.remove("hidden");
+        submitBtnLoader.classList.remove("!block");
+      }
+    };
+
+    const updateCount = (e: Event) => {
+      const charCount = `${(e.target as HTMLTextAreaElement).value.length}`;
+      if (charCounter) {
+        charCounter.textContent = charCount;
+      }
+    };
+
+    if (messageField) {
+      messageField.addEventListener("input", updateCount);
+    }
+
+    if (form) {
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const name = formData.get("form-full-name");
+        const email = formData.get("form-email");
+        const message = formData.get("form-message");
+        const consent = formData.get("form-consent");
+
+        if (!name || !email || !message || !consent) {
+          return;
+        }
+
+        showLoader();
+
+        const apiUrl = new URL(`${import.meta.env.PUBLIC_API_URL}/api/contact`);
+        apiUrl.searchParams.set("source", currentUrl.pathname);
+
+        try {
+          const response = await fetch(apiUrl, {
+            method: "POST",
+            mode: "cors",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name,
+              email,
+              message,
+              hasConsent: consent ? true : false,
+            }),
+          });
+
+          if (response.status !== 200 && notificationElem) {
+            throw new Error("Failed to send contact");
+          }
+
+          // Redirect to success page
+          window.location.href = "/contact/success";
+        } catch (error) {
+          notificationElem.classList.add("text-red-500");
+          notificationElem.textContent = notification.frontmatter.error;
+          hideLoader();
+          return;
+        }
+      });
+    }
+  </script>
+</form>
diff --git a/apps/website/src/components/BookACallForm.astro b/apps/website/src/components/BookACallForm.astro
index bce582a6..315381ae 100644
--- a/apps/website/src/components/BookACallForm.astro
+++ b/apps/website/src/components/BookACallForm.astro
@@ -1,22 +1,31 @@
 ---
+import { Image } from "astro:assets";
+import classNames from "classnames";
+import meetingImage from "../assets/meeting-croc.png";
 import CalcomEmbedInline from "../components/CalcomEmbedInline.astro";
 import { grid_classes } from "./_grid";
 import Pill from "./Pill.astro";
 import Section from "./Section.astro";
-import { Image } from "astro:assets";
-import meetingImage from "../assets/meeting-croc.png";
 
 export interface Props {
   calLink?: string;
   eventType?: string;
+  className?: string;
 }
 
-const { calLink = "team/crocoder/hello", eventType = "hello" } = Astro.props;
+const {
+  calLink = "team/crocoder/hello",
+  eventType = "hello",
+  className,
+} = Astro.props;
 ---
 
 <!-- YELLOW-1 = #FEB534 -->
 <Section
-  className="bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]"
+  className={classNames(
+    "bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]",
+    className,
+  )}
   contentClassName={`${grid_classes} items-center`}
 >
   <div
diff --git a/apps/website/src/components/Clients.astro b/apps/website/src/components/Clients.astro
index d463f001..7eea4519 100644
--- a/apps/website/src/components/Clients.astro
+++ b/apps/website/src/components/Clients.astro
@@ -2,14 +2,14 @@
 import Section from "./Section.astro";
 ---
 
-<Section>
+<Section className="lg:py-24">
   <h4
-    class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase mt-[72px]"
+    class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase"
   >
     Trusted By:
   </h4>
-  <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
-    <div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
+  <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar mt-4">
+    <div class="flex gap-7 justify-center min-w-max max-h-10 lg:max-h-[60px]">
       <img
         src="/conductor.svg"
         alt="Conductor logo"
@@ -43,7 +43,7 @@ import Section from "./Section.astro";
   </div>
 
   <div
-    class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32 md:pb-[138px]"
+    class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 mt-[72px] md:mt-32 lg:mt-[138px]"
   >
     Our tailored software services bridge the gap between the big-picture
     strategy
diff --git a/apps/website/src/components/Field.astro b/apps/website/src/components/Field.astro
index af82df95..63a1c913 100644
--- a/apps/website/src/components/Field.astro
+++ b/apps/website/src/components/Field.astro
@@ -7,6 +7,7 @@ type BaseProps = {
   label?: string;
   errorText?: string;
   classNames?: string;
+  onDark?: boolean;
 };
 
 type InputProps = {
@@ -21,7 +22,7 @@ type TextAreaProps = {
 
 type Props = BaseProps & (InputProps | TextAreaProps);
 
-const { classNames, labelProps, label, errorText } = Astro.props;
+const { classNames, labelProps, label, errorText, onDark } = Astro.props;
 ---
 
 <div
@@ -91,7 +92,8 @@ const { classNames, labelProps, label, errorText } = Astro.props;
   }
   <label
     {...labelProps}
-    class="text-secondary
+    class={classnames(
+      `
       text-xs
       min-[375px]:text-sm
       absolute
@@ -101,12 +103,17 @@ const { classNames, labelProps, label, errorText } = Astro.props;
       translate-x-0
       peer-placeholder-shown/input:translate-y-[37px]
       peer-placeholder-shown/input:translate-x-[17px]
-      peer-placeholder-shown/input:text-base
+      peer-placeholder-shown/input:text-secondary
       z-[3]
       [&>span:nth-child(2)]:hidden
       peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:[&>span:first-child]:hidden
       peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:[&>span:nth-child(2)]:inline
-      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:text-red-500"
+      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:text-red-500`,
+      {
+        "text-secondary": !onDark,
+        "text-neutral-50": onDark,
+      },
+    )}
   >
     <span>{label}</span>
     <span class="truncate text-ellipsis">{errorText || "Invalid field"}</span>
@@ -114,18 +121,17 @@ const { classNames, labelProps, label, errorText } = Astro.props;
   <div
     class={classnames(
       `absolute
-      w-full 
+      w-full
       rounded-[6px]
       bg-[#424c6d50]
       flex
       overflow-hidden
       items-center
       justify-center
-      peer-focus/input:after:scale-[25]
+      peer-focus/input:after:scale-[35]
       after:h-5
       after:w-5
       after:rounded-full
-      after:bg-[#67a807]
       after:scale-0
       after:transition-transform
       after:duration-[400ms]
@@ -133,6 +139,8 @@ const { classNames, labelProps, label, errorText } = Astro.props;
       {
         "h-[48px] top-[23px]": !Astro.props.isTextArea,
         "h-[142px] top-[23px]": Astro.props.isTextArea,
+        "after:bg-[#67a807]": !onDark,
+        "after:bg-neutral-50": onDark,
       },
     )}
   >
diff --git a/apps/website/src/components/Values.astro b/apps/website/src/components/Values.astro
index 576caeb8..3da5e915 100644
--- a/apps/website/src/components/Values.astro
+++ b/apps/website/src/components/Values.astro
@@ -37,7 +37,7 @@ const { src } = await getImage({
 <Section
   idx="values-wrapper"
   contentClassName={grid_classes}
-  className="bg-contrast bg-no-repeat bg-top bg-[auto_320px]"
+  className="bg-contrast bg-no-repeat bg-top bg-[auto_320px] mt-10.5"
   style={`background-image: url('${src}');`}
 >
   <div
diff --git a/apps/website/src/components/contact/Hero.astro b/apps/website/src/components/contact/Hero.astro
new file mode 100644
index 00000000..1e63e22c
--- /dev/null
+++ b/apps/website/src/components/contact/Hero.astro
@@ -0,0 +1,78 @@
+---
+import { Picture } from "astro:assets";
+import hero from "../../assets/contact-hero.svg";
+import Pill from "../../components/Pill.astro";
+import Section from "../../components/Section.astro";
+import { grid_classes } from "../../components/_grid";
+import "../../styles/main.css";
+import BaseContactForm from "../BaseContactForm.astro";
+import RightArrow from "../icons/RightArrow.astro";
+---
+
+<Section className="!p-0">
+  <div
+    class="bg-[#4E5BC8] 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
+      class={`${grid_classes} md:max-w-[var(--max-width)] relative px-7 max-md:pt-8 max-lg:pt-12 lg:py-16 xl:py-24`}
+    >
+      <div
+        class="col-span-6 md:col-span-12 lg:col-span-6 xl:col-span-5 xl:col-start-2 text-white pt-12 md:px-12 lg:pr-0 lg:py-12 content-center"
+      >
+        <Pill
+          className="text-[10px] min-[340px]:text-xs min-[390px]:text-sm sm:text-base md:text-lg px-2 py-1 min-[390px]:px-3 min-[390px]:py-1.5 sm:px-4 sm:py-2 max-h-[36px] mb-2 md:mb-4"
+        >
+          get in touch
+        </Pill>
+        <h1
+          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 tracking-tight mb-5 md:mb-7"
+        >
+          <span class="fadeInUp block" style="animation-delay: 100ms;">
+            Let’s Talk About
+          </span>
+          <span
+            class="fadeInUp block"
+            style="animation-delay: 500ms;animation-fill-mode: backwards;"
+          >
+            Your Project.
+          </span>
+        </h1>
+        <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 mb-5 md:mb-7"
+        >
+          <span
+            class="fadeInUp"
+            style="animation-delay: 900ms;animation-fill-mode: backwards;"
+          >
+            Our software development services helped clients big and small build
+            solutions with a lasting impact.
+          </span>
+        </p>
+        <p
+          class="font-semibold 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"
+        >
+          <span
+            class="fadeInUp"
+            style="animation-delay: 1100ms;animation-fill-mode: backwards;"
+          >
+            Fill the contact form and we’ll get back to you in the next two days
+            or book a call with us below.
+          </span>
+        </p>
+      </div>
+
+      <BaseContactForm
+        onDark
+        classNames="col-span-6 md:col-span-12 lg:col-span-6 xl:col-span-5 lg:col-start-7 md:p-12 lg:pl-0"
+      >
+        <span
+          slot="submit-button-content"
+          class="flex items-center justify-center gap-2.5 text-sm sm:text-base"
+        >
+          Get a free build review <RightArrow />
+        </span>
+      </BaseContactForm>
+    </div>
+  </div>
+</Section>
diff --git a/apps/website/src/components/icons/RightArrow.astro b/apps/website/src/components/icons/RightArrow.astro
new file mode 100644
index 00000000..a7a52a63
--- /dev/null
+++ b/apps/website/src/components/icons/RightArrow.astro
@@ -0,0 +1,14 @@
+<svg
+  width="16"
+  height="17"
+  viewBox="0 0 16 17"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="stroke-black"
+>
+  <path
+    d="M1.04395 8.50154H14.9767M14.9767 8.50154L9.14396 1.56421M14.9767 8.50154L9.14396 15.4776"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>
diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro
index cf922a1f..5236c249 100644
--- a/apps/website/src/pages/contact.astro
+++ b/apps/website/src/pages/contact.astro
@@ -1,15 +1,23 @@
 ---
-import ContactUs from "../components/ContactUs.astro";
+import BookACallForm from "../components/BookACallForm.astro";
+import Clients from "../components/Clients.astro";
+import Hero from "../components/contact/Hero.astro";
 import Footer from "../components/footer.astro";
 import Navigation from "../components/navigation.astro";
 import Base from "../layouts/base.astro";
 import "../styles/main.css";
 ---
 
-<Base>
+<Base className="bg-white">
   <Navigation />
-  <main class="min-h-[calc(100vh-244px)]">
-    <ContactUs />
-  </main>
+  <Hero />
+  <Clients />
+  <BookACallForm className="!mt-[100px] md:!mt-[210px]">
+    <span slot="title">
+      Everything <span class="text-crocoder-yellow"> Kicks Off </span>
+      with One Call
+    </span>
+  </BookACallForm>
+
   <Footer />
 </Base>