diff --git a/src/lib/elements/Button.svelte b/src/lib/elements/Button.svelte
index 35ab436b..42fdf0a1 100644
--- a/src/lib/elements/Button.svelte
+++ b/src/lib/elements/Button.svelte
@@ -4,31 +4,35 @@
 	/**
 	 * Defines the style of the button. Defaults to `"primary"`.
 	 */
-	export let type: "primary" | "secondary" | "minimal" = "primary";
+	export let styleType: "primary" | "secondary" | "minimal" = "primary";
+	export let submit = false;
 
 	const dispatch = createEventDispatcher<{
 		click: null;
 	}>();
 </script>
 
-{#if type === "primary"}
+{#if styleType === "primary"}
 	<button
-		class="inline-flex items-center gap-2 rounded-xl border-[1px] border-transparent bg-dominant px-3 py-1 text-lg font-medium text-inverted shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-dominant hover:bg-inherit hover:text-dominant
+		type={submit ? "submit" : "button"}
+		class="inline-flex items-center gap-2 rounded-xl border border-transparent bg-dominant px-3 py-1 text-lg font-medium text-inverted shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-dominant hover:bg-inherit hover:text-dominant
 		{$$props.class ?? ''}"
 		on:click={() => dispatch("click")}
 	>
 		<slot />
 	</button>
-{:else if type === "secondary"}
+{:else if styleType === "secondary"}
 	<button
-		class="inline-flex items-center gap-2 rounded-xl border-[1px] border-dominant px-3 py-1 text-lg font-medium text-dominant shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-primary hover:text-primary
+		type={submit ? "submit" : "button"}
+		class="inline-flex items-center gap-2 rounded-xl border border-dominant px-3 py-1 text-lg font-medium text-dominant shadow-lg shadow-primary/25 transition-colors duration-300 hover:border-primary hover:text-primary
 		{$$props.class ?? ''}"
 		on:click={() => dispatch("click")}
 	>
 		<slot />
 	</button>
-{:else if type === "minimal"}
+{:else if styleType === "minimal"}
 	<button
+		type={submit ? "submit" : "button"}
 		class="inline-flex items-center gap-1 text-base font-normal text-dominant underline-offset-4 hover:underline
 		{$$props.class ?? ''}"
 		on:click={() => dispatch("click")}
diff --git a/src/lib/elements/RadioButtonsGroup.svelte b/src/lib/elements/RadioButtonsGroup.svelte
index 18e117c4..7672d04d 100644
--- a/src/lib/elements/RadioButtonsGroup.svelte
+++ b/src/lib/elements/RadioButtonsGroup.svelte
@@ -30,7 +30,7 @@
 <div
 	role="radiogroup"
 	aria-label={description}
-	class="inline-flex space-x-1 rounded-full border-[1px] border-gray-400 p-1 text-primary shadow-2xl shadow-black
+	class="inline-flex space-x-1 rounded-full border border-gray-400 p-1 text-primary shadow-2xl shadow-black
 	{$$props.class ?? ''}"
 >
 	{#each values as toggle, index}
diff --git a/src/locales/en/contact.json b/src/locales/en/contact.json
new file mode 100644
index 00000000..f435b2af
--- /dev/null
+++ b/src/locales/en/contact.json
@@ -0,0 +1,34 @@
+{
+	"pageTitle": "Contact",
+	"description": "Let's talk about your project.",
+	"title": "Contact [us]",
+	"labels": {
+		"name": "Your name and surname",
+		"email": "Your email address, so we can reach you back",
+		"company": "Your company name",
+		"budget": "Do you have a budget in mind?",
+		"description": "Tell us about your project"
+	},
+	"fields": {
+		"name": "John Doe",
+		"nameError": "Please enter your name",
+		"email": "john.doe@example.com",
+		"emailError": "Please enter a valid email address",
+		"company": "My Company Inc.",
+		"budget": {
+			"choose": "Choose a budget",
+			"none": "No budget",
+			"less": "Less than $1,000",
+			"1k": "$1,000 - $5,000",
+			"5k": "$5,000 - $10,000",
+			"10k": "$10,000 or more"
+		},
+		"description": "Project type, goals, targets, timeline, etc."
+	},
+	"sendButton": {
+		"default": "Send",
+		"loading": "Sending...",
+		"success": "Sent!",
+		"error": "Error"
+	}
+}
diff --git a/src/locales/fr/contact.json b/src/locales/fr/contact.json
new file mode 100644
index 00000000..8ab58a6a
--- /dev/null
+++ b/src/locales/fr/contact.json
@@ -0,0 +1,34 @@
+{
+	"pageTitle": "Contact",
+	"description": "Discutons ensemble de votre projet.",
+	"title": "Contactez-[nous]",
+	"labels": {
+		"name": "Votre nom et prénom",
+		"email": "Votre adresse email, que nous puissions vous répondre",
+		"company": "Votre entreprise",
+		"budget": "Avez-vous un budget en tête ?",
+		"description": "Dites-nous en plus sur votre projet"
+	},
+	"fields": {
+		"name": "Michel Dupont",
+		"nameError": "Veuillez indiquer votre nom et prénom",
+		"email": "michel.dupont@gmail.com",
+		"emailError": "Veuillez indiquer une adresse email valide",
+		"company": "Dupont & Cie",
+		"budget": {
+			"choose": "Choisissez un budget",
+			"none": "Aucun",
+			"less": "Moins de 1 000 €",
+			"1k": "Entre 1 000 € et 5 000 €",
+			"5k": "Entre 5 000 € et 10 000 €",
+			"10k": "10 000 € ou plus"
+		},
+		"description": "Type de projet, objectifs, cible, délais, etc."
+	},
+	"sendButton": {
+		"default": "Envoyer",
+		"loading": "Envoi en cours...",
+		"success": "Message envoyé !",
+		"error": "Erreur"
+	}
+}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 56d55274..13b9833b 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -68,7 +68,7 @@
 
 	<!-- Bottom button -->
 	<Button
-		type="secondary"
+		styleType="secondary"
 		on:click={() => {
 			goto("/", { replaceState: true });
 		}}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bd4f8e68..d69036b4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -33,7 +33,7 @@
 			{ name: i("common.pages.process"), href: "#process" },
 			{ name: i("common.pages.technologies"), href: "#technologies" },
 			{ name: i("common.pages.company"), href: "#" }, // Dropdown: Values, Who we are
-			{ name: i("common.contact"), href: "." }
+			{ name: i("common.contact"), href: "/contact" }
 		];
 		footerItems = [
 			{
@@ -147,7 +147,7 @@
 					class:duration-1000={showButton}
 					class:pointer-events-none={!showButton}
 				>
-					<Button type="secondary">{i("common.contact")}</Button>
+					<Button styleType="secondary">{i("common.contact")}</Button>
 				</span>
 				<button
 					class="lg:hidden"
@@ -264,7 +264,7 @@
 				on:keypress={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 			>
 				<ArrowUp
-					class="h-8 w-8 cursor-pointer rounded-full border-[1px] border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
+					class="h-8 w-8 cursor-pointer rounded-full border border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
 				/>
 			</button>
 		{/if}
@@ -276,7 +276,7 @@
 					on:keypress={() => window.scrollTo({ top: 0, behavior: "smooth" })}
 				>
 					<ArrowUp
-						class="h-8 w-8 cursor-pointer rounded-full border-[1px] border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
+						class="h-8 w-8 cursor-pointer rounded-full border border-dominant p-1.5 text-dominant transition-colors duration-300 hover:border-transparent hover:bg-dominant hover:text-inverted"
 					/>
 				</button>
 			{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3311a8b5..f5e706c6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { ROOT_URL } from "$config";
 	import type { SvelteComponent } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
+	import { goto } from "$app/navigation";
 	import MagneticElement from "$shells/MagneticElement.svelte";
 	import Mouse3DTilting from "$shells/Mouse3DTilting.svelte";
 	import Section from "$layouts/Section.svelte";
@@ -145,8 +146,8 @@
 		images: [
 			{
 				url: `${ROOT_URL}/${i("home.og-banner")}`,
-				width: 1536,
-				height: 768,
+				width: 512,
+				height: 256,
 				alt: i("a11y.alt.og-banner")
 			}
 		],
@@ -175,6 +176,7 @@
 			url: ROOT_URL,
 			logo: `${ROOT_URL}/favicon.svg`
 		} /*,
+		// Add FAQ?
 		{
 			"@type": "WebSite",
 			url: ROOT_URL,
@@ -197,8 +199,8 @@
 	class="-mt-28 flex h-[100svh] flex-col items-center justify-center pt-28 md:-mt-32 md:pt-28"
 >
 	<div
-		class="m-auto grid h-fit grid-cols-1 items-center px-10 before:absolute before:inset-0
-			before:-z-10 before:max-w-full before:bg-gradient-to-l before:from-dominant before:to-transparent before:opacity-20 before:content-[''] md:px-32 xl:grid-cols-2"
+		class="m-auto grid h-fit grid-cols-1 items-center px-10
+		before:absolute before:inset-0 before:-z-10 before:max-w-full before:bg-gradient-to-l before:from-dominant before:to-transparent before:opacity-20 before:content-[''] md:px-32 xl:grid-cols-2"
 	>
 		<!-- Left part -->
 		<div
@@ -212,8 +214,8 @@
 			<div
 				class="flex origin-bottom-left flex-col gap-5 pt-10 scale-110 child:max-w-fit xs:flex-row"
 			>
-				<Button>{i("common.contact")}</Button>
-				<Button type="minimal" class="hover-child:translate-x-1">
+				<Button on:click={() => goto("/contact")}>{i("common.contact")}</Button>
+				<Button styleType="minimal" class="hover-child:translate-x-1">
 					{i("home.hero.cta-secondary")}
 					<ChevronRight class="h-4 w-4 transition-transform duration-500" />
 				</Button>
@@ -274,7 +276,7 @@
 			on:click={() => scrollTo("#process")}
 		>
 			<ArrowDown
-				class="h-8 w-8 cursor-pointer rounded-full border-[1px] border-transparent bg-dominant p-1.5 text-inverted
+				class="h-8 w-8 cursor-pointer rounded-full border border-transparent bg-dominant p-1.5 text-inverted
 				hover:border-dominant hover:bg-inherit hover:text-dominant"
 			/>
 		</button>
@@ -330,11 +332,15 @@
 			{/each}
 			<em class="text-center sm:hidden">
 				{i("home.solutions.more.before-link")}
-				<Button type="minimal">{i("home.solutions.more.link")}</Button>
+				<Button styleType="minimal">{i("home.solutions.more.link")}</Button>
 				{i("home.solutions.more.after-link")}
 			</em>
 			<div class="flex items-end justify-end">
-				<Button type="minimal" class="gap-2 text-end text-lg hover-child:translate-x-1">
+				<Button
+					styleType="minimal"
+					class="gap-2 text-end text-lg hover-child:translate-x-1"
+					on:click={() => goto("/contact")}
+				>
 					{solutions.slice(-1)[0]?.description ?? ""}
 					<ChevronRight class="h-4 w-4 transition-transform duration-500" />
 				</Button>
@@ -397,6 +403,6 @@
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			{@html c(i("home.cta-bottom.title"))}
 		</h3>
-		<Button class="scale-110">{i("common.contact")}</Button>
+		<Button class="scale-110" on:click={() => goto("/contact")}>{i("common.contact")}</Button>
 	</div>
 </Section>
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
new file mode 100644
index 00000000..059586de
--- /dev/null
+++ b/src/routes/contact/+page.svelte
@@ -0,0 +1,257 @@
+<script lang="ts">
+	import { ROOT_URL } from "$config";
+	import { page } from "$app/stores";
+	import { JsonLd, MetaTags } from "svelte-meta-tags";
+	import { Check, PaperAirplane, XMark } from "@inqling/svelte-icons/heroicon-24-outline";
+	import { i } from "@inlang/sdk-js";
+	import { c } from "$lib/utils/inlang-color";
+	import Section from "$layouts/Section.svelte";
+	import Button from "$elements/Button.svelte";
+
+	let mailStatus: "idle" | "sending" | "sent" | "error" = "idle";
+	function mailHandler(node: HTMLFormElement) {
+		// A modified version of https://svelte.dev/repl/167e7c7a05844e3dab686b4257641d73
+		let submitting = false;
+		const submitButton = node.querySelector("button[type='submit'], button:not([type])");
+
+		function handle_submit(event: Event) {
+			event.preventDefault();
+
+			if (submitting) return;
+			submitting = true;
+			submitButton?.setAttribute("disabled", "disabled");
+
+			const entries = [...new FormData(node).entries()].map(([key, value]) => {
+				if (key === "$budget") {
+					value = i(`contact.fields.budget.${value}`);
+				}
+				return [key, value];
+			});
+			entries.push([
+				"subject",
+				`${entries.find(e => e[0] === "name")?.[1]} - ${entries.find(e => e[0] === "$budget")?.[1]}`
+			]);
+			const data = Object.fromEntries(entries);
+
+			mailStatus = "sending";
+
+			fetch(node.action, {
+				method: node.method,
+				headers: {
+					"Content-Type": "application/json"
+				},
+				body: JSON.stringify(data)
+			})
+				.then(res => {
+					if (res.ok) {
+						mailStatus = "sent";
+						node.reset();
+						setTimeout(() => {
+							mailStatus = "idle";
+						}, 5000);
+					} else {
+						mailStatus = "error";
+					}
+				})
+				.catch(e => {
+					mailStatus = "error";
+					console.error("Error while sending mail: ", e);
+				})
+				.finally(() => {
+					submitting = false;
+					setTimeout(() => {
+						submitButton?.removeAttribute("disabled");
+					}, 5000);
+				});
+		}
+
+		node.addEventListener("submit", handle_submit);
+
+		return {
+			destroy() {
+				node.removeEventListener("submit", handle_submit);
+			}
+		};
+	}
+</script>
+
+<!-- Meta tags -->
+<MetaTags
+	title={i("contact.pageTitle")}
+	titleTemplate="%s | Emerald Studio"
+	description={i("contact.description")}
+	canonical="{ROOT_URL}{$page.route.id}"
+	languageAlternates={[
+		{
+			hrefLang: "fr",
+			href: `${ROOT_URL}${$page.route.id}`
+		}
+	]}
+	openGraph={{
+		images: [
+			{
+				url: `${ROOT_URL}/${i("home.og-banner")}`,
+				width: 512,
+				height: 256,
+				alt: i("a11y.alt.og-banner")
+			}
+		],
+		siteName: "Emerald Studio"
+	}}
+	twitter={{
+		cardType: "summary_large_image",
+		title: `${i("contact.pageTitle")} | Emerald Studio`,
+		description: i("contact.description"),
+		image: `${ROOT_URL}/${i("home.og-banner")}`,
+		imageAlt: i("a11y.alt.og-banner")
+	}}
+	additionalRobotsProps={{
+		noarchive: true
+	}}
+/>
+
+<JsonLd
+	schema={[
+		{
+			"@type": "Organization",
+			url: ROOT_URL,
+			logo: `${ROOT_URL}/favicon.svg`
+		},
+		// Add type WebSite from home once done
+		{
+			"@type": "BreadcrumbList",
+			itemListElement: [
+				{
+					"@type": "ListItem",
+					position: 1,
+					name: i("common.pages.home"),
+					item: ROOT_URL
+				},
+				{
+					"@type": "ListItem",
+					position: 2,
+					name: i("contact.pageTitle"),
+					item: `${ROOT_URL}${$page.route.id}`
+				}
+			]
+		}
+	]}
+/>
+
+<!-- Page -->
+<div class="relative -mt-28 justify-center pt-28 md:-mt-40 md:pt-40">
+	<div
+		class="before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-l before:from-dominant before:to-transparent before:opacity-20 before:content-['']"
+	>
+		<Section>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<svelte:fragment slot="title">{@html c(i("contact.title"))}</svelte:fragment>
+			<form action="https://api.staticforms.xyz/submit" method="post" use:mailHandler>
+				<input type="hidden" name="accessKey" value="eb32604f-b688-458e-b3d9-eeabb48ad9d1" />
+				<input type="text" name="honeypot" class="hidden" />
+				<div class="mb-4 grid gap-8 sm:grid-cols-2">
+					<div class="flex flex-col gap-6 child:flex child:flex-col child:gap-1">
+						<label>
+							<span class="after:ml-0.5 after:text-red-500 after:content-['*']">
+								{i("contact.labels.name")}
+							</span>
+							<input
+								type="text"
+								name="name"
+								class="peer rounded-full border bg-black/25 px-4 py-1 shadow-md focus:border-dominant focus:outline-0"
+								placeholder={i("contact.fields.name")}
+								required
+							/>
+							<p
+								class="hidden text-sm text-red-500 peer-placeholder-shown:!hidden peer-invalid:mt-2 peer-invalid:block"
+							>
+								{i("contact.fields.nameError")}
+							</p>
+						</label>
+						<label>
+							<span class="after:ml-0.5 after:text-red-500 after:content-['*']">
+								{i("contact.labels.email")}
+							</span>
+							<input
+								type="email"
+								name="email"
+								class="peer rounded-full border bg-black/25 px-4 py-1 shadow-md focus:border-dominant focus:outline-0"
+								placeholder={i("contact.fields.email")}
+								required
+							/>
+							<p
+								class="hidden text-sm text-red-500 peer-placeholder-shown:!hidden peer-invalid:mt-2 peer-invalid:block"
+							>
+								{i("contact.fields.emailError")}
+							</p>
+						</label>
+						<label>
+							{i("contact.labels.company")}
+							<input
+								type="text"
+								name="$company"
+								class="rounded-full border bg-black/25 px-4 py-1 shadow-md focus:border-dominant focus:outline-0"
+								placeholder={i("contact.fields.company")}
+							/>
+						</label>
+					</div>
+					<div class="flex flex-col gap-6 child:flex child:flex-col child:gap-1">
+						<label>
+							<span class="after:ml-0.5 after:text-red-500 after:content-['*']">
+								{i("contact.labels.budget")}
+							</span>
+							<select
+								name="$budget"
+								class="w-full rounded-full border border-r-8 border-transparent bg-black/25 px-2 py-1 shadow-md outline ring-1 focus:outline-dominant"
+								required
+							>
+								<option value="" selected disabled hidden>
+									{i("contact.fields.budget.choose")}
+								</option>
+								<option class="bg-black/50" value="none">
+									{i("contact.fields.budget.none")}
+								</option>
+								<option class="bg-black/50" value="less">
+									{i("contact.fields.budget.less")}
+								</option>
+								<option class="bg-black/50" value="1k">{i("contact.fields.budget.1k")}</option>
+								<option class="bg-black/50" value="5k">{i("contact.fields.budget.5k")}</option>
+								<option class="bg-black/50" value="10k">{i("contact.fields.budget.10k")}</option>
+							</select>
+						</label>
+						<label>
+							<span class="after:ml-0.5 after:text-red-500 after:content-['*']">
+								{i("contact.labels.description")}
+							</span>
+							<textarea
+								name="message"
+								placeholder={i("contact.fields.description")}
+								rows="4"
+								class="resize-none rounded-2xl border bg-black/25 px-4 py-1 shadow-md focus:border-dominant focus:outline-0"
+								required
+							/>
+						</label>
+					</div>
+				</div>
+				<div class="float-right">
+					<Button submit>
+						{#if mailStatus === "sending"}
+							<!-- TODO: Replace with a library icon -->
+							<img src="/assets/spinner.svg" alt="Spinner" class="mr-3 h-5 w-5 animate-spin" />
+							{i("contact.sendButton.loading")}
+						{:else if mailStatus === "sent"}
+							<Check class="h-6 w-6" />
+							{i("contact.sendButton.success")}
+						{:else if mailStatus === "error"}
+							<XMark class="h-6 w-6" />
+							{i("contact.sendButton.error")}
+						{:else}
+							<PaperAirplane class="h-6 w-6" />
+							{i("contact.sendButton.default")}
+						{/if}
+					</Button>
+				</div>
+			</form>
+		</Section>
+	</div>
+</div>
diff --git a/static/assets/spinner.svg b/static/assets/spinner.svg
new file mode 100644
index 00000000..1e4686fe
--- /dev/null
+++ b/static/assets/spinner.svg
@@ -0,0 +1,5 @@
+<!-- Taken and modified from Tailwind's website -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.25" stroke-width="4"/>
+    <path fill="currentColor" fill-opacity="0.75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+</svg>