diff --git a/frontend/src/components/drawer/WelcomeLetterOverlay.tsx b/frontend/src/components/drawer/WelcomeLetterOverlay.tsx
index 8422e08..c0ac222 100644
--- a/frontend/src/components/drawer/WelcomeLetterOverlay.tsx
+++ b/frontend/src/components/drawer/WelcomeLetterOverlay.tsx
@@ -6,73 +6,73 @@ import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
 import { EnvelopeReveal } from "../reader/EnvelopeReveal";
 
 export interface WelcomeLetterOverlayProps {
-    onComplete: () => void;
-    userName: string;
+  onComplete: () => void;
+  userName: string;
 }
 
 export function WelcomeLetterOverlay({
-    onComplete,
-    userName,
+  onComplete,
+  userName,
 }: WelcomeLetterOverlayProps) {
-    const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
-        "SEALED",
-    );
-    const canvasRef = useRef<CanvasTools>(null);
+  const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
+    "SEALED",
+  );
+  const canvasRef = useRef<CanvasTools>(null);
 
-    useEffect(() => {
-        if (revealState === "REVEALED" && canvasRef.current) {
-            const welcomeContent = getWelcomeLetterContent(userName);
-            canvasRef.current.loadData(welcomeContent);
-        }
-    }, [revealState, userName]);
+  useEffect(() => {
+    if (revealState === "REVEALED" && canvasRef.current) {
+      const welcomeContent = getWelcomeLetterContent(userName);
+      canvasRef.current.loadData(welcomeContent);
+    }
+  }, [revealState, userName]);
 
