diff --git a/www/src/app/(auth)/login/actions.ts b/www/src/app/(auth)/login/actions.ts
index c38bdda..cfa21c5 100644
--- a/www/src/app/(auth)/login/actions.ts
+++ b/www/src/app/(auth)/login/actions.ts
@@ -1,30 +1,40 @@
-'use server';
+"use server";
 
-import {revalidatePath} from 'next/cache';
-import {redirect} from 'next/navigation';
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
 
-import {createClient} from '@/lib/supabase/server';
+import { createClient } from "@/lib/supabase/server";
 
-export async function login(formData: FormData) {
-  const supabase = createClient();
+export type LoginActionState = {
+  success: boolean | null;
+  email?: string;
+  password?: string;
+};
+
+export async function login(
+  _state: LoginActionState,
+  formData: FormData | undefined = undefined,
+): Promise<LoginActionState> {
+  const supabase = await createClient();
 
-  // type-casting here for convenience
-  // in practice, you should validate your inputs
   const data = {
-    email: formData.get('email') as string,
-    password: formData.get('password') as string,
+    email: formData?.get("email") as string,
+    password: formData?.get("password") as string,
   };
 
-  console.log(data);
-
-  const {error} = await supabase.auth.signInWithPassword(data);
-
-  console.log(error);
+  const { error } = await supabase.auth.signInWithPassword(data);
 
   if (error) {
-    redirect('/login?error=invalid');
+    return {
+      success: false,
+      ...data,
+    };
   }
 
-  revalidatePath('/', 'layout');
+  revalidatePath("/", "layout");
   redirect(`/login/complete`);
+
+  return {
+    success: true,
+  };
 }
diff --git a/www/src/app/(auth)/login/form.tsx b/www/src/app/(auth)/login/form.tsx
new file mode 100644
index 0000000..dfbb496
--- /dev/null
+++ b/www/src/app/(auth)/login/form.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import {useActionState} from 'react';
+
+import Link from 'next/link';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+
+import {FFrLogo} from '@/components/ffr-logo';
+import {SubmitButton} from '@/components/submit-button';
+import {Alert} from '@/components/ui/alert';
+
+import {login, type LoginActionState} from './actions';
+
+export function LoginForm() {
+  const [state, formAction] = useActionState<LoginActionState>(login, {
+    success: null,
+  });
+
+  return (
+    <div className="h-screen flex flex-col items-center justify-center">
+      <Link href="/">
+        <FFrLogo />
+      </Link>
+      <form className="mt-12" action={formAction}>
+        <Card className="w-full max-w-sm">
+          <CardHeader className="border-b mb-6">
+            <CardTitle className="text-2xl">Login</CardTitle>
+            <CardDescription>
+              Enter your email below to login to your account.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-6 my-3">
+            <div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                name="email"
+                placeholder="m@example.com"
+                required
+                defaultValue={state.email}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                required
+                defaultValue={state.password}
+              />
+            </div>
+            <SubmitButton className="w-full">Login</SubmitButton>
+
+            {state.success === false && (
+              <Alert variant="destructive">
+                There was an error logging in. Please try again.
+              </Alert>
+            )}
+          </CardContent>
+          <CardFooter className="text-center flex items-center justify-center text-muted-foreground text-xs border-t w-full py-4">
+            Need an account?
+            <Link href="/signup" className="underline ml-1">
+              Sign Up
+            </Link>
+          </CardFooter>
+        </Card>
+      </form>
+    </div>
+  );
+}
diff --git a/www/src/app/(auth)/login/page.tsx b/www/src/app/(auth)/login/page.tsx
index 795ecd9..e244269 100644
--- a/www/src/app/(auth)/login/page.tsx
+++ b/www/src/app/(auth)/login/page.tsx
@@ -1,20 +1,12 @@
 import {redirect} from 'next/navigation';
-import Link from 'next/link';
 
-import {Button} from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
 import {createClient} from '@/lib/supabase/server';
 
-import {login} from './actions';
+import {LoginForm} from './form';
+
+export const metadata = {
+  title: 'Login',
+};
 
 type Props = {
   searchParams: Promise<{
@@ -23,53 +15,12 @@ type Props = {
 };
 
 export default async function Page(props: Props) {
-  const client = createClient();
+  const client = await createClient();
   const {data} = await client.auth.getSession();
 
   if (data.session?.user && !(await props.searchParams).error) {
     redirect('/login/complete');
   }
 
-  return (
-    <div className="h-screen flex items-center justify-center">
-      <form>
-        <Card className="w-full max-w-sm">
-          <CardHeader>
-            <CardTitle className="text-2xl">Login</CardTitle>
-            <CardDescription>
-              Enter your email below to login to your account.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                name="email"
-                placeholder="m@example.com"
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="password">Password</Label>
-              <Input id="password" type="password" name="password" required />
-            </div>
-          </CardContent>
-          <CardFooter className="flex flex-col items-center">
-            <Button formAction={login} className="w-full">
-              Sign in
-            </Button>
-
-            <div className="mt-4 text-center text-sm">
-              Need an account?{' '}
-              <Link href="/signup" className="text-center text-sm underline">
-                Sign Up
-              </Link>
-            </div>
-          </CardFooter>
-        </Card>
-      </form>
-    </div>
-  );
+  return <LoginForm />;
 }
diff --git a/www/src/app/(auth)/logout/page.tsx b/www/src/app/(auth)/logout/page.tsx
index 0a6cfa4..bf7a38e 100644
--- a/www/src/app/(auth)/logout/page.tsx
+++ b/www/src/app/(auth)/logout/page.tsx
@@ -3,7 +3,7 @@ import {createClient} from '@/lib/supabase/server';
 import {BrowserLogout} from './browser';
 
 export default async function Page() {
-  const client = createClient();
+  const client = await createClient();
 
   await client.auth.signOut();
 
diff --git a/www/src/app/(auth)/oauth/cli/complete/page.tsx b/www/src/app/(auth)/oauth/cli/complete/page.tsx
index af84430..c033150 100644
--- a/www/src/app/(auth)/oauth/cli/complete/page.tsx
+++ b/www/src/app/(auth)/oauth/cli/complete/page.tsx
@@ -9,7 +9,7 @@ import {Logout} from './logout';
 import Link from 'next/link';
 
 export default async function Page() {
-  const client = createClient();
+  const client = await createClient();
   const apiUrl = process.env.API_URL!;
   const store = await cookies();
   const cliSession = store.get('cli-session')?.value;
diff --git a/www/src/app/(auth)/signup/actions.ts b/www/src/app/(auth)/signup/actions.ts
index 1feb457..9c499df 100644
--- a/www/src/app/(auth)/signup/actions.ts
+++ b/www/src/app/(auth)/signup/actions.ts
@@ -1,30 +1,53 @@
-'use server';
+"use server";
 
-import {revalidatePath} from 'next/cache';
-import {redirect} from 'next/navigation';
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
 
-import {createClient} from '@/lib/supabase/server';
+import { createClient } from "@/lib/supabase/server";
 
-export async function signup(formData: FormData) {
-  const supabase = createClient();
+export type SignupActionState = {
+  success: boolean | null;
+  email?: string;
+  password?: string;
+  first_name?: string;
+  last_name?: string;
+};
 
-  const {error} = await supabase.auth.signUp({
-    email: formData.get('email') as string,
-    password: formData.get('password') as string,
+export async function signup(
+  _state: SignupActionState,
+  formData: FormData | undefined = undefined,
+) {
+  const supabase = await createClient();
+
+  const first_name = formData?.get("first_name") as string;
+  const last_name = formData?.get("last_name") as string;
+  const email = formData?.get("email") as string;
+  const password = formData?.get("password") as string;
+
+  const { error } = await supabase.auth.signUp({
+    email,
+    password,
     options: {
       data: {
-        first_name: formData.get('first_name') as string,
-        last_name: formData.get('last_name') as string,
+        first_name,
+        last_name,
       },
-      emailRedirectTo: 'http://localhost:3000/signup/confirm',
-    }
+      emailRedirectTo: "http://localhost:3000/signup/confirm",
+    },
   });
 
   if (error) {
-    console.log(error)
-    redirect('/signup?error=fail');
+    console.log(error);
+
+    return {
+      success: false,
+      first_name,
+      last_name,
+      email,
+      password,
+    };
   }
 
-  revalidatePath('/', 'layout');
-  redirect('/signup/complete');
+  revalidatePath("/", "layout");
+  redirect("/signup/complete");
 }
diff --git a/www/src/app/(auth)/signup/complete/route.ts b/www/src/app/(auth)/signup/complete/route.ts
index b0a7245..ebe6734 100644
--- a/www/src/app/(auth)/signup/complete/route.ts
+++ b/www/src/app/(auth)/signup/complete/route.ts
@@ -1,51 +1,50 @@
-
-
-import {api} from '@/lib/api';
-import {createClient} from '@/lib/supabase/server';
-import {NextRequest, NextResponse} from 'next/server';
+import { api } from "@/lib/api";
+import { createClient } from "@/lib/supabase/server";
+import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(req: NextRequest) {
   try {
-  const client = createClient();
-  const {data: user} = await client.auth.getUser();
-  const cliSession = req.cookies.get('cli-session');
-
-  if (!user.user?.id) {
-    throw new Error('no_user')
-  }
+    const client = await createClient();
+    const { data: user } = await client.auth.getUser();
+    const cliSession = req.cookies.get("cli-session");
+
+    if (!user.user?.id) {
+      throw new Error("no_user");
+    }
+
+    const { data, error } = await api.post<
+      { has_stripe_subscription: boolean }
+    >(
+      "/account",
+      {
+        method: "POST",
+      },
+    );
 
-  const {data, error} = await api.post<{has_stripe_subscription: boolean}>(
-    '/account',
-    {
-      method: 'POST',
-    },
-  );
+    if (error) {
+      console.log(error);
+      throw new Error("bad_error");
+    }
 
-  if (error) {
-    console.log(error)
-    throw new Error('bad_error');
-  }
+    if (!data) {
+      throw new Error("bad_data");
+    }
 
-  if (!data) {
-    throw new Error('bad_data')
-  }
+    if (!data.has_stripe_subscription) {
+      return NextResponse.redirect(new URL("/plan", req.nextUrl.href));
+    }
 
-  if (!data.has_stripe_subscription) {
-    return NextResponse.redirect(new URL('/plan', req.nextUrl.href));
-  }
+    if (cliSession) {
+      return NextResponse.redirect(
+        new URL("/oauth/cli/complete", req.nextUrl.href),
+      );
+    }
 
-  if (cliSession) {
+    return NextResponse.redirect(new URL("/", req.nextUrl.href));
+  } catch (err) {
+    console.log(err);
     return NextResponse.redirect(
-      new URL('/oauth/cli/complete', req.nextUrl.href),
-    );
-  }
-
-  return NextResponse.redirect(new URL('/', req.nextUrl.href));
-}
-catch (err) {
-  console.log(err)
-  return NextResponse.redirect(
       new URL(`/signup?error=${(err as Error).message}`, req.nextUrl.href),
     );
-}
+  }
 }
diff --git a/www/src/app/(auth)/signup/form.tsx b/www/src/app/(auth)/signup/form.tsx
new file mode 100644
index 0000000..565e490
--- /dev/null
+++ b/www/src/app/(auth)/signup/form.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import {useActionState} from 'react';
+import Link from 'next/link';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {FFrLogo} from '@/components/ffr-logo';
+import {SubmitButton} from '@/components/submit-button';
+
+import {signup, type SignupActionState} from './actions';
+
+export const metadata = {
+  title: 'Sign Up',
+};
+
+export function SignUpForm() {
+  const [state, formAction] = useActionState<SignupActionState>(signup, {
+    success: null,
+  });
+
+  return (
+    <div className="h-screen flex flex-col items-center justify-center">
+      <FFrLogo />
+      <form className="mt-12" action={formAction}>
+        <Card className="w-full max-w-sm">
+          <CardHeader className="border-b mb-6">
+            <CardTitle className="text-xl">Sign Up</CardTitle>
+            <CardDescription>
+              Enter your information to create an account
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-6">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="first-name">First name</Label>
+                  <Input
+                    id="first-name"
+                    placeholder="Chip"
+                    name="first_name"
+                    required
+                    defaultValue={state.first_name}
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="last-name">Last name</Label>
+                  <Input
+                    id="last-name"
+                    placeholder="Whitley"
+                    name="last_name"
+                    defaultValue={state.last_name}
+                    required
+                  />
+                </div>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="chip@example.com"
+                  name="email"
+                  defaultValue={state.email}
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  name="password"
+                  defaultValue={state.password}
+                />
+              </div>
+              <SubmitButton type="submit" className="w-full">
+                Create an account
+              </SubmitButton>
+            </div>
+          </CardContent>
+          <CardFooter className="text-center flex items-center justify-center text-muted-foreground text-xs border-t w-full py-4">
+            Already have an account?
+            <Link href="/login" className="underline ml-1">
+              Sign in
+            </Link>
+          </CardFooter>
+        </Card>
+      </form>
+    </div>
+  );
+}
diff --git a/www/src/app/(auth)/signup/page.tsx b/www/src/app/(auth)/signup/page.tsx
index c6fb267..9049fed 100644
--- a/www/src/app/(auth)/signup/page.tsx
+++ b/www/src/app/(auth)/signup/page.tsx
@@ -1,78 +1,9 @@
-import Link from 'next/link';
+import {SignUpForm} from './form';
 
-import {Button} from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-
-import {signup} from './actions';
+export const metadata = {
+  title: 'Sign Up',
+};
 
 export default function Page() {
-  return (
-    <div className="h-screen flex items-center justify-center">
-      <form>
-        <Card className="mx-auto max-w-sm">
-          <CardHeader>
-            <CardTitle className="text-xl">Sign Up</CardTitle>
-            <CardDescription>
-              Enter your information to create an account
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid gap-4">
-              <div className="grid grid-cols-2 gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="first-name">First name</Label>
-                  <Input
-                    id="first-name"
-                    placeholder="Chip"
-                    name="first_name"
-                    required
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="last-name">Last name</Label>
-                  <Input
-                    id="last-name"
-                    placeholder="Whitley"
-                    name="last_name"
-                    required
-                  />
-                </div>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="chip@example.com"
-                  name="email"
-                  required
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="password">Password</Label>
-                <Input id="password" type="password" name="password" />
-              </div>
-              <Button formAction={signup} type="submit" className="w-full">
-                Create an account
-              </Button>
-            </div>
-            <div className="mt-4 text-center text-sm">
-              Already have an account?{' '}
-              <Link href="/login" className="underline">
-                Sign in
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
-      </form>
-    </div>
-  );
+  return <SignUpForm />;
 }
diff --git a/www/src/app/layout.tsx b/www/src/app/layout.tsx
index 7a0b3e7..aae5084 100644
--- a/www/src/app/layout.tsx
+++ b/www/src/app/layout.tsx
@@ -17,7 +17,7 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: 'Elwood Run',
+  title: {default: 'Elwood Run', template: '%s | Elwood Run'},
   description:
     'Automate your file management. Elwood Run lets you automate your file management tasks by responding to files as they move through your system.',
 };
diff --git a/www/src/app/plan/api/route.ts b/www/src/app/plan/api/route.ts
index 487ef33..0527fe4 100644
--- a/www/src/app/plan/api/route.ts
+++ b/www/src/app/plan/api/route.ts
@@ -4,7 +4,7 @@ import { createClient } from "@/lib/supabase/server";
 import { api } from "@/lib/api";
 
 export async function GET(req: NextRequest) {
-  const client = createClient();
+  const client = await createClient();
   const { data: user } = await client.auth.getUser();
 
   if (!user.user?.id) {
diff --git a/www/src/app/plan/complete/api/route.ts b/www/src/app/plan/complete/api/route.ts
index 81292e3..ce02bc6 100644
--- a/www/src/app/plan/complete/api/route.ts
+++ b/www/src/app/plan/complete/api/route.ts
@@ -4,32 +4,30 @@ import { createClient } from "@/lib/supabase/server";
 import { api } from "@/lib/api";
 
 export async function POST(req: NextRequest) {
-  const {session_id} = await req.json();
-  const client = createClient();
+  const { session_id } = await req.json();
+  const client = await createClient();
   const { data: user } = await client.auth.getUser();
-  const cliSession = req.cookies.get('cli-session');
+  const cliSession = req.cookies.get("cli-session");
 
   if (!user.user?.id) {
     return NextResponse.json({
-      error: true
-    })
+      error: true,
+    });
   }
 
-  const { data } = await api.post<{ complete:boolean }>(
+  const { data } = await api.post<{ complete: boolean }>(
     `/stripe/session/${session_id}/verify`,
   );
 
-
   if (!data || data?.complete === false) {
     return NextResponse.json({
-      complete:false
-    })
+      complete: false,
+    });
   }
 
-
   if (cliSession) {
     return NextResponse.redirect(
-      new URL('/oauth/cli/complete', req.nextUrl.href),
+      new URL("/oauth/cli/complete", req.nextUrl.href),
     );
   }
 
diff --git a/www/src/app/plan/page.tsx b/www/src/app/plan/page.tsx
index 75df989..5ef8aeb 100644
--- a/www/src/app/plan/page.tsx
+++ b/www/src/app/plan/page.tsx
@@ -8,7 +8,7 @@ import {redirect} from 'next/navigation';
 import {ContinueButton} from './button';
 
 export default async function Page() {
-  const client = createClient();
+  const client = await createClient();
   const {data} = await client.auth.getUser();
 
   if (!data.user?.id) {
diff --git a/www/src/components/submit-button.tsx b/www/src/components/submit-button.tsx
new file mode 100644
index 0000000..6168785
--- /dev/null
+++ b/www/src/components/submit-button.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {useFormStatus} from 'react-dom';
+
+import {Button, type ButtonProps} from './ui/button';
+
+export function SubmitButton(props: ButtonProps) {
+  const {pending} = useFormStatus();
+
+  return <Button {...props} loading={pending} />;
+}
diff --git a/www/src/components/ui/button.tsx b/www/src/components/ui/button.tsx
index 5918539..cc27731 100644
--- a/www/src/components/ui/button.tsx
+++ b/www/src/components/ui/button.tsx
@@ -74,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
                   <Loader2 className="size-[1em] animate-spin" />
                 </span>
               )}
-              <span>{children_}</span>
+              <span className={loading ? 'opacity-0' : ''}>{children_}</span>
             </span>
           </Root>
         </Comp>
@@ -92,12 +92,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               <Loader2 className="size-[1em] animate-spin" />
             </span>
           )}
-          <span>{children}</span>
+          <span className={loading ? 'opacity-0' : ''}>{children}</span>
         </span>
       </Comp>
     );
   },
 );
