diff --git a/routes/sign-in.tsx b/routes/sign-in.tsx
index 05a338d..4812b50 100644
--- a/routes/sign-in.tsx
+++ b/routes/sign-in.tsx
@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { backendSignIn } from "../backend/sign-in.ts";
+import Headline from "../components/Headline.tsx";
 import { SignInForm } from "../components/SignInForm.tsx";
 import { define, isLoggedIn, setAuthCookie } from "../utils.ts";
 
@@ -68,9 +69,11 @@ export default define.page<typeof handler>(function SignInPage(ctx) {
   const error = ctx.data.error;
 
   return (
-    <div class="container mx-auto p-4 flex flex-col gap-4">
-      <h1>Sign in</h1>
-      <SignInForm email={email} error={error} />
+    <div class="p-4">
+      <div class="max-w-96 mx-auto p-4 flex flex-col gap-4 border rounded">
+        <Headline>Sign in</Headline>
+        <SignInForm email={email} error={error} />
+      </div>
     </div>
   );
 });
diff --git a/routes/sign-up.tsx b/routes/sign-up.tsx
index c0b2b38..9842ee9 100644
--- a/routes/sign-up.tsx
+++ b/routes/sign-up.tsx
@@ -1,5 +1,33 @@
+import Headline from "../components/Headline.tsx";
 import { define } from "../utils.ts";
 
 export default define.page(function SignUpPage(ctx) {
-  return <div></div>;
+  return (
+    <form class="container mx-auto p-4 flex flex-col gap-4">
+      <Headline>Sign up</Headline>
+      <input
+        type="email"
+        name="email"
+        placeholder="E-Mail"
+        class="input w-full"
+      />
+      <div class="flex flex-row gap-4">
+        <input
+          type="text"
+          name="firstName"
+          placeholder="First name"
+          class="input w-full"
+        />
+        <input
+          type="text"
+          name="lastName"
+          placeholder="Last name"
+          class="input w-full"
+        />
+      </div>
+      <button type="submit" class="btn btn-primary self-start">
+        Sign up
+      </button>
+    </form>
+  );
 });