Feature/saajan persona (#3)

* feat: add template based email content (html + plaintext fallback)

* feat: init saajan component

* feat: add aesthetic noise background and implement Saajan component in register and login

* feat: add post seal modal for vault

* refactor: add proper props interfaces

* refactor: expose props on ui components

* feat: add ssajan in lots of flows

* fix: remove render test with no value and add aria helper for btn identification

* refactor: update email notification to account for proper arguments

* refactor:  refactor E2E auth helper and mail parsing logic

---------

Co-authored-by: ramvignesh-b <ramvignesh-b@github.com>

frontend/e2e/letter.spec.ts

@@ -185,7 +185,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
       timeout: 10000,
     });
-    await page.getByRole("button", { name: /keep it/i }).click();
+    await page.getByRole("button", { name: /keep it to myself/i }).click();
 
     // Open "Kept" section - search for the section with id='kept' and click its toggle button
     logger.info(">> [Drawer] Opening Kept section...");

frontend/e2e/utils/auth.ts

@@ -14,13 +14,13 @@ const logger = pino({
 /**
  * Completes the full registration -> activation -> login cycle.
  */
-export async function registerAndLogin(
+async function registerAndLogin(
   page: Page,
   email: string,
   fullName: string,
   password: string,
 ) {
-  // 1. Registration
+  // Register the User
   logger.info(`[Auth] Registering user: ${email}`);
   await page.goto("/onboard");
   await page.getByLabel(/pen name/i).fill(fullName);
@@ -31,7 +31,7 @@ export async function registerAndLogin(
 
   await expect(page).toHaveURL(/\/verify-email/);
 
-  // 2. Activation via Mailpit
+  // Get activation URL from Mailpit and activate user
   logger.info(`[Auth] Polling Mailpit for activation email...`);
   const activationLink = await MailpitHelper.getActivationLink(email);
 
@@ -40,11 +40,11 @@ export async function registerAndLogin(
   await expect(page.getByText(/account activated/i)).toBeVisible();
   await page.getByRole("button", { name: /start writing/i }).click();
 
-  // 3. Login
+  // Dismiss the Welcom Modal and Perform Login
   logger.info(`[Auth] Logging in...`);
   await expect(page).toHaveURL(/\/login/);
 
-  const welcomeButton = page.getByRole("button", { name: /i understand/i });
+  const welcomeButton = page.getByRole("button", { name: /I'll remember/i });
   await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
   await welcomeButton.click();
   await expect(welcomeButton).toBeHidden();
@@ -56,6 +56,4 @@ export async function registerAndLogin(
   await expect(page).toHaveURL(/\/drawer/);
   logger.info(`[Auth] Successfully authenticated ${email}`);
 }
-
-// Maintain backward compatibility if needed, or update callers
 export const AuthHelper = { registerAndLogin };

frontend/e2e/utils/mailpit.ts

@@ -31,8 +31,8 @@ export const MailpitHelper = {
           );
           const details = await detailRes.json();
 
-          const body = details.HTML || details.Text || "";
-          const match = body.match(/https?:\/\/\S+activate\/\S+/);
+          const body = details.Text || "";
+          const match = body.match(/https?:\/\/\S*activate\S*/);
 
           if (match) return match[0];
         }

frontend/src/App.tsx

@@ -31,7 +31,7 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      <main className="min-h-screen bg-base-200 flex items-center justify-center w-full">
+      <main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
         <Suspense fallback={<SplashScreen />}>
           <Routes>
             <Route path={ROUTES.HOME} element={<Home />} />

frontend/src/components/Logo.tsx

@@ -1,7 +1,7 @@
 import { DotIcon } from "@phosphor-icons/react";
 import "@fontsource/knewave/400.css";
 
-export default function Logo({ scale = 2 }) {
+export default function Logo({ scale = 1 }) {
   return (
     <div
       role="img"
@@ -9,16 +9,16 @@ export default function Logo({ scale = 2 }) {
       className="inline-flex items-baseline justify-center leading-none select-none"
       style={{ fontFamily: "'Knewave', serif", scale }}
     >
-      <span className={`text-xl font-light text-accent`}>&nbsp;Pi</span>
+      <span className={`text-3xl font-light text-accent`}>Pi</span>
       <DotIcon
         weight="fill"
-        size={6}
+        size={12}
         className={`text-primary translate-y-1 -mx-px`}
       />
-      <span className={`text-xl font-light text-accent`}>&nbsp;Ku</span>
+      <span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
       <DotIcon
         weight="fill"
-        size={6}
+        size={12}
         className={`text-primary translate-y-1 -mx-px`}
       />
     </div>

frontend/src/components/drawer/LetterItem.tsx

@@ -2,6 +2,15 @@ import { LockIcon, LockKeyOpenIcon } from "@phosphor-icons/react";
 import { useNavigate } from "react-router-dom";
 import { PATHS } from "../../config/routes";
 
+interface LetterItemProps {
+  preview: string;
+  timestamp: string;
+  id: string;
+  status: "DRAFT" | "SEALED" | "BURNED";
+  unlock_at?: string;
+  isLocked?: boolean;
+}
+
 export function LetterItem({
   preview,
   timestamp,
@@ -9,14 +18,7 @@ export function LetterItem({
   status,
   unlock_at,
   isLocked = false,
-}: {
-  preview: string;
-  timestamp: string;
-  id: string;
-  status: "DRAFT" | "SEALED" | "BURNED";
-  unlock_at?: string;
-  isLocked?: boolean;
-}) {
+}: LetterItemProps) {
   const navigate = useNavigate();
   function handleNavigate(): void {
     if (isLocked) return;

frontend/src/components/editor/PostSealModal.tsx

@@ -5,11 +5,13 @@ import { PATHS, ROUTES } from "../../config/routes";
 interface PostSealModalProps {
   sealedTargetId: string | null;
   navigate: NavigateFunction;
+  type: "KEPT" | "VAULT";
 }
 
 export function PostSealModal({
   sealedTargetId,
   navigate,
+  type = "KEPT",
 }: PostSealModalProps) {
   if (!sealedTargetId) return null;
   return (
@@ -20,33 +22,61 @@ export function PostSealModal({
         <p className="text-base-content/60">
           It's encrypted and always safe in your drawer.
         </p>
-        <p className="text-base-content font-sans">
-          When you're ready,
-          <br />
-          you can{" "}
-          <span className="text-primary font-bold font-display">read</span> it,{" "}
-          <span className="text-accent font-bold font-display">send</span> it to
-          someone, or{" "}
-          <span className="text-error font-bold font-display">burn</span> it to
-          release
-        </p>
+        {type === "KEPT" ? (
+          <p className="text-base-content/80 text-sm font-sans">
+            When you're ready,
+            <br />
+            you can{" "}
+            <span className="text-primary font-bold font-display">read</span>{" "}
+            it, <span className="text-accent font-bold font-display">send</span>{" "}
+            it to someone, or{" "}
+            <span className="text-error font-bold font-display">burn</span> it
+            to release
+          </p>
+        ) : (
+          <p className="text-base-content/80 text-sm font-sans">
+            Be assured that the letter will find you when the time is right.
+            <br />
+            Till then,{" "}
+            <span className="font-bold font-display text-primary">
+              take a deep breath
+            </span>
+            ,{" "}
+            <span className="font-bold font-display text-accent">manifest</span>
+            , and{" "}
+            <span className="font-bold font-display text-success">
+              let it rest
+            </span>
+            .
+          </p>
+        )}
         <div className="modal-action w-full justify-center gap-3 mt-4 mb-4">
-          <button
-            type="button"
-            className="btn btn-ghost btn-sm"
-            onClick={() => navigate(ROUTES.DRAWER)}
-          >
-            Keep it to myself
-          </button>
-          <button
-            type="button"
-            className="btn btn-primary btn-sm"
-            onClick={() =>
-              navigate(PATHS.read(sealedTargetId), { replace: true })
-            }
-          >
-            View letter
-          </button>
+          {type === "KEPT" ? (
+            <>
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                onClick={() => navigate(ROUTES.DRAWER)}
+              >
+                Keep it to myself
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary btn-sm"
+                onClick={() => navigate(PATHS.read(sealedTargetId))}
+              >
+                View letter
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              onClick={() => navigate(ROUTES.DRAWER)}
+            >
+              Step Away...
+            </button>
+          )}
         </div>
       </div>
     </div>

frontend/src/components/editor/ToolBar.tsx

@@ -102,10 +102,24 @@ export function ToolBar({
       </div>
       <button
         type="button"
+        aria-label="Help"
         onClick={() => setSealBtnClicked(false)}
         className={`bg-transparent cursor-pointer -mt-2 absolute z-1000001 right-0 text-primary  ${sealBtnClicked ? "" : "hidden"}`}
       >
-        <QuestionIcon weight="duotone" size={20} className={""} />
+        <div className="tooltip tooltip-left">
+          <div className="tooltip-content -translate-x-38 text-left">
+            <span className="font-bold text-accent">Seal</span> puts the letter
+            in an envelope, ready to be read right away.
+            <div className="divider my-0"></div>
+            <span className="font-bold text-success">Vault</span> keeps it
+            locked away until the right moment, even from yourself.
+          </div>
+          <QuestionIcon
+            weight="duotone"
+            size={20}
+            className={"absolute -translate-x-38 -translate-y-3"}
+          />
+        </div>
       </button>
     </div>
   );
@@ -136,21 +150,23 @@ export function VaultConfirmModal({
   setUnlockDate,
 }: VaultConfirmModalProps) {
   return (
-    <div className={"modal modal-open bg-base-100/20 backdrop-blur-md"}>
-      <div className="modal-box p-12 flex flex-col items-center">
+    <div className={"modal modal-open bg-base-100/10 backdrop-blur-md"}>
+      <div className="modal-box p-12 flex flex-col items-center bg-base-100/90">
         <VaultIcon
           size={48}
           className="text-primary mx-auto mb-8 animate-pulse"
         />
-        <h3 className="font-serif text-3xl">Vault this letter?</h3>
+        <h3 className="font-serif text-3xl">Take it away, then?</h3>
         <p className="text-base-content/60 text-sm text-center mt-4">
-          Vaulting locks the letter permanently and will be{" "}
-          <span className={"font-bold text-primary"}>mailed</span> to you
-          automatically on the unlock date.
+          By vaulting this letter, you ask me to hold on to this.
           <br />
-          <span className={"underline"}>
-            You cannot edit or view the contents of the letter until then.
+          I'll remember to mail you this on the unlock date.
+          <br />
+          <span className={"font-bold text-primary"}>
+            {" "}
+            But I won't let you read or rewrite this letter until then.
           </span>
+          <br />
         </p>
         <form
           onSubmit={async (e) => {
@@ -158,11 +174,13 @@ export function VaultConfirmModal({
             const formData = new FormData(e.currentTarget);
             const unlockDateStr = formData.get("vault-date") as string;
             const newUnlockDate = new Date(unlockDateStr);
+            console.log(newUnlockDate);
             setUnlockDate(newUnlockDate);
             await onSave("VAULT", newUnlockDate);
             setConfirmModal(null);
           }}
           id="vault-form"
+          className="min-w-75"
         >
           <div className={"divider tracking-tightest font-display text-sm"}>
             Set an unlock date
@@ -173,21 +191,22 @@ export function VaultConfirmModal({
             className="input input-bordered w-full"
             name="vault-date"
           />
-          <button
-            className="btn btn-primary mt-4"
-            type="submit"
-            form="vault-form"
-          >
-            Vault
-          </button>
-
-          <button
-            type="button"
-            className="btn btn-ghost mt-4"
-            onClick={() => setConfirmModal(null)}
-          >
-            Cancel
-          </button>
+          <div className="w-full flex justify-center gap-8 mt-4">
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm mt-4"
+              onClick={() => setConfirmModal(null)}
+            >
+              I need time
+            </button>
+            <button
+              className="btn btn-primary btn-sm mt-4"
+              type="submit"
+              form="vault-form"
+            >
+              Take it
+            </button>
+          </div>
         </form>
       </div>
     </div>

frontend/src/components/reader/BurnModal.tsx

@@ -1,12 +1,19 @@
 import { CampfireIcon, FlameIcon, XCircleIcon } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 
+interface BurnModalProps {
+  burnLetter: () => void;
+  isBurning: boolean;
+  setShowBurnModal: (show: boolean) => void;
+  setRevealState: (state: "sealed" | "revealed" | "burning" | "burned") => void;
+}
+
 export function BurnModal({
   burnLetter,
   isBurning,
   setShowBurnModal,
   setRevealState,
-}) {
+}: BurnModalProps) {
   const [flameOn, setFlameOn] = useState(0);
   const [rotate, setRotate] = useState(0);
   const [burnClicked, setBurnClicked] = useState(false);

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -9,6 +9,7 @@ export interface EnvelopeRevealProps {
   onRevealComplete: () => void;
   ignite: boolean;
   isFlip?: boolean;
+  isInteractive?: boolean;
 }
 
 export function EnvelopeReveal({
@@ -17,6 +18,7 @@ export function EnvelopeReveal({
   onRevealComplete,
   ignite,
   isFlip,
+  isInteractive = true,
 }: EnvelopeRevealProps) {
   const [revealLetter, setRevealLetter] = useState(false);
   const [isFlipped, setIsFlipped] = useState(!!isFlip);
@@ -67,6 +69,7 @@ export function EnvelopeReveal({
               type="checkbox"
               className="transition checkbox absolute h-full w-full text-transparent bg-transparent z-100"
               ref={flapCheckbox}
+              disabled={!isInteractive}
             />
           </div>
           <img
@@ -103,6 +106,7 @@ export function EnvelopeReveal({
         <button
           id="env-front"
           type="button"
+          disabled={!isInteractive}
           className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
           onClick={() => setIsFlipped((prev) => !prev)}
         >

frontend/src/components/reader/PostActionOverlay.tsx

@@ -1,7 +1,11 @@
 import { useNavigate } from "react-router-dom";
 import { ROUTES } from "../../config/routes";
 
-export function PostActionOverlay({ revealState }) {
+interface PostActionOverlayProps {
+  revealState: "sealed" | "revealed" | "burning" | "burned";
+}
+
+export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
   const navigate = useNavigate();
   return (
     <div

frontend/src/components/reader/ShareModal.tsx

@@ -4,7 +4,12 @@ import {
   XCircleIcon,
 } from "@phosphor-icons/react";
 
-export function ShareModal({ shareLink, setShareLink }) {
+interface ShareModalProps {
+  shareLink: string | null;
+  setShareLink: (link: string | null) => void;
+}
+
+export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
   const copyToClipboard = async () => {
     if (!shareLink) return;
     await navigator.clipboard.writeText(shareLink);

frontend/src/components/ui/FormField.tsx

@@ -6,6 +6,7 @@ interface FormFieldProps {
   placeholder?: string;
   registration: UseFormRegisterReturn;
   error?: string;
+  handleFocus?: () => void;
 }
 
 export default function FormField({
@@ -14,6 +15,7 @@ export default function FormField({
   placeholder,
   registration,
   error,
+  handleFocus,
 }: FormFieldProps) {
   return (
     <div className="form-control">
@@ -31,6 +33,7 @@ export default function FormField({
         className={`input input-bordered focus:input-primary ${
           error ? "input-error" : ""
         }`}
+        onFocus={handleFocus}
       />
       {error && <p className="text-error">{error}</p>}
     </div>

frontend/src/components/ui/Saajan.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import sf_mini from "../../assets/sf_mini.png";
+
+interface SaajanProps {
+  message: string;
+  position?: "top" | "left" | "right" | "bottom";
+}
+
+export default function Saajan({ message, position = "right" }: SaajanProps) {
+  const [animate, setAnimate] = useState<boolean>(false);
+  const [tooltipPosition, setTooltipPosition] =
+    useState<string>("tooltip-right");
+  const [alignment, setAlignment] = useState<string>("justify-start");
+
+  useEffect(() => {
+    setAnimate(true);
+    const timeout = setTimeout(() => {
+      setAnimate(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  useEffect(() => {
+    setTooltipPosition(`tooltip-${position}`);
+    if (position === "top") {
+      setAlignment("justify-center");
+    }
+    if (position === "right") {
+      setAlignment("justify-start");
+    }
+    if (position === "left") {
+      setAlignment("justify-end");
+    }
+  }, [position]);
+
+  return (
+    <div className={`relative w-full flex ${alignment}`}>
+      <div
+        className={`tooltip tooltip-open ${tooltipPosition} before:max-w-xs before:whitespace-pre-line italic before:text-left`}
+        data-tip={message}
+      >
+        <img
+          src={sf_mini}
+          alt="saajan"
+          className={`sepia-20 w-35 -mb-3 ${animate ? "animate-[pulse_.5s_ease_2]" : ""}`}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/hooks/useLetters.tsx

@@ -86,7 +86,7 @@ export function useLetters() {
     return {
       drafts: letters.filter((l) => l.status === "DRAFT"),
       kept: letters.filter((l) => l.type === "KEPT" && l.status === "SEALED"),
-      vault: letters.filter((l) => l.type === "VAULT"),
+      vault: letters.filter((l) => l.type === "VAULT" && l.status === "SEALED"),
       sent: letters.filter((l) => l.type === "SENT" && l.status === "SEALED"),
     };
   }, [letters]);

frontend/src/index.css

@@ -47,10 +47,7 @@
     --font-display: "Playwrite HR Lijeva Variable", cursive;
     --font-sans: "Jost Variable", sans-serif;
     --font-serif: "Playfair Display Variable", serif;
-    --color-glass-bg: rgba(28,
-            22,
-            16,
-            0.45);
+    --color-glass-bg: rgba(28, 22, 16, 0.45);
     --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
     --radius-xl: 1.5rem;
     --color-paper: oklch(97% 0.008 80);

frontend/src/pages/Activate.tsx

@@ -16,8 +16,6 @@ export default function Activate() {
 
   useEffect(() => {
     if (!(uidb64 && token) || hasCalled.current) return;
-
-    // prevent double api calls
     hasCalled.current = true;
 
     const activateAccount = async () => {
@@ -46,7 +44,7 @@ export default function Activate() {
       )}
 
       {status === "success" && (
-        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+        <div className="flex flex-col items-center gap-6 duration-500">
           <div className="bg-success/10 p-4 rounded-full">
             <CheckCircleIcon
               size={64}
@@ -57,13 +55,12 @@ export default function Activate() {
           <h2 className="font-display text-xl text-success">
             Account Activated!
           </h2>
-          <p className="opacity-70 mb-8 leading-relaxed">
-            Welcome to <Logo />
+          <p className="opacity-70 leading-relaxed">
+            Welcome to <Logo scale={1} />
             <br />
             Your identity is now verified and ready for timeless letters.
           </p>
-          <div className="divider opacity-10"></div>
-
+          <div className="divider opacity-10 my-0"></div>
           <button
             type="button"
             className="btn btn-primary w-full shadow-lg"
@@ -85,16 +82,17 @@ export default function Activate() {
             <XCircleIcon size={64} weight="duotone" className="text-error" />
           </div>
           <h2 className="font-display text-xl text-error">Activation Failed</h2>
-          <p className="opacity-70 mb-8 leading-relaxed">
+          <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)}
           >
-            Back to Registration
+            Register Again
           </button>
         </div>
       )}

frontend/src/pages/Drawer.tsx

@@ -5,6 +5,7 @@ import { DrawerSection } from "../components/drawer/DrawerSection.tsx";
 import { LetterItem } from "../components/drawer/LetterItem.tsx";
 import { PasskeyModal } from "../components/drawer/PasskeyModal.tsx";
 import Logo from "../components/Logo";
+import Saajan from "../components/ui/Saajan.tsx";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
@@ -165,6 +166,12 @@ export default function Drawer() {
       <footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
         For your unsaid.
       </footer>
+      <div className="absolute bottom-0 z-50 font-sans">
+        <Saajan
+          message={`Good to see you again, ${user.full_name}.\nWhat's on your mind today?`}
+          position="top"
+        />
+      </div>
     </div>
   );
 }

frontend/src/pages/Editor.test.tsx

@@ -83,11 +83,9 @@ describe("Editor Page", () => {
       expect(screen.queryByText(/Opening your draft/i)).not.toBeInTheDocument();
     });
 
-    // Initial state: DRAFT (not read-only)
     const canvas = screen.getByTestId("canvas");
     expect(canvas.getAttribute("data-readonly")).toBe("false");
 
-    // Click Seal in the main toolbar (it's in the div with id="writer-toolbar")
     const toolbar = container.querySelector("#writer-toolbar");
     const sealBtn = toolbar?.querySelector(".btn-primary");
     if (!sealBtn) throw new Error("Seal button not found");

frontend/src/pages/Editor.tsx

@@ -293,7 +293,7 @@ export default function Editor() {
       setLetterStatus(status);
       setLastSavedPulseTick((prev) => prev + 1);
 
-      if (status === "SEALED") {
+      if (status === "SEALED" || status === "VAULT") {
         setSealedTargetId(targetId);
       }
       setSaveOverlay("saved");
@@ -419,7 +419,11 @@ export default function Editor() {
           />
         )}
         {sealedTargetId && (
-          <PostSealModal sealedTargetId={sealedTargetId} navigate={navigate} />
+          <PostSealModal
+            sealedTargetId={sealedTargetId}
+            navigate={navigate}
+            type={status === "VAULT" ? "VAULT" : "KEPT"}
+          />
         )}
 
         <div className="max-w-180 mx-auto px-1 md:px-0">

frontend/src/pages/Login.test.tsx

@@ -14,16 +14,6 @@ describe("Login Page", () => {
     server.resetHandlers();
   });
 
-  it("should render the sign-in form correctly", () => {
-    render(
-      <MemoryRouter>
-        <Login />
-      </MemoryRouter>,
-    );
-
-    expect(screen.getByText("Sign in to")).toBeInTheDocument();
-  });
-
   it("should display a technical issues message when the server is down", async () => {
     server.use(
       http.post(`${API_URL}${endpoints.LOGIN}`, () =>

frontend/src/pages/Login.tsx

@@ -1,5 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ShieldCheckIcon, WarningIcon } from "@phosphor-icons/react";
+import {
+  HandPalmIcon,
+  ShieldCheckIcon,
+  WarningIcon,
+} from "@phosphor-icons/react";
 import axios from "axios";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -8,6 +12,7 @@ import { z } from "zod";
 import { api, publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
@@ -20,10 +25,19 @@ const loginSchema = z.object({
 
 type LoginInputs = z.infer<typeof loginSchema>;
 
-function WelcomeModal({ setShowWelcome }) {
+function WelcomeModal({
+  setShowWelcome,
+}: {
+  setShowWelcome: (show: boolean) => void;
+}) {
   return (
     <div className="modal modal-open backdrop-blur-sm transition-all duration-1000">
-      <div className="modal-box border border-primary/20 shadow-2xl p-8">
+      <div className="absolute bottom-1">
+        <Saajan
+          message={"I've lost words before.\nI know what it feels like."}
+        />
+      </div>
+      <div className="modal-box border bg-base-100/20 border-primary/20 shadow-2xl p-8">
         <div className="flex flex-col items-center text-center gap-4">
           <div className="bg-primary/10 p-4 rounded-full animate-pulse">
             <ShieldCheckIcon
@@ -33,19 +47,22 @@ function WelcomeModal({ setShowWelcome }) {
             />
           </div>
           <h3 className="font-display text-2xl font-bold text-primary">
-            Welcome to <Logo />!
+            Welcome to &nbsp;
+            <Logo /> &nbsp;!
           </h3>
           <p className="text-base-content/80 leading-relaxed">
-            To ensure <span className="font-bold">complete privacy</span>, all
-            your letters are{" "}
-            <span className="font-bold underline">
-              sealed with your password
-            </span>
-            , which only you have access to.
+            Before we begin, let me make a small promise.
+            <HandPalmIcon
+              size={18}
+              className="inline text-primary"
+              weight="fill"
+            />
+            <div className="divider my-0"></div>
             <br />
-            <span className="font-bold">
-              The server never sees it, and it's a solemn promise!
-            </span>
+            Everything you write here is sealed with your password,{" "}
+            <span className="font-display text-success">cryptographically</span>
+            , before it leaves your hands.
+            <br />A fancy way of saying, I couldn't if I tried.
           </p>
 
           <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
@@ -53,6 +70,19 @@ function WelcomeModal({ setShowWelcome }) {
             <p className="text-sm font-medium text-primary-content">
               If you ever happen to forget your password, your letters are lost
               to time, forever.
+              <br />
+              <span className="font-bold mt-2">
+                I highly, highly recommend storing this password in your{" "}
+                <a
+                  href="https://www.privacyguides.org/en/passwords/"
+                  target="_blank"
+                  className="link link-primary-content"
+                  rel="noopener"
+                >
+                  password manager
+                </a>{" "}
+                or somewhere safe to remember it.
+              </span>
             </p>
           </div>
 
@@ -62,7 +92,7 @@ function WelcomeModal({ setShowWelcome }) {
               onClick={() => setShowWelcome(false)}
               className="btn btn-primary w-full shadow-lg"
             >
-              I understand
+              I'll remember
             </button>
           </div>
         </div>
@@ -78,6 +108,9 @@ export default function Login() {
   const [apiError, setApiError] = useState<string | null>(null);
   const { setAuthStore } = useAuth();
   const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
+  const [saajanMessage, setSaajanMessage] = useState<string>(
+    "I was wondering when you'd return.",
+  );
   const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
 
   const {
@@ -125,12 +158,13 @@ export default function Login() {
   };
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col items-center">
+      {!showWelcome && <Saajan message={saajanMessage} position="top" />}
       {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
       <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">
           <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
-            Sign in to <Logo />
+            Enter <Logo /> Archive
           </h1>
 
           {apiError && (
@@ -142,9 +176,10 @@ export default function Login() {
           <FormField
             label="Email"
             type="email"
-            placeholder="you@email.com"
+            placeholder="f.kafka@wrongtrain.com"
             registration={register("email")}
             error={errors.email?.message}
+            handleFocus={() => setSaajanMessage("I remember you.")}
           />
 
           <FormField
@@ -153,6 +188,9 @@ export default function Login() {
             placeholder="••••••••"
             registration={register("password")}
             error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage("The one thing I cannot know for you.")
+            }
           />
 
           <div className="card-actions mt-4">

frontend/src/pages/Reader.tsx

@@ -44,7 +44,7 @@ export default function Reader() {
 
   const [isDecrypting, setIsDecrypting] = useState(true);
   const [revealState, setRevealState] = useState<
-    "sealed" | "revealed" | "burned"
+    "sealed" | "revealed" | "burned" | "burning"
   >("sealed");
   const [error, setError] = useState<{
     message: string;

frontend/src/pages/Register.tsx

@@ -8,6 +8,7 @@ import { z } from "zod";
 import { publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 import { CryptoUtils } from "../utils/crypto";
@@ -31,6 +32,9 @@ 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 {
     register,
@@ -41,6 +45,7 @@ export default function Register() {
   });
 
   const onSubmit = async (data: RegisterInputs) => {
+    setSaajanMessage("Good. I'll remember that.");
     setIsLoading(true);
     setApiError(null);
     try {
@@ -68,74 +73,96 @@ export default function Register() {
   };
 
   return (
-    <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">
-        <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
-          Create a <Logo /> Account
-        </h1>
-
-        {apiError && (
-          <div className="alert alert-error text-xs py-2 rounded-md">
-            <span>{apiError}</span>
+    <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>
-        )}
 
-        <FormField
-          label="Pen Name"
-          placeholder="Word Smith"
-          registration={register("full_name")}
-          error={errors.full_name?.message}
-        />
+          {apiError && (
+            <div className="alert alert-error text-xs py-2 rounded-md">
+              <span>{apiError}</span>
+            </div>
+          )}
 
-        <FormField
-          label="Email"
-          type="email"
-          placeholder="f.kafka@email.com"
-          registration={register("email")}
-          error={errors.email?.message}
-        />
+          <FormField
+            label="Pen Name"
+            placeholder="Word Smith"
+            registration={register("full_name")}
+            error={errors.full_name?.message}
+            handleFocus={() =>
+              setSaajanMessage("Hello friend. What should I call you?")
+            }
+          />
 
-        <FormField
-          label="Password"
-          type="password"
-          placeholder="••••••••"
-          registration={register("password")}
-          error={errors.password?.message}
-        />
+          <FormField
+            label="Email"
+            type="email"
+            placeholder="f.kafka@email.com"
+            registration={register("email")}
+            error={errors.email?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Where should I send your letters?\nNo empty lunchboxes, please.",
+              )
+            }
+          />
 
-        <FormField
-          label="Confirm Password"
-          type="password"
-          placeholder="••••••••"
-          registration={register("confirm_password")}
-          error={errors.confirm_password?.message}
-        />
+          <FormField
+            label="Password"
+            type="password"
+            placeholder="••••••••"
+            registration={register("password")}
+            error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Something only you know.\nI have one of those too.",
+              )
+            }
+          />
 
-        {/* Warning */}
-        <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 />
-            <span className="underline decoration-2">There is no reset.</span>{" "}
-            If you lose it, your letters cannot be recovered.
-          </p>
-        </div>
+          <FormField
+            label="Confirm Password"
+            type="password"
+            placeholder="••••••••"
+            registration={register("confirm_password")}
+            error={errors.confirm_password?.message}
+            handleFocus={() =>
+              setSaajanMessage(
+                "Just once? Trust me, \nsome things are worth repeating twice.",
+              )
+            }
+          />
 
-        <div className="card-actions mt-4">
-          <button
-            type="submit"
-            disabled={isLoading}
-            aria-label="Register"
-            className="btn btn-primary w-full shadow-lg"
-          >
-            {isLoading ? (
-              <span className="loading loading-spinner loading-sm" />
-            ) : (
-              "Register"
-            )}
-          </button>
-        </div>
-      </form>
+          {/* Warning */}
+          <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"
+              className="btn btn-primary w-full shadow-lg"
+            >
+              {isLoading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : (
+                "Register"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   );
 }

frontend/src/pages/VerifyEmail.tsx

@@ -1,41 +1,55 @@
 import { EnvelopeSimpleOpenIcon } from "@phosphor-icons/react";
 import Logo from "../components/Logo";
+import Saajan from "../components/ui/Saajan";
 
 export default function VerifyEmail() {
   return (
-    <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
-      <div className="auth-icon-container">
-        <EnvelopeSimpleOpenIcon
-          size={32}
-          weight="duotone"
-          className="text-primary"
-        />
+    <div className="relative">
+      <Saajan
+        message={"I sent something to your inbox.\nOpen it, and we can begin."}
+      />
+
+      <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
+        <div className="auth-icon-container">
+          <EnvelopeSimpleOpenIcon
+            size={32}
+            weight="duotone"
+            className="text-primary"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="font-display text-xl text-primary">
+            Check Your Mailbox
+          </h2>
+          <p className="text-sm opacity-80 leading-relaxed font-sans mt-6">
+            You're one train away from starting your <Logo scale={0.8} />{" "}
+            journey.
+          </p>
+        </div>
+
+        <div className="divider opacity-10 my-0"></div>
+
+        <div className="alert bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed opacity-70 text-center">
+          <p>
+            Nothing yet? Sometimes letters take the wrong train. Check your spam
+            folder.
+            <br />
+            <span className="underline font-bold">
+              The link expires in 24 hours.
+            </span>
+            <br /> I'm patient... but not endlessly so
+          </p>
+        </div>
+
+        <button
+          type="button"
+          className="text-xs italic opacity-40 cursor-pointer underline"
+          onClick={() => window.close()}
+        >
+          You can close this window now.
+        </button>
       </div>
-
-      <div className="space-y-2">
-        <h2 className="font-display text-xl text-primary">Check Your Email</h2>
-        <p className="text-sm opacity-80 leading-relaxed font-sans">
-          We've sent an activation link to your inbox. <br />
-          Please click it to verify your <Logo /> account.
-        </p>
-      </div>
-
-      <div className="divider opacity-10"></div>
-
-      <div className="alert bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed text-left opacity-70">
-        <p>
-          Didn't receive it? Check your spam folder or wait for a few minutes.
-          The link will expire in 24 hours.
-        </p>
-      </div>
-
-      <button
-        type="button"
-        className="text-xs italic opacity-40 cursor-pointer underline"
-        onClick={() => window.close()}
-      >
-        You can close this window now.
-      </button>
     </div>
   );
 }