Index: app/(auth)/layout.tsx
===================================================================
--- app/(auth)/layout.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
+++ app/(auth)/layout.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
@@ -0,0 +1,18 @@
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <div
+            className="
+        flex-1
+        flex
+        flex-col
+        bg-fein-login
+      "
+        >
+            {children}
+        </div>
+    );
+}
Index: app/(auth)/login/page.tsx
===================================================================
--- app/(auth)/login/page.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
+++ app/(auth)/login/page.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
@@ -0,0 +1,46 @@
+import LoginForm from '@/app/ui/login-form';
+import { Suspense } from 'react';
+import { Metadata } from 'next';
+import { poppins } from '@/app/ui/fonts';
+
+export const metadata: Metadata = {
+    title: 'Login',
+};
+
+export default function LoginPage() {
+    return (
+        <>
+            <main
+                className="
+                    flex-1
+                    flex
+                    flex-col
+                    items-center
+                    justify-center 
+                    md:justify-center
+                    px-4
+                    mt-[-80]
+                "
+            >
+                <h1
+                    className={`${poppins.className} 
+                        text-[40px] 
+                        leading-tight
+                        tracking-tight
+                        font-semibold 
+                        text-center 
+                        text-white 
+                        antialiased
+                    `}
+                >
+                    Welcome to<br />
+                    FEiN
+                </h1>
+
+                <Suspense>
+                    <LoginForm />
+                </Suspense>
+            </main>
+        </>
+    );
+}
Index: app/(auth)/register/page.tsx
===================================================================
--- app/(auth)/register/page.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
+++ app/(auth)/register/page.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
@@ -0,0 +1,43 @@
+import RegisterForm from '@/app/ui/register-form';
+import { Suspense } from 'react';
+import { Metadata } from 'next';
+import { poppins } from '@/app/ui/fonts';
+
+export const metadata: Metadata = {
+    title: 'Register',
+};
+
+export default function RegisterPage() {
+    return (
+        <main
+            className="
+        flex-1
+        flex
+        flex-col
+        items-center
+        justify-center
+        px-4
+        mt-[-80px]
+      "
+        >
+            <h1
+                className={`${poppins.className}
+          text-[40px]
+          leading-tight
+          tracking-tight
+          font-semibold
+          text-center
+          text-white
+          antialiased
+        `}
+            >
+                Create<br />
+                Account
+            </h1>
+
+            <Suspense>
+                <RegisterForm />
+            </Suspense>
+        </main>
+    );
+}
Index: app/lib/actions.ts
===================================================================
--- app/lib/actions.ts	(revision 5a684b11d1c46ae49e8abc0c13b0b95d3166da87)
+++ app/lib/actions.ts	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
@@ -27,4 +27,7 @@
         throw error;
     }
+}
+
+export async function register() {
 }
 
Index: p/login/page.tsx
===================================================================
--- app/login/page.tsx	(revision 5a684b11d1c46ae49e8abc0c13b0b95d3166da87)
+++ 	(revision )
@@ -1,47 +1,0 @@
-import LoginForm from '@/app/ui/login-form';
-import { Suspense } from 'react';
-import { Metadata } from 'next';
-import { poppins } from '@/app/ui/fonts';
-
-export const metadata: Metadata = {
-    title: 'Login',
-};
-
-export default function LoginPage() {
-    return (
-        <>
-            <main
-                className="
-                    flex-1
-                    flex
-                    flex-col
-                    items-center
-                    justify-center 
-                    md:justify-center
-                    px-4
-                    bg-fein-login
-                    mt-[-80]
-                "
-            >
-                <h1
-                    className={`${poppins.className} 
-                        text-[40px] 
-                        leading-tight
-                        tracking-tight
-                        font-semibold 
-                        text-center 
-                        text-white 
-                        antialiased
-                    `}
-                >
-                    Welcome to<br />
-                    FEiN
-                </h1>
-
-                <Suspense>
-                    <LoginForm />
-                </Suspense>
-            </main>
-        </>
-    );
-}
Index: app/ui/register-form.tsx
===================================================================
--- app/ui/register-form.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
+++ app/ui/register-form.tsx	(revision f3de0a3fa5d0198c2f70de46fb6307b227602e40)
@@ -0,0 +1,161 @@
+'use client';
+
+import { poppins } from '@/app/ui/fonts';
+import {
+  AtSymbolIcon,
+  KeyIcon,
+  UserIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/24/outline';
+import { Button } from './button';
+import { useActionState } from 'react';
+import { register } from '@/app/lib/actions';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+
+export default function RegisterForm() {
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';
+  const [errorMessage, formAction, isPending] = useActionState(
+    register,
+    undefined,
+  );
+
+  return (
+    <form
+      action={formAction}
+      className="
+        w-full
+        max-w-sm
+        bg-transparent
+        backdrop-blur-md
+        rounded-2xl
+        px-6
+        py-8
+      "
+    >
+      <div className="space-y-4">
+        {/* Name */}
+        <div className="relative">
+          <input
+            className={`${poppins.className}
+              peer
+              w-full
+              h-12
+              rounded-lg
+              bg-white/30
+              pl-11
+              text-white
+              placeholder:text-white/60
+              focus:outline-none
+              focus:ring-2
+              focus:ring-white/50
+            `}
+            type="text"
+            name="name"
+            placeholder="Full name"
+            required
+          />
+          <UserIcon className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-white/70" />
+        </div>
+
+        {/* Email */}
+        <div className="relative">
+          <input
+            className={`${poppins.className}
+              peer
+              w-full
+              h-12
+              rounded-lg
+              bg-white/30
+              pl-11
+              text-white
+              placeholder:text-white/60
+              focus:outline-none
+              focus:ring-2
+              focus:ring-white/50
+            `}
+            type="email"
+            name="email"
+            placeholder="Email"
+            required
+          />
+          <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-white/70" />
+        </div>
+
+        {/* Password */}
+        <div className="relative">
+          <input
+            className={`${poppins.className}
+              peer
+              w-full
+              h-12
+              rounded-lg
+              bg-white/30
+              pl-11
+              text-white
+              placeholder:text-white/60
+              focus:outline-none
+              focus:ring-2
+              focus:ring-white/50
+            `}
+            type="password"
+            name="password"
+            placeholder="Password"
+            minLength={6}
+            required
+          />
+          <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-white/70" />
+        </div>
+      </div>
+
+      <input type="hidden" name="redirectTo" value={callbackUrl} />
+
+      <Button
+        className={`${poppins.className}
+          mt-6
+          w-full
+          h-12
+          rounded-lg
+          bg-[#1d7f6a]
+          hover:bg-[#166655]
+          text-white
+          text-lg
+          font-medium
+          flex
+          items-center
+          justify-center
+        `}
+        aria-disabled={isPending}
+      >
+        Create account
+      </Button>
+
+      <p
+        className={`${poppins.className}
+          mt-4
+          text-sm
+          text-center
+          text-white/80
+          antialiased
+        `}
+      >
+        Already have an account?
+        <Link href="/login" className="ml-1 font-medium underline">
+          Log in
+        </Link>
+      </p>
+
+      {typeof errorMessage === 'string' && errorMessage && (
+        <div
+          className="flex h-8 items-end space-x-1"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
+          <span className="text-sm text-red-500">{errorMessage}</span>
+        </div>
+      )}
+    </form>
+  );
+}