diff --git a/apps/web/e2e/welcome.spec.ts b/apps/web/e2e/welcome.spec.ts
index 69e1a39..f2f76db 100644
--- a/apps/web/e2e/welcome.spec.ts
+++ b/apps/web/e2e/welcome.spec.ts
@@ -1,16 +1,17 @@
 import { expect, test } from "@playwright/test";
 import { captureScreenshot } from "./helpers";
 
-test("the welcome and sign-in screens carry the same evOo logo", async ({ page }, testInfo) => {
+test("the welcome and sign-in screens carry the evOo wordmark from the header", async ({
+  page,
+}, testInfo) => {
   await page.setViewportSize({ width: 390, height: 844 });
   for (const scheme of ["dark", "light"] as const) {
     await page.emulateMedia({ colorScheme: scheme });
     await page.goto("/", { waitUntil: "domcontentloaded" });
-    await expect(page.getByText("evOo", { exact: true })).toBeVisible();
-    await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
+    await expect(page.locator(".evoo-mascot-container")).toBeVisible();
     await captureScreenshot(page, testInfo, `phone-welcome-${scheme}`);
     await page.goto("/sign-in", { waitUntil: "domcontentloaded" });
-    await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
+    await expect(page.locator(".evoo-mascot-container")).toBeVisible();
     await captureScreenshot(page, testInfo, `phone-sign-in-${scheme}`);
   }
 });
diff --git a/apps/web/src/pages/Auth.tsx b/apps/web/src/pages/Auth.tsx
index f885bec..00cdf40 100644
--- a/apps/web/src/pages/Auth.tsx
+++ b/apps/web/src/pages/Auth.tsx
@@ -1,6 +1,6 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import { readBoundedJsonResponse, signupRequiresEmailVerification } from "@rakazo/core";
-import { Button, Input, Label } from "@rakazo/ui-web";
+import { Button, EvooMascot, Input, Label } from "@rakazo/ui-web";
 import { Eye, EyeOff } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
@@ -337,7 +337,7 @@ function AuthFrame({
   return (
     <div className="flex min-h-full items-center justify-center bg-background px-6 py-16 text-foreground">
       <form onSubmit={onSubmit} className="flex w-[460px] flex-col items-center">
-        <img src="/evoo-logo.svg" alt="" className="size-[74px]" />
+        <EvooMascot size={56} showWordmark />
         <h1 aria-live="polite" className="mb-9 mt-7 text-4xl font-medium tracking-tight">
           {title}
         </h1>
diff --git a/apps/web/src/pages/Welcome.tsx b/apps/web/src/pages/Welcome.tsx
index ed6f141..40d3a4f 100644
--- a/apps/web/src/pages/Welcome.tsx
+++ b/apps/web/src/pages/Welcome.tsx
@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/react/macro";
+import { EvooMascot } from "@rakazo/ui-web";
 import { useNavigate } from "react-router-dom";
 import { WindowChrome } from "./WindowChrome";
 
@@ -9,33 +10,28 @@ export function WelcomePage() {
       <div className="app-drag flex gap-2 px-5 py-[18px]">
         <WindowChrome />
       </div>
-      <div className="flex flex-1 flex-col items-center justify-center gap-10 px-6 pb-[90px]">
-        <div className="flex flex-col items-center gap-6 sm:flex-row sm:gap-[26px]">
-          <img src="/evoo-logo.svg" alt="" className="size-[88px]" />
-          <div className="text-[76px] leading-none tracking-[-0.03em] text-foreground font-['EvOo_Display',sans-serif]">
-            evOo
-          </div>
-        </div>
-        <div className="max-w-[520px] space-y-3 text-center">
-          <p className="text-balance text-[27px] leading-[1.35] text-foreground/90 font-medium">
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6 pb-[90px]">
+        <EvooMascot size={72} showWordmark interactive trackPointer="hover" />
+        <div className="max-w-[420px] space-y-2 text-center">
+          <p className="text-balance text-ui-title font-medium text-foreground/90">
             <Trans>Your specialists. One calm place to talk.</Trans>
           </p>
-          <p className="text-balance text-ui-title-sm leading-[1.5] text-foreground/60">
+          <p className="text-balance text-ui-body text-foreground/60">
             <Trans>Simple to start. Expert when you need it.</Trans>
           </p>
         </div>
-        <div className="flex flex-col sm:flex-row items-center gap-4">
+        <div className="flex flex-col sm:flex-row items-center gap-3">
           <button
             type="button"
             onClick={() => navigate("/sign-in")}
-            className="app-no-drag rounded-full bg-primary text-primary-foreground px-[34px] py-[15px] text-[19px] font-medium transition hover:scale-[1.04]"
+            className="app-no-drag rounded-full bg-primary text-primary-foreground px-7 py-3 text-ui-body font-medium transition hover:scale-[1.04]"
           >
             <Trans>Sign in</Trans>&nbsp;&nbsp;→
           </button>
           <button
             type="button"
             onClick={() => navigate("/sign-up")}
-            className="app-no-drag rounded-full bg-accent px-[34px] py-[15px] text-[19px] text-foreground transition hover:scale-[1.04]"
+            className="app-no-drag rounded-full bg-accent px-7 py-3 text-ui-body text-foreground transition hover:scale-[1.04]"
           >
             <Trans>Sign up</Trans>
           </button>