+
 Button.displayName = 'Button';
 
 export {Button, buttonVariants};
diff --git a/www/src/lib/api.ts b/www/src/lib/api.ts
index e081cc9..e98db7e 100644
--- a/www/src/lib/api.ts
+++ b/www/src/lib/api.ts
@@ -15,7 +15,7 @@ export async function request(
   init: RequestIntiWithJsonBody = {},
 ): Promise<ApiResponse> {
   try {
-    const client = createClient();
+    const client = await createClient();
     const apiUrl = process.env.API_URL!;
     const body = typeof init.body === "object"
       ? JSON.stringify(init.body)
diff --git a/www/src/lib/supabase/server.ts b/www/src/lib/supabase/server.ts
index 9ad02f2..6b776eb 100644
--- a/www/src/lib/supabase/server.ts
+++ b/www/src/lib/supabase/server.ts
@@ -1,8 +1,8 @@
-import {createServerClient} from '@supabase/ssr';
-import { cookies, type UnsafeUnwrappedCookies } from 'next/headers';
+import { createServerClient } from "@supabase/ssr";
+import { cookies, type UnsafeUnwrappedCookies } from "next/headers";
 
-export function createClient() {
-  const cookieStore = (cookies() as unknown as UnsafeUnwrappedCookies);
+export async function createClient() {
+  const cookieStore = await cookies() as unknown as UnsafeUnwrappedCookies;
 
   // Create a server's supabase client with newly configured cookie,
   // which could be used to maintain user's session
@@ -16,8 +16,8 @@ export function createClient() {
         },
         setAll(cookiesToSet) {
           try {
-            cookiesToSet.forEach(({name, value, options}) =>
-              cookieStore.set(name, value, options),
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
             );
           } catch {
             // The `setAll` method was called from a Server Component.