diff --git a/src/assets/init.svg b/src/assets/init.svg
index a35f2f0..cbb01a5 100644
--- a/src/assets/init.svg
+++ b/src/assets/init.svg
@@ -5,4 +5,5 @@
     <path d="M325.5 139.5V93H279V139.5V186H325.5V139.5Z" fill="white"/>
     <path d="M325.5 4.72907e-05H279V46.5H325.5V4.72907e-05Z" fill="white"/>
     <path d="M418.5 46.5V4.72907e-05H372V46.5V93V139.5V186H418.5H465V139.5H418.5V93H465V46.5H418.5Z" fill="white"/>
+    <title>init</title>
 </svg>
diff --git a/src/components/button.astro b/src/components/button.astro
index 37c7add..182a4f2 100644
--- a/src/components/button.astro
+++ b/src/components/button.astro
@@ -1,7 +1,7 @@
 ---
-interface Props {
+interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
   variant?: ButtonVariant;
-  link: boolean;
+  link?: boolean;
 }
 
 type ButtonVariant = keyof typeof buttonVariants;
@@ -15,11 +15,16 @@ const buttonVariants = {
     "border border-primary text-primary hover:opacity-80 transition-opacity",
 };
 
-const { variant = "primary", link = false } = Astro.props;
+const {
+  variant = "primary",
+  link = false,
+  class: className,
+  ...rest
+} = Astro.props;
 
-const buttonClass = `${baseButton} ${buttonVariants[variant]} ${link ? "cursor-pointer" : ""}`;
+const buttonClass = `${baseButton} ${buttonVariants[variant]} ${link ? "cursor-pointer" : ""} ${className || ""}`;
 ---
 
-<button class={buttonClass}>
+<button class={buttonClass} {...rest}>
     <slot />
 </button>
diff --git a/src/components/input.astro b/src/components/input.astro
new file mode 100644
index 0000000..f6a3156
--- /dev/null
+++ b/src/components/input.astro
@@ -0,0 +1,7 @@
+---
+interface Props extends astroHTML.JSX.InputHTMLAttributes {}
+const { ...rest } = Astro.props;
+---
+
+<input class="border p-2" {...rest} />
+<slot />
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 35916ec..49f5897 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -19,7 +19,7 @@ import "../styles/global.css";
             <div class="max-w-2xl w-full p-4">
                 <a href="/" class="block w-fit mb-8">
                     <InitLogo
-                        transition:name={"logo"}
+                        transition:name="logo"
                         class="hover:opacity-80 transition-opacity"
                         width={60}
                         height={24}
diff --git a/src/pages/api/signup.ts b/src/pages/api/signup.ts
new file mode 100644
index 0000000..47d2c9b
--- /dev/null
+++ b/src/pages/api/signup.ts
@@ -0,0 +1,15 @@
+import type { APIRoute } from "astro";
+
+export const prerender = false;
+
+export const POST: APIRoute = async ({ request }) => {
+  const data = await request.formData();
+  const email = data.get("email");
+  const name = data.get("name");
+
+  console.log(email, name);
+
+  return new Response(JSON.stringify({ email, name }), {
+    headers: { "Content-Type": "application/json" },
+  });
+};
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 1db3d4f..bd77f32 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -19,7 +19,7 @@ import "../styles/global.css";
         <p>
             You can reach us by contacting <a
                 href="mailto:init@kth.it"
-                class="hover:underline underline-offset-4">init@kth.it</a
+                class="underline underline-offset-4">init@kth.it</a
             >.
         </p>
     </section>
diff --git a/src/pages/join.astro b/src/pages/join.astro
deleted file mode 100644
index 86006b7..0000000
--- a/src/pages/join.astro
+++ /dev/null
@@ -1,10 +0,0 @@
----
-import Layout from "../layouts/layout.astro";
-import "../styles/global.css";
----
-
-<Layout>
-    <section class="space-y-4">
-        <p>Nothing to see here, for now...</p>
-    </section>
-</Layout>
diff --git a/src/pages/join/index.astro b/src/pages/join/index.astro
new file mode 100644
index 0000000..dd79cf1
--- /dev/null
+++ b/src/pages/join/index.astro
@@ -0,0 +1,79 @@
+---
+export const prerender = false; // Not needed in 'server' mode
+
+class ValidationError extends Error {}
+
+if (Astro.request.method === "POST") {
+  try {
+    const data = await Astro.request.formData();
+    const name = data.get("name");
+    const email = data.get("email");
+
+    const schema = z.object({
+      name: z.string().min(2).max(100),
+      email: z.string().email(),
+    });
+
+    const result = schema.safeParse({ name, email });
+
+    if (!result.success) {
+      console.error(result.error);
+      throw new ValidationError("Invalid input");
+    }
+
+    return Astro.redirect("/join/success");
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(error.message);
+      return Astro.redirect("/join?error=Internal+server+error");
+    }
+
+    if (error instanceof ValidationError) {
+      return Astro.redirect("/join?error=Missing+or+invalid+fields");
+    }
+  }
+}
+
+import { z } from "astro:content";
+import Button from "../../components/button.astro";
+import Input from "../../components/input.astro";
+import Layout from "../../layouts/layout.astro";
+
+const error = Astro.url.searchParams.get("error");
+---
+
+<Layout>
+    <section class="space-y-4">
+        {
+            error && (
+                <div class="mb-8">
+                    <p class="text-red-700">Error.</p>
+                    <p>{error}</p>
+                </div>
+            )
+        }
+
+        <form transition:persist transition:name="form" method="POST" class="space-y-4">
+            <div class="flex flex-col gap-2">
+                <label class="text-xs" for="email">Email:</label>
+                <Input type="email" id="email" name="email" required />
+            </div>
+            <div class="flex flex-col gap-2">
+                <label class="text-xs" for="name">Name:</label>
+                <Input type="text" id="name" name="name" required />
+            </div>
+            <p class="text-sm">
+                By submitting this form, you agree to the <a
+                    href="https://www.kth.it/privacy"
+                    class="underline underline-offset-4"
+                    target="blank"
+                >
+                    IT Chapter's GDPR Policy.
+                </a>
+            </p>
+            <Button transition:name="join" class="mt-8" type="submit"
+                >Join</Button
+            >
+        </form>
+    </section>
+</Layout>
diff --git a/src/pages/join/success.astro b/src/pages/join/success.astro
new file mode 100644
index 0000000..155ddef
--- /dev/null
+++ b/src/pages/join/success.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../../layouts/layout.astro";
+---
+
+<Layout>
+    <section class="space-y-4">
+        <p>Thank you for applying.</p>
+        <p>We will reach out to you shortly.</p>
+    </section>
+</Layout>