-    return (
-        <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
-            <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
+  return (
+    <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
+      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
 
-            <div className="w-full max-w-4xl z-10 flex flex-col items-center">
-                <AnimatePresence mode="wait">
-                    {revealState === "SEALED" && (
-                        <motion.div
-                            key="envelope"
-                            initial={{ scale: 0.5, opacity: 0 }}
-                            animate={{ scale: 0.8, opacity: 1 }}
-                            exit={{
-                                scale: 1,
-                                opacity: 0,
-                                transition: { duration: 0.5, ease: "easeOut" },
-                            }}
-                            transition={{ duration: 4, delay: 1 }}
-                        >
-                            <EnvelopeReveal
-                                recipient={userName}
-                                date={formatDate(new Date())}
-                                onRevealComplete={() => setRevealState("REVEALED")}
-                                ignite={false}
-                            />
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-                <div
-                    className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
-                >
-                    <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
-                        <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
-                        <ComposeCanvas ref={canvasRef} readOnly />
-                    </div>
+      <div className="w-full max-w-4xl z-10 flex flex-col items-center">
+        <AnimatePresence mode="wait">
+          {revealState === "SEALED" && (
+            <motion.div
+              key="envelope"
+              initial={{ scale: 0.5, opacity: 0 }}
+              animate={{ scale: 0.8, opacity: 1 }}
+              exit={{
+                scale: 1,
+                opacity: 0,
+                transition: { duration: 0.5, ease: "easeOut" },
+              }}
+              transition={{ duration: 4, delay: 1 }}
+            >
+              <EnvelopeReveal
+                recipient={userName}
+                date={formatDate(new Date())}
+                onRevealComplete={() => setRevealState("REVEALED")}
+                ignite={false}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <div
+          className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
+        >
+          <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
+            <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
+            <ComposeCanvas ref={canvasRef} readOnly />
+          </div>
 
-                    <div className="flex justify-center mt-12">
-                        <button
-                            type="button"
-                            data-testid="dismiss-welcome-letter-btn"
-                            onClick={onComplete}
-                            className="btn btn-accent opacity-80 px-12 shadow-lg"
-                        >
-                            I'll see you
-                        </button>
-                    </div>
-                </div>
-            </div>
+          <div className="flex justify-center mt-12">
+            <button
+              type="button"
+              data-testid="dismiss-welcome-letter-btn"
+              onClick={onComplete}
+              className="btn btn-accent opacity-80 px-12 shadow-lg"
+            >
+              I'll see you
+            </button>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx
index 0ca4895..2f53023 100644
--- a/frontend/src/pages/Activate.tsx
+++ b/frontend/src/pages/Activate.tsx
@@ -7,96 +7,99 @@ import { endpoints, replacePathParams } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 
 export default function Activate() {
-    const { uidb64, token } = useParams();
-    const [status, setStatus] = useState<"loading" | "success" | "error">(
-        "loading",
-    );
-    const hasCalled = useRef(false);
-    const navigate = useNavigate();
+  const { uidb64, token } = useParams();
+  const [status, setStatus] = useState<"loading" | "success" | "error">(
+    "loading",
+  );
+  const hasCalled = useRef(false);
+  const navigate = useNavigate();
 
-    useEffect(() => {
-        if (!(uidb64 && token) || hasCalled.current) return;
-        hasCalled.current = true;
+  useEffect(() => {
+    if (!(uidb64 && token) || hasCalled.current) return;
+    hasCalled.current = true;
 
-        const activateAccount = async () => {
-            try {
-                const url = replacePathParams(endpoints.ACTIVATE, {
-                    uidb64,
-                    token,
-                });
-                await publicApi.get(url);
-                setStatus("success");
-            } catch (_err) {
-                setStatus("error");
-            }
-        };
+    const activateAccount = async () => {
+      try {
+        const url = replacePathParams(endpoints.ACTIVATE, {
+          uidb64,
+          token,
+        });
+        await publicApi.get(url);
+        setStatus("success");
+      } catch (_err) {
+        setStatus("error");
+      }
+    };
 
-        activateAccount();
-    }, [uidb64, token]);
+    activateAccount();
+  }, [uidb64, token]);
 
-    return (
-        <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
-            {status === "loading" && (
-                <div className="flex flex-col items-center gap-4 py-8">
-                    <span className="loading loading-spinner loading-lg text-primary" />
-                    <p className="text-sm opacity-70">Activating your account...</p>
-                </div>
-            )}
-
-            {status === "success" && (
-                <div className="flex flex-col items-center gap-6 duration-500">
-                    <div className="bg-success/10 p-4 rounded-full">
-                        <CheckCircleIcon
-                            size={64}
-                            weight="duotone"
-                            className="text-success"
-                        />
-                    </div>
-                    <h2 data-testid="activation-success-header" className="font-display text-xl text-success">
-                        You're in.
-                    </h2>
-                    <p className="opacity-70 leading-relaxed">
-                        Welcome to <Logo scale={1} />
-                        <br />
-                        Just one more step and you can start writing timeless letters.
-                    </p>
-                    <div className="divider opacity-10 my-0"></div>
-                    <button
-                        type="button"
-                        data-testid="start-writing-btn"
-                        className="btn btn-primary w-full shadow-lg"
-                        onClick={() =>
-                            navigate(ROUTES.LOGIN, {
-                                state: { firstTime: true },
-                                replace: true,
-                            })
-                        }
-                    >
-                        I'm ready
-                    </button>
-                </div>
-            )}
-
-            {status === "error" && (
-                <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
-                    <div className="bg-error/10 p-4 rounded-full">
-                        <XCircleIcon size={64} weight="duotone" className="text-error" />
-                    </div>
-                    <h2 className="font-display text-xl text-error">Activation Failed</h2>
-                    <p className="opacity-70 leading-relaxed">
-                        The link might be expired or already used. Please try registering
-                        again.
-                    </p>
-                    <div className="divider opacity-10 my-0"></div>
-                    <button
-                        type="button"
-                        className="btn btn-ghost w-full"
-                        onClick={() => navigate(ROUTES.ONBOARD)}
-                    >
-                        Register Again
-                    </button>
-                </div>
-            )}
+  return (
+    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
+      {status === "loading" && (
+        <div className="flex flex-col items-center gap-4 py-8">
+          <span className="loading loading-spinner loading-lg text-primary" />
+          <p className="text-sm opacity-70">Activating your account...</p>
         </div>
-    );
+      )}
+
+      {status === "success" && (
+        <div className="flex flex-col items-center gap-6 duration-500">
+          <div className="bg-success/10 p-4 rounded-full">
+            <CheckCircleIcon
+              size={64}
+              weight="duotone"
+              className="text-success"
+            />
+          </div>
+          <h2
+            data-testid="activation-success-header"
+            className="font-display text-xl text-success"
+          >
+            You're in.
+          </h2>
+          <p className="opacity-70 leading-relaxed">
+            Welcome to <Logo scale={1} />
+            <br />
+            Just one more step and you can start writing timeless letters.
+          </p>
+          <div className="divider opacity-10 my-0"></div>
+          <button
+            type="button"
+            data-testid="start-writing-btn"
+            className="btn btn-primary w-full shadow-lg"
+            onClick={() =>
+              navigate(ROUTES.LOGIN, {
+                state: { firstTime: true },
+                replace: true,
+              })
+            }
+          >
+            I'm ready
+          </button>
+        </div>
+      )}
+
+      {status === "error" && (
+        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+          <div className="bg-error/10 p-4 rounded-full">
+            <XCircleIcon size={64} weight="duotone" className="text-error" />
+          </div>
+          <h2 className="font-display text-xl text-error">Activation Failed</h2>
+          <p className="opacity-70 leading-relaxed">
+            The link might be expired or already used. Please try registering
+            again.
+          </p>
+          <div className="divider opacity-10 my-0"></div>
+          <button
+            type="button"
+            className="btn btn-ghost w-full"
+            onClick={() => navigate(ROUTES.ONBOARD)}
+          >
+            Register Again
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/frontend/src/pages/Drawer.test.tsx b/frontend/src/pages/Drawer.test.tsx
index fed79fb..b79aed3 100644
--- a/frontend/src/pages/Drawer.test.tsx
+++ b/frontend/src/pages/Drawer.test.tsx
@@ -9,116 +9,116 @@ import Drawer from "./Drawer";
 
 vi.mock("../hooks/useLetters");
 vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
-    WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
-        <div data-testid="welcome-letter-overlay">
-            <button
-                type="button"
-                data-testid="overlay-exit-button"
-                onClick={onComplete}
-            >
-                I'll see you
-            </button>
-        </div>
-    ),
+  WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
+    <div data-testid="welcome-letter-overlay">
+      <button
+        type="button"
+        data-testid="overlay-exit-button"
+        onClick={onComplete}
+      >
+        I'll see you
+      </button>
+    </div>
+  ),
 }));
 
 describe("Drawer Page", () => {
-    beforeEach(() => {
-        // Setup authenticated state for the test
-        useAuthStore.setState({
-            user: mockUser,
-            accessToken: "fake-token",
-            isInitializing: false,
-        });
-
-        vi.mocked(useLetters).mockReturnValue({
-            drafts: [],
-            kept: [],
-            sent: [],
-            vault: [],
-            loading: false,
-            isAuthRequired: false,
-        });
+  beforeEach(() => {
+    // Setup authenticated state for the test
+    useAuthStore.setState({
+      user: mockUser,
+      accessToken: "fake-token",
+      isInitializing: false,
     });
 
-    it("renders the cabinet sections and empty state message", () => {
-        render(
-            <MemoryRouter>
-                <Drawer />
-            </MemoryRouter>,
-        );
+    vi.mocked(useLetters).mockReturnValue({
+      drafts: [],
+      kept: [],
+      sent: [],
+      vault: [],
+      loading: false,
+      isAuthRequired: false,
+    });
+  });
 
-        expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
-        expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
-        expect(screen.getByText(/Vault/i)).toBeInTheDocument();
-        expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
+  it("renders the cabinet sections and empty state message", () => {
+    render(
+      <MemoryRouter>
+        <Drawer />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByText(/Vault/i)).toBeInTheDocument();
+    expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
+  });
+
+  it("renders the loading state", () => {
+    vi.mocked(useLetters).mockReturnValue({
+      drafts: [],
+      kept: [],
+      sent: [],
+      vault: [],
+      loading: true,
+      isAuthRequired: false,
     });
 
-    it("renders the loading state", () => {
-        vi.mocked(useLetters).mockReturnValue({
-            drafts: [],
-            kept: [],
-            sent: [],
-            vault: [],
-            loading: true,
-            isAuthRequired: false,
-        });
+    render(
+      <MemoryRouter>
+        <Drawer />
+      </MemoryRouter>,
+    );
 
-        render(
-            <MemoryRouter>
-                <Drawer />
-            </MemoryRouter>,
-        );
+    expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
+  });
 
-        expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
+  it("renders the authentication required modal when api requires auth", () => {
+    vi.mocked(useLetters).mockReturnValue({
+      drafts: [],
+      kept: [],
+      sent: [],
+      vault: [],
+      loading: false,
+      isAuthRequired: true,
     });
 
-    it("renders the authentication required modal when api requires auth", () => {
-        vi.mocked(useLetters).mockReturnValue({
-            drafts: [],
-            kept: [],
-            sent: [],
-            vault: [],
-            loading: false,
-            isAuthRequired: true,
-        });
+    render(
+      <MemoryRouter>
+        <Drawer />
+      </MemoryRouter>,
+    );
 
-        render(
-            <MemoryRouter>
-                <Drawer />
-            </MemoryRouter>,
-        );
+    expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
+  });
 
-        expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
-        expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
-    });
+  it("renders the welcome letter when firstTime state is present", () => {
+    render(
+      <MemoryRouter
+        initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
+      >
+        <Drawer />
+      </MemoryRouter>,
+    );
 
-    it("renders the welcome letter when firstTime state is present", () => {
-        render(
-            <MemoryRouter
-                initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
-            >
-                <Drawer />
-            </MemoryRouter>,
-        );
+    expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
+  });
 
-        expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
-    });
+  it("renders the drawer content when the letter is closed", () => {
+    render(
+      <MemoryRouter
+        initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
+      >
+        <Drawer />
+      </MemoryRouter>,
+    );
 
-    it("renders the drawer content when the letter is closed", () => {
-        render(
-            <MemoryRouter
-                initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
-            >
-                <Drawer />
-            </MemoryRouter>,
-        );
+    const completeButton = screen.getByTestId("overlay-exit-button");
+    fireEvent.click(completeButton);
 
-        const completeButton = screen.getByTestId("overlay-exit-button");
-        fireEvent.click(completeButton);
-
-        expect(
-            screen.queryByTestId("welcome-letter-overlay"),
-        ).not.toBeInTheDocument();
-    });
+    expect(
+      screen.queryByTestId("welcome-letter-overlay"),
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index e1c5bc1..a7e9fb4 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -14,158 +14,158 @@ import { ROUTES } from "../config/routes";
 import { CryptoUtils } from "../utils/crypto";
 
 const registerSchema = z
-    .object({
-        full_name: z.string().min(2, "Name must be at least 2 characters"),
-        email: z.email("Please enter a valid email"),
-        password: z.string().min(8, "Password must be at least 8 characters"),
-        confirm_password: z.string(),
-    })
-    .refine((data) => data.password === data.confirm_password, {
-        message: "Passwords don't match",
-        path: ["confirm_password"],
-    });
+  .object({
+    full_name: z.string().min(2, "Name must be at least 2 characters"),
+    email: z.email("Please enter a valid email"),
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirm_password: z.string(),
+  })
+  .refine((data) => data.password === data.confirm_password, {
+    message: "Passwords don't match",
+    path: ["confirm_password"],
+  });
 
 type RegisterInputs = z.infer<typeof registerSchema>;
 
 export default function Register() {
-    const navigate = useNavigate();
-    const [isLoading, setIsLoading] = useState(false);
-    const [apiError, setApiError] = useState<string | null>(null);
-    const [saajanMessage, setSaajanMessage] = useState<string>(
-        "I didn't think I'd be here either.\nAnd yet, here we are.",
-    );
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [saajanMessage, setSaajanMessage] = useState<string>(
+    "I didn't think I'd be here either.\nAnd yet, here we are.",
+  );
 
-    const {
-        register,
-        handleSubmit,
-        formState: { errors },
-    } = useForm<RegisterInputs>({
-        resolver: zodResolver(registerSchema),
-    });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<RegisterInputs>({
+    resolver: zodResolver(registerSchema),
+  });
 
-    const onSubmit = async (data: RegisterInputs) => {
-        setSaajanMessage("Good. I'll remember that.");
-        setIsLoading(true);
-        setApiError(null);
-        try {
-            // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
-            const { authHash } = await CryptoUtils.deriveKeyBundle(
-                data.password,
-                data.email,
-            );
+  const onSubmit = async (data: RegisterInputs) => {
+    setSaajanMessage("Good. I'll remember that.");
+    setIsLoading(true);
+    setApiError(null);
+    try {
+      // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
+      const { authHash } = await CryptoUtils.deriveKeyBundle(
+        data.password,
+        data.email,
+      );
 
-            await publicApi.post(endpoints.REGISTER, {
-                full_name: data.full_name,
-                email: data.email,
-                password: authHash,
-            });
-            navigate(ROUTES.VERIFY_EMAIL, { replace: true });
-        } catch (err) {
-            let message = "Registration failed. Please try again.";
-            if (axios.isAxiosError(err)) {
-                message = err.response?.data?.message || message;
-            }
-            setApiError(message);
-        } finally {
-            setIsLoading(false);
-        }
-    };
+      await publicApi.post(endpoints.REGISTER, {
+        full_name: data.full_name,
+        email: data.email,
+        password: authHash,
+      });
+      navigate(ROUTES.VERIFY_EMAIL, { replace: true });
+    } catch (err) {
+      let message = "Registration failed. Please try again.";
+      if (axios.isAxiosError(err)) {
+        message = err.response?.data?.message || message;
+      }
+      setApiError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    return (
-        <div className="flex flex-col">
-            <Saajan message={saajanMessage} position="right" />
-            <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-                <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-                    <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
-                        Create a <Logo /> Account
-                    </div>
+  return (
+    <div className="flex flex-col">
+      <Saajan message={saajanMessage} position="right" />
+      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
+        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
+            Create a <Logo /> Account
+          </div>
 
-                    {apiError && (
-                        <div className="alert alert-error text-xs py-2 rounded-md">
-                            <span>{apiError}</span>
-                        </div>
-                    )}
-
-                    <FormField
-                        label="Pen Name"
-                        placeholder="Word Smith"
-                        data-testid="pen-name-input"
-                        registration={register("full_name")}
-                        error={errors.full_name?.message}
-                        handleFocus={() =>
-                            setSaajanMessage("Hello friend. What should I call you?")
-                        }
-                    />
-
-                    <FormField
-                        label="Email"
-                        type="email"
-                        placeholder="f.kafka@wrongtrain.com"
-                        data-testid="email-input"
-                        registration={register("email")}
-                        error={errors.email?.message}
-                        handleFocus={() =>
-                            setSaajanMessage(
-                                "Where should I send your letters?\nNo empty lunchboxes, please.",
-                            )
-                        }
-                    />
-
-                    <FormField
-                        label="Password"
-                        type="password"
-                        placeholder="••••••••"
-                        data-testid="password-input"
-                        registration={register("password")}
-                        error={errors.password?.message}
-                        handleFocus={() =>
-                            setSaajanMessage(
-                                "Something only you know.\nI have one of those too.",
-                            )
-                        }
-                    />
-
-                    <FormField
-                        label="Confirm Password"
-                        type="password"
-                        placeholder="••••••••"
-                        data-testid="confirm-password-input"
-                        registration={register("confirm_password")}
-                        error={errors.confirm_password?.message}
-                        handleFocus={() =>
-                            setSaajanMessage(
-                                "Just once? Trust me, \nsome things are worth repeating twice.",
-                            )
-                        }
-                    />
-
-                    <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
-                        <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
-                        <p className="text-sm font-semibold">
-                            Choose a password you won't forget. <br />
-                            Just like life,{" "}
-                            <span className="underline decoration-2">there is no reset</span>{" "}
-                            here. If you lose it, your letters cannot be recovered.
-                        </p>
-                    </div>
-
-                    <div className="card-actions mt-4">
-                        <button
-                            type="submit"
-                            disabled={isLoading}
-                            aria-label="Register"
-                            data-testid="register-submit-btn"
-                            className="btn btn-primary w-full shadow-lg"
-                        >
-                            {isLoading ? (
-                                <span className="loading loading-spinner loading-sm" />
-                            ) : (
-                                "Register"
-                            )}
-                        </button>
-                    </div>
-                </form>
+          {apiError && (
+            <div className="alert alert-error text-xs py-2 rounded-md">
+              <span>{apiError}</span>
             </div>
-        </div>
-    );
+          )}
+
+          <FormField
+            label="Pen Name"
+            placeholder="Word Smith"
+            data-testid="pen-name-input"
+            registration={register("full_name")}
+            error={errors.full_name?.message}
+            handleFocus={() =>
+              setSaajanMessage("Hello friend. What should I call you?")
+            }
+          />
+
+          <FormField
+            label="Email"
+            type="email"
+            placeholder="f.kafka@wrongtrain.com"
+            data-testid="email-input"
+            registration={register("email")}
+            error={errors.email?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Where should I send your letters?\nNo empty lunchboxes, please.",
+              )
+            }
+          />
+
+          <FormField
+            label="Password"
+            type="password"
+            placeholder="••••••••"
+            data-testid="password-input"
+            registration={register("password")}
+            error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Something only you know.\nI have one of those too.",
+              )
+            }
+          />
+
+          <FormField
+            label="Confirm Password"
+            type="password"
+            placeholder="••••••••"
+            data-testid="confirm-password-input"
+            registration={register("confirm_password")}
+            error={errors.confirm_password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Just once? Trust me, \nsome things are worth repeating twice.",
+              )
+            }
+          />
+
+          <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
+            <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
+            <p className="text-sm font-semibold">
+              Choose a password you won't forget. <br />
+              Just like life,{" "}
+              <span className="underline decoration-2">there is no reset</span>{" "}
+              here. If you lose it, your letters cannot be recovered.
+            </p>
+          </div>
+
+          <div className="card-actions mt-4">
+            <button
+              type="submit"
+              disabled={isLoading}
+              aria-label="Register"
+              data-testid="register-submit-btn"
+              className="btn btn-primary w-full shadow-lg"
+            >
+              {isLoading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : (
+                "Register"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 }