diff --git a/src/ui/atoms/LoginButton.tsx b/src/ui/atoms/LoginButton.tsx
new file mode 100644
index 000000000..2bffb37e5
--- /dev/null
+++ b/src/ui/atoms/LoginButton.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+export const LoginButton = () => {
+	const { pending } = useFormStatus();
+	return (
+		<button
+			className="mt-2 rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700 aria-disabled:opacity-80"
+			type="submit"
+			aria-disabled={pending}
+		>
+			{pending ? "Processing..." : "Log In"}
+		</button>
+	);
+};
diff --git a/src/ui/components/LoginForm.tsx b/src/ui/components/LoginForm.tsx
index ee3538581..bd1fb2043 100644
--- a/src/ui/components/LoginForm.tsx
+++ b/src/ui/components/LoginForm.tsx
@@ -1,10 +1,11 @@
+import { LoginButton } from "@/ui/atoms/LoginButton";
 import { getServerAuthClient } from "@/app/config";
 
 export async function LoginForm() {
 	return (
 		<div className="mx-auto mt-16 w-full max-w-lg">
 			<form
-				className="rounded border p-8 shadow-md"
+				className="flex flex-col gap-y-2 rounded border p-8 shadow-md"
 				action={async (formData) => {
 					"use server";
 
@@ -25,21 +26,18 @@ export async function LoginForm() {
 					}
 				}}
 			>
-				<div className="mb-2">
-					<label className="sr-only" htmlFor="email">
-						Email
-					</label>
+				<label>
+					<span className="sr-only">Email</span>
 					<input
 						type="email"
 						name="email"
 						placeholder="Email"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
+						required
 					/>
-				</div>
-				<div className="mb-4">
-					<label className="sr-only" htmlFor="password">
-						Password
-					</label>
+				</label>
+				<label>
+					<span className="sr-only">Password</span>
 					<input
 						type="password"
 						name="password"
@@ -47,17 +45,11 @@ export async function LoginForm() {
 						autoCapitalize="off"
 						autoComplete="off"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
+						required
 					/>
-				</div>
-
-				<button
-					className="rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700"
-					type="submit"
-				>
-					Log In
-				</button>
+				</label>
+				<LoginButton />
 			</form>
-			<div></div>
 		</div>
 	);
 }
diff --git a/src/ui/components/nav/components/UserMenu/UserMenu.tsx b/src/ui/components/nav/components/UserMenu/UserMenu.tsx
index 13c630ddf..bedf29563 100644
--- a/src/ui/components/nav/components/UserMenu/UserMenu.tsx
+++ b/src/ui/components/nav/components/UserMenu/UserMenu.tsx
@@ -49,12 +49,12 @@ export function UserMenu({ user }: Props) {
 					<div className="flex flex-col px-1 py-1">
 						<Menu.Item>
 							{({ active }) => (
-								<form action={logout}>
+								<form action={logout} className="flex flex-col">
 									<button
 										type="submit"
 										className={clsx(
 											active && "bg-neutral-100",
-											"block px-4 py-2 text-start text-sm font-medium text-neutral-500 hover:text-neutral-700",
+											"px-4 py-2 text-start text-sm font-medium text-neutral-500 hover:text-neutral-700",
 										)}
 									>
 										Log Out
diff --git a/tsconfig.json b/tsconfig.json
index f03819840..3e57e4838 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,8 +25,7 @@
 			}
 		],
 		"paths": {
-			"@/*": ["./src/*"],
-			"@ui/*": ["./src/components/*"]
+			"@/*": ["./src/*"]
 		},
 		"types": ["react-dom/canary"]
 	},